本文只介绍不借助于其他相关辅助工具的情况下 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
来源: http://www.jianshu.com/p/071df96b5843