FAQ?

解释浏览器标准模式和怪异模式

标准模式（也称为严格模式）是浏览器按照HTML和CSS规范处理网页的模式。这意味着浏览器将尽力显示HTML和CSS的正确解释，遵循最新的W3C规范和推荐。在标准模式下，浏览器会使用严格的布局和渲染规则，比如盒模型、块级盒和行框盒等等。

而怪异模式（也称为混杂模式或兼容模式）则是浏览器使用较为宽松的规则渲染网页的模式，在这种模式下，浏览器可能会用自己的方式处理HTML和CSS，而不是遵循W3C标准。这种模式源于早期浏览器中对HTML和CSS支持的限制，保留了对这些旧网页的支持。

要理解网页在什么模式下，可以查看浏览器的开发者工具，并检查标头元素是否有声明DTD（文档类型），因为这将定义页面的模式。浏览器在默认情况下通常会尝试切换到标准模式，但是在某些情况下，它可能会自动切换到怪异模式，特别是当网页中有错误时。因此，开发人员应该尽量编写符合HTML和CSS标准的代码，以便在不同的浏览器中以标准模式呈现网页。

chrome浏览器一般哪些进程

当用户打开一个新的标签页（Tab）时，Chrome 浏览器通常会创建一个新的渲染进程。以下是一般情况下 Chrome 浏览器中的各个进程：

1. 浏览器进程 (Browser Process)：负责浏览器的界面显示、用户交互、子进程管理，以及通过 IPC 与渲染进程、插件进程、网络进程等通信。
2. 渲染进程 (Renderer Process)：渲染网页，每个标签页都有一个独立的渲染进程，用于处理网页 V8 引擎、JavaScript 执行、布局和绘制等任务，以保证页面的流畅性和响应速度。因为渲染进程具有很高的权限，可以访问用户的敏感信息，所以 Chrome 浏览器通过沙盒机制，将每个渲染进程限制在自己的进程空间内，防止恶意代码对系统造成危害。渲染进程中还包括以下类型的子进程：
   1. 主渲染进程（Main Renderer Process）：包括浏览器界面、地址栏等元素。
   2. 子渲染进程（Sub Renderer Process）：渲染网页的具体内容。
   3. GPU渲染进程（GPU Process）：处理 GPU 相关任务，例如 3D 加速等。
3. 插件进程 (Plugin Process)：用来运行 NPAPI 插件，每种插件对应一个插件进程。
4. GPU进程 (GPU Process)：处理与 GPU 相关的任务，例如 WebGL。
5. 网络进程 (Network Process)：负责处理网络请求和响应，以及路由功能。
6. 绑定进程 (Utility Process)：负责解析运行 Chrome 浏览器内部页面协议（chrome://），以及一些外部插件服务。
7. 扩展进程 (Extension Process)：负责运行 Chrome 扩展（Extension）应用程序

Chrome 浏览器中有以下几种线程

1. 主线程（Main Thread）：也称 UI 线程，是唯一运行在浏览器进程中的线程，负责用户界面、输入事件、JavaScript 执行和页面交互等。
2. I/O 线程（I/O Thread）：负责处理大部分浏览器事件（如鼠标点击、键盘输入等）的输入输出操作，同时管理浏览器的文件缓存。
3. 渲染线程（Render Thread）：渲染进程中的子线程，负责网页的渲染，以及与 GPU 进程交互和通信，而具体的页面 JavaScript 执行任务则由该线程进程提交到 V8 引擎线程中执行。
4. V8 引擎线程（V8 Thread）：负责 JavaScript 代码在渲染线程中的执行，包括脚本解析、执行和垃圾回收等。
5. 网络线程（Network Thread）：浏览器进程中的子线程，负责所有的网络请求和响应，与网络进程进行通信。
6. GPU 线程（GPU Thread）：GPU 进程中的线程，负责处理图像的呈现和渲染任务。

这些线程都是在各自的进程中启动的，通过进程间通信（IPC）机制来相互协作，实现浏览器的各项功能。其中，主线程、I/O 线程、网络线程、GPU 线程均由浏览器进程启动，而渲染线程和 V8 引擎线程则是由渲染进程启动。

