为了提高网站访问速度，我在建设微科普网站的过程总结出了几种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