一个浏览器到底是如何工作的？

学习浏览器工作原理，可以帮助性能优化，排查错误。

浏览器工作原理

• 实际上就是把一个URL变成屏幕上显示的网页

过程

1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面
2. 把请求回来的HTML经过解析，构成DOM树
3. 计算DOM树上的css属性
4. 最后根据css属性对元素逐个进行渲染，得到内存中的位图
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘图的速度
6. 合成之后，再绘制到界面上
   HTTP请求过程并非一个完成之后再进行下一步，而是一个流水线的任务，这样我们才能看到是逐步显示的网页。

HTTP协议（超文本传输协议）

• 浏览器要做的第一步是利用HTTP(HTTPS)协议把数据取回来
• 基于TCP协议出现的，HTTP在TCP的双向的通讯道的基础上，规定了Request-Response的模式，必须由浏览器端首先发起。
• 使用 TCP 协议来传输文本格式的一个应用层协议。

HTTP协议格式

HTTP协议格式

HTTP Method（request line）

• GET
• POST
• HEAD
• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
  浏览器通过地址栏访问页面都是GET方法，表单提交产生POST方法。
  HEAD和get类似，只返回请求头。
  PUT和DELETE分别表示添加资源和删除资源。
  CONNECT多用于HTTPS和WebSocket。
  其余两个多用于调试，多数线上服务都不支持。

HTTP Status code

• 1**：临时回应，表示哭护短请继续

1**系列的状态码被浏览器http库直接处理掉，不会让上层应用知晓。

• 2**：请求成功
  200
• 3**：请求目标有变化，希望客户端进一步处理
  301&302：永久性和临时性重定向（当前资源已经被转移）
  304：跟客户端缓存没有更新（前端必知必会）

产生原因：客户端本地已经有缓存的版本，并且在request中告诉了服务端，当服务端通过时间或者tag，发现没有更新的时候，就会一个不含body的304状态。

• 4**：客户端请求错误
  403：无权限
  404：请求页面不存在
• 5**：服务端请求错误
  500：服务器内部错误
  503：服务器暂时性错误，可以一会再试

HTTP HEAD

请求头

请求头.png

响应头

响应头.png

HTTPS有什么作用？

1. 确定请求的目标服务端身份
2. 保证传输的数据不会被网络中间节点窃听或者篡改。
   HTTPS 是使用加密通道来传输 HTTP 的内容,但是 HTTPS 首先与服务端建立一条 TLS 加密通道。

HTTP2.0的优点：

1. 支持tcp连接复用
2. 支持服务端推送

解析HTML文件，构建DOM树

词--->栈---->DOM

重流和重绘

重绘repaint：

改变某个元素的背景色、文字颜色、边框颜色等等不影响他的布局属性。

重流reflow：

当属性变化而影响了某些元素的布局，需要重新渲染界面， 该过程称为reflow。

reflow一定引起repaint，而repaint不一定要reflow

需要减少重流，提高页面流畅度。