(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脚本。