前端高频面试题---浏览器篇

newboolean
129 阅读11分钟

1. javascript 页面从输入URL到页面加载显示完成，这个过程中都发生了什么。

当您在浏览器中输入URL并按下Enter键后，浏览器将开始加载和显示页面。在这个过程中，以下是主要发生了什么：

  1. URL解析：浏览器接收到您输入的URL后，会将其解析为网址和查询字符串。网址通常包括协议（如http或https）、域名和路径。查询字符串是包含在问号后面的参数，用于向服务器传递额外的信息。
  2. DNS查询：浏览器会通过DNS（域名系统）查询将域名解析为IP地址。这是一个快速的过程，通常只需要几毫秒。
  3. 建立连接：浏览器会使用HTTP或HTTPS协议建立一个与服务器之间的连接。如果使用HTTPS，浏览器将与服务器进行SSL握手，以加密通信并验证服务器的身份。
  4. 发送请求：一旦建立了连接，浏览器会向服务器发送一个HTTP请求。请求的内容通常包括请求方法（如GET、POST等）、请求头和请求体。请求头中包含有关请求的附加信息，如请求的资源类型、请求的语言等。
  5. 服务器处理：服务器接收到请求后，会根据请求的内容进行处理。如果请求的是HTML页面，服务器会查找并返回相应的HTML文件。如果需要额外的数据，服务器可能会与数据库或其他资源进行交互。
  6. 接收响应：浏览器接收到服务器的响应后，会检查响应状态码以确定请求是否成功。状态码200表示成功，而其他状态码则表示发生了错误或异常情况。
  7. 解析HTML：浏览器接收到HTML响应后，会开始解析并将其渲染成网页。这个过程涉及到将HTML标记转换为DOM树、CSS样式应用到DOM树上以及JavaScript代码的执行等步骤。
  8. 加载资源：在渲染过程中，浏览器可能需要加载额外的资源，如CSS文件、JavaScript文件、图像等。浏览器会并行加载这些资源，以尽可能快地显示页面。
  9. 页面完成：一旦所有必要的资源都已加载并渲染完成，浏览器会将页面显示在屏幕上。在此过程中，JavaScript可能会执行额外的交互和动态更新页面的功能。

总的来说，从输入URL到页面加载显示完成的过程涉及到多个步骤，包括URL解析、建立连接、发送请求、服务器处理、接收响应、解析HTML、加载资源和页面完成等步骤。

2. DOM树和渲染树的区别

DOM树和渲染树是浏览器在处理网页时生成的两种重要结构，它们在网页的加载和渲染过程中起着关键作用。以下是它们之间的主要区别：

  1. 构建过程：DOM树是根据HTML文档构建的，它反映了页面的结构。而渲染树是在DOM树的基础上，结合CSS样式信息，构建而成的。
  2. 节点信息：DOM树包含了所有HTML标签，包括head和隐藏元素。而渲染树不包括head和隐藏元素，且大段文本的每一个行都是独立节点，每一个节点都有对应的css属性。
  3. 显示效果：DOM树是页面结构，不直接显示。而渲染树表示DOM节点如何显示，包含了每个节点的位置、大小、颜色、字体等信息，是用户直接看到的页面效果。
  4. 异步加载：为了提高页面加载速度和改善用户体验，浏览器会异步加载JS、CSS等资源。在DOM树的基础上，通过并行加载这些资源，可以更快地构建渲染树。

总的来说，DOM树是页面的基础结构，而渲染树是在DOM树的基础上，结合CSS样式信息，最终呈现给用户的页面效果。

3. 什么是重绘(repaint)？什么是回流(reflow)？如何最小化重绘和回流?

重绘（repaint）和回流（reflow）都是浏览器在渲染HTML页面时的重要过程，但它们在处理页面布局和元素外观时的角色是不同的。

重绘是指当页面中的元素的部分属性发生改变时，比如颜色、字体或其他外观属性，浏览器只需要根据新的属性重新绘制元素，使其呈现新的外观。这个过程不需要重新计算页面的布局。

回流（也叫重排）则是指当页面中的元素的大小、位置或布局方式发生变化时，比如页面中的元素被缩放、移动或者部分元素被隐藏或显示，浏览器需要重新计算页面的布局。这个过程可能会引起页面的重绘。

值得注意的是，重绘不一定会引起回流（比如改变一个元素的颜色），但回流必然会引起重绘（比如改变元素的大小或位置）。

重绘和回流都是浏览器渲染页面的必要过程，但频繁的重绘和回流会消耗大量的计算资源，影响页面的性能。因此，应该尽量避免不必要的重绘和回流。以下是一些优化策略：

  1. 减少重绘：尽量减少对页面元素的属性进行的改变。例如，避免频繁的改变元素的颜色或字体。
  2. 批量修改：如果需要对多个元素进行相同的修改，可以一次性修改完成，而不是每次修改一个元素。这样可以减少重绘的次数。
  3. 使用CSS动画代替JavaScript动画：使用CSS动画可以避免频繁的JavaScript回调引起的重绘。
  4. 避免使用table布局：table布局在计算布局时会导致整个table的重排，使用其他的布局方式如flex或者grid可以避免这个问题。
  5. 使用requestAnimationFrame：这个API可以告诉浏览器你希望执行一个动画，浏览器会在下一次重绘之前调用你传入的回调函数，这样就可以将复杂的计算过程从回流中拆分出来，减少回流的次数。
  6. 使用transform替换top/left：transform属性的改变不会触发回流，只会触发重绘，因此使用transform替换top/left可以减少回流的次数。
  7. 避免在循环中使用JavaScript或者DOM操作：循环中的每次操作都可能导致页面的重排，尽可能将这些操作移到循环外部。
  8. 使用虚拟DOM：虚拟DOM是一种在内存中模拟DOM的技术，可以减少直接对真实DOM的操作，从而降低重绘和回流的次数。
  9. 使用Web Workers：Web Workers可以在后台线程上执行JavaScript，避免阻塞主线程，从而降低重绘和回流的次数。

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

