目录

浏览器概述

主流浏览器：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作为浏览器的运算核心。

浏览器内核

浏览器内核（排版引擎、渲染引擎）是浏览器的核心模块，负责将网页代码转换成用户可见的页面。

核心职责

1. 解析HTML/CSS ——构建DOM树和CSSOM树——合并成渲染树
2. 布局——计算每个元素的位置和大小
3. 绘制——将元素绘制到屏幕
4. 处理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等。

浏览器兼容性

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上显示效果可能不一致而产生浏览器和网页间兼容问题。

产生原因：

网页浏览标准只规定了接口，并没有接口实现的详细规范，是的各浏览器对相同的功能使用了不同的实现方法。

浏览器版本实现上的差异，老版本浏览器不支持新的技术。

浏览器渲染

渲染引擎的基本流程

1. 解析生成DOM树
2. 渲染
3. 布局
4. 绘制

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 的路径范围