浏览器是如何偷偷优化资源下载的？

文章预览

做 网页相关的性能优化时，需要对浏览器的底层原理有一定的了解，这样才能更好的让页面走在 happy path 上。 今天我们就了解一个很少被人所知的浏览器默认性能优化方案 —— HTML Preload Scanner ，看看它是如何优化网络资源加载速度的。 浏览器如何解析 CSS/JS 资源 我们简单回顾一下浏览器是如何「解析」 HTML/CSS/JS/Image 等主要资源的。 HTML 作为网页入口，肯定是第一个下载的，下载后就会进入一行一行解析环节。解析到子资源的时候，就会存在这么几种经典情况： 1. 如果是 CSS 资源，就要停止 HTML 的解析和渲染，得等到 CSS 解析 & 执行完毕再解析渲染 HTML。 为什么要这样做？假设加载一行 CSS 就渲染一次页面，如果我们有这样的 CSS 文件： /* first rule */ p  {    font-size :  12px ; } /* ... */ /* last rule */ p  {    font-size :  20px ; } 解析执行第一条 CS ………………………………