web性能权威指南学习笔记 Item02_html 文档由解析器递增解析,从而保证文档可以间隙性发送-CSDN博客

本文链接：https://blog.csdn.net/2401_84446919/article/details/138326492

主要步骤包括：

➊ 请求 HTML 文件，及其编码、字符集和元数据

➋ 对原始 HTML 请求的分块响应

➌ 以 ASCII 十六进制数字表示的分块数据的字节数（ 256 字节）

➍ 分块数据流响应结束

➎ 在同一个 TCP 连接上请求图标文件

➏ 通知服务器不再使用连接了

➐ 图标响应，随后关闭连接

啊，这一次可复杂多了。首先，最明显的差别是这里发送了两次对象请求，一次请求 HTML 页面，一次请求图片，这两次请求都是通过一个连接完成的。这个连接是持久的，因而可以重用 TCP 连接对同一主机发送多次请求，从而实现更快的用户体验。

为终止持久连接，客户端的第二次请求通过 Connection 首部，向服务器明确发送了关闭令牌。类似地，服务器也可以在响应完成后，通知客户端自己想要关闭当前TCP 连接。从技术角度讲，不发送这个令牌，任何一端也可以终止 TCP 连接。但为确保更好地重用连接，客户端和服务器都应该尽可能提供这个信息。

以上就是我们最熟悉的HTTP.1，HTTP 1.1 改变了 HTTP 协议的语义，默认使用持久连接。换句话说，除非明确告知（通过 Connection: close 首部），否则服务器默认会保持连接打开。

不过，这个功能也反向移植到了 HTTP 1.0，可以通过Connection: KeepAlive 首部来启用。实际上，如果你使用的是 HTTP 1.1，从技术上说不需要 Connection: Keep-Alive 首部，但很多客户端还是选择加上它。

优化方向

在了解更宏观的 Web 性能优化之前，先看看下面这些优化方向：

• 浏览器解析和优化方向；

• 延迟和带宽对 Web 性能的影响；

• 传输协议（ TCP）对 HTTP 的限制；

• HTTP 协议自身的功能和缺陷；

浏览器解析过程

我们得先回顾一下浏览器架构，了解一下解析、布局和脚本如何相互配合在屏幕上绘制出像素来。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

浏览器在解析 HTML 文档的基础上构建 DOM（ Document Object Model，文档对象模型）。与此同时，还有一个常常被忽略的模型——CSSOM（ CSS Object Model， CSS 对象模型），也会基于特定的样式表规则和资源构建而成。这两个模型共同创建“渲染树”，之后浏览器就有了足够的信息去进行布局，并在屏幕上绘
制图形。到目前为止，一切都很好理解。

然而，此时不得不提到我们最大的朋友和祸害： JavaScript。脚本执行过程中可能遇到一个同步的 document.write，从而阻塞 DOM 的解析和构建。类似地，脚本也可能查询任何对象的计算样式，从而阻塞 CSS 处理。结果， DOM 及 CSSOM的构建频繁地交织在一起： DOM 构建在 JavaScript 执行完毕前无法进行，而JavaScript 在 CSSOM 构建完成前也无法进行。

应用的性能，特别是首次加载时的“渲染前时间”，直接取决于标记、样式表和JavaScript 这三者之间的依赖关系。顺便说一句，还记得流行的“样式在上，脚本在下”的最佳实践吗？现在你该知道为什么了。渲染和脚本执行都会受样式表的阻塞，因此必须让 CSS 以最快的速度下载完。

与桌面应用相比， Web 应用不需要单独安装，只要输入 URL，按下回车键，就可以正常运行。可是，桌面应用只需要安装一次，而 Web 应用每次访问都需要走一遍“安装过程”——下载资源、构建 DOM 和 CSSOM、运行 JavaScript。正因为如此，Web 性能研究迅速发展，成为人们热议的话题也就不足为怪了。上百个资源、成兆
字节的数据、数十个不同的主机，所有这些都必须在短短几百 ms 内亲密接触一次，才能带来即刻呈现的 Web 体验。

速度、性能与用户期望

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

现在，把 DNS 查询，随后的 TCP 握手，以及请求网页所需的几次往返时间都算上，光网络上的延迟就能轻易突破 100~1000 ms 的预算。难怪有那么多用户，特别是那些移动或无线用户，抱怨上网速度慢了！

