注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

提高js在页面中执行效率的一种方法  

2016-10-22 23:28:44|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

高效页面之JS脚本

        当我们在页面中引入多个js文件时,以前的浏览器会逐一下载这些js文件,也就是每个文件必须等前一个文件下载并执行完成之后,才能开始下载。

        尽管现在的浏览器可以并行下载这些script标签,也就是当script标签在下载外部资源时,不会阻塞其他script标签,但是,js下载过程仍然会阻塞其他资源的下载,如图片等。那么,问题来了,我们要怎么解决这样的问题呢,或者说,我们要怎么在页面加载js文件不会影响其他进程呢。

延迟脚本

<script>标签定义了一个defer属性,该属性指明本元素所含的脚本不会修改DOM,因此代码可以安全的延迟执行。当页面解析到该<script>标签时开始下载,但不会立即执行,直到DOM加载完成(onload事件被触发前)。

动态添加脚本元素

         我们可以使用标准的DOM方法向页面动态添加<script>标签

高效页面之JS脚本

        这样向页面中动态添加标签,js文件在该元素被添加到页面时开始下载,无论何时启动下载,文件的下载和执行都不会阻塞页面其他的进程。

       使用动态脚本节点下载文件时,返回的代码会立即执行(而不是等待所有动态脚本节点执行完毕), 但是当代码只包含供页面其他脚本调用的接口时,就会出现问题。所以必须要确保脚本下载完成且准备就绪。

        下面这个函数实现了兼容IE和其他浏览器的js文件动态添加

高效页面之JS脚本

我们可以将这段代码放在单独的js文件中(假设是load.js),然后在<body>标签闭合之前这样调用

高效页面之JS脚本

这种思想很牛逼有木有。

尽管这样还是会下载load.js脚本,但它很小,而且执行也很快,所以对页面不会有太多的影响。

当然,也可以把loadScript()函数之间嵌入到页面,从而减少一次HTTP请求。

总结一下可以优化脚本加载的方法:

1、在<body>标签闭合之前,将所有的<script>标签放到页面底部,这样可以保证脚本执行之前页面已经完成渲染

2、合并脚本。在页面中,<script>标签越少,加载越快。 //日常开发最常用的

3、使用<script>标签的defer属性

4、动态创建<script>标签元素

  评论这张
 
阅读(24)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018