关于异步加载JavaScript

　　在默认情况下JavaScript是同步加载的，这种加载方式会阻塞浏览器，如果我们在网络环境较差的环境中打开网页，由于js文件长时间未下载

完成，浏览器会一直等待，此时的页面不会被渲染，用户看到的网页内容就是白屏，这样一来用户的体验感会受到影响，对此我们有如下解决办法：

方法一：将js文件在html页面最后引入，同步加载时会先渲染页面，最后执行js

	<body>
		<div>...</div>
		<script src="index.js"></script>
	</body>

方法二：采用异步加载(非阻塞加载)js文件

有四种常用方法如下：

1.(在引入jQuery的前提下)使用jQuery中的$(document).ready方法

1 　　　　<head>
2               <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
3                <script type="text/javascript">
4                          $(document).ready(function() {
5                               alert("加载完成！");
6                          });
7                  </script>
8         </head>

2.设置<script>标签的defer属性（defer属性目前已支持主流浏览器）

defer 属性规定当页面已完成加载后，才会执行脚本。

可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

defer 属性仅适用于外部脚本（只有在使用 src 属性时）

        <script type="text/javascript" defer="defer" src="index.js"> </script>

3.设置<script>标签的async属性
async是html5的属性，async 属性规定一旦脚本可用，则会异步执行，即浏览器会下载js文件的同时继续对后面的内容进行渲染。

async 属性仅适用于外部脚本（只有在使用 src 属性时）。

　　　　<script type="text/javascript" async="async" src="index.js"></script>

4.onload时的异步加载

这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

(function(){
    if(window.attachEvent){
        window.attachEvent("load", asyncLoad);
    }else{
        window.addEventListener("load", asyncLoad);
    }
    var asyncLoad = function(){
        var ga = document.createElement('script'); 
        ga.type = 'text/javascript'; 
        ga.async = true; 
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(ga, s);
    }
)();

关于异步加载JavaScript

猜你喜欢