个人笔记：关于浏览器输入url到页面渲染的流程

从输入URL到页面加载的全过程

（1）浏览器输入地址点击回车------（2）浏览器查看当前浏览器是否存在缓存------（3）dns解析url对应的ip-----（4）根据ip简历tcp链接中间进行三次握手-----（5）http发送请求-----（6）服务器处理http请求 浏览器处理http响应------（7）渲染页面构建dom树-----（8）关闭TCP连接（四次挥手）

url地址

url地址包含：协议名、域名、端口号，
常见的协: http、https、FTP协议、FILe协议。

缓存

强制缓存and对比缓存

强制缓存：当浏览器向服务器发送请求的时候，服务器会将缓存规则放入HTTP响应的报文的HTTP头中和请求结果一起返回给浏览器，控制强制缓存的字段分别是Expires和Cache-Control，其中Cache-Conctrol的优先级比Expires高。
（1） Expires是HTTP/1.0控制网页缓存的字段，其值为服务器返回该请求的结果缓存的到期时间，即再次发送请求时，如果客户端的时间小于Expires的值时，直接使用缓存结果。
Expires在HTTP/1.1，Expires已经被Cache-Control替代，原因在于Expires控制缓存的原理是使用客户端的时间与服务端返回的时间做对比，如果客户端与服务端的时间由于某些原因（时区不同；客户端和服务端有一方的时间不准确）发生误差，那么强制缓存直接失效，那么强制缓存存在的意义就毫无意义。
(2)在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存，主要取值为：
①public：所有内容都将被缓存（客户端和代理服务器都可缓存）
②private：所有内容只有客户端可以缓存，Cache-Control的默认取值
③no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定
④no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
⑤max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效
对比缓存（协商缓存）：通过HTTP的last-modified，Etag字段进行判断。
（1）last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。
（2）Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。
备注：缓存读取：from memory cache 和 from disk cache。
from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存，浏览器读取缓存的顺序为memory –> disk。
（1）内存缓存(from memory cache)：内存缓存具有两个特点，分别是快速读取和时效性：
1、快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。
2、时效性：一旦该进程关闭，则该进程的内存则会清空。
（2）硬盘缓存(from disk cache)：硬盘缓存则是直接将缓存写入硬盘文件中，读取缓存需要对该缓存存放的硬盘文件进行I/O操作，然后重新解析该缓存内容，读取复杂，速度比内存缓存慢。

DNS域名解析

我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。
首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。
如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。
最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。

tcp链接（三次握手）

第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；
第二次握手： 服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手： 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

页面渲染

http发送请求，以及服务器处理，浏览器响应之后，到达浏览器渲染页面步骤
解析HTML，构建DOM树
解析CSS，生成CSS规则树
合并DOM树和CSS规则树，生成render树
布局render树（layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
浏览器会将各层的信息发送给GUI，GUI会将各层合成（composite），显示在屏幕上。
遇到CSS样式资源（特点）：
CSS下载时异步，不会阻塞浏览器构建DOM树
但是会阻塞渲染，也就是在构建render树时，会等到css下载解析完毕后才进行（这点与浏览器优化有关，防止css规则不 断改变，避免了重复的构建）。有例外，media query声明的CSS是不会阻塞渲染的。
遇到JS脚本资源（特点）：
阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会继续解析html；
浏览器的优化，在脚本阻塞时，也会继续下载其他资源（当然有并发上限），但是虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完毕后才会接下来的解析，并行下载只是一种优化而已。
defer（延迟执行）与async（异步执行），普通的脚本是会阻塞浏览器解析的，但是可以加上defer和async属性，这样脚本就变成异步了，可以等到解析完成后再执行。
遇到img图片类资源：
遇到图片等资源时，直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有src的地方。
　　在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。

Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。

Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

下面这些动作有很大可能会是成本比较高的：

增加、删除、修改DOM结点时，会导致Reflow或Repaint

移动DOM的位置，或是搞个动画的时候

内容发生变化

修改CSS样式的时候

Resize窗口的时候（移动端没有这个问题），或是滚动的时候

修改网页的默认字体时

基本上来说，reflow有如下的几个原因：

Initial，网页初始化的时候

Incremental，一些js在操作DOM树时

Resize，其些元件的尺寸变了

StyleChange，如果CSS的属性发生变化了

Dirty，几个Incremental的reflow发生在同一个frame的子树上

关闭TCP连接或继续保持连接

第一次挥手是浏览器发完数据后，发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意，如果在这一次服务器也发送FIN请求断开连接似乎也没有不妥，但考虑到服务器可能还有数据要发送，所以服务器发送FIN应该放在第三次挥手中。
这样浏览器需要返回ACK表示同意，也就是第四次挥手。