分析资源瀑布
谈到 Web 性能，必然要谈资源瀑布。WebPageTest
HTTP 请求的构成（ WebPageTest）
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

资源瀑布图记录的是 HTTP 请求，而连接视图展示了每个 TCP 连接（这里共 30个）的生命期，这些连接用于获取 Yahoo! 主页的资源。哪里比较突出呢？注意蓝色的下载时间，很短，在每个连接的总延迟里几乎微不足道。这里总共发生了 15次 DNS 查询， 30 次 TCP 握手，还有很多等待接收每个响应第一个字节的网络延迟（绿色）。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

最早渲染时间、文档完成时间和最后资源获取时间，这三个时间说明我们讨论 Web性能时有三个不同测量指标。

Web 应用的执行主要涉及三个任务：取得资源、页面布局和渲染、 JavaScript 执行。

其中，渲染和脚本执行在一个线程上交错进行，不可能并发修改生成的 DOM。实际上，优化运行时的渲染和脚本执行是至关重要的，可是，就算优化了 JavaScript 执行和渲染管道，如果浏览器因网络阻塞而等待资源到来，那结果也好不到哪里去。对运行在浏览器中的应用来说，迅速而有效地获取网络资源是第一要义。

针对浏览器的优化建议

大多数浏览器都利用了如下四种技术。

• 资源预取和排定优先次序

文档、 CSS 和 JavaScript 解析器可以与网络协议层沟通，声明每种资源的优先级：初始渲染必需的阻塞资源具有最高优先级，而低优先级的请求可能会被临时保存在队列中。

• DNS预解析

对可能的域名进行提前解析，避免将来 HTTP 请求时的 DNS 延迟。预解析可以通过学习导航历史、用户的鼠标悬停，或其他页面信号来触发。

• TCP预连接

DNS 解析之后，浏览器可以根据预测的 HTTP 请求，推测性地打开 TCP 连接。如果猜对的话，则可以节省一次完整的往返（ TCP 握手）时间。

• 页面预渲染

某些浏览器可以让我们提示下一个可能的目标，从而在隐藏的标签页中预先渲染整个页面。这样，当用户真的触发导航时，就能立即切换过来。

每个页面的结构和交付：

• CSS 和 JavaScript 等重要资源应该尽早在文档中出现；

• 应该尽早交付 CSS，从而解除渲染阻塞并让 JavaScript 执行；

• 非关键性 JavaScript 应该推迟，以避免阻塞 DOM 和 CSSOM 构建；

• HTML 文档由解析器递增解析，从而保证文档可以间隙性发送，以求得最佳性能。

除了优化页面结构，还可以在文档中嵌入提示，以触发浏览器为我们采用其他优化机制：

<link rel="dns-prefetch" href="//hostname_to_resolve.com"> ➊
<link rel="subresource" href="/javascript/myapp.js"> ➋
<link rel="prefetch" href="/images/big.jpeg"> ➌
<link rel="prerender" href="//example.org/next_page.html"> ➍

➊ 预解析特定的域名

➋ 预取得页面后面要用到的关键性资源

➌ 预取得将来导航要用的资源

➍ 根据对用户下一个目标的预测，预渲染特定页面

经典的性能优化最佳实践

无论什么网络，也不管所用网络协议是什么版本，所有应用都应该致力于消除或减少不必要的网络延迟，将需要传输的数据压缩至最少。这两条标准是经典的性能优化最佳实践，是其他数十条性能准则的出发点。

• 减少DNS查找

每一次主机名解析都需要一次网络往返，从而增加请求的延迟时间，同时还会阻塞后续请求。

• 重用TCP连接

尽可能使用持久连接，以消除 TCP 握手和慢启动延迟；参见 2.2.2 节“慢启动”。

• 减少HTTP重定向

HTTP 重定向极费时间，特别是不同域名之间的重定向，更加费时；这里面既有额外的 DNS 查询、 TCP 握手，还有其他延迟。最佳的重定向次数为零。

• 使用CDN（内容分发网络）

把数据放到离用户地理位置更近的地方，可以显著减少每次 TCP 连接的网络延迟，增大吞吐量。这一条既适用于静态内容，也适用于动态内容；
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

HTML、CSS部分截图

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

Vue部分截图