分类目录归档:前端

回流/重排(reflow)与重绘(repaint)

回流/重排(reflow): 渲染树(Render Tree)中一些节点的尺寸、位置、可见性等属性发生改变时需要重新计算几何信息,浏览器重新渲染页面,导致页面布局变化的过程。
重绘(repaint): 当页面元素的样式改变不影响其在文档流中的尺寸、位置、可见性,如改变元素的字体颜色、背景颜色等,就是重绘,这个过程不会导致页面的布局变化。 继续阅读

发表在 前端 | 标签为 , , | 回流/重排(reflow)与重绘(repaint)已关闭评论

浏览器渲染页面过程

浏览器从服务器获取到 HTML 文档后,HTML 解释器开始对 HTML 自上而下解析,构建 DOM Tree(DOM 树)。CSS 解释器解析 CSS,构建 CSS Rule Tree(CSS 规则树)。文档解析完成后,将 CSS Rule Tree 附加到 DOM Tree 生成 Render Tree(渲染树)。而后,Layout(布局)会从渲染树的根节点开始遍历,输出渲染树上每个节点在页面上的具体大小和位置。 继续阅读

发表在 前端 | 标签为 , | 浏览器渲染页面过程已关闭评论