网页的渲染机制
2017-10-20 本文已影响0人
ShawnRong
渲染引擎
渲染引擎的工作主要是。。渲染，用来在屏幕上显示的内容。主流的浏览器，Chrome和Safari用的是开源的Webkit,Firefox使用的是Gecko。
DOM解析
DOM树由元素和值构成的各个节点组成。比如一个HTML DOM树如下：
<html>
<html>
<head>
<title>Web page parsing</title>
</head>
<body>
<div>
<h1>Web page parsing</h1>
<p>This is an example Web page.</p>
</div>
</body>
</html>
HTML会被解析成，如下：
dom-tree
CSSRuleTree
css-tree
主要的渲染流程
- 解析HTML来构造成DOM树
- 渲染树构造
- 渲染树布局
- 绘制整个渲染树
render-flow
Reflow和Repaint
- Repaint——屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
- Reflow——意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。
Reflow的成本比Repaint的成本高得多的多。下面这些动作有很大可能会是成本比较高的。
-
当你增加、删除、修改DOM结点时，会导致Reflow或Repaint
-
当你移动DOM的位置，或是搞个动画的时候。
-
当你修改CSS样式的时候。
-
当你Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
-
当你修改网页的默认字体时。
