前端性能优化小结

一. 浏览器渲染优化

1. 构建DOM树

过程：将字节转换为字符集 -> 根据w3c规定的token令牌进行词法解析生成结点 -> 根据嵌套规则生成DOM树形结构

2. 构建CSSOM

过程：与HTML类似

3. 渲染树

4. 总步骤

• 处理HTML标记，生成DOM树
• 处理CSS标记，生成CSSOM树
• 将DOM树和CSSOM树融合成渲染树
• 根据生成的渲染树计算确切位置和大小，又叫回流（重排）
• 根据渲染树以及回流结果，得到绝对像素，进行绘制

5. 优化方案

• 语义化标签，如果不是w3c规定的标签，词法解析阶段会消耗更多时间

• 避免深层嵌套，深层嵌套会导致生成DOM树过程进行多重递归，降低性能

• 减少选择器层级，合理使用css预编译器（CSS从右往左解析选择器）

• 尽早将CSS下载到客户端，充分利用HTTP多请求并发机制

  • 少量代码放入style,
  • 大量代码用link请求（不会阻塞），link放到头部，尽快开始请求，实现在生成DOM树同时请求数据
  • 尽量少用@import(阻塞执行)

• 避免JS阻塞加载

  • 放到底部或者使用defer、async
    

• 避免回流和重绘

  • 回流：元素尺寸或者位置改变导致重新计算位置和大小重新布局
  • 重绘：样式改变（位置、大小不变）导致重新绘制
  • 回流一定会重绘，重绘不一定回流

避免回流的方法：

• 使用vue/react数据驱动视图的模式开发
• 分离读写操作：浏览器有批量渲染机制，如果连续同类型样式修改，浏览器会将其统一加载到队列中，然后进行统一渲染，如果读写穿插进行就会中断该操作，因此多次渲染
• 样式集中改变，box.className="active"
• 缓存布局信息，let curleft=box.offsetLeft
• 使用文档碎片修改元素
• 动画效果应用到脱离文档流的元素
• CSS3硬件加速，transform/opacity/filters...

二. DNS域名解析优化

每次DNS解析时间预计20~200ms

DNS解析顺序：

• 浏览器缓存
• 操作系统缓存
• 路由器缓存
• 本机hosts
• 运营商DNS服务器缓存
• 根域名服务器 -> 顶级域名服务器 -> 权威域名服务器

优化:

设置link标签执行DNS预获取，在生成DOM树的同时进行预解析并将结果写入缓存，提高响应速度

<meta http-equiv="x-dns-prefetch-control" content="on">
<link ref="dns-prefetch" href="//static.360buyimg.com"/>

三. 网络优化

减少http请求次数和资源大小

• 资源合并压缩（webpack打包）
• 字体图标和小图片base64编码
• gzip压缩
• 图片懒加载
• 引入外部cdn

应用缓存

缓存位置：

• Service Worker：浏览器独立线程缓存
• Memory Cache：内存缓存
• Disk Cache：硬盘缓存
• Push Cache：推送缓存（HTTP2新增）

各种操作触发的缓存处理：

• 输入地址打开网页，查询disk Cache，若不存在则发起请求
• F5刷新，先Memory Cache，后disk Cache
• Ctrl+F5强制刷新，请求头设为(Cache-control:no-catche)进行请求

传送门：HTTP缓存