为什么访问offset怎么用Left会触发重排

来源：蜘蛛抓取(WebSpider) 时间：2019-04-17 07:30 标签： offset怎么用

　浏览器从下载文件至本地到显礻页面是个复杂的过程这里包含了重绘和重排。在页面的生命周期中一些效果的交互都有可能发生重排（Layout）和重绘（Painting），这些都会使峩们付出高额的性能代价 

　　通常来说，渲染引擎会解析HTML文档来构建DOM树与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树接下来，DOM樹和CSSOM树关联起来构成渲染树（RenderTree）这一过程称为Attachment。然后浏览器按照渲染树进行布局（Layout）最后一步通过绘制显示出整个页面。如下图所示：

　　一旦触发重排我们对DOM的修改引发了DOM几何元素的变化，渲染树需要重新计算 而重绘只会改变visibility、outline、背景色等属性导致样式的变化，使浏览器需要根据新的属性进行绘制

　　更比而言，重排会产生比重绘更大的开销所以，我们在实际生产中要严格注意减少重排的触發

　　触发重排的操作主要是几何因素。

接下来就是有趣的部分-创建一个渲染树（render tree）渲染树类似DOM树，但是并不是一一对应的渲染树基于样式，所以如果你使用display:none属性来隐藏一个div那么它不会被呈现在渲染树中。其它像head标签和所有在其中不可见的元素也一样另一方面，DOM元素可能在渲染树中存在多个节点比如说每行在<p></p>中的文本都需要一个渲染節点。渲染树上的节点被称为一个frame或者一个box（跟CSS box类似相关内容可查阅the box model）。每一个节点都有CSS box的属性-宽度、高度、边框、外边距等等

一旦渲染树被创建成功，浏览器就可以在屏幕上绘制渲染树节点

我要回帖

更多关于 offset怎么用 的文章

 

随机推荐