在HTML中使用JavaScript（浏览器对js的加载机制分析）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言：

向HTML页面中插入JavaScrip的主要方法，就是使用<script>标签。主要探讨<script>标签的在HTML页面的渲染机制。对应的业务场景：从js的加载机制，去优化首次加载页面白屏时间过长的问题

要点：

1.script标签用外链的src引入文件时，内嵌的js代码无效。

2.只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析（文件下载和代码执行）。换句话说，在第一个外链script下载 -> 执行，由于浏览器做了预解析的优化，在第一个js执行的过程中，后面的几个js会并行下载。第一个script执行完成 -> 第二个外链script下载完成 -> 执行，然后第三个，第四个……。这种方式会阻塞页面的渲染。

3.defer：延迟脚本。脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载，但是延迟执行。这种方式不阻塞页面的渲染。h5规范要求脚本按照出现的顺序执行，因此第一个延迟的脚本会优先于第二延迟脚本执行，都会先于DOMContentLoaded事情。在现实中，可能顺序不能一定得到保证。ps：用最新谷歌浏览器测试过，能保证顺序。

4.async：异步脚本。与defer类似，告诉浏览器立即下载文件，但是延迟执行，也不阻塞页面渲染。但是不能保证执行顺序。所有，带有async属性的script文件之间无法保证顺序，不应该有包含互相依赖的js代码。

补充：

1. 来自阮一峰博客对defer和async异同点说明

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

2.外链js加载和link外链css加载的对比和关系

1.link和外链js的下载和执行都是阻塞页面渲染的。

2.link和外链js的下载是并行的。但是不是谁先下载完先执行，执行顺序是按上下顺利依次执行的。