前端优化---回流 （reflow）与 重绘（repaint）

回流（reflow）：指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。

页面上节点是以树的形式展现的，我们通过js将页面上的一个节点删除，此时为了不让剩下的节点脱节，将断点结合起来重新形成一棵树。而这个重新结合过程就是回流。就是由于某些修改，要将元素回过头来重新“流”一遍。

重绘（repaints）：是一个元素外观的改变所触发的浏览器行为，例如改变vidibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

 

重绘不会带来重新布局，并不一定伴随回流。回流是更明显的一种改变，渲染树需要重新计算;回流的危害在于重新对DOM树进行渲染，那么，脱离文档流之后，进行的任何操作，都不会造成回流了！如果没有对页面进行优化，减少大量回流，那么页面因为回流所花费的时间，导致用户体验感大打折扣；只要修改DOM或修改了元素的形状或大小，就会触发Reflow，单纯修改元素的颜色只需Repaint一下（调用操作系统Native GUI的API绘制）。

 

减少回流的几点建议：

1. 减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。
2. 精简css，去除没有用处的css
3. 如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它，也即是让其脱离文档流，不影响父级；现代浏览器也可以使用CSS3 transition实现动画效果，比改变像素值来的高性能。
4. 避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。

5.页面的元素适当定高，例如如果div内容可能有高度差异的动态内容载入； 页面刷新载入的时候，应避免页面元素的晃动、位移等，这些都是额外的重绘，会让你的CPU和风扇兴奋的

6.图片设定不响应重绘的尺寸，如果你的不设定尺寸、同时外部容器没有定死高宽，则图片在首次载入时候，占据空间会从0到完全出现，左右上下都可能位移，发生大规模的重绘。可以参见新浪微博载入时候页面高度随着图片显示不断变高的问题，这些都让浏览器重绘了，一是体验可能不好，二是烧CPU的。

 

html页面的加载理解

浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，最后浏览器将渲染树绘制到页面上。

构建dom树的过程即根据html代码自上而下进行构建，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。

另外javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。

 

一篇关于页面资源加载很好的文章：

http://www.haorooms.com/post/web_xnyh_jscss

转载于:https://www.cnblogs.com/luleixia/p/6306061.html