浅析前端页面渲染机制

2.浏览器获抱病解析办事器的返回内容(HTTP response);

$('body').css('color', 'red'); // repaint 
 
$('body').css('margin', '2px'); // reflow, repaint

页面衬着优化

浏览器对上文介绍的关键衬着路径进行了很多优化，针对每一次变更产生尽量少的操作，还有优化断定从新绘制或构造的方法等等。

在改变文档根元素的字体色彩等视觉性信息时，会触发全部文档的重绘，而改变某元素的字体色彩则只触发特定元素的重绘;改变元素的地位信息会同时触发此元素(可能还包含其兄弟元素或子级元素)的构造和重绘。某些重大年夜改变，如更改文档根元素的字体尺寸，则会触发全部文档的从新构造和重绘，据此及上文所述，推荐以下优化和实践：

1.HTML文档构造层次尽量少，最好不深于六层;

构造过程

2.脚本尽量后放，放在前即可;

3.少量首屏样式内联放在标签内;

4.样式构造层次尽量简单;

5.裹足本中尽量削减DOM操作，尽量缓存拜访DOM的样式信息，避免过度触发还流;

6.削减经由过程JavaScript代码修改元素样式，尽量应用修改class名方法操作样式或动画;

然后履行如下脚本：

7.动画尽量应用在绝对定位或固定定位的元素上;

8.隐蔽在屏幕外，或在页面滚动时，尽量停止动画;

9.尽量缓存DOM查找，查找器尽量简洁;

10.涉及多域名的网站，可以开启域名预解析