继前面了解的JS加载时间线,然后对JS的异步加载的方式进行了更深一步的了解;
默认情况下,js文件是同步加载的,当页面加载到js文件时,页面就会被阻断在这个地方,阻断了HTML、CSS的加载线;
为什么不异步加载js呢?(因为,js会修改HTML、CSS);
又因为js是同步加载的,所以对于不会修改页面的js工具包来说,是浪费了效率的,因为他阻断了HTML、CSS的加载线;所以,我们就希望对于这样(不调用就不会对页面有影响的工具包)工具包,他应该是异步加载的;
异步加载简单的两种方式
1、defer属性,用法:
<script type="text/javascript" src="example.js" defer="defer"></script>
这种方法只有IE浏览器能用;可以引入外部文件也可以在内部写代码;
但是要等到文档解析完才能执行(也就是dom树解析完毕,而不是加载完毕);
2、async属性,用法:
<script type="text/javascript" src="example.js" async="async"></script>
这个方法适用于除IE外的其他浏览器,是HTML5的新属性;
只能外部引用文件,即具有src属性;
加载完example.js就立即执行;
由此可见,上面两种方法都存在兼容性的问题;那么就出现了第三种方法即按需加载;(还未使用,暂不贴代码了);