为了提高网站访问速度，我在建设微科普网站的过程总结出了几种js异步加载的书写方式，仅供参考。
JS异步加载的几种方式：
1、在<script>标签中添加defer属性，允许只写属性名省略属性值。将在DOM构建完毕之后onload之前执行，不会阻塞DOM树构建，但会阻塞onload的执行。
<script type="text/javascript" defer="defer" src="/index.js"></script>
2、在<script>标签中添加async属性，允许只写属性名省略属性值。将在onload时启用浏览器的另一个进程执行，不会阻塞DOM树构建，也不会阻塞onload的执行。此属性为H5的新特性，支持H5的浏览器都支持async属性。
<script type="text/javascript" async="async" src="/index.js"></script>
3、动态创建脚本。此方式在onload阶段启用浏览器的另一个进程执行，不会阻塞DOM树构建，也不会阻塞onload的执行。所有浏览器都支持。
<script type="text/javascript">
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type", "text/javascript");
script.src = src;
document.body.appendChild(script)
}
window.onload = function() {
addScriptTag("/index.js")
}
</script>
4、有条件的动态创建脚本。先判断网页是否加载完毕，确保网页加载完毕后再创建一个脚本来载入和执行JS。不会阻塞DOM树构建，也不会阻塞onload的执行。所有浏览器都支持。此方式为谷歌推荐的书写方式。
<script type="text/javascript">
if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "index.js";
document.body.appendChild(element)
}
</script>
5、基于标记语言的JS异步加载。支持H5的浏览器都支持。
<link rel="preload" as="script" href="/index.js" onload="var script = document.createElement('script'); script.src = this.href; document.body.appendChild(script);">
文档说明地址：https://cdn.sky.wkepu.com/doc/js-async-load.txt
转载本文请联系原作者获取授权，同时请注明本文来自王军礼科学网博客。
链接地址：https://wap.sciencenet.cn/blog-1273577-1134950.html?mobile=1
收藏
