script脚本阻塞解决方案

---

前言

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

---

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

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

二、script脚本阻塞解决方案

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

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

2. defer延迟加载

<script src="" defer></script>在文档解析完成开始执行，并且在 DOMContentLoaded 事件之前执行