当我们在浏览器中输入一个URL后,发生了什么?
写在开头:这篇文章被我归入博客性能优化类别,是因为我认为如果我们要优化网站性能、提升用户体验,首要目标就是要知道用户在本地请求并加载你的网页的过程中,到底发生了什么,在此基础上我们才能更好的优化网页。
原文发表在我的个人博客: kmknkk.xin
图源:知乎-张秋怡
浏览器解析并查询缓存
DNS查询
DNS查询顺序如下,若其中一步成功则直接跳到建立链接部分:
- 浏览器自身DNS
- 操作系统DNS
- 本地hosts文件
- 向域名服务器发送请求
建立链接
TCP三次握手(three-way handshaking)
- 发送方:SYN(synchronize)
- 接收方:SYN/ACK(acknowledgement),确认信息传达
- 发送方:ACK - 确认接收方在线可收消息,握手结束
- Accept
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)
- 报文主体
客户端收到页面,浏览器渲染页面
执行以下过程:
解析HTML
- 根据DOCTYPE来确定文档类型(最常见的就是HTML5,注意如果是HTML4的话有严格和宽松模式之分)
- 构建DOM树(根据HTML构建类似于二叉树的结构树)
下载资源
- CSS - 构建CSSOM树
- js - 等下下载并执行后解析
浏览器渲染
在聊浏览器渲染之前,我们先明确一个概念: 事实上,我们看到的页面并不是直观所见的一层图页,而是由许多DOM元素渲染层(Layers)组成的,如下图。
页面的渲染过程
所以一个的页面的渲染过程由如下几步构成:
- 构建渲染树(Render Tree): 根据DOM和CSSOM树渲染,不可见元素不被会渲染
- 布局(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等。所以在使用中要注意不能滥用,在常触发重绘和重排的元素上使用即可。
当我们在浏览器中输入一个URL后,发生了什么?相关推荐
- c++软件开发面试旋极面试题_经典软件开发面试题:浏览器中输入一个网址后发生了什么?...
经典软件开发面试题:浏览器中输入一个网址后发生了什么? 大家好, 这一期呢,我们来谈一个经典的面试题.这种题目是在浏览器中输入一个网址以后, 会显示一个网页,这期间到底发生了什么? 答案要求说的越 ...
- 【计算机网络漫游】浏览器输入一个URL后发生了什么
浏览器输入一个URL之后发生了什么?这个问题一直是一个非常经典的问题,透过这个问题,我们可以从数据包的角度,自顶向下 (也可以自底向上) 地理解计算机网络各层发生的事情,同时也是一个面试的热点问题.但 ...
- 当你在浏览器地址栏输入一个URL后回车,将会发生的事情?
之前和前辈交流,他问了我这样一个问题,自己一时没有答上来,今天可以研究了一下,看到了一篇很不错的博客,转载过来,供大家学习. 原文地址:http://blog.csdn.net/libin_1/art ...
- 当你在浏览器地址栏输入一个URL后回车,浏览器做了什么?
以下是一个大概流程: 1. 浏览器向DNS服务器查找输入URL对应的IP地址. 2. DNS服务器返回网站的IP地址. 3. 浏览器根据IP地址与目标web服务器在80端口上建立TCP连接 4. 浏览 ...
- 当在浏览器地址栏输入一个URL后回车,将会发生的事情?
作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...
- 在浏览器地址栏输入一个URL后回车,执行的全部过程
作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等. 本文将更深入的研究当你输入一个网址 ...
- 当在浏览器中输入一个域名后,会发生什么
今天,去哪儿网Geely老师分享了他在校招时的一个面试题:当输www.qunar.com时发生了什么.(真不是做广告哈) 因为学的并没有很扎实,不能更深更广的分析这个问题,遂---百度一下,发现这篇文 ...
- 头条面试官:在浏览器地址栏输入一个URL后回车,背后会进行哪些技术步骤?
本题为头条校招测开经典面试题,如果你去看过头条面经合集,会发现3次面试里至少出现有1次,也是非常基础的一个知识点. 好了,不说废话. 先上答案,一共6个步骤: DNS解析 TCP连接 发送http请求 ...
- [IT]当你在浏览器地址栏输入一个URL后回车,将会发生的事情?
原文:What really happens when you navigate to a URL 作为一个软件开发者,你一定会对网络应用如何工作有一个完整的层次化的认知,同样这里也包括这些应用所用到 ...
最新文章
- Linux 的内存管理工具和调优参数
- userdel、usermod、newgrp、chown、chgrp、手动添加用户、umask
- springboot-整合freemarker
- 利用Jquery处理跨域请求
- python tempfile自动删除_Python tempfile模块生成临时文件和临时目录
- WordPress简洁博客主题:Sweet主题
- ROBOTSTXT_OBEY
- IC卡清卡软件的使用
- 汉风西游辅助使用方法(此方法适用于红手指虚拟云手机和电脑雷电模拟器)
- 怎么解决文件正在使用无法删除----资源监视器
- java压缩文件夹并加密
- 蒸馏论文三(Similarity-Preserving)
- python输入hello*3_Python快速上手: hello world
- linux命令行选项英文全称,【转载】Linux命令英文全称(方便理解)
- 一个菜鸡关于区块链的个人见解
- 前端面试题:如何让元素水平垂直居中?
- U盘内容被病毒隐藏的解决办法(亲测可用)
- R语言主成分分析总结
- 闭环系统的零极点图判定稳定性_《自动控制原理》课后习题答案.doc
- Unity3d--改进飞碟游戏 作业6