1.svg
其实就是一套字体 font-family 然后每一个图标对应一个content就是unicode 浏览器会自动找到这套字体里面对应的图标
从Png->iconfont:
优点:1.多个图标，一套字体，减少获取的数量和体积 多个png要多个请求
2.矢量图形，可伸缩,放大缩小都不失真
3.直接修改css就能修改颜色和大小，png就不能修改颜色
不足：1:普通图标,多色彩可能不行,2.不利于seo
svg比普通图标的优势 1.xml语法更有利于seo，浏览器能够识别标签，更好读懂图标内容 2.可以多色彩 给不同的path设置不同的颜色
2.flex布局
flex布局性能比float好 performance里面看到渲染和绘制加起来时间短
实现典型的布局
3.资源加载优先级
浏览器默认安排加载优先级 html先加载 图片什么的后加载
我们可以调整优先级 使用preload prefetch调整优先级
preload:比如我们想先加载重要资源 比如23某一个图片 或者先加载字体
<link rel='preload' href = 'img/product2.svg'> //会先加载这个图片 然后在加载别的图片 只是提前加载没有解析
<link rel='stylesheet' href = 'xx.css'>//一般都是stylesheet
我们一般会对字体提前加载，但是一般都在html加载后面 因为不解析html 都不知道要提前加载字体
prefetch：在空闲时间内把后面要用的资源加载过来 即提前加载后面要用的东西
<link rel='prefetch' href='product.font.css'>
首页不需要product.font.css 但是后面要用，所以会在我们首页最后有时间的时候再去加载这个xx.css,优先级是lowest
首页的
后面的页面 会看到这个css的prefetch cache取的
动态preload：
手动创建Link标签，提前加载img,添加到head下面
然后手动赋值src给Image 实现加载和赋值分离
注意webpack里面的模块加载也支持preload和prefetch
4.预渲染页面
类似ssr 会提前解析页面 创建里面的标签内容
作用：
大型单页应用性能瓶颈：js的加载解析和执行
ssr:主要问题牺牲ttfb补救first paint 因为把解析逻辑放到后端啦 且这一次请求文件会变大因为解析啦js 不是单独的一个div啦
5.窗口化提高列表性能
这就是虚拟列表
缺点:加载大列表影响性能 有很多dom在页面里面 ,渲染和加载后很慢
虚拟列表只会有可见的行，不会有很大的dom
6.使用骨架屏减少布局移动(layout shift)
避免内容后面加载出来 导致布局出现移动 触发回流和影响用户体验
自定义一样宽高的placeholder用来预先占位置
