1、浏览器把获取到的html代码解析成1个Dom树。
2、浏览器把样式解析成样式结构体,在解析过程中会去掉各自浏览器不能识别的样式比如-moz,-webkit等。
3、2者结合后构建呈现render tree。
4、render tree构建完毕,浏览器就可以根据render tree绘制页面。
其中脚本执行过程可能阻塞Dom的解析和构建和阻塞css处理,(比如遇到同步一个document.write或者javascript脚本查询任何元素的计算样式)。结果导致Dom和CssDom的构建频繁的交织在一起,Dom构建在javascript执行完毕前无法进行,而javascript在cssDom构建完成前也无法进行。
首次加载的渲染时间、脚本执行都会受到样式表的阻塞,因此必须让css以最快的速度下载。也就是为什么要使用的“样式放在head里,js脚本放在最后/body前”。
1、当render tree中的元素的尺寸、显隐等改变而需要重新构建,称为回流。每个页面至少需要一次回流,也就是页面第一次加载的时候。
2、当render tree中的元素的属性改变只影响外观、风格,而不影响布局,称为重绘。
那么回流必定引起重绘,而重绘不一定引起回流。
任何对render tree元素的操作都会引起重绘或者回流,所以减少对render tree的操作能减少重绘、回流。
比如:javascript修改元素style属性,如果已经定义好的样式,用js操作改变className;
新建一个最外层的大div,这个div会首先添加所有新元素,最后才把这个div append到页面上;
或者先display:none隐藏元素,然后对这个元素进行操作,最后显示该元素;
有些属性值可以定义到变量中进行缓存,需要用的时候读取这个变量。