一、在文档的<head>元素中包含所有JavaScript文件
必须等到全部JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容。这无疑会导致浏览器在呈现页面时出现明显的延迟，特别是比较庞大的脚本，将会极大的影响用户体验。
为了避免这个问题，一般把全部JavaScript引用放在<body>元素后面。这样在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。
二、延迟脚本：设置defer属性
脚本会延迟到整个页面都解析完毕后再运行， 相当于立即下载，但延迟执行。延迟脚本按照出现的先后顺序执行。
<script src="test.js" defer></script>
部分浏览器会忽略这个属性，因此把延迟脚本放在底部仍然是最佳的选择。
三、异步脚本：设置async属性
与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。
如果不考虑低版本的IE浏览器：
使用async属性即可实现异步加载，即便将加载js的代码放置于<head>中也没有影响。
<script src="test.js" async></script>
如果要兼容所有浏览器：
如果要兼容老旧的浏览器，实践表明可使用用来动态注入脚本的脚本加载器。
比如可以使用require.js等实现异步加载。
还有一种方法，就是将引入js的代码放置于body底部，并带上async属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了body结束标签之前的DOM解析，这就大大降低了其阻塞影响。而在现代浏览器中，脚本将在DOM解析器发现body尾部的script标签才进行加载，此时加载属于异步加载，不会阻塞CSSOM（但其执行仍发生在CSSOM之后）。
网友评论