首页  思维导图  详情

浏览器

2023-07-28 21:21:40   0  举报





AI智能生成

浏览器概述、浏览器原理、浏览器组成、浏览器渲染

浏览器原理

浏览器组成

浏览器渲染原理

浏览器缓存

浏览器安全

作者其他创作

大纲/内容

组成

shell

QQ浏览器

360浏览器

2345浏览器

内核

渲染引擎

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

JS 引擎

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

进程和线程

概述

浏览器进程（Browser Process）

渲染进程（Renderer Process）

事件循环

异步执行

GPU 进程（GPU Process）

插件进程（Plugin Process）

扩展进程（Extension Process）

渲染原理

解析HTML

词法分析

语法分析

构建DOM树

解析CSS

词法分析

语法分析

构建CSSOM树

构建渲染树

样式计算

布局

绘制

分块

光栅化阶段

合成

补充

重绘(repaint)

重排(reflow)

影响范围

全局范围

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

局部范围

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

机制

浏览器的渲染队列

强制刷新队列

优化

1. 分离读写操作

2. 集中改变样式

3. 缓存布局消息

4. 离线改变dom

5. 元素绝对定位

6. 优化动画

启用 GPU 硬件加速

绝对定位脱离文档流

7. 避免table布局

安全

同源策略（Same Origin Policy）

跨站脚本攻击（Cross-Site Scripting, XSS）防护

跨站请求伪造（Cross-Site Request Forgery, CSRF）防护

内容安全策略（Content Security Policy, CSP）

安全沙箱（Sandboxing）

安全证书和HTTPS

对称加密算法

非对称加密算法

数字证书(数字签名)

缓存

是什么

好处

省流、加载快

坏处

更新不实时

位置

service worker

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

memory cache

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

disk cache

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

图片

强缓存

协商缓存

本地存储

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

LocalStorage

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

SessionStorage

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

Web SQL

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

IndexedDB

异步

支持事务

同源限制

储存空间大

支持二进制

键值对储存

垃圾回收

GC算法

引用计数