关于网页渲染，前端们应该知道的一些事情_html/css_WEB

浏览器是如何渲染网页的？

我们从浏览器渲染一个页面的行为说起：

• 从服务器端获取的HTML文档中构建出DOM树（文档对象模型）；

• 样式被加载和分析，构建CSSOM（CSS对象模型）；

• 以DOM和CSSOM为基础，文档树被构建，一系列对象被渲染（Webkit称每一个为‘renderer’或’render 对象（render object）‘，Gecko中称为‘frame’）.渲染树反应了除不可见元素（ , display:none）之外的DOM结构中一切可见元素,每一段字符串在渲染树中都被当做独立的渲染对象，每一个渲染对象都是其对应的DOM结构和计算所得样式的混合体，换句话说渲染树是DOM树的视觉表现；

• 对于每一个渲染树元素，它的坐标都是通过计算获得的，这被称作排版（布局layout），浏览器通过文档流的方式（也就是一次就能完成所有元素的布局）（tables需要多于一次的布局）；

• 最终渲染树出现在浏览器窗口上，这个过程称为绘制（painting）。

当用户与一个页面交互或者脚本修改时，由于文档结构的变化，以上的一些操作步骤会重新执行。

重现绘制（Repaint）

当元素样式变化并不影响该元素在一个网页上的位置时（ background-color， border-color, visibility），浏览器只会把新样式应用到该元素。

Reflow

当改变影响了 文档内容或结构或者元素的位置时，reflow发生（重新布局），这一般由以下因素触发：

• DOM操作（添加，删除，更改，或者变更元素顺序）；

• 内容改变（包括表格区域内文本的变化）（所占位置大小变了）；

• 计算或者改变CSS属性（位置改变）；

• 添加或者删除样式表；

• 改变类属性（class）（可能会改变位置）；

• 浏览器窗口操作（改变大小，滚动）；

• 伪类激活（可能改变位置）

怎么让浏览器充分利用渲染机制

浏览器会尽可能的限制被改变元素所在区域的重排重绘，比如说 display:fixed/absolute元素改变时只会影响它本身和它的子元素，而 display:static元素改变时会使其随后的元素都被重绘；（影响尽量少的元素）

另一个最大化性能的机制在于，当运行一系列JavaScript片段时，浏览器会缓存它们，然后一次运行。看下面的例子可以很好的理解：

var $body = $('body');$body.css('padding', '1px'); // reflow, repaint$body.css('color', 'red'); // repaint$body.css('margin', '2px'); // reflow, repaint// only 1 reflow and repaint will actually happen(由于缓存，只会重绘一次)

然而，就像上面已经提到的，调用一个元素的属性会触发强制性的reflow，当我们加上一行读元素属性的代码时就会发生；

var $body = $('body');$body.css('padding', '1px');$body.css('padding'); // reading a property, a forced reflow(强制发生)$body.css('color', 'red');$body.css('margin', '2px');//另外一次reflow

因此，会有两次reflow，因此应该组合来读元素属性已最大化性能 一个详细的例子；

$(function() {  var $body = $('body');  $body  .on('click', '.block-1', function(e) {    // 1 reflow        $body.css('padding', '1px');    $body.css('color', 'red');    $body.css('margin', '2px');  })  .on('click', '.block-2', function(e) {    // 2 reflows        $body.css('padding', '1px');    $body.css('padding');    $body.css('color', 'red');    $body.css('margin', '2px');  })  .on('click', '.block-3', function(e) {    // 3 repaints        $body.css('color', 'red');    $body.css('color');    $body.css('color', 'yellow');    $body.css('background');    $body.css('color', 'blue');    $body.css('outline');  })  .on('click', '.block-4', function(e) {    // 1 repaint        $body.css('color', 'red');    $body.css('color', 'yellow');    $body.css('color', 'blue');    $body.css('color');    $body.css('background');    $body.css('outline');  })  .on('click', '.block-5', function(e) {    // 3 reflows        $body.css('padding', '1px');    $body[0].offsetHeight;    $body.css('padding', '2px');    $body[0].offsetTop;    $body.css('padding', '3px');    $body[0].offsetWidth;  })  .on('click', '.block-6', function(e) {    // 1 reflow        $body.css('padding', '1px');    $body.css('padding', '2px');    $body.css('padding', '3px');    $body[0].offsetHeight;    $body[0].offsetTop;    $body[0].offsetWidth;  });});

有些时候，可能你会需要一次强制性的reflow，例如：我们需要运用两次 margin-left到同一个对象，第一次无动画的设置到100px,然后通过动画过渡到50px, 实例；

过渡动画：

.has-transition {   -webkit-transition: margin-left 1s ease-out;      -moz-transition: margin-left 1s ease-out;        -o-transition: margin-left 1s ease-out;           transition: margin-left 1s ease-out;}

过程代码：

// our element that has a "has-transition" class by defaultvar $targetElem = $('#targetElemId');// remove the transition class$targetElem.removeClass('has-transition');// change the property expecting the transition to be off, as the class is not there// anymore$targetElem.css('margin-left', 100);// put the transition class back$targetElem.addClass('has-transition');// change the property$targetElem.css('margin-left', 50);

上述代码并不按预期工作，因为改变被缓存并在最后执行了一次，这时候我们就需要一次强制性的执行了：

达到预期效果的代码

// remove the transition class$(this).removeClass('has-transition');// change the property$(this).css('margin-left', 100);// trigger a forced reflow, so that changes in a class/property get applied immediately$(this)[0].offsetHeight; // an example, other properties would work, too// put the transition class back$(this).addClass('has-transition');// change the property$(this).css('margin-left', 50);

现在达到预期效果了！

性能优化的建议

总结了一些有用的信息，本文有以下建议

• 构建有效的HTML和CSS，不要忘记声明文档编码方式，样式表应该包含在 标签内，脚本文件应该放在 标签的底部；

• 简化并且充分利用CSS选择器（这一条被大多数使用CSS预处理器的开发者忽略），维护最少的层状结构，以下是各选择器的效率排行

  #id.classdiva+iul>li*input[type='text']a:hover

• 应该引起注意的是，浏览器是从右向左读取选择器的，所以最右边的应该选择效率比较高的选择器 #id,.class;

div * {...} // bad.list li {...} // bad.list-item {...} // good#list .list-item {...} // good

• 在脚本中，应该尽可能的减少DOM操作，如果对象和属性会被重用，就缓存它们。在最好离线元素（未被插入文档树）（offline）上进行操作，然后把它插入DOM结构中;

• 如果使用jQuery，遵循［jQuery选择器基本原则( http://learn.jquery.com/performance/optimize-selectors/);

• 修改元素的样式时，修改class属性是做好的方法，其位置越深，越好（also because this helps decouple logic from presentation）；

• 只使 display:fixed/absolute的元素具有动画；

• 不适用复杂的 :hover动画也是一个好的实践（给 添加 no-hover属性）， 延展阅读;

延展阅读已获得更多信息：

1. How browsers works;

2. Rendering: repaint, reflow/relayout, restyle;

希望这边译文对您有用

原文链接