为什么每个前端开发者都要理解页面的渲染？

标签：

浏览器是怎样渲染一个页面的？

• 由从服务器接收到的 HTML 形成 DOM（文档对象模型）。
• 样式被加载和解析，形成 CSSOM（CSS 对象模型）。
• 紧接着 DOM 和 CSSOM 创建了一个渲染树，这个渲染树是一些被渲染对象的集合（ Webkit 分别叫它们”renderer”和”render object”，而在Gecko 引擎中叫”frame”）。除了不可见的元素（比如 head 标签和一些有 display:none 属性的元素），渲染树映射了 DOM 的结构。在渲染树中，每一个文本字符串都被当做一个独立的 renderer。每个渲染对象都包含了与之对应的计算过样式的DOM 对象（或者一个文本块）。换句话说，渲染树描述了 DOM 的直观的表现形式。
• 对每个渲染元素来说，它的坐标是经过计算的，这被叫做“布局(layout)”。浏览器使用一种只需要一次处理的“流方法”来布局所有元素（tables需要多次处理）。
• 最后，将布局显示在浏览器窗口中，这个过程叫做“绘制(painting)”。

重绘

重排

• DOM 操作（如元素增、删、改或者改变元素顺序）。
• 内容的改变，包括 Form 表单中文字的变化。
• 计算或改变 CSS 属性。
• 增加或删除一个样式表。
• 改变”class”属性。
• 浏览器窗口的操作（改变大小、滚动窗口）。
• 激活伪类（如:hover状态）。

浏览器如何优化渲染？

实际的优化建议

• 创建合法的 HTML 和 CSS ，别忘了制定文件编码，Style 应该写在 head 标签中，script 标签应该加载 body 标签结束的位置。
• 试着简化和优化 CSS 选择器（这个优化点被大多数使用 CSS 预处理器的开发者忽略了）。将嵌套层数控制在最小。以下是 CSS 选择器的性能排行（从最快的开始）：

• ID选择器：#id
• class选择器： .class
• 标签: div
• 相邻的兄弟元素：a + i
• 父元素选择器： ul > li
• 通配符选择器： *
• 伪类和伪元素： a:hover ，你应该记住浏览器处理选择器是从右向左的，这也就是为什么最右面的选择器会更快——#id或.class。
• 1. div * {...} // bad
  2. .list li {...} // bad
  3. .list-item {...} // good
  4. #list .list-item {...} // good

• 在你的脚本中，尽可能的减少 DOM 的操作。把所有东西都缓存起来，包括属性和对象（如果它可被重复使用）。进行复杂的操作的时候，最好操作一个“离线”的元素（“离线”元素的意思是与 DOM 对象分开、仅存在内存中的元素），然后将这个元素插入到 DOM 中。
• 如果你使用 jQuery，遵循jQuery 选择器最佳实践
• 要改变元素的样式，修改“class”属性是最高效的方式之一。你要改变 DOM 树的层次越深，这一条就越高效（这也有助于将表现和逻辑分开）。
• 尽可能的只对 position 为 absolute 或 fix 的元素做动画。
• 当滚动时禁用一些复杂的 :hover动画是一个很好的主意（例如，给 body 标签加一个 no-hover 的 class）关于这个主题的文章。

为什么每个前端开发者都要理解页面的渲染？

标签：

原文地址：http://www.cnblogs.com/xianxm/p/4201493.html