前言

学习浏览器的工作原理，在此做个笔记。

从输入地址到渲染页面

1. 浏览器判断地址

浏览器进程判断输入的是否是一个地址，如果是，下一步；否则就直接搜索。

2. 查找缓存

浏览器进程去自己的缓存中查找页面，如果没有缓存，下一步；否则直接渲染页面。

3. dns查询

浏览器会先查自己的dns缓存，如果命中，则下一步；否则查询向网络提供商询问，查询dns缓存，如果命中，则下一步；否则去跟服务器查询，递归+迭代的方式分别查询顶级域名，域名，全域名，返回ip地址。

4. 构建http链接

tcp三次握手+tls连接

5. 数据传输

http需要不断发送数据包+确认数据包

6. 断开tcp链接

四次挥手

7. 解析内容

解析返回的内容，如果是html，则下一步；否则搞个简单的html包裹起来，然后走html展示

8. 解析dom，生成dom树

9. 解析css，生成styleSheets

10. 加载javascript

如果存在defer 属性，加载后在styleSheets和dom树生成后执行 如果存在sync属性，加载后立即执行，不保证顺序 否则加载后立即执行，同时阻塞dom解析

11. 布局

根据dom树和styleSheets,生成布局树

12. 分层

根据布局树，分层 存在层叠上下文属性的会单独一层；存在clip的也会单独的一层。

13. 绘制

分层后按照顺序绘制图层

14. 光珊化

绘制图层后，合成线程会进行图层转图块，然后优点光栅化视口附近的图块，转换为位图。通常会gpu加速。

15. 显示

位图会提交到浏览器进程中，然后浏览器缓存到内存中，最后显示在显示器上。

名词解释

光栅化 图块转位图的过程

重排 改变dom几何属性或者需要计算的时候就会重排

重绘 改变颜色等属性，会触发重绘

合成 使用transform/will-change直接提成为合成层，动画效果会更好

总结

一共分为4大过程，判断，dns，数据传输，渲染。