码迷,mamicode.com
首页 > 编程语言 > 详细

web性能优化之---JavaScript中的无阻塞加载性能优化方案

时间:2018-03-12 01:12:35      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:一个   标签   就是   特性   firefox   加载速度   模块   asc   动态   

一、js阻塞特性

  JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的。 即<script>每次出现都会让页面等待脚本的解析和执行(不论JS是内嵌的还是外链的),JS代码执行完成后,才继续渲染页面。

 

二、优化方案

1、尽管脚本的下载过程并不会相互影响,但页面仍然必须等待所有JS下载并执行完成才能继续。所以尽可能将所有<script>标签放置在页面底部,紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

注意:CSS文件本身是并行下载,不会阻塞页面的其他进程。但是,如果把一段内嵌脚本放在引用外链CSS的<link>之后会导致页面阻塞去等待CSS的下载。这样做是为了确保内嵌脚本在执行时能够获得正确的样式信息。所以,最好不要把内嵌脚本放在CSS的<link>之后。

2、减少外链接数量,减少请求。可以将脚本成组打包,这点现在的构建工具已经做得很好了。页面的<script>标签越少,页面的加载速度就越快,响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3、有几种方法可以使用非阻塞方式下载Javascript:

1 ) .为<script>标签添加defer属性(仅IE和Firefox3.5以上)
2).动态创建<script>元素,用它下载并执行代码

3) . 在页面加载完成后才加载JS,即在window对象的load事件触发后在下载脚本。

4) .使用如common.js等js模块管理工具去动态加载js,比如在点击操作时候加载一个js模块。
5).用XHR对象下载代码,并注入到页面

web性能优化之---JavaScript中的无阻塞加载性能优化方案

标签:一个   标签   就是   特性   firefox   加载速度   模块   asc   动态   

原文地址:https://www.cnblogs.com/leaf930814/p/8547005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!