js让html晚点加载,关于js延迟加载（异步操作）的方式

一、概述

最近重新开始学习js，在第一章的一个小节里写到了“脚本调用策略”，书上写的这部分不多，但是发现在我之前的(笔)面试中，问到的频率还是比较高的。自己一直习惯于直接把所有js文件写在head里，后来了解到优化后，会把js放在最底部，但并不太懂这样做的好处，而且其他的一些处理方式，自己也并未有过实际的操作。

在面试中对这部分的考察，主要考察的是程序的性能方面。程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，为了让用户的体验更好。性能优化的核心思想就是快，可以预先准备数据(如缓存的使用)，可以按需获取，可以分段获取等都是常见的优化手段。

而对于js的优化(即js延迟加载)，主要是因为HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素(使用文档对象模型dom)，并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。其意义在于，这样有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件。

二、js的同步加载和异步加载

同步加载，又称阻塞模式，是我们平时使用最多的方式，也就是直接将

异步加载，又称为非阻塞加载，在浏览器下载执行js的同时，还会继续后续页面的处理。这里也是一般面试会问到的一点，即js延迟加载的方式有哪些？

三、js延迟加载的六种方式

一般有六种方式；defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。

写的是六种方式，实际上自己在项目中真实用到的也就是让js最后加载。所以对这所谓的六种方式，可能仅作为一种知识储备，当以后的项目有这种问题需求了，可以有不同的解决思路。

(一)defer属性

HTML 4.01为

其用途是：表明脚本在执行时不会影响页面的构造，浏览器会立即下载，但延迟执行，即脚本会被延迟到整个页面都解析完毕之后再执行。

defer属性只适用于外部脚本文件，只有 Internet Explorer 支持 defer 属性。

并且defer属性解决了async引起的脚本顺序问题(见async的缺点)，使用defer属性，脚本将按照在页面中出现的顺序加载和运行。

示例：

//脚本1

//脚本2

//脚本3

​

上述代码添加 defer 属性，脚本将按照在页面中出现的顺序加载，因此可确保脚本1必定加载于脚本2和 脚本3之前，同时脚本2必定加载于脚本3之前。

(二)async属性

HTML 5为

浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但这样的问题是，不同脚本运行次序就无法控制，只是脚本不会阻止剩余页面的显示。

async属性只适用于外部脚本文件。

示例：

//脚本1

//脚本2

//脚本3

​

上述代码添加async 属性，这三者的调用顺序是不确定的，脚本1可以在脚本2和脚本3之前会之后调用，这是完全不确定的。如果脚本2和脚本3需要依赖脚本1中的函数，那么不确定的调用顺序会导致错误。

所以，当页面的不同脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async是最理想的选择。

总结：defer和async的异同点

相同：

加载文件时不会阻塞页面渲染

对于内部的js不起作用

使用这两个属性的脚本中不能调用document.write方法

区别：

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。也就是每一个async属性的脚本都在它下载结束之后立即执行，同时会在window的load事件之前执行。

如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

(三)动态创建DOM方式

//这些代码应被放置在