浏览器解析HTML文档的资源并下载

<img />,<style>这些资源是并行请求与加载。

<script>脚本是同步请求与加载，阻塞加载。加载完成并执行后再继续解析HTML。

动态<script>是异步加载，就是说可以同时加载其他资源。

 

关于<script>的执行，分为立即执行和延迟执行。

 

 

对于浏览器来说，不管是<style>, <img />, <script>都是一视同仁，都是并行请求多个资源文件并加载，而不是一次只请求一个资源并加载。

只不过最大连接数有限制， 为6个或2个，并行加载6个资源。

 

但是遇到<script>会有特殊，即阻塞加载其他资源，比如<img/>等。

<script>加载与执行两个阶段，加载是阻塞其他资源的加载，执行也会阻塞。

执行是肯定会阻塞，这个没有什么异步执行，只有延迟执行和立即执行。

加载是并行加载，但是<script>特殊，故分为同步和异步加载。

 

---

 

HTML解析过程中，遇到<style>, <img/>, <script>会去并行加载外部资源。

同步加载（阻塞模式）但是遇到<script>时，会阻止浏览器的后续处理，停止后续的HTLM的解析，因此阻塞后续页面的处理，比如<img/>, <script>, <style>等资源的加载，以及HTML的渲染，和代码的执行。

异步加载（非阻塞），下载js的同时，还会继续进行后续页面的处理。

 

 js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

 

<script>的阻塞不仅仅是资源文件的加载，而是HTML的解析和渲染，导致了不能加载包含的资源文件。

 

执行JS必然会阻塞其他一切资源的加载，但是异步加载不会阻塞资源的加载。

但是加载完之后是立即执行还是延迟执行这个可以通过defer来指定。

async异步加载，立即执行。

defer异步加载，延迟执行。