浏览器渲染过程与性能优化

rel="stylesheet">

</head>

<body>

<p>Hello <span>web performance</span> students!</p>

<scriptsrc=http://mobile.51cto.com/"app.js"></script>

</body>

</html>

构建衬着树

在构建了 DOM 树和 CSSOM 树之后，浏览器只是拥有了两个互相自力的对象集合， DOM 树描述了文档的构造与内容， CSSOM 树则描述了对文档应用的样式规矩，想要衬着出页面，就须要将 DOM 树与 CSSOM 树结合在一路，这就是衬着树。

浏览器衬着过程与机能优化

浏览器会先大年夜 DOM 树的根节点开端遍历每个可见节点(弗成见的节点天然就没须要衬着到页面了，弗成见的节点还包含被 CSS 设置了 display: none 属性的节点，值得留意的是 visibility: hidden 属性并不算是弗成见属性，它的语义是隐蔽元素，但元素仍然占据着构造空间，所以它会被衬着成一个空框)。
对每个可见节点，找到其适配的 CSS 样式规出场应用。
衬着树构建完成，每个节点都是可见节点并且都含有其内容和对应规矩的样式。

衬着树构建完毕后，浏览器获得了每个可见节点的内容与其样式，下一步工作则须要计算每个节点在窗口内切实其实切地位与大年夜小，也就是构造阶段。

CSS 采取了一种叫做盒子模型的思维模型来表示每个节点与其他元素之间的距离，盒子模型包含外边距( Margin )，内边距( Padding )，边框( Border )，内容( Content )。页面中的每个标签其实都是一个个盒子。

浏览器衬着过程与机能优化

构造阶段会大年夜衬着树的根节点开端遍历，然后肯定每个节点对象在页面上切实其实切大年夜小与地位，构造阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内切实其实切地位与大年夜小，所有相对的测量值也都邑被转换为屏幕内的绝对像素值。

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <title>Critial Path: Hello world!</title> 
  </head> 
  <body> 
    <divstyle="width: 50%"> 
      <divstyle="width: 50%">Hello world!</div> 
    </div> 
  </body> 
</html>

当 Layout 构造事宜完成后，浏览器会急速发出 Paint Setup 与 Paint 事宜，开端将衬着树绘制成像素，绘制所需的时光跟 CSS 样式的复杂度成正比，绘制完成后，用户就可以看到页面的最终出现效不雅了。

我们对一个网页发送请求并获得衬着后的页面可能也就经由了1~2秒，但浏览器其实已经做了上述所讲的异常多的工作，总结一下浏览器关键衬着路径的┞符个过程：

处理 HTML 标记数据并生成 DOM 树。
处理 CSS 标记数据并生成 CSSOM 树。
将 DOM 树与 CSSOM 树归并在一路生成衬着树。
遍历衬着树开端构造，计算每个节点的地位信息。
将每个节点绘制到屏幕。

浏览器想要衬着一个页面就必须先构建出 DOM 树与 CSSOM 树，如不雅 HTML 与 CSS 文件构造异常宏大年夜与复杂，这显然会给页面加载速度带来严重影响。

所谓衬着壅塞资本，等于对该资本发送请求后还须要先构建对应的 DOM 树或 CSSOM 树，这种行动显然会延迟衬着操作的开端时光。 HTML 、 CSS 、 JavaScript 都是会对衬着产生壅塞的资本， HTML 是必须的(没有 DOM 还谈何衬着)，但还可以大年夜 CSS 与 JavaScript 着手优化，尽可能地削减壅塞的产生。

优化CSS

CSS 的媒体萌芽恰是用来实现这个功能的，它由媒体类型以及零个或多个检查特定媒体特点状况的表达式构成。

<!-- 没有应用媒体萌芽，这个css资本会壅塞衬着 -->	
			 2/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　洞察| 创新帮助制造业企业跑赢数字化转型攻坚战
            
            就连腾讯董事会主席兼首席履行官马化腾在近期召开的“2017中国两化融合大年夜会”上也几回再三强调，制造业是数字经济的主疆场，它的转型进级将是新一轮全球数字竞争的关键。对>>>详细阅读


本文标题：浏览器渲染过程与性能优化
地址：http://www.17bianji.com/lsqh/37738.html
 1/2    1