当我们在浏览器中输入一个URL后,发生了什么?

写在开首:这篇文章被我归入博客机能优化种别,是因为我以为假如我们要优化网站机能、提拔用户体验,主要目的就是要知道用户在当地要求并加载你的网页的历程当中,究竟发作了什么,在此基础上我们才更好的优化网页。

原文宣布在我的个人博客: kmknkk.xin

《当我们在浏览器中输入一个URL后,发生了什么?》
图源:知乎-张秋怡

浏览器剖析并查询缓存

DNS查询

  • DNS查询递次以下,若个中一步胜利则直接跳到竖立链接部份:

    • 浏览器本身DNS
    • 操纵体系DNS
    • 当地hosts文件
    • 向域名服务器发送要求

竖立链接

  • TCP三次握手(three-way handshaking)

    • 发送方:SYN(synchronize)
    • 接收方:SYN/ACK(acknowledgement),确认信息转达
    • 发送方:ACK – 确认接收方在线可收音讯,握手完毕
    • Accept

《当我们在浏览器中输入一个URL后,发生了什么?》

TCP三次握手的的优点在于:发送方能够确认接收方依然在线,不会因为白发送而浪费资本。

发送HTTP要求

  • 报文首部(GET /index.html HTTP/1.1)

    • 要领
    • URL
    • HTTP版本
  • 空行(CR+LF)
  • 报文主体

注重:
1.HTTP是无衔接无状况的,即HTTP在传输完成后就会断开(HTTP1.1之前),而且不会纪录访问者的状况。

从HTTP/1.1最先才默许支撑耐久化衔接,即通讯一次今后衔接不中缀,HTTP/1.0须要手动设置:keep-alive。

一般来讲,HTTP要求、相应体式格局为每要求一次就相应一次:

要求1 -> 相应1 -> 要求2 -> 相应2 -> 要求3 -> 相应3

若采纳耐久衔接要求管线化体式格局:

要求1 -> 要求2 -> 要求3 -> 相应1 -> 相应2 -> 相应3

运用管线化的前提:

  • 服务端须要支撑管线化
  • 只要GET和HEAD能够举行管线化,POST要求有所限定
  • 管线化不会影响相应到来的递次

2.关于CR(Carriage Return,回车)和LF(Line Feed,换行)

Dos和Windows采纳CR/LF示意下一行

UNIX/Linux采纳LF示意下一行

MAC OS体系则采纳CR示意下一行

服务器发送相应

  • 报文首部(HTTP/1.1 200 OK)

    • HTTP版本
    • 相应状况码
    • 状况码信息
  • 空行(CR+LF)
  • 报文主体

客户端收到页面,浏览器衬着页面

实行以下历程:
《当我们在浏览器中输入一个URL后,发生了什么?》

剖析HTML

  • 依据DOCTYPE来肯定文档范例(最罕见的就是HTML5,注重假如是HTML4的话有严厉和宽松形式之分)
  • 构建DOM树(依据HTML构建类似于二叉树的构造树)
  • 下载资本

    • CSS – 构建CSSOM树
    • js – 等下下载并实行后剖析

浏览器衬着

在聊浏览器衬着之前,我们先明白一个观点: 事实上,我们看到的页面并非直观所见的一层图页,而是由很多DOM元素衬着层(Layers)组成的,以下图。

《当我们在浏览器中输入一个URL后,发生了什么?》

页面的衬着历程

所以一个的页面的衬着历程由以下几步组成:

  • 构建衬着树(Render Tree): 依据DOM和CSSOM树衬着,不可见元素不被会衬着

《当我们在浏览器中输入一个URL后,发生了什么?》

  • 规划(layout): CPU依据衬着树规划盘算元素的具体位置和大小,转换成相对像素,而且依据款式,分割成多个自力的衬着层(Layers),将每一层对应到位图中
  • 绘制(Paint): GPU依据每一个衬着层(Layers)的位图绘制每一个点,即像素添补,而且将所以衬着层缓存,假以下次页面更改然则衬着层没变就不会触发重绘。
  • 层级合成(Compositing): 望文生义,即处置惩罚多层衬着层之间的关联,将其合成为一个完全的页面。

重绘和重排

重绘(repaint):

  • 元素视觉表现属性被转变即触发重绘,如转变visibility,color等,不会影响到dom构造

reflow(重排):

  • 与repaint区分就是:一切影响dom的元素规划的事宜都邑触发重排。同时也会触发repaint。
  • 这类开支是异常高贵的,致使机能下落是必定的,页面元素越多结果越显著。

reflow罕见状况:

  • 增编削DOM节点
  • 挪动DOM的位置或是动画显现(所以只管用canvas来做动画)
  • 修正width、display等CSS款式
  • resize窗口或是转动的时刻
  • 修正网页默许字体(不发起)
  • display:none会触发reflow和repaint,而visibility:hidden只会发作repaint

不言而喻,要进步页面机能,主要目的就是削减重绘重排,具体要领包含当不限于以下几种:

  • 紧缩DOM深度,以避免内层元素转变而致使多个外层都转变。
  • 关于没用的元素,只管设置为display:none,减轻绘制压力。
  • 在对DOM举行大批元素操纵时,我们能够运用应用DocumentFragment对象举行操纵,末了再一次性装载进DOM构造中。
  • 指定img的大小:因为img是内联元素,所以在加载后会转变宽高,严峻的会致使全部页面重排,所以最幸亏衬着前就设置好其宽高,或许让其离开文档流。

DOM衬着层(Layers)与GPU硬件加快

知道了浏览器页面的衬着合成历程后,我们不难得出一个结论:

假如我们把会发作大批重绘重排的元素提取出来,零丁触发一个衬着层(Layer),就不会把其他元素一同带偏重绘,这会大大进步页面机能。

那末怎样触发衬着层,让GPU来加快绘制呢?最简朴的要领有以下三种:

will-change: transform;
will-change: opacity;
transform: translateZ(0);

PS:运用Layers来触发GPU加快(硬件加快)也会带来负面影响,如电量丧失过快、占用内存和GPU等。所以在运用中要注重不能滥用,在常触发重绘和重排的元素上运用即可。

    原文作者:muffinfish
    原文地址: https://segmentfault.com/a/1190000015725567
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