2024最全前端面试系列（浏览器原理）（最容易忽视的面试隐藏大杀器）

3. 发布可视节点的内容和计算样式

4. js解析如下：

5. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading

6. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容

7. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素

8. 当文档完成解析，document.readState变成interactive

9. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()

10. 浏览器在Document对象上触发DOMContentLoaded事件

11. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件

12. 显示页面（HTML解析过程中会逐步显示页面）

浏览器渲染步骤

---

1. HTML 解析出 DOM 树

2. CSS 解析出 Style Rules

3. 两者关联生成 Render Tree

4. Layout （布局）根据 Render Tree 计算每个节点信息

5. 对布局树进行分层，并生成分层树。

6. 为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分图块，并栅格化将图块转换成位图。

7. 合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。

注意

1. 解析文档中遇到Script标签，会立即解析脚本，停止解析文档（因为 JS 会改变 DOM 和 CSS，继续解析会造成浪费），如果是外部 Script，会等待脚本下载完成之后再继续解析文档。

而现在Script标签增加了async属性，脚本解析会将改变DOM和CSS的地方解析出来，追加到DOM Tree和Style Rules。

2. 创建布局树，遍历 DOM 树中的所有可见节点，并把这些节点加到布局中；而不可见的节点（属性包含 display: none）会被布局树忽略掉。最后计算 DOM 元素的布局信息，使其都保存在布局树中。布局完成过程中，如果有js操作或者其他操作，对元素的颜色，背景等作出改变就会引起重绘，如果有对元素的大小、定位等有改变则会引起回流。

重排和重绘

---

重排（reflow / 回流）：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式。

触发reflow情形

下面几种情况会发生重排：

（1）浏览器尺寸改变（resize）

（2）修改网页默认字体

（3）修改CSS样式改变尺寸（包括display: none)

（4）JS操作DOM树

（5）一些影响布局的动画

（6）使用JS脚本获得一些布局属性时，比如offsetTop

减少reflow方法

减少重排方法:

（1）不要逐个修改DOM样式，统一修改

（2）对需要进行复杂操作的DOM元素，先设置display: none

（3）为html动画原件使用 absolute 布局或 fixed 布局，这样不会引起重排和重绘。

（4）减少使用table布局，因为稍加改动就会导致table的重新布局。

（5）将offsetTop等属性缓存成局部变量。

浏览器本地存储方案的比较

---

浏览器存储主要有 cookie 、localStorage 、sessionStorage。

其中 sessionStorage 和 localStorage 是 HTML5 新特性。

sessionStorage：为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）

localStorage：本地离线存储，在浏览器关闭，然后重新打开后数据仍然存在。

cookie

操作方式：

document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/” // 设置cookie

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT” // 删除cookie

参数说明

expires

如果设置过去的时间，则删除cookie；如果不设置过期时间，则表示这个cookie生命周期为浏览器会话期间，只要关闭浏览器窗口，cookie就消失了。

path

建立cookie目录里的所有页面，以及该目录下面任何子目录里的页面都可以访问这个cookie。

localStorage

IE8+支持，每个域名限制5M。打开同域的新页面也能访问得到

操作方式：

window.localStorage.setItem(key, value) // 保存

window.localStorage.getItem(key) // 读取

window.localStorage.removeItem(key) // 删除

window.localStorage.clear() // 清除所有

sessionStorage

sessionStorage操作的方法与localStroage是一样的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

刷新页面sessionStorage不会清除，但是打开同域新页面访问不到

cookie, localStorage, sessionStorage的区别

前端存储浅谈——cookie、sessionStorage、localStorage

cookie, localStorage, sessionStorage的区别

1. 存储大小不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存；cookie在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

3. 作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie在所有同源窗口中都是共享的。

浏览器缓存机制

---

哪些数据会被缓存？

1. DNS缓存

浏览器在获取网站域名的实际IP地址后会对其IP进行缓存，减少网络请求的损耗。每种浏览器都有一个固定的DNS缓存时间，其中Chrome的过期时间是1分钟，在这个期限内不会重新请求DNS。

