浏览器

QQ浏览器

360浏览器

2345浏览器

shell

Blink（用于Chrome和Opera浏览器）WebKit（用于Safari浏览器）Gecko（用于Firefox浏览器）Trident（用于旧版的Internet Explorer浏览器）

渲染引擎

V8（用于Chrome和Opera浏览器）SpiderMonkey（用于Firefox浏览器）JavaScriptCore（用于Safari浏览器）Chakra（用于旧版的Internet Explorer浏览器）

JS   引擎

内核

组成

概述

浏览器进程（Browser Process）

事件循环

异步执行

渲染进程（Renderer Process）

⽤户存放需要最快执⾏的任务，优先级「最⾼」

微队列

⽤于存放⽤户操作后产⽣的事件处理任务，优先级「⾼」

交互队列

⽤于存放计时器到达后的回调任务，优先级「中」

延时队列

队列

GPU 进程（GPU Process）

插件进程（Plugin Process）

扩展进程（Extension Process）

进程和线程

词法分析

语法分析

构建DOM树

解析HTML

构建CSSOM树

解析CSS

样式计算

构建渲染树

布局

光栅化阶段

分块

合成

绘制

重绘(repaint)

从根节点 html 开始对整个渲染树进行重新布局

全局范围

对渲染树的某部分或某一个渲染对象进行重新布局

局部范围

影响范围

浏览器的渲染队列

强制刷新队列

机制

1. 分离读写操作

2. 集中改变样式

3. 缓存布局消息

4. 离线改变dom

5. 元素绝对定位

启用 GPU 硬件加速

绝对定位脱离文档流

6. 优化动画

7. 避免table布局

优化

重排(reflow)

补充

渲染原理

chrome》 Inspect》 moreTools》 layers

分层

同源策略（Same Origin Policy）

安全沙箱（Sandboxing）

对称加密算法

非对称加密算法

数字证书(数字签名)

安全证书和HTTPS

混合加密

安全

省流、加载快

好处

更新不实时

坏处

是什么

单独的一个线程，用来实现缓存功能

service worker

内存中的缓存；容量小，存储时间短

memory cache

硬盘上的缓存，容量大，时效性长

disk cache

图片

位置

强缓存

协商缓存

缓存

概要

存储容量：每个Cookie的存储容量通常限制在4KB左右。存储位置：Cookie存储在浏览器的Cookie文件中，每次请求都会将Cookie发送给服务器。生命周期：可以设置Cookie的过期时间，使其在指定时间后失效。用途：主要用于会话管理、用户跟踪和个性化体验等。

Cookie

存储容量：LocalStorage的存储容量通常限制在5MB左右。存储位置：LocalStorage数据存储在浏览器的本地，不会随着请求发送给服务器。生命周期：LocalStorage数据会一直保留，除非被显式删除或浏览器清除缓存。用途：主要用于本地数据持久化存储，例如保存用户的偏好设置、缓存数据等。

LocalStorage

存储容量：SessionStorage的存储容量通常限制在5MB左右。存储位置：SessionStorage数据存储在浏览器的本地，不会随着请求发送给服务器。生命周期：SessionStorage数据在当前会话结束后会被清除，即当用户关闭浏览器标签或窗口时。用途：主要用于临时存储会话相关的数据，例如表单数据、页面状态等。

SessionStorage

关系型数据库，类似于SQLite，js操作麻烦

Web SQL

异步

支持事务

同源限制

储存空间大

支持二进制

键值对储存

IndexedDB

本地存储

引用计数

标记阶段

清除阶段

标记清除

复制算法

可达性标记

from 复制到 to

批量清除、循环往复

分代回收

GC算法

垃圾回收

浏览器