阅读 4191

一次完整的 Web 请求和渲染过程以及如何优化网页

本文主要介绍访问一个网站时的流程,页面渲染过程,包括其中涉及到的概念。 以及,我们如何去优化前端页面,让它访问速度更快。(critical rendering path最佳渲染路径)

  1. 打开浏览器,输入URL
  2. DNS解析
  3. 完成TCP握手
  4. 发送HTTP请求
  5. 接收HTTP响应结果
  6. 浏览器解析HTML,CSS
  7. 构建对象模型,DOM tree 和 CSSOM tree,组成render tree
  8. 浏览器渲染页面(布局)

HTTP1.x和HTTP2

在 HTTP/1.x 中,如果客户端要想发起多个并行请求以提升性能,则必须使用多个 TCP 连接。 这是 HTTP/1.x 交付模型的直接结果,该模型可以保证每个连接每次只交付一个响应(响应排队)。 更糟糕的是,这种模型也会导致队首阻塞,从而造成底层 TCP 连接的效率低下。 也就是说在目前的HTTP1.X的协议下,浏览器对资源的并发请求个数是有限制的。 等到HTTP2到来的时候,通过二进制分帧层进行优化。 HTTP/2 中新的二进制分帧层突破了这些限制,实现了完整的请求和响应复用:客户端和服务器可以将 HTTP 消息分解为互不依赖的帧,然后交错发送,最后再在另一端把它们重新组装起来。

优势:

  • 并行交错地发送多个请求,请求之间互不影响。
  • 并行交错地发送多个响应,响应之间互不干扰。
  • 使用一个连接并行发送多个请求和响应。

但这些并不是我们能够优化的部分。

基于现在的网络条件,我们可以采用多个CDN地址,进行不同源的并发改善优化。 这篇文章主要介绍,第六步开始我们可以优化的部分,也就是解析HTML,CSS。

浏览器是如何构建对象模型的?

  • 字节 → 字符 → 令牌 → 节点 → 对象模型。
  • HTML标记与CSS标记都会经历上述过程,HTML变为DOM,CSS变为CSSOM

render tree构建,布局以及绘制

构建好render tree之后,会过滤掉display:none 这种无需渲染的节点。将tree渲染到页面。

值得注意的是,每一次的dom或者造成布局影响的变动,都会触发 reflow(回流/重排),会消耗很大的页面资源。

reflow是由于dom或者布局的变动而触发,如修改了dom位置,或是宽高,margin, padding等。 repaint是样式风格修改,不影响布局时触发,如改了颜色之类的

提高网页渲染速度,主要可以减少 DOM, CSSOM处理, 合并render tree,以及 减少reflow的次数

前端页面优化,减少reflow的方法这里可以看看如何减少reflow的次数

对CSS的优化

根据上面的内容我们知道了,想要渲染页面必须有render tree,而render tree是由DOM tree以及CSSOM tree组成的。

  • 默认下,CSS会阻塞渲染页面
  • 我们通过@media等,可以让CSS标记为不阻塞渲染
  • 不论是否阻塞渲染,浏览器都会将CSS资源下载到客户端

所以,为了让页面更快的渲染,*我们必须要尽早的将CSS资源下载到我们的客户端。*以及使用@media进行优化

为了获得最佳性能,你可以使用一些inline css,这样不会去CDN获取资源,从而造成多次往返

对JS的优化

当 HTML 解析器遇到一个 script 标记时,它会暂停构建 DOM,将控制权移交给 JavaScript 引擎;等 JavaScript 引擎运行完毕,浏览器会从中断的地方恢复 DOM 构建。

这也就是为什么我们需要将script tag放在页面的底部。 /React APP一般会如此使用。因为React需要将整个APP 渲染到一个DOM节点上,如果放置在DOM之上,会造成React找不到该渲染的节点,从而报错/

而我们一般不建议在render tree刚刚建立的时候,就使用JS去操作DOM,从而造成reflow,也就是说,希望JS不要成为render tree的一部分。这个时候,我们将<script> 放在页面靠下的部分就可以不阻塞页面的渲染。

如果你的<script>是从CDN获取资源,那么等待的过程也会造成一定的阻塞。

你可以将<script>加上 async,让它变为异步加载。

为了实现最佳性能,建议去除关键渲染路径中任何不必要的JavaScript

/关键渲染路径是指优先显示与当前用户操作有关的内容。/

相关文章:

一次完整的web请求和渲染过程以及如何优化网页

前端基础知识之什么是节点Node?

前端页面优化,减少reflow的方法

关注下面的标签,发现更多相似文章
评论