渲染优化
浏览器渲染原理和关键渲染路径
JavaScript -> Style -> Layout -> Paint -> Composite
- 使用js方式触发视觉变化
- 浏览器重新对style做变化
- 布局：让浏览器知道每个节点的尺寸，要画在哪里
- 绘制：把需要的节点画出来
- 复合：多层合成，类似PS。
布局和绘制消耗性能很大，且至少要进行一次。
有些操作不影响布局，比如修改背景色，这些不影响元素位置和大小
造成元素位置和大小变化的，需要重新布局，又称回流
造成回流的操作有哪些？
- 添加、删除元素
- 操作style display:none
- offsetLeft、scrollTop、clientWidth移动元素位置
- 修改浏览器大小
- 修改字体大小等
- 回流严重时会出现布局抖动
如何避免回流？
- V-DOM
- 读写分离：FastDOM
- 将页面拆分图层进行绘制再进行复合，目的：便于修改
如何拆成不同图层？
CSS对性能的影响
- 降低CSS对渲染的阻塞，利用GPU加速，完成诸如动画等的渲染
- 使用contain属性
- 使用font-display属性
- 使用flexbox布局：更高性能的实现方法，容器有能力决定子元素的大小、顺序、间隔、对齐等，横纵向均有考虑
- 使用float方式和flexbox方式渲染10W个节点，性能提升越50%
资源优化
HTML和CSS压缩
JS压缩和混淆
图片优化方案
- 选择合适的图片格式
- 选择合适的图片尺寸：不要将一个大图片传到客户端再处理
- 响应式：适配各类型屏幕尺寸，不要在小浏览器上用大图
- 有效压缩
- 区分优先级加载
- 懒加载
- 合理使用工具
图片尺寸的选择
JPG/JPEG
- 优点：压缩比高，当压缩大小为原图的50%时，仍能保持原图60%的画质
- 使用场景：轮播图大图需要压缩等
- 缺点：细节、纹理缺失
- 在线压缩工具
PNG
- 优点：细节保存较好
- 使用场景：图标、Logo等
- 缺点：压缩比低，压缩后文件仍然较大
- 在线压缩工具
WebP
- 优点：兼具JPG和PNG的优点
- 缺点：浏览器支持不如前两种
SVG
- 优点：矢量性，放大缩小成像质量不变，基于文本实现，易于SEO
- 缺点：低版本浏览器支持不够好
图片的懒加载方式
- 原生支持：img标签中添加loading属性
- 第三方方案
使用渐进式图片
使用响应式图片
字体优化
传输优化（针对Nginx的配置）
开启Gzip
nginx开启gzip
保持Keep Alive
- http1.1 默认已开启
- keepalive_timeout
HTTP资源缓存