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

"demo_async.js"async="async"></script>

<scripttype="text/javascript"src=http://mobile.51cto.com/"demo_async.js"async></script>

优化关键衬着路径总结

上文已经完全讲述了浏览器是若何衬着页面的以及衬着之前的预备工作，接下来我们以下面的案例来总结一下优化关键衬着路径的办法。

假设有一个 HTML 页面，它只惹人了一个 CSS 外部文件：

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet"> 
  </head> 
  <body> 
    <p>Hello <span>web performance</span> students!</p> 
    <div><imgsrc=http://mobile.51cto.com/"awesome-photo.jpg"></div> 
  </body> 
</html>

它的关键衬着路径如下：

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

起首浏览器要先对办事器发送请求获得 HTML 文件，获得 HTML 文件后开端构建 DOM 树，在碰见 <link> 标签时浏览器须要向办事器再次发出请求来获得 CSS 文件，然后则是持续构建 DOM 树和 CSSOM 树，浏览器归并出衬着树，根据衬着树进行构造计算，履行绘制操作，页面衬着完成

有以下几个用于描述关键衬着路径机能的词汇：

关键资本：可能壅塞网页初次衬着的资本(上图中为2个， HTML 文件与外部 CSS 文件 style.css )。
关键路径长度：获取关键资本所需的往返次数或总时光(上图为2次或以上，一次获取 HTML 文件，一次获取 CSS 文件，这个次数基于 TCP 协定的最大年夜拥塞窗口，一个文件不必定能在一次连接内传输完毕)。
关键字节：所有关键资本文件大年夜小的总和(上图为 9KB )。

接下来，案例代码的需求产生了变更，它新增了一个 JavaScript 文件。

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

JavaScript 文件壅塞了 DOM 树的构建，并且在履行 JavaScript 脚本时还须要先等待构建 CSSOM 树，上图的关键衬着路径特点如下：

关键资本： 3( HTML 、 style.css 、 app.js )
关键路径长度： 2或以上(浏览器会在一次连接一一路下载 style.css 和 app.js )
关键字节：11KB

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet"> 
  </head> 
  <body> 
    <p>Hello <span>web performance</span> students!</p> 
    <div><imgsrc=http://mobile.51cto.com/"awesome-photo.jpg"></div> 
    <scriptsrc=http://mobile.51cto.com/"app.js"async></script> 
  </body> 
</html>

4/6 首页上一页 2 3 4 5 6 下一页尾页

　　推荐阅读

　　洞察| 创新帮助制造业企业跑赢数字化转型攻坚战

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

本文标题：浏览器渲染过程与性能优化

地址：http://www.17bianji.com/lsqh/37738.html

1/2 1