输入URL按下回车键后发生了什么

细说浏览器输入URL后发生了什么

TCP三次握手

史上最全！图解浏览器的工作原理

Chrome浏览器，在40以后，已经取消了，改成支持HTTP/2SPDY（读作“SPeeDY”）是Google开发的基于TCP的会话层 [1] 协议，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。新协议的功能包括数据流的多路复用、请求优先级以及HTTP报头压缩。谷歌表示，引入SPDY协议后，在实验室测试中页面加载速度比原先快64%。

是

Safe Browsing 检查，CORB

否

网络层会在其中再加入一个 IP 头部，里面包含了目标服务器的IP地址以及本机的IP地址，把它封装成一个IP packet。

TLS握手

JS 的下载与执行

服务器分解请求

证书校验

网页中常常包含诸如图片，CSS，JS 等额外的资源，这些资源需要从网络上或者 cache 中获取。

浏览器渲染

判断MIME-Type是否为HTML

根据请求信息获取相应的响应内容

查询DNS

查找DNS服务器

SPDY

输入URL按下回车

HSTS的作用是强制客户端（如浏览器）使用HTTPS与服务器创建连接。当客户端访问HTTPS网站服务器时，服务器返回：Strict-Transport-Security: max-age=31536000; includeSubDomains。这意味着接下来一年内发给该域名及子域名的内容必须通过HTTPS通道。浏览器支持这种特性，哪怕用户输入的时http，浏览器也会自动变成https。通过这种方式就避免了收到降级攻击。chrome://net-internals/#hstshttps://cs.chromium.org/codesearch/f/chromium/src/net/http/transport_security_state_static.json?cl=6c7daa4194cb3b8bf5f4fb0a72953d67ab23ce04

查找浏览器DNS缓存

构建 DOM

HTTPS？

键盘按下发生的指令过程，涉及到不同输入设备原理，以及操作系统中断，不同操作系统的处理输入信号的逻辑。这些都是另外的故事了......

OpenSearch的是Amazon.com子公司A9公司所提出的一种分享搜寻结果的简单的格式，它于2005年3月首次在O'Reilly新兴技术会议上提出OpenSearch1.0版本。使用版本为1.1版。地址栏输入 baidu.com 按下tabhttps://github.com/qiongyue/opensearch/blob/master/baidu.xml

服务器会尝试匹配重写规则

获取布局

GET / HTTP/1.1Host: google.comConnection: close[其他头部]

传输层请求被封装成 TCP segment。目标端口会被加入头部，源端口会在系统内核的动态端口范围内选取

检查主机部分是否为非Ascii

ARP（Address Resolution Protocol）即地址解析协议， 用于实现从 IP 地址到 MAC 地址的映射，即询问目标IP对应的MAC地址。（最不安全的协议）\"网络扫描\"、\"内网渗透\"、\"中间人拦截\"、\"局域网流控\"、\"流量欺骗\"，基本都跟ARP脱不了干系。请求放发起广播查询，接受放单播回复。这个过程极易被攻击，偷换目标地址。ARP冒充网关，导致整个网络访问非常慢，盗取账号传奇木马 （Trojan/PSW.LMir）ARP缓存  arp -a

查找本地局域网WINS服务器

判断URL是否为HTTP

HTTP/1

DNS （Domain Name System 的缩写）的作用非常简单，就是根据域名查出IP地址。你可以把它想象成一本巨大的电话本。举例来说，如果你要访问域名math.stackexchange.com，首先要通过DNS查出它的IP地址是151.101.129.69。对于大型网站，DNS请求往往会由负载均衡服务，返回一个就近的IP地址给用户。nslookup www.baidu.com  8.8.8.8

网络层

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。对于大型网站，特别是视频类，往往会有CDN网络，对于静态资源的请求，CDN负载均衡系统会将资源请求定向到就近的镜像节点。传统的CDN网络只支持静态资源加速，现在也有一些云厂商提供动态资源的加速。查看F12内容

尾声：由于Chrome浏览器内核现在的统治地位，很多环节都是针对这个浏览器来介绍的，事实上还有其他的优秀浏览器，它们的机制有不同。对于操作系统内部机制，比如：输入的响应，渲染的原理，线程机制等内容，和我们公司目前的开发内容不太相关，所以只是带过。这些材料都非我原创，只是从网上搬运了其他人的智慧，和大家一起分享，文档里都有链接地址，可以自行查阅。

链路层会在封包中加入 frame 头部，里面包含了本地内置网卡的MAC地址以及网关（本地路由器）的 MAC 地址。像前面说的一样，如果内核不知道网关的 MAC 地址，它必须进行 ARP 广播来查询其地址。

TCP 封包已经准备好了，可以使用下面的方式进行传输：以太网WiFi蜂窝数据网络

语言本身的“宽容”特性HTML 本身可能是残缺的，对于常见的残缺，浏览器需要有传统的容错机制来支持它们解析过程需要反复。对于其他语言来说，源码不会在解析过程中发生变化，但是对于 HTML 来说，动态代码，例如脚本元素中包含的 document.write() 方法会在源码中添加内容，也就是说，解析过程实际上会改变输入的内容

