web优化相关学习笔记

网页解析的过程

页面解析过程 - 谷歌工程师

一个渲染引擎主要包括：html解析器、css解析器、javascript引擎、布局模块、绘图模块等
HTML解析器： 用于解析HTML文档的layout DOM树
CSS解析器：用于计算元素中的样式信息，提供CSS树
javascript引擎：用于解析js代码
布局模块：将最终处理的layout树绘制在浏览器
绘图模块：计算网页节点的绘制图像结果
除此之外，还有处理富媒体的图形解码器，音频解码器 等等...

渲染流程：

1. 遇见HTML标记，调用HTML解析器生成对应的DOM树
2. 遇见css、style 调用CSS解析器生成CSS树
3. 遇见script 调用javascript引擎，来处理script标记、事件、来修改DOM树/CSS树
4. 将DOM树与CSS树烩饼一个渲染树
5. 根据与渲染树来计算几何信息
6. 将各个网页节点逐层绘制到屏幕上

一些关键词：
进程 - 操作系统 调度最小单位
线程 - CPU 调度最小单位
javascript是单线程，通过事件驱动来实现并发操作

引起浏览器性能问题的两个要素

※ 重排(回流)：
当渲染树的异步分更新引起尺寸变化，浏览器渲染整个渲染树中受影响的部分，并重新构造渲染树
※ 重绘
重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观

二者的关系，
重排必然引起重绘，重绘不一定影响重排

如何提高页面加载速度

1. 使用CDN资源，或者对需要耗时大的媒体资源，在服务器购买CDN流量并开启CDN加速
2. 对css、js进行压缩
3. 减少http请求数，提交表单等节流操作
4. 将急需页面渲染的样式放到html中的style里, 如baidu搜索首页

什么情况下会引起重绘重排

※ 引起重排

1. 添加删除dom元素
2. 元素尺寸、位置变化
3. 页面初始化
4. 浏览器窗口改变
5. 获取元素属性时候，浏览器为了取得正确的值会触发重排，这会引起队列刷新
   属性主要有：
   offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientTop,clientLeft,clientWidth,clientHeight,getComputedStyle()
6. 使用table表格

如何进行优化页面性能

1. 将多条针对同一DOM元素的样式操作，在一条内进行操作，，如通过添加class、或者通过javascript给操作元素累加样式

document.getElementById("box").style.cssText += "color:red; font-size:13px;"; 

2. 如果DOM元素是一个列表容器，如果要插入元素，可以使容器的display为none，等插入dom完毕后，在使其display:block
   2-2. 使用createDocumentFragment进行批量的 DOM 操作
3. 为需要动画的元素添加定位属性，如absolute,fixed来减少元素对文档流的干扰，防止重排
4. 对于 resize、scroll 等进行防抖/节流处理
5. 上面会引起页面重排的属性，如offsetTop,offsetLeft...等，获取时候可以将这些值放到元素属性上，而不是每次都直接获取
6. 不要用table布局
7. 利用GPU资源来对运动元素进行加速，降低CPU的性能开销， GPU中的transform等CSS属性不会触发重绘
   开启GPU加速的方式
8. 针对已经动画中需要频繁修改的属性，使用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" ';

未完待续....