工作原理
加载web页面的流程
- DNS查询
浏览器向域名服务器发出请求得到页面的ip（一般会进行缓存，后续请求从缓存读取ip）,这一步可能存在性能问题，网络问题导致，尤其是移动网络
- 建立连接: TCP握手 + TLS协商
TCP三次握手，与服务器开启会话；TLS协商，建立安全连接
- 响应: TCP慢启动 + 14kb规则
初始响应数据包大小为14kb, 后续数据包依次为前一次数据包的大小翻倍，慢启动逐渐增加发送的数据量直到网络的最大带宽，利用拥塞控制算法确定发送速率。 为了便于浏览器正常解析，通常在前14kb数据中包含初始渲染所需的全部内容或者至少包含页面模板
- 解析：
解析html（包括解析图片、样式、脚本文件），构建dom树和cssom树
- 渲染页面
合成dom和cssom为渲染树、计算节点布局、绘制节点(通常绘制操作会在多个层上进行，因此还存在分层、合成操作(composite)）
回流（重排、重构）、重绘
重新计算节点大小和位置的操作触发回流，回流会触发重绘（包括分层、合成），回流比重绘代价更高
触发回流：节点元素的尺寸、结构、在文档流中的位置改变
触发重绘：样式改变，如 color,background-color,visibility
合成(composite): 将不同的绘制层进行合成（某些情况下，会创建复合图层，单独分配系统资源（非主线程），启用css硬件加速，提升绘制效率）
避免频繁触发回流、重绘操作也可作为web性能优化的一部分，简述以下方案：
《css》
- 将动画效果应用于设置定位的脱离文档流的元素（fixed、absolute）
- 避免使用table布局
- 避免使用css表达式，引发回流
- 使用 visibility 替换 display: none ，前者只会引起重绘，后者会引发回流
- 尽量在dom树的末端改变class, 限制回流的范围
- 使用css硬件加速，提升动画性能， 如will-change属性，具体可触发硬件加速的属性，参考性能优化之composite
《js》
- 避免频繁操作样式
- 减少DOM操作(React虚拟节点)
- window resize事件防抖
- dom属性读写分离，减少重排次数（获取某些样式属性值，会直接flush渲染队列）
基本组成结构
用户界面、浏览器引擎、js引擎、渲染引擎（内核）、数据存储（书签、工具设置、缓存数据等）、网络、ui后端
主流浏览器使用的js引擎和渲染引擎
| 浏览器 | js引擎 | 渲染引擎（内核） |
|---|---|---|
| chrome | V8 | Blink |
| Firefox | Monkey系列 | Gecko |
| IE -> Edge | Chakra （ie9以下 Jscript） | Trident->EdgeHTML->Blink |
| Opera | Carakan | Presto->blink |
| Safari | SquirrelFish系列 | Webkit |
http与https协议
http建立了浏览器与服务器之间的通信规则，明文传输；https是http的安全版，在http与TCP之间添加了一个SSL安全层，并使用不同于http的端口（443），可进行加密传输、身份认证。
进程与线程
后续补充~~
缓存机制
-
强制缓存
-
协商缓存
参考链接： 浏览器的工作原理、 渲染图层vs复合图层
