浏览器基础及缓存
目录
浏览器概述
主流浏览器：IE、Chrome、Firefox、Safari
Chrome
Firefox
IE
Safari
浏览器内核
核心职责
主流浏览器内核
JavaScript引擎
主流的JavaScript引擎
浏览器兼容性
浏览器渲染
渲染引擎的基本流程
DOM和render树构建
html解析
DOM
渲染树与DOM树的关系
布局
绘制
浏览器缓存
静态资源缓存-相关概念
静态资源缓存-影响因素
控制静态缓存
方式1：html中的缓存配置
方式2：容器缓存配置
缓存规划
LocalStorage
LocalStorageAPI
SessionStorage
比较LocalStorage和SessionStorage
Cookies
浏览器概述
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并且让用户与这些文件交互的软件。
主流浏览器：IE、Chrome、Firefox、Safari
Chrome
Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。
Firefox
Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为MF），是一个自由及开放源代码的网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。
IE
微软公司推出的一款网页浏览器。原称IE(6版本以前)和IE(7、8、9、10、11版本)，简称IE。
Safari
Safari是苹果计算机的操作系统Mac OS中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
浏览器内核
浏览器内核（排版引擎、渲染引擎）是浏览器的核心模块，负责将网页代码转换成用户可见的页面。
核心职责
- 解析HTML/CSS ——构建DOM树和CSSOM树——合并成渲染树
- 布局——计算每个元素的位置和大小
- 绘制——将元素绘制到屏幕
- 处理JavaScript（部分内核包含独立 JS引擎）
主流浏览器内核
| 内核 | 是否开源 | 插件支持 | 应用浏览器 | 支持操作系统 |
|---|---|---|---|---|
| Trident | 否，提供接口调用 | ActiveX | IE | windows |
| Gecko | 是，多种协议授权发行，包括：MPL、GPL、LGPL | NPAPI | Firefox | windows，Mac，Linux/BSD |
| Blink | 是 | NPAPI | Chrome、Opera | windows，Mac，Linux/BSD |
| Webkit | 是，遵循LGPL协议 | NPAPI | Chrome、Safari | windows，Mac，Linux/BSD |
JavaScript引擎
JavaScript引擎就是用来执行JS代码的。
主流的JavaScript引擎
V8引擎是一个JavaScript引擎。JavaScript程序在V8引擎运行速度媲美二进制程序。
V8引擎支持众多操作系统，如windows、Linux、Android等。
浏览器兼容性
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上显示效果可能不一致而产生浏览器和网页间兼容问题。
产生原因：
网页浏览标准只规定了接口，并没有接口实现的详细规范，是的各浏览器对相同的功能使用了不同的实现方法。
浏览器版本实现上的差异，老版本浏览器不支持新的技术。
浏览器渲染
渲染引擎的基本流程
- 解析生成DOM树
- 渲染
- 布局
- 绘制
DOM和render树构建
html解析
词法解析：将输入内容分割成大量标记的过程。可以理解为讲一段话分割成一个个的单词。
语法分析：是应用语言的语法规则的过程。
DOM
解析器的输出“解析树”是由DOM元素和属性节点构成的树结构。
DOM是HTML文档的对象表示，同时也是外部内容与HTML元素之间的接口。解析树的根节点是“Document”对象。
DOM与标记之间几乎是一一对应的关系。
渲染树与DOM树的关系
在WebKit中，解析样式和创建呈现器的过程称为“附加”，每个DOM节点都有一个attach方法，附加是同步进行的，将节点插入DOM树需要调用新的节点attach方法。
处理html和body标记就会构建呈现树根节点。这个根节点呈现对象对应于css规范中所说的容器block，这是最上层的block，包含了其他所有block。它的尺寸就是视口，即浏览器窗口显示区域的尺寸。Firefox称之为ViewportFrame，而WebKit称之为RenderView，这就是文档所指向的呈现对象。呈现树的其余部分以DOM树节点插入的形式来构建。
布局
呈现器在创建完成并添加到呈现树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。
布局是一个递归的过程。他从根呈现器开始，然后递归遍历部分或所有的框架层次结构，为每一个需要计算的呈现器计算几何信息。
绘制
在绘制阶段，系统会遍历呈现树，并调用呈现器的paint方法，将呈现器的内容显示在屏幕上。绘制工作使用用户界面基础组件完成的。
和布局一样，绘制也分为全局和增量两种。在增量绘制中，部分呈现器发生了更改，但是不会影响整个树。
浏览器缓存
缓存：把数据或者内容，放到能够更快访问的位置。
静态资源缓存-相关概念
概念：浏览器把静态文件保留在本地的一种行为
内容：包括html、JS、css、图片等文件
作用：实现对静态资源更快的访问
静态资源缓存-影响因素
Expires：用于设置静态资源的过期时间
Last-Modified/If-Modified-Since：标示这个相应资源的最后修改时间
Etag/If-None-Match：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识
控制静态缓存
方式1：html中的缓存配置
<meta http-equiv="expires" content="Mon,16 July 2025 00:00:00 GMT" />
用于这顶网页的到期时间，一但过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式。
<meta http-equiv="Pragma" content="no-cache" />
用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一但离开网页就无法重新从Cache中调出。
方式2：容器缓存配置
以nginx为例进行配置，配置文件地址：nginx\conf\nginx.conf
缓存规划
| 资源类型 | 是否缓存 | 缓存时间 |
| html | 是 | 协商缓存 |
| 自研js | 是 | 30天 |
| 自研css | 是 | 30天 |
| 图片 | 是 | 30天 |
| 第三方js、css | 是 | 180天 |
HTML做成协商缓存，即每次都去服务端咨询是否有更新。
所有外联的JS、css都增加文件hash戳，当文件内容变化时，此文件后缀也变化，变化后的文件总是从服务端重新读取。
LocalStorage
LocalStorage时HTML5的一种本地缓存方案。主要用于储存一些体积较大的数据。
LocalStorage有大小限制，各个浏览器限制不同，子啊2-5M之间
LocalStorageAPI
- 增加/修改：LocalStorage.setItem（key，value）
- 获取：LocalStorage.getItem（key）
- 删除：LocalStorage.removeItem（key）
- 清空：LocalStorage.clear（）
SessionStorage
SessionStorage是HTML5的一种本地缓存方案。
与LocalStorage相似，唯一的区别在于只对当前Session生效。
API与LocalStorage相同。
比较LocalStorage和SessionStorage
| Web Storage | 生命周期 | 作用域 | 储存大小 | 数据同步 | 适用场景 |
| LocalStorage | 永久存储 | 同源跨标签页共享 | 通常在5MB-10MB | 同源窗口实时同步 | 1.长期存储用户的偏好 2.登录状态等 |
| SessionStorage | 会话级存储 | 仅限当前标签页 | 通常在5MB-10MB | 不共享 | 1.临时储存表单数据 2.单页应用状态等 |
Cookies
Cookies式网站为了辨别用户身份或Session跟踪而储存在用户浏览器端的数据。Cookies信息一般会通过HTTP请求发送到服务器端。
一条Cookies记录主要有键、值、域、过期时间、大小组成。一般用于保存用户的网站认证信息。
Cookies的最大长度为4KB
| 属性 | 作用域 | 说明 |
|---|---|---|
| name | 必需 | Cookie 的键名（区分大小写） |
| value | 必需 | Cookie 的值（需 URL 编码） |
| expires | 可选 | 绝对过期时间 |
| Max-Age | 可选 | 相对过期时间，优先级高于expires |
| domain | 可选 | 控制 Cookie 的作用域名 |
| path | 可选 | 限制 Cookie 的路径范围 |