本文只介绍不借助于其他相关辅助工具的情况下JavaScript文件加载的相关问题。
页面中如果有较多或较为庞大的JavaScript文件加载，那么必须要考虑到性能问题。
否则可能在有些情况下会导致页面显示之后，影响用户体验。
一.阻塞现象：
在默认没有设置其他属性的情况下，在<head>标签内引入外部JavaScript文件会产生阻塞现象。
在加载与执行JavaScript代码的时候，其后的DOM元素的解析会被阻塞，这会延迟页面的显示。
如果JavaScript文件比较庞大或者执行时间较长的话，会严重影响用户体验。
其实也很好理解，如果JavaScript加载执行与DOM解析同步进行的话，可能会产生冲突。
比如DOM已经解析渲染完毕，但是JavaScript代码可能会对其进行操作，这就相当于要做重复工作。
二.采用异步加载：
如果不考虑低版本浏览器，那么只要给<script>标签添加async属性即可实现。
这样就实现了JavaScript文件的异步加载效果，不影响DOM元素的解析渲染，所以体验会更好。
如果要兼容低版本浏览器，比如可以使用require.js等实现异步加载，本文不对其做详细介绍。
还有一种比较常见的方式，就是将引入代码置于body底部，并且最好带上async属性。
虽然在老旧浏览器中并不是异步加载，但是其位于底部，减小了阻塞的影响。
带上async的好处是，当DOM解析器发现<script>引入标签后，会采用异步加载，不会影响CSSDOM的生成。
但是CSSDOM的生成过程会阻塞JavaScript代码的执行，所以代码的执行在CSSDOM之后。
三.代码实例：
上面都是纯理论的介绍，下面通过代码实例简单的演示一下。
非常的简单，可能大家都在其他实例代码中见过响应的应用方式。
`<!doctype html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``"utf-8"``>`
`<``meta` `name``=``"author"` `content``="(http://www.aiqianduan.com/)"/>`
`<``title``>爱前端</``title``>`
`</``head``>`
`<``body``>`
`<!-- body goes here -->`
`<``script` `src``=``"main.js"` `async></``script``>`
`</``body``>`
`</``html``>`
将JavaScript文件的引入放入body的最底部，这样的会前面DOM的解析等受影响降到最低。
`<!doctype html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``"utf-8"``>`
`<``meta` `name``=``"author"` `content``="http://www.softwhy.com/"`/>`
`<``title``>爱前端</``title``>`
`<``script` `src``=``"main.js"` `async></``script``>`
`</``head``>`
`<``body``>`
`<!-- body goes here -->`
`</``body``>`
`</``html``>`
专注全栈大前端，爱前端整理了一批最新WEB前端教学视频，不论是零基础学习还是在职提升，这些资料都会给你带来帮助，爱前端帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。web全栈前端技术交流群：137503198
点击加入群聊【web前端技术学习交流群】
爱前端-专注前端大前端
网友评论