从输入URL到页面展示发生了什么？ #5
Description
What really happens when you navigate to a URL ?
1. 解析URL
输入的是URL还是搜索的关键字？当协议或主机名不合法时，浏览器会将地址栏中输入的文字给到默认的浏览器。
什么是域名呢？ 举个栗子： http://mail.163.com和https://blog.163.com
http://、https://: 是协议。mail,blog: 这个是服务器名，代表着一个邮箱服务器，博客服务器等。163.com: 这个是域名，是用来定位网站的独一无二的名字mail.163.com: 这个是主机名，由服务器名 + 域名组成https://:mail.163.comURL: Uniform Resource Locator 统一资源定位符，是用位置信息为资源进行编号，是URI的一种。
2. 转换非ASCII的Unicode字符
- 浏览器检查输入是否含有不是 a-z， A-Z，0-9， - 或者 . 的字符
- 如果出现上个步骤中不包含的字符，浏览器会对主机名部分使用 Punycode （国际化域名编码）编码
3. 检查HSTS列表
- 浏览器检查自带的“预加载 HSTS（HTTP严格传输安全）”列表，这个列表里包含了那些请求浏览器只使用HTTPS进行连接的网站
- 如果网站在这个列表里，浏览器会使用 HTTPS 而不是 HTTP 协议，否则，最初的请求会使用HTTP协议发送
- 注意，一个网站哪怕不在 HSTS 列表里，也可以要求浏览器对自己使用 HSTS 政策进行访问。浏览器向网站发出第一个 HTTP 请求之后，网站会返回浏览器一个响应，请求浏览器只使用 HTTPS 发送请求。然而，就是这第一个 HTTP 请求，却可能会使用户受到
downgrade attack的威胁，这也是为什么现代浏览器都预置了 HSTS 列表。
4. DNS解析
- （浏览器缓存: Browser cache）()浏览器检查域名是否在缓存中，（chrome查看DNS缓存：chrome://net-internals/#dns）
- （系统缓存: OS chche）查看本地Host，然后调用
gethostbyname库函数检查系统DNS缓存 - （路由器缓存: Router cache）
The request continues on to your router, which typically has its own DNS cache.
- （ISP DNS缓存: ISP DNS cache）：如果DNS服务器和我们的主机在同一个子网，系统会按照下面的ARP过程对DNS服务器进行查询，如果DNS服务器和我们的主机在不同的子网，系统会按照下面的ARP过程对默认网关进行查询
The next place checked is the cache ISP’s DNS server. With a cache, naturally.
- 上面的查询可以理解为递归查询，而下面的过程即（DNS服务器之间）一般采用迭代查询
- DNS服务器向根域名服务器发送报文查询，根域名服务器返回顶级域
.com的域名服务器地址 - DNS服务器向
.com的域名服务器发送查询报文“query mail.163.com”,得到二级域.163.com的域名服务器地址 - DNS服务器想
.163.com的域名服务器发送查询报文“query mail.163.com”，得到主机mail的记录，存入自身缓存并返回客户端
5. TCP
当浏览器得到了目标服务器的IP地址，以及URL中给出来端口号（http协议默认端口号是80，https默认端口号是443），调用系统库函数 socket，请求一个TCP流套接字
- 这个请求首先被传输层，在传输层请求被封装成 TCP segment。目标端口会被加入头部，源端口会在系统内核的动态端口选取
- TCP segment 被送往网络层，网络层会在其中再加入一个IP头部，里面包含了目标服务器的地址以及本机的IP地址，把它封装成一个IP packet
- 这个 packet 接下来会进入链路层，链路层会在封包中加入 frame 头部，里面包含了本地内置网卡的MAC地址以及网关（本地路由器）的MAC地址。而如果内核不知道网关的MAC地址，他必须进行ARP广播来查询其地址。
- 上面的发送和接受过程在TCP连接期间（三次握手）会发生多次：
- 客户端，
- 服务器，
- 客户端端，
6. ARP （地址解析协议）
发送ARP广播的目的是为了获得目标IP地址对应MAC地址，发送一个（数据链路层）ARP请求，返回一个ARP Reply
7. TLS 握手
8. HTTP
9. 浏览器获得了服务器提供的资源后
通常所谓的浏览器内核（Rendering Engine）也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
常见的内核分类
- Trident [ˈtraɪdnt] 三叉戟（IE内核）
- Gecko [ˈgekəʊ] 壁虎 （Firefox内核）
- Webkit （Safari内核,Chrome内核原型）
- Blink （Chrome：28及往后版本、Opera：15及往后版本）
- EdgeHTML （Microsoft Edge内核）
JavaScript 引擎
- V8 (JIT:源代码通过解析器生成AST后，会送入解释器生成字节码，这部分字节码会被解释器运行，运行一段时间后，得到一个反馈向量表，生成这些信息后，再送入V8的优化编译器生成高效的机器码)
- JavaScriptCore （Nitro）（用于Safari）
- Chakra （IE、Microsoft Edge）
- SpiderMonkey （第一款JavaScript引擎，早起用于Netscape Navigator，现用于 Firefox）
FAQ
浏览器内核和JS引擎
从模块上看，目前，它们是两个独立的模块，分别负责不同的事情：JavaScript引擎负责执行JavaScript代码，而渲染引擎负责渲染网页。JavaScript引擎提供调用接口被渲染引擎使用，渲染引擎使用JavaScript引擎来处理JavaScript代码并获取结果。这当然不是全部，事情不是这么简单，JavaScript引擎需要能够访问渲染引擎构建的DOM树，所以JavaScript引擎通常需要提供桥接的接口，而渲染引擎则根据桥接接口来提供让JavaScript访问DOM的能力。在现在众多的HTML5能力中，很多都是通过JavaScript接口提供给开发者的，所以这部分同样需要根据桥接接口来实现具体类，以便让JavaScript引擎能够回调渲染引擎的具体实现。