js延迟加载的几种方法

474 阅读2分钟

众所周知,在一个HTML页面加载的时候,如果遇到script标签,一般情况下会停止页面渲染,转而加载并执行脚本,等到脚本执行结束后才继续渲染页面。 但世界上存在可以使js延迟加载的方法,这些方法有助于提高页面加载速度

1.defer属性

作用

脚本会立即下载,但要在页面已加载之后才运行脚本

使用

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

之后会有具体实例,放到defer与async比较一节

注意

defer属性只适用于外部脚本文件,即使用了src属性

2.async属性

作用

不让页面等待脚本下载和执行,从而异步加载页面其他内容

使用

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

之后会有具体实例,放到defer与async比较一节

注意

异步脚本一定会在页面 load 事件前执行 async 属性仅适用于外部脚本

3.defer与async比较

一图胜千言

这里写图片描述

相同点

加载文件时不阻塞页面渲染 都在onload事件之前执行 只对外部脚本有效 使用这两个属性的脚本中不能调用document.write方法(该方法用于向文档写入HTML表达式或js代码) 允许不定义属性值,仅仅使用属性名

不同点

html的版本html4.0中定义了defer、html5.0中定义了async async属性的脚本都在它下载结束之后立刻执行(下载时不阻塞页面渲染),但执行顺序不能控制,先下载完的先执行 defer属性的脚本都是在html解析完毕之后,按照原本的顺序执行

组合使用

如果async为true,那么脚本在下载完成后异步执行 如果async为false,defer为true,那么脚本会在页面解析完毕之后执行 如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行

实例

先是一个用于外部加载的outline.js以及一个demo.html文件

//outline.js,现在就一句话
console.log("this is outline.js")
<!--HTML文件中就展示几个script标签-->
<script type="text/javascript">
	window.onload=function(){
		console.log("onload event");
	}
</script>
<script type="text/javascript" src="./outline.js" defer="defer"></script>
<script type="text/javascript">
	console.log("normol script");
</script>

目前在控制台中的输出就是 这里写图片描述

现在,在第二个script标签中添加defer属性,三个script标签顺序不变

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

执行结果就是

这里写图片描述

将第二个标签修改为async属性,三个script标签顺序不变,结果同上. 如果我们在outline.js中使用document.write

document.write("hello")
console.log("this is outline.js")

则会 这里写图片描述 但不会阻塞outline.js继续加载执行

4.动态创建DOM

基本原理

通过document.createElement("script")创建新的script标签 为新创建的元素的src属性赋值,值即为需要加载的js文件地址 将新元素添加到body中

实例

function download() {  
      var element = document.createElement("script");  
      element.src = "outline.js";  
      document.body.appendChild(element);  
}  

上面的代码通过一个事件进行触发,继而实现js延迟加载

5.jQuery的getScript()方法

用法

$.getScript("outline.js",function(){  
      console.log("脚本加载完成")  
});