2. MemoryCache

内存缓存，特点为：快速读取和时效性。

1、快速读取：内存缓存会将编译解析后的文件，直接存入该进程的内存中，占据该进程一定的内存资源，以方便下次运行使用时的快速读取。

2、时效性：一旦该进程关闭，则该进程的内存则会清空。

3. 浏览器缓存

浏览器缓存，也称Http缓存，分为强缓存和协商缓存。强缓存的优先级大于协商缓存。

1. 强缓存

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 Expires 和 Cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。

Expires 是时间戳（过期时间），浏览器就会先对比本地时间和 Expires 的时间戳，如果本地时间小于 Expires 设定的过期时间，那么就直接去缓存中取这个资源。

Cache-Control 利用 max-age （时间段/相对时间），如果访问间隔小于 Cache-Control 设定的时间段，那么就直接去缓存中取这个资源。

两者可以同时启用，Cache-Control 相对于 expires 优先级更高。

2. 协商缓存

协商缓存通过 Last-Modified 和 Etag 实现，具体机制如下：浏览器向服务器去询问缓存的相关信息，如果服务端提示缓存资源未改动（Not Modified），资源会被重定向到浏览器缓存，这种情况下网络请求对应的状态码是 304。

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

Last-Modified 是一个时间戳（更新时间），首次请求时随着 Response Headers 返回 Last-Modified（请求资源在服务器上一次修改时间），再次请求时，Request Header 会带上 If-Modified-Since 的时间戳字段，它的值正是上一次 response 返回给它的 last-modified 值。

如果发生了变化，就会返回一个完整的响应内容，并在 Response Headers 中添加新的 Last-Modified 值；否则，返回如上图的 304 响应，Response Headers 不会再添加 Last-Modified 字段。

Etag是一个唯一标识字符串，每次文件修改后服务器端就会生成一个新的 Etag，这个标识字符串可以是基于文件内容编码的，只要文件内容不同，它们对应的 Etag 就是不同的。再次请求资源时，Request Header 会带上 If-Modified-Since，询问 Etag 是否变动

Etag 比 Last-Modified 优先级更高。

补充

Expires 缺点：

返回的到期时间是服务器端的时间，如果客户端的时间与服务器的时间相差很大，容易产生误差。

Last-Modified 缺点：

修改文件，但文件的内容未改变。服务器端并不清楚我们是否真正改变了文件，它仍然通过最后编辑时间进行判断。因此这个资源在再次被请求时，会被当做新资源，进而引发一次完整的响应。

当我们修改文件的速度过快时（比如花了 100ms 完成了改动），由于 If-Modified-Since 只能检查到以秒为最小计量单位的时间差，它感知不到这个改动的。

Etag 缺点：

Etag 的生成过程需要服务器额外付出开销，会影响服务端的性能。

Cache-Control中max-age=0和no cache的区别

当指定 max-age 值为 0，那么缓存服务器通常需要将请求转发给源服务器。

使用 no-cache 指令的目的是为了防止从缓存中返回过期的资源。 客户端发送的请求中如果包含 no-cache 指令，则表示客户端将不会接收缓存过的响应。于是，“中间”的缓存服务器必须把客户端请求转发给源服务器。

如果服务器返回的响应中包含 no-cache 指令，那么缓存服务器不能对资源进行缓存。源服务器以后也将不再对缓存服务器请求中提出的资源有效性进行确认，且禁止其对响应资源进行缓存操作。

垃圾回收机制

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

于是，“中间”的缓存服务器必须把客户端请求转发给源服务器。

如果服务器返回的响应中包含 no-cache 指令，那么缓存服务器不能对资源进行缓存。源服务器以后也将不再对缓存服务器请求中提出的资源有效性进行确认，且禁止其对响应资源进行缓存操作。

垃圾回收机制

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

[外链图片转存中…(img-8zk8QXcU-1720895157988)]

[外链图片转存中…(img-MXKQTT4r-1720895157990)]