浏览器输入url 按下回车发生了什么
浏览器输入url 按下回车发生了什么?
耗时的角度分析：
- DNS 查询
- TCP 连接
- HTTP 请求及响应
- 服务器响应
- 客户端渲染
DNS查询
- DNS（Domain Name System, 域名系统）
- 是域名和IP地址相互映射的一个分布式数据库
- DNS 查询就是将域名转换成 IP 的过程
- DNS Prefetch 浏览器会对其IP进行缓存，有效缩短了DNS的解析时间
- 自动解析： 当遇到a标签，自动将href中的域名解析为IP地址。但是HTTPS页面中不会自动解析。
- 手动解析：
// 希望在HTTPS页面开启自动解析功能时
<meta http-equiv="x-dns-prefetch-control" content="on">
// 希望在HTTP页面关闭自动解析功能时，添加如下标记：
<meta http-equiv="x-dns-prefetch-control" content="off">
// 让浏览器预取"//XXXX.com"的解析
<link rel="dns-prefetch" href="//XXXX.com" />
TCP 连接
一个TCP连接可以同时发送几个HTTP请求？
- HTTP/1.1中，单个TCP连接，在同一时间只能处理一个http请求，虽然存在Pipelining技术支持多个请求同时发送，但存在很多问题无法解决，浏览器默认关闭，所以认为是不支持同时多个请求。
- HTTP2提供了多路传输功能，多个http请求，可以同时在同一个TCP连接中进行传输。
浏览器与服务器建立一个TCP连接后，是否会在完成一个http请求后断开？什么条件下会断开？
- HTTP/1.1将 Connection 写入了标准，默认值为 keep-alive 。除非强制设置为Connection: close 才会在请求后关闭TCP连接
浏览器http请求的并发性是如何体现的？并发请求的数量有没有限制？
- 页面资源请求时，浏览器会同时和服务器建立多个TCP连接，在同一个TCP连接上顺序处理多个HTTP请求。
- 浏览器的并发性体现在可以建立多个TCP连接，来支持多个http同时请求。
- Chrome浏览器最多允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别。
HTTP 请求及响应
HTTP?
- 他就是计算机通过网络进行通信的规则，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据。
HTTP请求报文?
- 一个HTTP请求报文由请求行（request line）、请求头部（header）、空行和请求数据4个部分组成
请求头部?
| 请求头 | 说明 |
|---|---|
| Host | 接受请求的服务器地址 IP:端口 或 域名 |
| User-Agent | 请求的应用程序名称 |
| Connection | 连接形式 Connection：Keep-Alive |
| Accept-Charset | 通知服务器可以发送的编码格式 |
| Accept-Encoding | 通知服务器可以发送的数据压缩格式 |
| Accept-Language | 通知服务器可以发送的语言 |
post的请求报文
POST /index.php HTTP/1.1 请求行
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 请求头
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: http://localhost/
Content-Length：25
Content-Type：application/x-www-form-urlencoded
空行
username=admin&password=123456 请求数据
- 请求头部的最后会有一个空行，表示请求头部结束，接下来为请求数据，这一行非常重要，必不可少。
为什么要TCP三次握手，四次挥手?
- 客户端和服务器通过三次握手建立了TCP连接以后，TCP的断开连接，这里就有了的“四次分手”
- 为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。
服务器响应
响应报文的
HTTP/1.1 200 OK // 状态行
Date: Sun, 17 Mar 2013 08:12:54 GMT // 响应头部
Server: Apache/2.2.8 (Win32) PHP/5.2.5
X-Powered-By: PHP/5.2.5
Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 4393
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
image
空行 // 表示结束
<html> 响应数据
<head>
<title>HTTP响应<title>
</head>
<body>
'你好'
</body>
</html>
客户端渲染
解析过程：
js修改dom结构或样式 -> 计算style -> layout(重排) -> paint(重绘) -> composite(合成)
- Html Parser 解析 html 构建
Dom Tree - Css Parser 解析 css 构建
CSS Rule Tree - 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造
Rendering Tree - 最后通过调用操作系统
Native GUI的API绘制。
WebKit CSS 解析器：
image.png
#head .warp div span { color: 'red' }
- 以上代码浏览器会按照从右向左的顺序去读取选择器
- display:none 不会被放在渲染树中 visibility: hidden 会被放入渲染树
JS解析：
- 比较有名的有 Chrome 的 V8 引擎，可以引入事件循环进行分析
- 对JavaScript文本代码通过词法和语法分析形成抽象语法树