HTTP/2

http://ddrv.cn/a/17181

现代浏览器基本结构用户界面 用户界面包含了地址栏，前进后退按钮，书签菜单等等，除了请求页面之外所有你看到的内容都是用户界面的一部分浏览器引擎 浏览器引擎负责让 UI 和渲染引擎协调工作渲染引擎 渲染引擎负责展示请求内容。如果请求的内容是 HTML，渲染引擎会解析 HTML 和 CSS，然后将内容展示在屏幕上网络组件 网络组件负责网络调用，例如 HTTP 请求等，使用一个平台无关接口，下层是针对不同平台的具体实现UI后端 UI 后端用于绘制基本 UI 组件，例如下拉列表框和窗口。UI 后端暴露一个统一的平台无关的接口，下层使用操作系统的 UI 方法实现Javascript 引擎 Javascript 引擎用于解析和执行 Javascript 代码数据存储 数据存储组件是一个持久层。浏览器可能需要在本地存储各种各样的数据，例如 Cookie 等。浏览器也需要支持诸如 localStorage，IndexedDB，WebSQL 和 FileSystem 之类的存储机制

利用搜索引擎搜索

链路层

通过CPU/GPU渲染

其他渲染

查找操作系统缓存

当遇到 <script> 标签时，渲染进程会停止解析 HTML，而去加载，解析和执行 JS 代码，停止解析 html 的原因在于 JS 可能会改变 DOM 的结构（使用诸如 documwnt.write()等 API）。不过开发者其实也有多种方式来告知浏览器应对如何应对某个资源，比如说如果在<script> 标签上添加了 async 或 defer 等属性，浏览器会异步的加载和执行 JS 代码，而不会阻塞渲染。

指定的处理程序分析处理这个文件，如：PHP

物理层

协议通讯

使用Punycode 编码

Chrome浏览器：chrome://net-internals/#dns

加载次级的资源

HTTPD（服务器端）

HTTP/2二进制格式多路复用 (Multiplexing)头压缩服务端推送

绘制各元素

HTTP/2渲染对比

验证其上已经配置了 google.com 的虚拟主机

gethostbyname函数在试图进行DNS解析之前首先检查域名是否在本地 Hosts 里

即使知道了不同元素的位置及样式信息，我们还需要知道不同元素的绘制先后顺序才能正确绘制出整个页面。在绘制阶段，主线程会遍历布局树以创建绘制记录。

返回请求内容

OSI七层模型

ipconfig /displaydns

验证 google.com 是否接受 GET 方法

发起TCP连接三次握手

URI = scheme:[//authority]path[?query][#fragment]URL http://www.joes-hardware.com/seasonal/index-fall.html。 那么 URL 分以下三部分。URL 的第一部分（http）是• URL 方案（scheme）。方案可以告知 Web 客户端怎 样访问资源。在这个例子中，URL 说明要使用 HTTP 协议。URL 的第二部分（www.joes-hardware.com）指的是服务器的位置。这部分告知• Web 客户端资源位于何处。 URL 的第三部分（/seasonal/index-fall.html）是资源路径。路径说明了请求的是• 服务器上哪个特定的本地资源。 

是否包含域名

合成帧

HSTS 列表检测

从URL里获取端口，默认情况下，http为80端口，https为443端口

是否为HTTPS请求

传输层

当···时发生了什么？

通过遍历 DOM 及相关元素的计算样式，主线程会构建出包含每个元素的坐标信息及盒子大小的布局树。布局树和 DOM 树类似，但是其中只包含页面可见的元素，如果一个元素设置了 display:none ，这个元素不会出现在布局树上，伪元素虽然在 DOM 树上不可见，但是在布局树上是可见的。

强制转换HTTPS

验证该用户可以使用 GET 方法(根据 IP 地址，身份信息等)

仅仅渲染 DOM 还不足以获知页面的具体样式，主进程还会基于 CSS 选择器解析 CSS 获取每一个节点的最终的计算样式值。即使不提供任何 CSS，浏览器对每个元素也会有一个默认的样式。

HTTP请求

国际化域名编码[1]（英语：Punycode）是一种表示Unicode码和ASCII码的有限的字符集。例如：“阿里巴巴.com”（德国慕尼黑）会被编码为“xn--tsta8290bfzd.com”。https://www.punycoder.com/臭名昭著的中文域名和3721故事，自行搜索当时互联网域名炒作的非常厉害，腾讯连续丧失了oicq.com qq.com.cn qq.cn后，惊险的以10万美元价格从一个美国人手里买到了 qq.com

样式计算

复合是一种分割页面为不同的层，并单独栅格化，随后组合为帧的技术。不同层的组合由 compositor 线程（合成器线程）完成。主线程会遍历布局树来创建层树（layer tree），添加了 will-change CSS 属性的元素，会被看做单独的一层。一旦层树被创建，渲染顺序被确定，主线程会把这些信息通知给合成器线程，合成器线程会栅格化每一层。有的层的可以达到整个页面的大小，因此，合成器线程将它们分成多个磁贴，并将每个磁贴发送到栅格线程，栅格线程会栅格化每一个磁贴并存储在 GPU 显存中。