前端面试题（十一）

57. 浏览器渲染流程

• 浏览器渲染页面的基本流程是什么？

  1. 解析 HTML：浏览器会将 HTML 转换为一个 DOM 树。
  2. 解析 CSS：浏览器会将 CSS 转换为一个 CSSOM 树。
  3. 构建渲染树：DOM 树和 CSSOM 树结合，构建出渲染树。渲染树只包含需要渲染的节点。
  4. 布局 (Layout)：根据渲染树，浏览器会计算每个元素的布局位置，决定元素的大小和位置。
  5. 绘制 (Paint)：浏览器会将元素绘制到屏幕上。
  6. 合成 (Compositing)：如果页面包含复杂的图层，浏览器会将这些图层组合在一起，最终显示在屏幕上。
  • 渲染过程的关键点：
    1. 回流 (Reflow)：当 DOM 结构或几何属性（如宽高、位置）发生变化时，需要重新计算布局，称为回流。回流是影响性能的关键操作，应尽量避免频繁回流。
    2. 重绘 (Repaint)：当元素的样式发生变化但没有影响布局时（如颜色、背景等），浏览器只需要重新绘制元素，称为重绘。重绘的代价比回流低。

58. 跨域

• 什么是跨域？

  • 跨域 指的是浏览器在不同域之间进行请求时，因同源策略 (Same-Origin Policy) 限制，导致某些请求无法成功发出或返回结果。不同协议、域名、端口都被认为是不同的源。

• 常见的跨域解决方案有哪些？

  1. CORS (跨域资源共享)：通过在服务器端设置响应头 Access-Control-Allow-Origin，允许来自特定域的请求跨域访问资源。

     • 简单请求：GET 或 POST 请求且不包含自定义头部时，直接通过 CORS。
     • 预检请求：如果是复杂请求，浏览器会先发送 OPTIONS 请求进行预检，确保服务器允许该请求再实际发送。

     例子：

     Access-Control-Allow-Origin: https://example.com
     

  2. JSONP (JSON with Padding)：通过 <script> 标签进行跨域请求，因为 <script> 标签不受同源策略的限制，服务器返回一个包含回调函数的 JSON 数据。

     • 缺点：仅支持 GET 请求，安全性较低。

  3. 代理服务器：通过在同源的服务器上设置代理，将跨域请求通过该服务器转发到目标服务器，从而避免浏览器的跨域限制。

  4. 跨域资源共享 iframe + postMessage：使用两个域名的 iframe，结合 postMessage 进行数据通信。

59. 性能优化

• 前端性能优化有哪些常见的方法？

  1. 减少 HTTP 请求：

     • 合并文件：将多个 CSS 或 JavaScript 文件合并成一个文件，减少请求次数。
     • 使用图像精灵 (CSS Sprites)：将多个小图标合并成一张图片，使用 background-position 显示相应部分。
     • 懒加载：对于页面中暂时不可见的图片或资源，延迟加载（如图片懒加载）。

  2. 优化 CSS 和 JavaScript：

     • 压缩文件：通过工具（如 UglifyJS、Terser）压缩 CSS 和 JavaScript 文件，减少文件体积。
     • 异步加载 JavaScript：将非必要的 JavaScript 脚本放置在页面底部，或使用 async 和 defer 属性异步加载脚本，避免阻塞渲染。

  3. 减少重排和重绘：

     • 避免频繁操作 DOM：将多次 DOM 操作合并为一次批量操作，或使用文档片段（DocumentFragment）来操作 DOM。
     • CSS 动画优化：使用 transform 和 opacity 进行动画效果，这些属性不会触发回流，只会触发重绘。

  4. 使用缓存：

     • HTTP 缓存：通过设置 Cache-Control 和 ETag 等响应头，让浏览器缓存静态资源，减少请求次数。
     • 本地存储：利用 localStorage、sessionStorage 和 IndexedDB 等浏览器存储机制缓存数据。

  5. 内容交付网络 (CDN)：通过使用 CDN，将资源分发到全球多个服务器节点，用户请求会被重定向到离自己最近的节点，从而缩短资源加载时间。

60. 防抖和节流

• 什么是防抖 (Debounce)？

  • 防抖 是指在事件被触发后等待一段时间，如果该事件在等待期间再次触发，则重新计时，直到一定时间后没有再次触发，才会执行事件处理函数。

  • 应用场景：如搜索框输入，当用户停止输入一段时间后再发送请求，减少不必要的请求。

  • 例子：

    function debounce(fn, delay) {
      let timer;
      return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
      };
    }
    

• 什么是节流 (Throttle)？

  • 节流 是指限制一个函数在一定时间内只能执行一次，即使在该时间段内该事件多次触发，函数也只会在该时间段结束后执行一次。

  • 应用场景：如窗口滚动事件或页面缩放事件，需要控制执行频率，避免性能消耗过大。

  • 例子：

    function throttle(fn, delay) {
      let lastTime = 0;
      return function(...args) {
        let now = Date.now();
        if (now - lastTime >= delay) {
          fn.apply(this, args);
          lastTime = now;
        }
      };
    }
    

61. WebSocket

• 什么是 WebSocket？

  • WebSocket 是一种协议，它提供了双向通信的能力，允许客户端和服务器之间在建立连接后进行全双工的数据传输。与 HTTP 协议不同，WebSocket 是持久化连接，而 HTTP 是一次请求一次响应的短连接。

• WebSocket 的工作原理是什么？

  1. 建立连接：客户端通过发送 HTTP 请求并附带 Upgrade: websocket 头信息来请求升级协议。
  2. 握手成功：服务器接收请求并返回响应，成功升级后建立起 WebSocket 连接。
  3. 数据传输：连接建立后，客户端和服务器可以随时通过此连接相互发送消息，而无需额外的请求开销。
  4. 关闭连接：任一方可以随时关闭 WebSocket 连接，发送 close 帧即可。

• WebSocket 的应用场景有哪些？

  1. 实时聊天应用：如微信、Slack 等即时通讯工具，WebSocket 可以实现实时双向消息传递。
  2. 在线游戏：多人在线游戏需要频繁且实时的状态同步，WebSocket 是很好的选择。
  3. 股票行情推送：股票、外汇等金融行情的实时更新需要服务器向客户端推送大量的更新数据，WebSocket 可以提供高效的数据传输。

62. Promise 和 async/await

• 什么是 Promise？

  • Promise 是一种异步编程的解决方案，它表示一个尚未完成但将来可能会完成或失败的操作。Promise 可以处于三种状态之一：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

  • 例子：

    const promise = new Promise((resolve, reject) => {
      setTimeout(() => resolve('Success!'), 1000);
    });
    
    promise.then(result => console.log(result));  // 1 秒后输出 "Success!"
    

• 什么是 async/await？

  • async/await 是基于 Promise 的语法糖，用于简化异步操作的写法，使异步代码看起来像同步代码。

  • 例子：

    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error)