有哪些可能引起前端安全的问题?

1. 跨站脚本攻击（XSS）：攻击者通过注入恶意脚本代码，使得网站在用户浏览器中执行这些脚本，从而窃取用户信息、篡改页面内容等。

2. 跨站请求伪造攻击（CSRF）：攻击者利用受害者已经登录的身份，在用户不知情的情况下发送恶意请求，执行未授权的操作。

3. 点击劫持攻击：攻击者将目标网站嵌入在一个透明的覆盖层下，诱使用户在不知情的情况下点击恶意按钮或链接，从而触发未预期的操作。

4. 不安全的数据传输：未使用加密协议（如HTTPS）传输敏感数据，导致数据被拦截和篡改。

5. 不当使用第三方库和插件：使用不受信任或过时的第三方库和插件，可能存在漏洞或安全问题，导致被攻击者利用。

6. 不当处理用户输入：未对用户输入进行充分验证和过滤，导致存在代码注入或其他安全漏洞。

7. 不当配置安全策略：未正确配置内容安全策略（CSP）、跨域资源共享（CORS）等安全策略，导致恶意脚本或资源的加载。

8. 不安全的身份验证和授权：使用不安全的方式进行用户身份验证和授权，如明文存储密码、不合理的会话管理等。

9. 敏感信息泄露：在页面或代码中不当处理敏感信息，导致信息泄露，如将敏感信息直接存储在浏览器端或日志中。

10. 过度信任客户端：未进行合适的输入验证和权限验证，使得客户端可能发送恶意请求或绕过验证。

网络劫持有哪几种，如何防范？

1. DNS劫持：攻击者篡改DNS解析过程，将域名解析到错误的IP地址上。防范方法包括：

   • 使用可信赖的DNS解析服务提供商。
   • 配置DNSSEC（DNS安全扩展）来验证域名解析的完整性。
   • 定期检查DNS解析配置，确保没有异常。

2. ARP劫持：攻击者在本地网络中发送虚假的ARP（地址解析协议）响应，将合法的IP地址映射到攻击者的MAC地址上。防范方法包括：

   • 使用虚拟专用网络（VPN）来加密通信，阻止ARP劫持。
   • 配置网络设备，限制网络中ARP响应的广播范围。
   • 定期检查网络设备，确保没有异常。

3. HTTP劫持：攻击者篡改HTTP通信，截取或修改数据流量。防范方法包括：

   • 使用HTTPS加密协议来保护通信的安全性。
   • 配置响应头部中的安全策略，如Strict-Transport-Security（STS）和Content-Security-Policy（CSP）。
   • 定期检查网站的通信安全性，确保没有异常。

4. WiFi劫持：攻击者通过伪造WiFi热点或中间人攻击等方式窃取用户的信息。防范方法包括：

   • 连接可信赖的WiFi网络，避免连接未知或不受信任的WiFi热点。
   • 使用VPN来加密通信，阻止中间人攻击。
   • 关闭WiFi自动连接功能，手动选择要连接的网络。

5. MITM攻击（中间人攻击）：攻击者在通信的两端之间插入自己，窃取信息或篡改通信内容。防范方法包括：

   • 使用加密通信协议，如HTTPS、SSL/TLS等，防止信息被窃取或篡改。
   • 验证服务端的数字证书，确保与合法的服务端进行通信。
   • 尽量避免使用公共的、不安全的网络进行敏感操作。

浏览器渲染进程的线程有哪些

1. 主线程（Main Thread）：也称为渲染线程或UI线程，负责处理用户交互、执行 JavaScript 代码、布局计算和渲染页面等任务。

2. GUI 渲染线程：负责将渲染进程接收到的绘制命令转化为页面的可视输出，包括绘制窗口、处理图像和文字等。

3. JavaScript 引擎线程：负责解析和执行 JavaScript 代码，例如 V8 引擎线程。

4. 定时器线程（Timer Thread）：负责处理定时器相关的任务，包括 setTimeout、setInterval 等。

