（Why）为什么要延迟加载？
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> <!-- 这里放内容 --> </body> </html>按照传统的做法，在head元素中包含所有的JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完以后，才能开始呈现页面的内容。
对于那些需要很多JavaScript代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。
（How）延迟加载的方式有哪些？
1. 让JavaScript最后加载
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> </head> <body> <!-- 这里放内容 --> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html> ```
把全部JavaScript引用放在body元素中页面内容的后面
2. defer属性
延迟脚本：告诉浏览器立即下载，延迟到整个页面都解析完毕后再执行。
HTML5规范要求：脚本按照它们出现的先后顺序执行，并且先于DOMContentLoaded事件执行。但在现实当中，不一定按照规范要求执行。因此最好只包含一个延迟脚本。defer属性只适用于外部脚本文件。
3. async属性
异步脚本：异步下载脚本文件，下载完毕立即执行。
标记为async的脚本并不保证按照指定它们的先后顺序执行，须确保两者之间不依赖。建议异步脚本不要在加载期间修改DOM。异步脚本一定会在load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。
【附加一幅图：关于defer和async】
4. 动态创建DOM方式
对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入JS脚本。
4434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
