前言

今天一起看一看浏览器是如何加载页面的，以及script脚本放置位置对于加载会有什么样的影响，一起来看看有什么解决方案吧~

一、浏览器是如何加载页面的？

从浏览器地址栏的请求链接开始，浏览器通过 DNS 解析查到域名映射的 IP 地址，成功 之后浏览器端向此 IP 地址取得连接。成功连接之后，浏览器端将请求信息通过 HTTP 协 议向此 IP 地址所在服务器发起请求，服务器接收到请求之后等待处理，最后向浏览器端 发回响应，此时在 HTTP 协议下，浏览器从服务器接收到 text/html 类型的代码，浏览器 开始显示此 html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源， 并在浏览器的 html 中显示。

二、script脚本阻塞解决方案

1. 推迟加载（延迟加载）

如果页面初始的渲染并不依赖于 js 或者 CSS 可以用推迟加载，就是最后在加载 js 和 css， 把引用外部文件的代码写在最后。

2. defer延迟加载

<script src="" defer></script>在文档解析完成开始执行，并且在 DOMContentLoaded 事件之前执行完成，会按照他们在文档出现的顺序去下载解析。效果和把 script 放在文档最后之前是一样的。

注：defer 最好用在引用外部文件中使用，用了 defer 不要使用 document.write()方法;使用 defer 时最好不要请求样式信息，因为样式表可能尚未加载，浏览器会禁止该脚本等待样式表加载完成，相当于样式表阻塞脚本执行。

3. 异步加载

async 异步加载：就是告诉浏览器不必等到加载完外部文件，可以边渲染边下载，什么 时候下载完成什么时候执行。<script type="text/javascript" src="a.js" async></script>

defer 和 async 的区别：<script async src="example.js"></script>有了 async 属性，表示 后续文档的加载和渲染与 js 脚本的加载和执行是并行进行的，即异步执行； <script defer src="example.js"></script>，有了 defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)，js 脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded 事件触发执行之前。

总结

Ideal is the beacon. Without ideal, there is no secure direction; without direction ,there is no life.