5. 事件触发线程（Event Thread）：负责处理事件的派发和监听，例如用户交互事件、网络请求的响应等。

6. 异步 HTTP 请求线程：负责发送网络请求和接收响应数据。

7. Web Worker 线程：Web Worker 是运行在后台的独立线程，可以进行一些耗时的计算任务，与主线程相互独立。

僵尸进程和孤儿进程是什么？

僵尸进程：当一个进程的执行完成，但其父进程尚未对其进行处理（即尚未调用 wait() 或类似的系统调用来获取该进程的退出状态），该进程就会变成僵尸进程。僵尸进程不再执行任何代码，但仍然存在于进程表中，以记录其退出状态，直到其父进程对其进行处理。僵尸进程不会占用任何系统资源，但如果大量积累，可能会消耗一定的进程表资源。

孤儿进程：当一个父进程先于其子进程退出时，子进程就会成为孤儿进程。孤儿进程的父进程 ID 变为 1（通常为 init 进程），由 init 进程接管其管理。孤儿进程不会引起系统问题，因为它已经有一个新的父进程来管理它。

如何实现浏览器内多个标签页之间的通信?

1. Cookies：通过在不同标签页之间共享和读取同一域名下的 Cookie 数据来进行通信。每个标签页可以读取和修改共享的 Cookie 值，从而实现简单的通信。

2. LocalStorage/SessionStorage：使用浏览器的本地存储机制，如LocalStorage或SessionStorage，来存储和读取共享数据。不同标签页可以通过监听Storage事件来感知到其他标签页对存储的更改。

3. Broadcast Channel API：通过Broadcast Channel API实现跨标签页的消息广播和监听。该API允许在同一域名下的不同标签页之间发送消息，并通过事件订阅机制接收消息。

4. SharedWorker：使用SharedWorker作为中间代理，不同标签页可以通过与共享的Worker进行通信，实现跨标签页的消息传递。

5. IndexedDB：利用浏览器的IndexedDB提供的数据库存储功能，不同标签页可以读取和写入同一数据库中的数据，以实现数据共享和通信。

6. Window.postMessage()：使用Window.postMessage()方法，通过向其他窗口发送消息和监听消息事件来实现跨标签页的通信。这种方式可以在不同域名和跨源的窗口之间进行通信。

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

点击刷新按钮或者按 F5：浏览器直接对本地的缓存文件过期，但是 会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对 文件检查新鲜度，返回结果可能是 304，也有可能是 200。 用户按 Ctrl+F5（强制刷新）：浏览器不仅会对本地文件过期，而且 不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有 请求过，返回结果是 200。 地址栏回车： 浏览器发起请求，按照正常流程，本地检查是否过期， 然后服务器检查新鲜度，最后返回内容。

点击刷新按钮或按 F5：这两种方式是浏览器的标准刷新操作，它们会向服务器发送一个请求，请求页面的最新版本。如果服务器设置了缓存策略，浏览器会检查缓存的页面是否过期，如果过期或者没有缓存，则会重新加载页面。

按 Ctrl+F5（强制刷新）：这个快捷键组合会强制浏览器忽略缓存，无论服务器返回的响应是否被缓存，都会向服务器发送一个新的请求，获取最新版本的页面。它会忽略浏览器缓存和代理服务器缓存，始终获取最新内容。

地址栏回车：在地址栏中输入网址并按下回车，也会向服务器发送一个请求，获取页面的最新版本。如果服务器设置了缓存策略，浏览器会根据缓存是否过期来判断是否重新加载页面。

总结：

1. 点击刷新按钮或按 F5：默认刷新方式，会根据缓存策略来决定是否使用缓存。

2. 按 Ctrl+F5（强制刷新）：强制忽略缓存，总是重新请求最新版本的页面。

3. 地址栏回车：与点击刷新按钮类似，根据缓存策略来决定是否使用缓存。

这些刷新方式在页面的展示效果上并没有区别，区别主要在于是否强制忽略缓存，获取最新的页面内容。在开发过程中，使用不同的刷新方式可以帮助我们检查缓存是否正常工作，或者强制获取最新的代码变更。

前端储存的⽅式有哪些？