浏览器内多个标签页之间的通信可以通过以下几种方式实现：

  1. 使用Web Workers：Web Workers是一种在Web浏览器中进行多线程处理的技术，它允许在后台线程中运行JavaScript，而不会干扰页面的性能。你可以在Web Worker中运行代码，并通过postMessage和onmessage事件处理器将其结果发送回主页面。
  2. 使用localStorage或sessionStorage：localStorage和sessionStorage是Web存储API的一部分，可以在浏览器中存储数据。你可以使用这些存储空间来在多个标签页之间共享数据。但是请注意，由于隐私和安全问题，存储在localStorage或sessionStorage中的数据可能会被清除。
  3. 使用IndexedDB：IndexedDB是一种在客户端存储大量结构化数据的Web API，它可以在多个标签页之间共享数据。与localStorage和sessionStorage相比，IndexedDB提供了更复杂的数据处理能力。
  4. 使用postMessage API：postMessage API允许在不同标签页之间发送消息。你可以在源标签页中使用postMessage将消息发送到目标标签页，然后在目标标签页中使用onmessage事件处理器接收并处理消息。
  5. 使用服务器端会话：如果你在服务器端处理会话，那么你可以将多个标签页的状态存储在服务器端会话中，并在需要时将其发送到客户端。这种方法需要在服务器端进行编程，但可以避免在客户端存储敏感数据。
  6. 使用WebSocket：WebSocket是一种在单个TCP连接上进行全双工通信的协议，它可以在浏览器和服务器之间实时交换数据。你可以在一个标签页中创建一个WebSocket连接，然后在其他标签页中连接到同一个WebSocket，以便它们可以共享数据。

请注意，上述方法的安全性和适用性可能因特定情况而异。在使用这些方法之前，请务必考虑你的特定需求以及相关的隐私和安全问题。

5. 浏览器发送HTTP请求时候缓存的流程

浏览器发送HTTP请求时，缓存的流程如下：

  1. 浏览器向服务器发送HTTP请求，请求特定的资源。
  2. 服务器响应请求，如果请求的资源在缓存中存在，并且是最新的，那么服务器会直接从缓存中发送该资源。这就是缓存命中。
  3. 如果请求的资源在缓存中不存在，或者缓存中的资源已经过期（例如，已过期的缓存HTTP头），那么服务器将从原始源（例如，Web服务器或CDN）获取资源，并将其发送给浏览器。这就是缓存未命中。
  4. 在缓存未命中的情况下，服务器可能会发送一个特殊的HTTP头，例如“304 Not Modified”，来告诉浏览器缓存中的版本仍然有效，并且不需要重新获取。
  5. 如果服务器没有发送任何特殊的HTTP头，那么浏览器将认为服务器已经为该资源提供了新版本，并更新其本地缓存。
  6. 浏览器会检查响应中的HTTP头信息，例如“Cache-Control”和“Expires”，以确定资源的过期时间和缓存策略。这些信息将用于指导浏览器如何在将来处理对该资源的请求。
  7. 浏览器会将获取的资源存储在本地缓存中，以便将来对该资源的请求可以直接从缓存中获取。

以上就是浏览器发送HTTP请求时缓存的流程。缓存策略和HTTP头的使用可以影响浏览器如何处理缓存和如何与服务器交互以获取资源。

6. 浏览器的渲染流程

浏览器的渲染流程通常包括以下步骤：

  1. 浏览器接收到HTML文档后，会将其转换为DOM树结构，这个过程包括构建DOM树、CSSOM树和渲染树。
  2. DOM树构建完成后，浏览器会将CSSOM树和DOM树合并为渲染树，这个过程包括将DOM节点与CSS样式关联起来，并计算每个节点的布局信息。
  3. 渲染树构建完成后，浏览器会按照渲染树的顺序将每个节点绘制到屏幕上，这个过程包括分层、生成绘制列表、提交到合成线程等步骤。
  4. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
  5. 合成线程发送绘制图块命令DrawQuad给浏览器进程。
  6. 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上。

在渲染过程中，浏览器会尽量减少重绘和回流次数以提高性能。重绘是指当页面中的元素的部分属性发生改变时，浏览器只需要根据新的属性重新绘制元素。回流是指当页面中的元素的大小、位置或布局方式发生变化时，浏览器需要重新计算页面的布局。为了优化性能，可以采取一些策略来减少重绘和回流次数，例如批量修改、使用transform代替top/left等。

avatar
文章
阅读
粉丝