异步加载JavaScript

最新推荐文章于 2022-02-11 19:23:09 发布

云_飞扬

最新推荐文章于 2022-02-11 19:23:09 发布

阅读量288

点赞数

分类专栏： JavaScript 文章标签： javascript 异步

本文链接：https://blog.csdn.net/qq_38627581/article/details/73061057

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

异步加载JavaScript
默认情况下javaScript是同步加载的，同步加载js文件时会阻塞后续程序的执行，影响页面渲染效率。解决问题两个方法：
方法一：将js文件在html页面最后引入，同步加载时会先渲染页面，最后执行js

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

方法二：采用异步加载js文件
常见解决方法有四种：
1.使用jQuery中的$(document).ready方法(必须引入jQuery)

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

无兼容性问题
2.设置<script>标签的defer属性
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

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

无兼容性问题，js脚本可按顺序执行
3.设置<script>标签的async属性
async是html5的属性，async 属性规定一旦脚本可用，则会异步执行。

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

1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。
2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。
4.动态创建<script>标签

		<!DOCTYPE html>
		<html>
        		<head>
                		<script type="text/javascript">
                        		(function(){
                                		var s = document.createElement('script');
                               			s.type = 'text/javascript';
                                		s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                                		var tmp = document.getElementsByTagName('script')[0];
                                		tmp.parentNode.insertBefore(s, tmp);
                        		})();
                		</script>
        		</head>
        			<body>
                			<img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
        			</body>
		</html>

兼容所有浏览器