1. cookies： 在 HTML5 标准前本地储存的主要⽅式，优点是兼容性好， 请求头⾃带 cookie⽅便，缺点是⼤⼩只有 4k，⾃动请求头加⼊cookie浪费流量，每个 domain 限制 20 个 cookie，使⽤起来麻烦，需要⾃ ⾏封装；
2. localStorage：HTML5 加⼊的以键值对(Key-Value)为标准的⽅式， 优点是操作⽅便，永久性储存（除⾮⼿动删除），⼤⼩为 5M，兼容 IE8+ ；
3. sessionStorage：与 localStorage 基本类似，区别是 sessionStorage 当⻚⾯关闭后会被清理，⽽且与 cookie、localStorage 不同，他不 能在所有同源窗⼝中共享，是会话级别的储存⽅式；
4. Web SQL：2010 年被 W3C 废弃的本地数据库数据存储⽅案，但是主流 浏览器（⽕狐除外）都已经有了相关的实现，web sql 类似于 SQLite， 是真正意义上的关系型数据库，⽤sql进⾏操作，当我们⽤JavaScript 时要进⾏转换，较为繁琐；
5. IndexedDB：是被正式纳⼊HTML5 标准的数据库储存⽅案，它是 NoSQL 数据库，⽤键值对进⾏储存，可以进⾏快速读取操作，⾮常适合 web 场景，同时⽤JavaScript 进⾏操作会⾮常便。

标准模式和怪异模式

标准模式（Standard Mode）和怪异模式（Quirks Mode）是浏览器在渲染 HTML 页面时采用的两种不同的渲染模式。它们主要区别于页面的渲染规则和解析方式。

1. 标准模式（Standard Mode）：

   • 也称为严格模式（Strict Mode）或标准兼容模式（Standards Mode）。
   • 在标准模式下，浏览器会按照 HTML 和 CSS 规范进行页面的渲染和排版。
   • 开发者应该优先考虑在标准模式下编写网页，以确保页面在不同浏览器中一致地呈现。

2. 怪异模式（Quirks Mode）：

   • 也称为混杂模式（Compatibility Mode）或怪异兼容模式（Quirks Compatibility Mode）。
   • 在怪异模式下，浏览器会尝试模拟早期浏览器的渲染行为，以保持旧网站的兼容性。
   • 怪异模式可能导致页面在不同浏览器中呈现不一致，同时也可能影响到一些现代特性的使用。

如何触发这两种模式取决于页面的 <!DOCTYPE> 声明：

• 如果 HTML 文档中包含了有效的 <!DOCTYPE> 声明，且声明符合标准，浏览器会进入标准模式。
• 如果缺少 <!DOCTYPE> 声明，或者声明不完整或不规范，浏览器可能会进入怪异模式。

使用标准模式有助于确保页面按照当前的 HTML 和 CSS 规范进行渲染，而怪异模式可能导致页面的渲染方式与标准模式下不一致。因此，在编写网页时，建议始终提供合适的 <!DOCTYPE> 声明，以确保页面以标准模式渲染。

DOCTYPE(⽂档类型) 的作⽤

浏览器渲染页面的两种模式（可通过 document.compatMode 获取.

CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C 的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈 现页面。

BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的 怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后 兼容的方式显示。

DOCTYPE（文档类型）是位于 HTML 文档开头的声明，用于指示浏览器使用哪个 HTML 版本解析文档。它的作用主要包括以下几个方面：

1. 文档解析模式选择： DOCTYPE 声明告诉浏览器使用哪种文档解析模式来解析页面。不同的 HTML 版本有不同的解析规则和特性，DOCTYPE 声明帮助浏览器选择正确的解析模式，确保页面以正确的方式呈现。

2. 文档验证： 一些 HTML 编辑器和工具可以使用 DOCTYPE 声明来验证文档的结构和格式是否符合规范。这有助于开发者编写符合标准的 HTML 代码。

3. 浏览器兼容性： 不同浏览器对 HTML 版本和解析模式的支持可能有所不同。通过提供正确的 DOCTYPE 声明，可以确保页面在各种浏览器中以一致的方式呈现。

