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

<linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet">

<linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet"media="all">

<!-- 动态媒体萌芽，将在网页加载时计算。

根据网页加载时设备的偏向，portrait.css 可能壅塞衬着，也可能不壅塞衬着。-->

<linkhref=http://mobile.51cto.com/"portrait.css"rel="stylesheet"media="orientation:portrait">

<linkhref=http://mobile.51cto.com/"print.css"rel="stylesheet"media="print">

应用 prefetch 属性可以预先下载资本，不过它的优先级是最低的。

应用媒体萌芽可以让 CSS 资本不在初次加载中壅塞衬着，但不管是哪种 CSS 资本它们的下载请求都不会被忽视，浏览器仍然会先下载CSS文件

优化JavaScript

当浏览器的 HTML 解析器碰到一个 script 标记时会暂停构建 DOM ，然后将控制权移交至 JavaScript 引擎，这时引擎会开端履行 JavaScript 脚本，直到履行停止后，浏览器才会大年夜之前中断的处所恢复，然后持续构建 DOM 。每次去履行 JavaScript 脚本都邑严重地壅塞 DOM 树的构建，如不雅 JavaScript 脚本还操作了 CSSOM ，而正好这个 CSSOM 还没有下载和构建，浏览器甚至会延迟脚本履行和构建 DOM ，直至完成其 CSSOM 的下载和构建。显而易见，如不雅对 JavaScript 的履行地位应用欠妥，这将会严重影响衬着的速度。

衬着壅塞的优化筹划

下面代码中的 JavaScript 脚本并不会生效，这是因为 DOM 树还没有构建到 <p> 标签时， JavaScript 脚本就已经开端履行了。这也是为什么经常有人在 HTML 文件的最下方写内联 JavaScript 代码，又或者应用 window.onload() 和 JQuery 中的 $(function(){}) （这两个函数有一些差别， window.onload() 是等待页面完全加载完毕后触发的事宜，而 $(function(){}) 在 DOM 树构建完毕后就会履行）。

<html> 
  <head> 
    <metaname="viewport"content="width=device-width,initial-scale=1"> 
    <linkhref=http://mobile.51cto.com/"style.css"rel="stylesheet"> 
    <title>Hello,World</title> 
    <scripttype="text/javascript"> 
        var p = document.getElementsByTagName('p')[0]; 
        p.textContent = 'SylvanasSun';   
    </script> 
  </head> 
  <body> 
    <p>Hello,World!</p> 
  </body> 
</html>

应用 async 可以通知浏览器该脚本不须要在引用地位履行，如许浏览器就可以持续构建 DOM ， JavaScript 脚本会在就鹱?开端履行，如许将明显晋升页面初次加载的机能( async 只可以在 src 标签中应用也就是外部引用的 JavaScript 文件)。

<!-- 下面2个用法效不雅是等价的 --> 
<scripttype="text/javascript"src=http://mobile.51cto.com/	
			 3/6   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

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


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