问题分析
在开发网站页面的时候经常会加载js文件,但是我们在加载js的时候会遇到js非常大或者执行事件长的情况下会出现页面短时间内白屏的现象。
这是因为web页面是按照顺序执行的然后代码一边下载浏览器一边处理,当遇到标签浏览器会先停下来去加载相应的css文件,然后加载出来,遇到<script></script>
标签会看有没有src属性,如果有就下载相应的js文件然后执行js,等js执行完毕后在继续向下执行。在这种顺序执行的情况下就会出现第一段话我们说的问题。
解决方案:
- 我们可以把script引入的外部资源统一放到
</body>
标签的前边,也就是放到所有dom节点的后边。 - 通过给script标签增加异步加载属性
异步加载可以使用async\defer两个属性 - 在前边写一个加载外部js的方法
<script>
var script = document.createElement('script');
script.src = 'a.js';
document.querySelector('head').append(script);
</script>
区别
- 把
<script>
标签放到底部的方法是按照代码的顺序执行。
这里主要讨论的是defer和async的区别
defer:是浏览器遇到带有该属性的js文件后台去加载并且代码继续向下执行,然后等到页面的所有dom元素都加载完毕后在执行。
async:是浏览器遇到带有该属性的js文件会取后台进行加载并且代码继续执行,等到js下载完毕后立即执行js并且暂停正在执行的代码,等到js执行完毕,在继续接着执行刚才暂停的代码。
通过上图可以看出,如果script标签是async属性的话是js加载和html执行是同步的,但是到加载完后html停止执行,然后执行js中间会有暂停情况
而defer却是html和js的加载同时进行,然后等html加载完毕后才开始渲染执行js文件。