4. 触发标准模式： 在标准模式下，浏览器会按照 HTML 和 CSS 规范进行页面渲染。如果缺少 DOCTYPE 声明或使用了过时的声明，浏览器可能会进入怪异模式（Quirks Mode），导致页面的渲染方式与标准模式不一致。

5. 性能优化： 使用正确的 DOCTYPE 声明有助于浏览器更快地解析和渲染页面，提升页面加载性能。

常见的 DOCTYPE 声明包括以下几种：

• HTML5：<!DOCTYPE html>
• HTML 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0 Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

正确使用 DOCTYPE 声明可以确保页面在不同浏览器和设备上以一致的方式呈现，提升页面的可靠性和性能。

HTML 语义化的理解

HTML 语义化是指在编写 HTML 代码时，使用合适的标签来明确表达文档的结构和内容，使页面具有更好的可读性、可访问性和搜索引擎优化性能。语义化的 HTML 代码能够传达更多的信息，有助于开发者和浏览器正确地理解页面的结构和内容。

以下是 HTML 语义化的一些重要理解点：

1. 合适的标签选择： 选择合适的 HTML 标签来表示不同的内容元素，如使用 <h1> 到 <h6> 标签表示标题的层级，使用 <p> 标签表示段落，使用 <ul> 和 <ol> 表示列表等。

2. 结构清晰： 使用语义化的标签可以将页面的结构清晰地呈现出来，使开发者和维护者更容易理解页面的布局和内容。

3. 可访问性： 语义化的 HTML 代码可以提升网页的可访问性，使屏幕阅读器等辅助技术更容易解读页面内容，从而使残障用户能够获得更好的浏览体验。

4. 搜索引擎优化： 语义化的 HTML 代码有助于搜索引擎理解页面的内容，提升页面在搜索结果中的排名，从而增加网站的曝光度。

5. 未来兼容性： 使用语义化的标签可以保证页面在未来的 HTML 版本中仍然能够正确显示和解释，增加代码的可维护性。

6. 样式和脚本分离： 通过为不同类型的内容使用不同的标签，可以将样式和脚本与内容分离，使页面结构更清晰，易于管理。

总之，HTML 语义化是一种良好的编码实践，可以提升网页的质量和可用性，同时也有助于开发者更好地组织和维护代码。

浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

HTML5 引入了离线储存（Offline Storage）的功能，主要通过使用应用程序缓存（Application Cache）来实现。应用程序缓存允许开发者定义一组资源，这些资源可以在用户离线时被浏览器缓存下来，从而实现离线访问。

浏览器对 HTML5 离线储存资源进行管理和加载的过程如下：

1. 定义应用程序缓存清单（Cache Manifest）： 开发者需要在网页中创建一个文本文件，通常命名为 manifest.appcache，用于定义哪些资源需要被缓存。

2. 设置 HTML 标签属性： 在 HTML 页面中，需要在 <html> 标签中添加 manifest 属性，指向定义的清单文件。例如：<html manifest="manifest.appcache">。

3. 浏览器解析清单文件： 当用户访问页面时，浏览器会解析指定的清单文件，其中列出了需要离线缓存的资源，包括 HTML、CSS、JavaScript、图片等。

4. 缓存资源： 浏览器会根据清单文件中定义的资源列表，将这些资源下载并缓存到本地。这些资源会在用户离线时使用。

5. 更新资源： 当用户访问页面时，浏览器会检查清单文件中的资源是否有更新。如果有更新，浏览器会下载更新的资源并进行更新。这可以通过在清单文件中修改版本号等方式来触发。

6. 离线访问： 当用户离线时，他们仍然可以访问缓存的资源，包括页面、样式、脚本等，使网页在断网或网络不稳定的情况下也能正常显示。

需要注意的是，应用程序缓存在一些方面存在一些限制和缺点，例如缓存容量受限、更新资源困难等。另外，由于安全性问题，现代的网络标准越来越倾向于使用 Service Worker 来实现更强大、灵活的离线访问和缓存控制。

localStorage 和 cookie 到底哪个更安全

TODO