• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

页面优化??js异步加载

未分类 小辉 274次浏览 已收录 0个评论 扫描二维码

同步加载

在介绍js异步加载之前,我们先来看看什么是js同步加载。我们平时最常使用的就是这种同步加载形式:

<script src=”http://XXX.com/script.js”></script>

同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在head中添加一个script,但这个script下载时网络不稳定,很长时间没有下载完成对应的js文件,那么浏览器此时一直等待这个js文件下载,此时页面不会被渲染,用户看到的就是白屏。以前的一般建议是把<script>放在页面末尾</body>之前,这样尽可能减少这种阻塞行为,而先让页面展示出来。

异步加载

它允许无阻塞资源加载,并且使 onload 启动更快,允许页面内容加载,而不需要刷新页面,也可以根据页面内容延迟加载依赖。

常见异步加载举例:

(Script DOM Element)

[js] view plain copy

  1. <strong>(function() {  
  2.      var s = document.createElement(’script’);  
  3.      s.type = ’text/javascript’;  
  4.      s.async = true;  
  5.      s.src = ’http://yourdomain.com/script.js’;  
  6.      var x = document.getElementsByTagName(’script’)[0];  
  7.      x.parentNode.insertBefore(s, x);  
  8.  })();</strong>  

这种方法是在页面中<script>标签内,用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。

延迟加载(lazy loading)

前面解决了异步加载(async loading)问题,再谈谈什么是延迟加载。

延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。

也就是将 js 切分成许多模块,页面初始化时只加载需要立即执行的 js ,然后其它 js 的加载延迟到第一次需要用到的时候再加载。

特别是页面有大量不同的模块组成,很多可能暂时不用或根本就没用到。

就像图片的延迟加载,在图片出现在可视区域内时(在滚动条下拉)才加载显示图片


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明页面优化??js异步加载
喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址