前端面试的游览器部分（2）每天10个小知识点

---

---

点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

(求奖牌ing）

系列文章目录

前端面试的游览器部分（1）每天10个小知识点

前端面试的游览器部分（2）每天10个小知识点

前端面试的游览器部分（3）每天10个小知识点

前端面试的游览器部分（4）每天10个小知识点

前端面试的游览器部分（5）每天10个小知识点

前端面试的游览器部分（6）每天10个小知识点

知识点

11. 协商缓存和强缓存的区别

协商缓存和强缓存都是浏览器缓存机制的一部分，它们的主要区别在于缓存的验证方式和响应的处理方式：

1. 强缓存：

   • 强缓存是通过设置HTTP响应头中的Cache-Control或Expires字段来实现的。
   • 当浏览器发起请求时，会先检查本地是否有缓存，并根据缓存规则判断是否使用缓存。如果缓存未过期（根据Cache-Control的max-age或Expires字段判断），浏览器直接从本地加载资源，不会发送请求到服务器。
   • 强缓存的优点是快速加载，减少对服务器的请求，提高页面加载性能。但缺点是当资源更新时，客户端可能无法立即获取最新内容，因为不会发送请求到服务器验证资源是否有更新。

2. 协商缓存：

   • 协商缓存是通过设置HTTP响应头中的Last-Modified和ETag字段来实现的。
   • 当浏览器发起请求时，服务器会返回资源的最后修改时间（Last-Modified）或资源的唯一标识符（ETag）。
   • 浏览器将这些信息存储起来，并在下次请求时将这些信息发送给服务器。服务器根据这些信息判断资源是否有更新，如果没有更新，返回304 Not Modified状态码，浏览器从本地加载缓存，否则返回新的资源。
   • 协商缓存的优点是能够在客户端获取到服务器最新的资源，避免了强缓存的缺点。服务器可以根据资源的修改时间或唯一标识符来判断资源是否有更新。

总体来说，强缓存适用于那些不经常变动的静态资源，可以大幅度减少网络请求，加快页面加载速度。而协商缓存适用于那些可能经常变动的资源，能够及时获取最新的内容，并避免了强缓存的缺点。通常情况下，浏览器会先检查强缓存，如果缓存未过期，则直接使用缓存；如果缓存过期，则使用协商缓存来验证资源是否有更新。

12. 点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

点击刷新按钮、按 F5、按 Ctrl+F5 和地址栏回车是常见的页面刷新操作，它们之间有一些区别：

1. 点击刷新按钮：点击浏览器界面上的刷新按钮，通常会执行浏览器的快速刷新，这个刷新过程会优先使用缓存，即执行强缓存机制，只有在缓存过期或不存在的情况下才会发送请求到服务器验证资源是否有更新。

2. 按 F5：按下F5键，是执行标准刷新操作，与点击刷新按钮的效果类似，也会优先使用缓存，只有在缓存过期或不存在的情况下才会发送请求到服务器。

3. 按 Ctrl+F5（或 Shift+F5）：按下Ctrl（或Shift）+ F5键，是执行强制刷新操作，它会完全忽略缓存，强制发送请求到服务器，不管缓存是否过期，以获取最新的资源。这样做可以确保获取服务器上的最新版本，但也会导致不必要的网络请求。

4. 地址栏回车：在地址栏中输入网址后按下回车键，类似于点击链接跳转页面。此时，浏览器会执行导航刷新，它会检查缓存来确定是否使用缓存，类似于点击刷新按钮的操作。

总结来说，点击刷新按钮和按 F5 都是标准刷新，会优先使用缓存。按 Ctrl+F5 或地址栏回车是强制刷新，会忽略缓存，强制获取服务器上的最新资源。在开发调试时，可以使用强制刷新来确保获取最新的文件，但在正常浏览网页时，标准刷新通常能提供更好的性能和用户体验。

13. 常见的浏览器内核比较

常见的浏览器内核有以下几种：

1. Trident（IE 内核）：Trident是由Microsoft开发的浏览器内核，主要用于Internet Explorer浏览器。它是早期浏览器内核，对Web标准的支持相对较差，导致了许多兼容性问题。

2. Gecko（Firefox 内核）：Gecko是由Mozilla基金会开发的浏览器内核，用于Mozilla Firefox浏览器。它支持Web标准较好，具有强大的功能和灵活的扩展性，是开源的浏览器内核。

3. WebKit（Safari 内核）：WebKit是由Apple公司开发的浏览器内核，用于Safari浏览器。它是一个开源项目，支持Web标准，并在移动设备上得到广泛应用。

4. Blink：Blink是由Google开发的浏览器内核，最初是WebKit的一个分支，后来独立发展。Blink用于Google Chrome浏览器和Opera浏览器。Blink的目标是提供更快的浏览速度和更好的性能。

5. EdgeHTML（Edge 内核）：EdgeHTML是由Microsoft为Windows 10开发的浏览器内核，用于Microsoft Edge浏览器。它在Windows 10中取代了旧版的Trident内核，并支持更多的Web标准。

需要注意的是，由于Blink内核是WebKit的一个分支，因此WebKit和Blink有许多共同的特性，也都支持Web标准较好。目前，大部分主流浏览器都采用了Blink或者其衍生版本，这样可以减少内核的差异，提高网页的兼容性和稳定性。

14. 浏览器的渲染页面过程

浏览器的渲染页面过程主要包括以下几个步骤：

1. 解析HTML：浏览器首先下载HTML文件，并对其进行解析。解析器将HTML文档转换为DOM树，即文档对象模型，表示网页的结构和内容。

2. 解析CSS：浏览器下载CSS文件，并对其进行解析。解析器将CSS样式表转换为CSSOM树，即CSS对象模型，表示网页的样式和布局信息。

3. 构建渲染树：浏览器将DOM树和CSSOM树合并，构建渲染树（Render Tree）。渲染树是DOM树和CSSOM树的结合，它只包含需要显示在页面上的可见元素，隐藏元素和不可见元素（例如脚本标签）不会包含在渲染树中。

4. 布局（回流）：渲染树中的每个节点都会被计算其在屏幕上的大小和位置，这个过程称为布局或回流（Layout or Reflow）。布局过程确定了每个元素在页面中的准确位置。

5. 绘制（重绘）：根据渲染树的布局信息，浏览器将页面的内容绘制到屏幕上，这个过程称为绘制或重绘（Paint or Repaint）。

6. 合成和显示：浏览器将绘制好的页面内容合成到页面上，最终显示在用户的屏幕上。

以上过程是浏览器页面渲染的主要流程。需要注意的是，渲染过程是逐步完成的，并不是一次性的操作。当DOM或CSS样式发生变化时，浏览器需要重新执行布局和绘制过程，以保持页面的实时性和准确性。因此，在编写前端代码时，需要注意避免频繁的布局和绘制操作，以提高页面的性能和响应速度。

15. 渲染过程中遇到 JS 文件如何处理？

在浏览器的渲染过程中，遇到 JavaScript 文件会暂停解析和渲染，执行 JavaScript 代码，然后再继续解析和渲染。这是因为 JavaScript 可能会修改页面的结构、样式和内容，所以浏览器需要先执行 JavaScript 代码，确保页面的状态是最新的，然后再继续渲染。

具体的处理过程如下：

1. HTML 解析和构建 DOM 树：浏览器首先下载 HTML 文件，并开始解析，构建 DOM 树表示网页的结构和内容。

2. CSS 解析和构建 CSSOM 树：浏览器下载 CSS 文件，并开始解析，构建 CSSOM 树表示网页的样式和布局信息。

3. 构建渲染树：浏览器将 DOM 树和 CSSOM 树合并，构建渲染树。渲染树只包含需要显示在页面上的可见元素。

4. 布局和绘制：渲染树中的每个节点都会被计算其在屏幕上的大小和位置，然后浏览器将页面的内容绘制到屏幕上。

5. 执行 JavaScript：当遇到 JavaScript 文件时，浏览器会暂停渲染，执行 JavaScript 代码。JavaScript 可能会修改 DOM 树、CSSOM 树，或者进行其他计算和操作。

6. 继续渲染：执行完 JavaScript 后，浏览器继续渲染剩下的页面内容。如果 JavaScript 修改了页面的结构或样式，浏览器会重新进行布局和绘制，确保页面的最新状态被显示出来。

这种渲染过程中遇到 JavaScript 的行为可以带来一些优势，比如可以动态地更新页面内容、实现交互功能等。但同时，过多或不优化的 JavaScript 代码可能会导致渲染性能下降，因为 JavaScript 的执行会阻塞渲染过程。因此，在编写前端代码时，需要注意优化 JavaScript 代码，避免长时间的执行或执行过程中的阻塞，以提高页面的渲染性能和响应速度。

16. 前端储存的⽅式有哪些？

前端储存的方式有以下几种：

1. Cookie：Cookie是存储在用户浏览器中的小段文本信息，每次请求都会自动发送给服务器。Cookie 可以设置过期时间，可以用于跟踪用户会话状态，但是每次请求都会携带在 HTTP 头中，可能会影响请求性能。

2. localStorage：localStorage 是HTML5提供的一种本地存储方式，它可以将数据以键值对的形式存储在浏览器中，数据在页面关闭后仍然保留。localStorage 只能存储字符串类型的数据，对于复杂数据需要进行序列化和反序列化。

3. sessionStorage：sessionStorage 和 localStorage 类似，但它只在当前会话期间有效，即当浏览器窗口关闭后，数据就会被清除。不同浏览器窗口之间的 sessionStorage 数据是隔离的。

4. IndexedDB：IndexedDB 是 HTML5 提供的一种更为强大的本地数据库存储方式，可以存储大量结构化数据，并支持事务操作和索引查询。IndexedDB 使用异步操作，适合处理大量数据。

5. Web Storage API：Web Storage API 包括 localStorage 和 sessionStorage，它们提供了更方便的本地存储方式，可以通过简单的 JavaScript 代码来操作数据。

6. Web SQL Database：Web SQL Database 是 HTML5 提供的一种在客户端进行数据库操作的方式，但目前已经不再推荐使用，因为它已经不在 HTML5 规范中，并且不被所有浏览器支持。

7. Cache API：Cache API 是 Service Worker 的一部分，它允许开发者将数据缓存到浏览器中，以便在离线时仍然可以访问页面和资源。

8. Cookies、localStorage 和 sessionStorage 是最常用的前端储存方式。Cookie 主要用于存储小段文本信息，localStorage 和 sessionStorage 可以存储较大的结构化数据。IndexedDB 和 Cache API 则适用于更复杂和大量数据的储存需求。选择合适的储存方式取决于应用的需求和特点。

17. 事件是什么？事件模型？

事件（Event）是指在用户与网页交互过程中发生的各种动作或行为，比如鼠标点击、键盘按键、页面加载完成等。浏览器可以通过事件来感知用户的交互操作，并作出相应的响应或处理。

事件模型是指浏览器对事件进行处理和传递的机制。在浏览器中，事件模型主要分为以下几个部分：

1. 事件绑定：开发者可以通过 JavaScript 代码将事件绑定到特定的 HTML 元素上。绑定事件的方式包括使用 HTML 属性、DOM 元素属性，或者通过 JavaScript 的 addEventListener 方法。

2. 事件捕获和冒泡：当一个事件发生在某个 HTML 元素上时，它会沿着事件的传播路径进行传递。传播路径包括两个阶段：捕获阶段和冒泡阶段。在捕获阶段，事件从最外层的祖先元素向目标元素传递；在冒泡阶段，事件从目标元素向最外层的祖先元素传递。开发者可以通过事件传播机制来捕获和处理事件。

3. 事件对象：在事件发生时，浏览器会创建一个事件对象，用于保存事件相关的信息，比如事件的类型、目标元素、触发时间等。开发者可以通过事件对象来获取和操作事件的相关信息。

4. 事件处理程序：事件处理程序是处理特定事件的函数。当事件发生时，浏览器会调用相应的事件处理程序来处理事件。开发者可以通过编写事件处理程序来实现对事件的响应。

5. 默认行为：在事件发生时，浏览器可能会执行一些默认的行为，比如点击链接时跳转页面、提交表单时刷新页面等。开发者可以通过事件对象的方法来阻止默认行为，或者自定义新的行为。

事件模型使得开发者可以方便地处理用户的交互行为，实现丰富的交互效果和功能。在现代 Web 开发中，事件处理是一个重要的概念，开发者需要了解事件模型的原理和用法，以便有效地处理用户的交互操作。

18. 对事件循环的理解

事件循环（Event Loop）是 JavaScript 中处理异步代码执行的机制。JavaScript 是一种单线程的编程语言，意味着它只有一个主线程用于执行代码。但是在实际应用中，有很多异步任务需要执行，比如网络请求、定时器、事件处理等，如果这些任务都是同步执行的，会导致页面阻塞，用户体验不佳。因此，JavaScript 使用事件循环来处理异步任务，以实现非阻塞的异步编程。

事件循环的执行过程如下：

1. 执行同步代码：首先，JavaScript 引擎会执行当前执行上下文中的同步代码，直到遇到异步任务。

2. 处理异步任务：当遇到异步任务（比如定时器回调、网络请求、事件处理等），JavaScript 引擎会将这些任务交给对应的 Web API 进行处理。比如定时器任务交给浏览器的定时器模块，网络请求交给浏览器的网络模块，事件处理交给事件监听器等。

3. 加入任务队列：异步任务在完成后，会将对应的回调函数加入到任务队列（Task Queue）中，等待进入下一次事件循环。

4. 检查是否存在微任务：在进入下一次事件循环之前，JavaScript 引擎会先检查是否存在微任务（Microtask），如果有，会立即执行微任务队列中的所有任务。微任务通常是 Promise 的回调函数或者 MutationObserver 的回调函数。

5. 执行下一次事件循环：一次事件循环结束后，JavaScript 引擎会检查任务队列中是否有待执行的任务，如果有，则按照一定的顺序依次执行。这个过程就是一次事件循环。

重复上述步骤，形成了 JavaScript 的事件循环机制。事件循环使得 JavaScript 可以高效地处理异步任务，而不会阻塞主线程。这也是 JavaScript 能够处理复杂的前端交互和网络请求的关键。理解事件循环对于开发者来说非常重要，因为它涉及到 JavaScript 异步编程的本质。

19.Web API是什么

Web API（Application Programming Interface）是一组由浏览器提供的接口，用于在浏览器环境中与外部环境进行交互。Web API 允许开发者通过 JavaScript 代码与浏览器进行通信，从而实现各种功能和特性。

Web API 提供了一系列方法和属性，用于访问和操作浏览器的功能和资源，比如：

1. DOM API：DOM API 允许开发者通过 JavaScript 访问和操作网页的文档对象模型（DOM）。通过 DOM API，可以动态地创建、修改和删除 HTML 元素，改变元素的样式和属性，以及监听和响应用户的交互事件。

2. XMLHttpRequest API：XMLHttpRequest API 允许开发者通过 JavaScript 发送 HTTP 请求，从而实现与服务器的通信。这使得开发者可以实现 AJAX（Asynchronous JavaScript and XML）技术，实现页面的异步更新和数据的获取。

3. Fetch API：Fetch API 是一种替代 XMLHttpRequest 的新的网络请求 API，提供了更简洁和现代的方式来发送网络请求，并且支持 Promise，使得异步代码更加简洁和易于理解。

4. Canvas API：Canvas API 允许开发者通过 JavaScript 在页面上绘制图形和图像。通过 Canvas API，可以实现图形绘制、动画效果、图像处理等功能。

5. Web Storage API：Web Storage API 允许开发者在客户端存储数据，包括 localStorage 和 sessionStorage，可以用于存储用户的本地数据。

6. Geolocation API：Geolocation API 允许开发者获取用户的地理位置信息，用于实现基于位置的服务和应用。

除了上述常见的 Web API，还有许多其他的 Web API，比如音视频 API、设备 API、文件 API 等，都允许开发者在浏览器中实现更多的功能和交互效果。Web API 是 Web 开发中非常重要的一部分，通过熟悉和掌握这些 API，开发者可以创建出更丰富和高效的 Web 应用程序。

20.如何优化SEO

优化SEO（Search Engine Optimization）是指通过优化网站内容和结构，使其更符合搜索引擎的要求，从而提高网站在搜索引擎结果页（SERP）中的排名，增加网站的可见性和流量。以下是一些优化SEO的方法：

1. 关键词研究和使用：确定网站的主要关键词，并在网站的标题、内容、URL和元数据中合理使用这些关键词，使得搜索引擎能够更好地理解网站的主题和内容。

2. 优质内容：发布高质量、原创、有价值的内容，吸引用户和搜索引擎的注意。持续更新网站内容，保持网站的活跃度。

3. 网站结构优化：确保网站有清晰的导航结构，方便用户和搜索引擎浏览和索引网站内容。使用语义化的HTML标签，提高搜索引擎对内容的理解。

4. 网站速度优化：优化网站的加载速度，包括图片压缩、资源合并、使用CDN等，以提高用户体验和搜索引擎排名。

5. 移动友好性：确保网站在移动设备上能够良好地显示和操作，因为搜索引擎越来越重视移动友好的网站。

6. 外部链接：争取其他高质量网站的外部链接，提高网站的权威性和可信度。注意避免低质量的外部链接，避免被搜索引擎降权。

7. 社交媒体整合：在网站中加入社交媒体分享按钮，鼓励用户分享网站内容，增加网站的曝光度。

8. 使用合适的标题和描述：每个页面都应该有合适的标题和描述，这些信息将显示在搜索结果中，直接影响用户的点击率。

9. 使用合适的URL结构：使用简洁、语义化的URL，包含关键词，有助于搜索引擎理解网页内容。

10. 定期监测和分析：使用工具来监测网站的流量、排名和关键词效果，根据数据分析调整优化策略。

综合使用这些优化方法，可以提高网站在搜索引擎中的排名，增加网站的可见性和流量，从而提升网站的业务价值。需要注意的是，SEO是一个长期的过程，需要持续不断地优化和改进，而不是一蹴而就的工作。