浏览器面试

HTML、CSS、JAVASCRIPT 是如何变成页面的？

HTML、CSS 和 JavaScript 是构建网页的三大基础技术，它们如何共同作用以生成页面的过程大致如下：

1. HTML（超文本标记语言）：HTML 提供页面结构和内容，定义了网页中的各种元素，例如标题、段落、链接等。浏览器解析 HTML 标记并构建 DOM（文档对象模型），形成页面的结构。
2. CSS（层叠样式表）：CSS 用于样式设计，定义页面中各个 HTML 元素的外观、布局和样式。它能够控制字体、颜色、大小、边距、布局等，让页面呈现出所需的视觉效果。浏览器将 CSS 样式表与 DOM 结合，生成渲染树（Render Tree）。
3. JavaScript：JavaScript 是一种脚本语言，它能够与 HTML 和 CSS 交互，实现动态效果和交互行为。通过 JavaScript，可以修改页面的内容、样式和结构，还可以处理用户的交互事件。JavaScript 可以改变 DOM 结构和渲染树，也能处理异步请求、动画效果、表单验证等。

当浏览器加载一个网页时，它会：

• 解析 HTML 结构并构建 DOM 树。
• 根据 CSS 样式表创建渲染树。
• 将 DOM 树和渲染树结合，形成可视化的页面。
• JavaScript 会在页面加载过程中执行，它可以修改页面内容、样式和行为。

这些技术共同作用，使得网页能够以交互、视觉上的方式呈现给用户，并在用户与页面进行交互时提供动态、实时的体验。

chrome 仅仅打开一个页面，为什么有有4个进程？

Chrome 通常会启动多个进程来处理不同的任务和标签页，这些进程包括：

1. Browser 进程：这是 Chrome 浏览器的主进程，负责管理浏览器界面，处理用户输入（例如地址栏输入、书签等）、存储数据、维护标签页以及处理一些底层操作，比如网络请求和文件访问等。
2. Renderer 进程：每个标签页通常会有一个单独的 Renderer 进程，负责渲染页面内容。这样做可以使得网页在一个进程崩溃时不会影响到其他页面，提高了浏览器的稳定性和安全性。
3. GPU 进程：负责处理 GPU 相关的任务，例如绘制页面和执行一些需要 GPU 加速的操作，加快页面渲染速度。
4. Utility 进程：负责执行一些 Chrome 浏览器的工具和附加功能，例如处理 PDF 文件、执行插件等。

这种多进程的设计可以提高浏览器的性能、安全性和稳定性。每个进程都独立运行，一个进程出现问题通常不会影响到其他进程和标签页的正常工作。

浏览器内核有啥，咋解决兼容问题

常见的浏览器内核有：

1. Blink（基于WebKit）：由Google开发的开源渲染引擎，用于Chrome和Chromium浏览器。
2. WebKit：最初由苹果公司开发，是一种开源的浏览器引擎，用于Safari浏览器。
3. Gecko：Mozilla基金会开发的引擎，用于Firefox浏览器。
4. Trident：微软开发的浏览器引擎，用于Internet Explorer浏览器。自IE11起，微软开始采用Edge作为浏览器引擎。

为了解决不同浏览器内核的兼容性问题，可以采取以下策略：

1. 标准化：编写符合 W3C 标准的 HTML、CSS 和 JavaScript 代码。这样可以让页面更符合标准，减少在不同浏览器上的显示差异。
2. 特性检测：使用 JavaScript 进行特性检测，根据浏览器支持的功能来选择合适的代码执行路径。比如使用 if 语句检测浏览器是否支持某个 API 或特性，然后提供相应的代码处理方式。
3. CSS 前缀：在使用 CSS3 新特性时，考虑为不同浏览器添加对应的前缀，如 -webkit-、-moz-、-ms- 等，以确保各浏览器支持相应的样式。
4. Polyfill 和 Shim：使用 polyfill（填充器）或 shim（垫片）来填补浏览器缺失的功能或 API。这些脚本能够在不支持某些功能的浏览器上模拟这些功能，提供一致的体验。
5. 测试和调试工具：利用现有的测试和调试工具（如Chrome开发者工具、Firebug、Fiddler等）来检测和解决兼容性问题。这些工具可以帮助开发者查找问题并进行修复。

通过以上方式，可以在一定程度上解决不同浏览器内核带来的兼容性问题，提供更加一致的用户体验。

强缓存，协商缓存

强缓存和协商缓存都是浏览器缓存机制中的重要概念，用于减少网络请求，提高页面加载速度。

强缓存：

强缓存是指浏览器在请求资源时，根据一些 HTTP 头信息判断该资源是否可以直接从本地缓存中获取，而不需要发送请求到服务器。常用的标识强缓存的 HTTP 头有：

• Expires：指定资源的过期时间，告诉浏览器在这个时间之前可以直接从缓存中获取资源。
• Cache-Control：比 Expires 更灵活，可以设置更多的缓存控制方式，例如max-age（资源在缓存中保持的最大时间）等。

如果资源处于强缓存状态，浏览器不会发送请求到服务器，而是直接从本地缓存中获取资源。这样可以加快页面加载速度，减少网络流量消耗。但缺点是，如果服务器上的资源更新了，客户端可能仍然获取到旧版本的资源。

协商缓存：

协商缓存是在资源过期后，浏览器发送请求到服务器，服务器会根据一些验证信息来判断客户端缓存的资源是否是最新的。常用的标识协商缓存的 HTTP 头有：

• Last-Modified / If-Modified-Since：服务器返回资源的最后修改时间，浏览器在再次请求资源时会发送 If-Modified-Since 字段，询问资源在该时间之后是否有修改。
• ETag / If-None-Match：服务器返回资源的唯一标识（通常是哈希值），浏览器在再次请求资源时会发送 If-None-Match 字段，询问资源是否发生了变化。

如果服务器判断资源未发生变化（比对验证信息一致），会返回状态码 304（Not Modified），告诉浏览器可以继续使用本地缓存。如果资源发生了变化，服务器返回新的资源内容，浏览器会更新缓存并重新下载。

这种机制可以保证客户端始终获取到最新的资源，而不是使用过期的缓存。

区别：

• 强缓存通过设置过期时间或者 Cache-Control 来判断是否直接使用缓存，而协商缓存则是通过与服务器验证资源的有效性来确定是否使用缓存。
• 强缓存优先级高于协商缓存，当资源同时符合强缓存和协商缓存条件时，浏览器会优先使用强缓存。

这两种缓存方式常常结合使用，通过合理设置缓存控制策略，可以在一定程度上提高页面加载速度，减少网络请求。