js异步加载
2016-07-12 21:29
302 查看
同步加载
在介绍js异步加载之前,我们先来看看什么是js同步加载。我们平时最常使用的就是这种同步加载形式:<script src="http://XXX.com/script.js"></script>
同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在head中添加一个script,但这个script下载时网络不稳定,很长时间没有下载完成对应的js文件,那么浏览器此时一直等待这个js文件下载,此时页面不会被渲染,用户看到的就是白屏。以前的一般建议是把<script>放在页面末尾</body>之前,这样尽可能减少这种阻塞行为,而先让页面展示出来。
异步加载
它允许无阻塞资源加载,并且使 onload 启动更快,允许页面内容加载,而不需要刷新页面,也可以根据页面内容延迟加载依赖。常见异步加载举例:
1.动态创建<script>标签
(Script DOM Element)
[js] view
plain copy
<strong>(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();</strong>
这种方法是在页面中<script>标签内,用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
2.使用$(document).ready()
从异步加载的定义上来看,jQuery的$(document).ready()也解决了同步加载所带来的不便,也可以归结到异步加载的方式中。
3.使用 <script>标签的async="async"属性
此属性是html5中新增属性,存在浏览器兼容问题,不推荐使用。async 属性仅适用于外部脚本(只有在使用 src 属性时)。
4.使用<script>标签的defer="defer"属性
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
延迟加载(lazy loading)
前面解决了异步加载(async loading)问题,再谈谈什么是延迟加载。延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。
也就是将 js 切分成许多模块,页面初始化时只加载需要立即执行的 js ,然后其它 js 的加载延迟到第一次需要用到的时候再加载。
特别是页面有大量不同的模块组成,很多可能暂时不用或根本就没用到。
就像图片的延迟加载,在图片出现在可视区域内时(在滚动条下拉)才加载显示图片。
异步加载,需要将所有 js 内容按模块化的方式来切分组织,其中就存在依赖关系,而异步加载不保证执行顺序。js模块化解决了这个问题。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究