学习浏览器工作原理，可以帮助性能优化，排查错误。
浏览器工作原理
- 实际上就是把一个URL变成屏幕上显示的网页
过程
- 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务端请求页面
- 把请求回来的HTML经过解析，构成DOM树
- 计算DOM树上的css属性
- 最后根据css属性对元素逐个进行渲染，得到内存中的位图
- 一个可选的步骤是对位图进行合成，这会极大地增加后续绘图的速度
- 合成之后，再绘制到界面上
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有什么作用？
- 确定请求的目标服务端身份
- 保证传输的数据不会被网络中间节点窃听或者篡改。
HTTPS 是使用加密通道来传输 HTTP 的内容,但是 HTTPS 首先与服务端建立一条 TLS 加密通道。
HTTP2.0的优点：
- 支持tcp连接复用
- 支持服务端推送
解析HTML文件，构建DOM树
词--->栈---->DOM
重流和重绘
重绘repaint：
改变某个元素的背景色、文字颜色、边框颜色等等不影响他的布局属性。
重流reflow：
当属性变化而影响了某些元素的布局，需要重新渲染界面， 该过程称为reflow。
reflow一定引起repaint，而repaint不一定要reflow
需要减少重流，提高页面流畅度。
网友评论