网页解析的过程
页面解析过程 - 谷歌工程师
一个渲染引擎主要包括：html解析器、css解析器、javascript引擎、布局模块、绘图模块等
HTML解析器： 用于解析HTML文档的layout DOM树
CSS解析器：用于计算元素中的样式信息，提供CSS树
javascript引擎：用于解析js代码
布局模块：将最终处理的layout树绘制在浏览器
绘图模块：计算网页节点的绘制图像结果
除此之外，还有处理富媒体的图形解码器，音频解码器 等等...
渲染流程：
- 遇见HTML标记，调用HTML解析器生成对应的DOM树
- 遇见css、style 调用CSS解析器生成CSS树
- 遇见script 调用javascript引擎，来处理script标记、事件、来修改DOM树/CSS树
- 将DOM树与CSS树烩饼一个渲染树
- 根据与渲染树来计算几何信息
- 将各个网页节点逐层绘制到屏幕上
一些关键词：
进程 - 操作系统 调度最小单位
线程 - CPU 调度最小单位
javascript是单线程，通过事件驱动来实现并发操作
引起浏览器性能问题的两个要素
※ 重排(回流)：
当渲染树的异步分更新引起尺寸变化，浏览器渲染整个渲染树中受影响的部分，并重新构造渲染树
※ 重绘
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观
二者的关系，
重排必然引起重绘，重绘不一定影响重排
如何提高页面加载速度
- 使用CDN资源，或者对需要耗时大的媒体资源，在服务器购买CDN流量并开启CDN加速
- 对css、js进行压缩
- 减少http请求数，提交表单等节流操作
- 将急需页面渲染的样式放到html中的style里, 如baidu搜索首页
什么情况下会引起重绘重排
※ 引起重排
- 添加删除dom元素
- 元素尺寸、位置变化
- 页面初始化
- 浏览器窗口改变
- 获取元素属性时候，浏览器为了取得正确的值会触发重排，这会引起队列刷新
属性主要有：
offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight,getComputedStyle() - 使用table表格
如何进行优化页面性能
- 将多条针对同一DOM元素的样式操作，在一条内进行操作，，如通过添加class、或者通过javascript给操作元素累加样式
document.getElementById("box").style.cssText += "color:red; font-size:13px;";
- 如果DOM元素是一个列表容器，如果要插入元素，可以使容器的display为none，等插入dom完毕后，在使其display:block
2-2. 使用createDocumentFragment进行批量的 DOM 操作 - 为需要动画的元素添加定位属性，如absolute,fixed来减少元素对文档流的干扰，防止重排
- 对于 resize、scroll 等进行防抖/节流处理
- 上面会引起页面重排的属性，如offsetTop,offsetLeft...等，获取时候可以将这些值放到元素属性上，而不是每次都直接获取
- 不要用table布局
- 利用GPU资源来对运动元素进行加速，降低CPU的性能开销， GPU中的transform等CSS属性不会触发重绘
开启GPU加速的方式 - 针对已经动画中需要频繁修改的属性，使用will-change
※ 开启GPU加速
通过transform样式来触发硬件加速
.element {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/**或者**/
transform: rotateZ(360deg);
transform: translate3d(0, 0, 0);
}
※ 关于will-change的使用
一种告知浏览器该元素会有哪些变化的方法，浏览器可以前提前做好元素动画的准备工作
值得注意的是，运动开始时候开启，运动结束后要关闭，否则优化工作一直占用内存，这不必要的
- 元素开始运动，针对已知样式开启加速：
obj.style.cssText = ' z-index:10,left:100px;top:100px; willChange:"left,top,z-index" '
- 元素结束运动，关闭加速：
obj.style.cssText = ' z-index:10,left:100px;top:100px; willChange:"auto" ';
未完待续....
网友评论