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）
网友评论