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

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

关键资本：2( app.js 为异步加载，不会成为壅塞衬着的资本)
关键路径长度： 2或以上
关键字节： 9KB( app.js 不再是关键资本，所以没有算上它的大年夜小)

接下来对 CSS 进行优化，比如添加膳绫墙体萌芽。

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet"media="print"> 
  </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>

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

关键资本：1( app.js 为异步加载， style.css 只有在打印时才会应用，所以只剩下 HTML 一个关键资本，也就是说当 DOM 树构建完毕，浏览器就会开端进行衬着)
关键路径长度：1或以上
关键字节：5KB

优化关键衬着路径就是在对关键资本、关键路径长度和关键字节进行优化。关键资本越少，浏览器在衬着前的预备工作就越少;同样，关键路径长度和关键字节关系到浏览器下载资本的效力，它们越少，浏览器下载资本的速度就越快。

其他优化筹划

除了异步加载 JavaScript 和应用媒体萌芽外还有很多其他的优化筹划可以使页面的初次加载变得更快，这些筹划可以综合起来应用，但核心的思惟照样针对关键衬着路径进行了优化。

加载部分HTML

办事端在接收到请求时先只响应回 HTML 的初始部分，后续的 HTML 内容在须要时再经由过程 AJAX 获得。因为办事端只发送了部分 HTML 文件，这让构建 DOM 树的工作量削减很多，大年夜而让用户感到页面的加载速度很快。

留意，这个办法不克不及用在 CSS 上，浏览器不许可 CSSOM 只构建初始部分，不然会无法肯定具体的样式。

紧缩

经由过程对外部资本进行紧缩可以大年夜幅度地削减浏览器须要下载的资本量，它会削减关键路径长度与关键字节，使页面的加载速度变得更快。

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

对数据进行紧缩其实就是应用更少的位数来对数据进行重编码。如今有异常多的紧缩算法，且每一个的感化范畴也各不雷同，它们的复杂度也不雷同，不过在这里我不会讲紧缩算法的细节，感兴趣的同伙可以本身Google。

在对 HTML 、 CSS 和 JavaScript 这些文件进行紧缩之前，还须要先辈行一次冗余紧缩。所谓冗余紧缩，就是去除多余的字符，例如注释、空格符和换行符。这些字符对于法度榜样员是有效的，毕竟没有格局化的代码可读性是异常恐怖的，但它们对于浏览器是没有任何意义的，去除这些冗余可以削减文件的数据量。在进行完冗余紧缩之后，再使悠揭捉?缩算法进一步对数据本身进行紧缩，例如 GZIP ( GZIP 是一个可以感化于任何字撙节的通悠揭捉?缩算法，它会记忆之前已经看到的内容，然后再测验测验查找并调换反复的内容。)。

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

　　推荐阅读

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

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

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

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

1/2 1