大家好，我是右子。
搞懂浏览器是怎么运行的，是可以有效帮助你去更好的作业。
就好比赛车手对自己的爱车了如指掌，那他在比赛的时候才会拥有最棒的状态。
当用户输入网址敲击回车后会发生什么
当用户在地址栏里输入一个内容时，UI线程会捕捉到内容，如果这个内容是一个网址，UI线程会启动网络线程来请求DNS进行域名解析。
PS: 如果UI线程不错到的不是一个网址，那么它会认为你是想要搜索，就去跳转到默认配置的搜索引擎来查询。
DNS是什么？DNS做了什么？
DNS的目标是：把域名转换为ip地址。
DNS查找流程 - steps：
- 系统缓存
- hostc配置文件
- 局部DNS服务器
- 根域名服务器
- 顶级域名服务器
在以上阶段中只要找到缓存则立马缓存起来，当有相同的域名访问时把有效的缓存直接返回，达到变相提升访问速度。
具体工作流程也可以看我写的这篇文章传送门
建立TCP请求
TCP会保证数据的正确性和数据的顺序。 需要经过浏览器建立TCP链接，通过3次握手和四次挥手的完整过程。
3次握手：
- 主机A向主机B发起访问请求建立链接，传送消息
序列号x； - 主机B拿到消息后回复ACK(acknowledge)，并返回主机B的消息序列号x，并要求下一次回复消息时使用序列号y；
- 主机A收到消息后回复ACK(acknowledge)，并发送序列号y。
补充：如果中间出现丢包，主机A就会重复发送序列号给主机B，直到主机B返回信息，这特性保证了数据的正确性。
4次挥手：
- 主机A发送FIN的数据包给主机B要求停止连接；
- 主机B收到后回复ACK(acknowledge)；
- 主机B向主机A发起一个FIN的数据包要求反向断开连接；
- 主机A确认之后回复ACK（acknowledge）请求正式断开。
获取到网络数据
下载网络资源。
当浏览器里的网络线程请求获取到html数据后，通过IPC（Internet Process Connection）将数据传给渲染器进程的主线程，主线程将html解析并构造DOM树，然后再进行样式计算。
根据DOM树和CSS OM生成layout tree，再遍历layout tree生成绘制顺序表（paint），然后根据这个表生成layer tree，最后主线程将layer tree和绘制顺序信息一起传给浏览器的合成器线程。
合成器线程会按照规则进行分图层，并把图层分为更小的图块传给栅格线程进行栅格化。
栅格化完成后，合成器线程会获得栅格线程传过来的图块信息 - draw quads，再生成合成帧，然后将该帧通过IPC传回给浏览器进程，浏览器进程再传给GPU进行渲染，最后展示到屏幕上。
重排与重绘
修改元素的尺寸和位置属性时，会触发重排。
修改元素的颜色属性时，会触发重绘。
帧
浏览器最小每秒绘制60fps。
优化：
requestAnimationFrame：在每一帧调用。- 原理：当每一帧快结束的时候暂停JS的执行。
名词解释
draw quads - 四边形，我们编写的html+css组合的都是一个四边形的信息。
IPC（Internet Process Connection） - 共享管道。为了让进程之间通信而开放的管道。
chrome采用的多进程浏览器的结构
浏览器进程
浏览器进程负责控制浏览器除标签页外的用户界面
GPU进程
负责整个浏览器界面的渲染
渲染器进程
负责渲染当前标签页里面所有的内容，这里涉及到浏览器资深的进程模型(The Chromium Projects)。
作用就是：网页独立渲染一个进程，以保证每个站点可以独立访问，也彼此隔离。
网络进程
负责接收网络请求
缓存进程
负责缓存处理
插件进程
负责canvas、falsh
参考
- webkit技术内幕
还会总结到的
webkit为内核的chrome浏览器创建进程模型
