一道面试题是如何引发深层次的灵魂拷问？ (8)

（2）浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其它资源（当然有并发上限），但是虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完毕后才会接下来的解析，并行下载只是一种优化而已。

（3）defer 与 async，普通的脚本是会阻塞浏览器解析的，但是可以加上 defer 或 async 属性，这样脚本就变成异步了，可以等到解析完毕后再执行。

注意，defer 和 async 是有区别的：defer 是延迟执行，而 async 是异步执行。

简单的说：

（1）async 是异步执行，异步下载完毕后就会执行，不确保执行顺序，一定在 onload 前，但不确定在 DOMContentLoaded 事件的前或后。

（2）defer 是延迟执行，在浏览器看起来的效果像是将脚本放在了 body 后面一样（虽然按规范应该是在 DOMContentLoaded 事件前，但实际上不同浏览器的优化效果不一样，也有可能在它后面）。

遇到 img 图片类资源

遇到图片等资源时，直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有 src 的地方

10、loaded 和 domcontentloaded

对比：

（1）DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片(譬如如果有 async 加载的脚本就不一定完成)。

（2）load 事件触发时，页面上所有的 DOM，样式表，脚本，图片都已经加载完成了。

十、Reference

1、https://github.com/saucxs/full_stack_knowledge_list

2、https://blog.csdn.net/sinat_21455985/article/details/53508115

3、https://book.douban.com/subject/26960678/

4、https://github.com/kaola-fed/blog/issues/271

其他

songEagle开发知识体系构建，技术分享，项目实战，实验室，带你一起学习新技术，总结学习过程，让你进阶到高级资深工程师，学习项目管理，思考职业发展，生活感悟，充实中成长起来。问题或建议，请公众号留言。

关注福利 1、内推福利

回复「校招」获取内推码

回复「社招」获取内推

回复「实习生」获取内推