2020-05-16 -前端性能优化笔记

DNS解析（每次DNS解析都要花20-120ms）

客户端 => 浏览器缓存 => 本地hosts文件 => 本地DNS解析器缓存 => 本地DNS服务器

优化点：

1、减少DNS请求次数

2、DNS预获取

<link rel=dns-prefetch href=//g.alicdn.com>
<link rel=dns-prefetch href=//gw.alicdn.com>
<link rel=dns-prefetch href=//log.mmstat.com>
<link rel=dns-prefetch href=//api.m.taobao.com>
<link rel=dns-prefetch href=//cdn.tanx.com>
<link rel=dns-prefetch href=//ecpm.tanx.com>

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

• 资源合并压缩
• 字体图标
• base64
• Gzip（一般的文件能压缩60%）
• 图片懒加载
• 数据延迟分批加载
• cdn资源（资源分布，请求离你最近的服务器）

浏览器渲染步骤

DOM树生成流程

• 1 bytes （字节码转换）

• 2 词法解析 转换为字符集

• 3 令牌解析，通过w3c规定的去解析

• 4 Nodes 根据解析去生成节点，得到嵌套结构

• 5 最后根据上一步的解析生成DOM树

  优化点

​ A 、标签语义化 (减少词法解析时候的处理时间，因为标签不是w3c的标准的话，就会需要特殊的处理)

​ B、 避免深层嵌套（DOM树构建时更快，减少递归），三四层最好

CSSOM树

流程跟DOM树解析流程大致一样

优化点

A 选择器层级减少

.box a {}
/*明显下面这种查找更快**/
a{}

B 写更少的样式

renderTree（结合DOMtree cssOMtree生成）

总结：渲染步骤

1、处理HTML标记，构建DOM树

2、处理CSS构建CSSOM树

3、将DOM树和CSSOM树融合生成渲染树

4、根据生成的渲染树，计算元素在视口内的确切位置和大小，这个计算的阶段就是 布局（layout）=> 重排（回流）

5、根据渲染树以及回流得到几何信息，得到节点的绝对像素 => 绘制或者栅格化

--DOM 和 CSSOM 树生成之后才会有renderTree 然后才能开始绘制界面--

http可同时发送的请求数是6-7个

link 标签是发http请求，是异步的

@import 是发送同步的http请求，这个加载的时候会阻塞渲染，真实项目中减少它的使用

优化方案

• 1 标签语义化，避免深层嵌套

• 2 css选择器避免多层嵌套，减少查找时间

• 今早尽快把css下载到客户端（充分利用http多请求并发机制），引用css资源放在顶部

• 避免阻塞的js加载，js放在最底部 body 后面

  遇到js会阻塞DOMtree的渲染，

  <script defer ></script>

  <script async ></script>

  defer 和 async都是异步加载js，

  区别在于：

  A async是遇到加载请求，就直接发出请求，接着渲染dom，但是如果正在渲染dom但是这个时候加载的js回来了，那就停下dom渲染，先渲染加载回来的这个js，渲染后再去渲染DOM；

  B async是那个js先加载回来谁先渲染，defer是全部加载之后，根据依赖关系来顺序执行

  真实场景，建议使用 defer ， 无依赖关系则可以使用async

• 减少DOM的回流和重绘（少操作DOM）