前端面试题（十三）

68. 常见前端框架对比

• React、Vue 和 Angular 的区别是什么？

  1. React：

     • 特点：基于组件化和声明式编程，核心思想是通过状态驱动视图更新，利用虚拟 DOM 来提高性能。
     • 生态系统：React 本身只是一个 UI 库，通常需要配合 React Router、Redux 等其他库来构建完整的应用。
     • 适用场景：适合灵活的项目架构，尤其是在需要构建复杂的 UI 界面时。

  2. Vue：

     • 特点：轻量级、易上手，采用双向数据绑定和基于模板的语法。Vue 的渐进式框架设计使得它既可以用于简单项目，也可以用于复杂的单页应用。
     • 生态系统：Vue 官方提供了完整的生态支持，如 Vue Router、Vuex、Vue CLI 等，开发体验较为完善。
     • 适用场景：适合从小型项目到中大型项目，尤其是团队成员有较多前端经验的情况下。

  3. Angular：

     • 特点：完整的前端框架，提供了依赖注入、双向数据绑定、路由等完整功能。Angular 的设计偏向于企业级应用，结构和规则较为严谨。
     • 生态系统：Angular 是一个一站式框架，内置了很多企业级功能，比如模块化设计、依赖注入等，开发体验相对笨重但功能完备。
     • 适用场景：适用于大型企业项目，特别是对代码质量和一致性要求较高的场景。

69. 事件机制

• JavaScript 的事件机制是什么？

  • 事件机制 是指浏览器处理事件的过程，主要包含三个阶段：捕获阶段、目标阶段 和 冒泡阶段。
  1. 捕获阶段：事件从文档的根节点开始向目标元素传递。
  2. 目标阶段：事件在目标元素上触发。
  3. 冒泡阶段：事件从目标元素向上冒泡，直到文档的根节点。

• 事件代理：

  • 事件代理 是一种提高性能的技巧，通过将事件监听器绑定到父元素上，而不是每个子元素。事件冒泡机制会将子元素的事件传递到父元素上，父元素可以通过 event.target 判断具体是哪个子元素触发了事件。

  • 例子：

    document.getElementById('parent').addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        console.log('Clicked item:', event.target.textContent);
      }
    });
    

70. 虚拟 DOM

• 什么是虚拟 DOM？

  • 虚拟 DOM (Virtual DOM) 是 React 和 Vue 等现代前端框架中使用的一种机制。它是一种轻量级的 JavaScript 对象，用来描述真实 DOM 结构。
  • 工作原理：当状态发生变化时，框架会生成新的虚拟 DOM，然后将新旧虚拟 DOM 进行比较 (diff)，最终只更新发生变化的部分，避免了直接操作真实 DOM 所带来的性能开销。

• 虚拟 DOM 的优点：

  1. 性能优化：通过 diff 算法减少了对 DOM 的直接操作，避免了不必要的回流和重绘。
  2. 跨平台渲染：虚拟 DOM 并不依赖浏览器的 DOM，可以用于服务端渲染、移动端等多种平台。

• 虚拟 DOM 的缺点：

  1. 初次渲染速度稍慢：相比直接操作 DOM，初次渲染时会有额外的虚拟 DOM 计算开销。
  2. 复杂场景下可能性能瓶颈：在某些极端场景下，虚拟 DOM 的 diff 算法可能并不比手动优化的 DOM 操作更快。

71. 浏览器渲染优化

• 如何优化浏览器渲染性能？
  浏览器的渲染性能可以通过多种方式进行优化，主要目的是减少不必要的回流和重绘。

  1. 避免频繁操作 DOM：

     • 尽量将多次 DOM 操作合并为一次，或者使用文档片段 (DocumentFragment) 批量操作 DOM。
     • 例子：

       const fragment = document.createDocumentFragment();
       for (let i = 0; i < 1000; i++) {
         const li = document.createElement('li');
         li.textContent = `Item ${i}`;
         fragment.appendChild(li);
       }
       document.getElementById('list').appendChild(fragment);
       

  2. 减少重排和重绘：

     • 重排 (Reflow) 是指浏览器重新计算元素的布局，而重绘 (Repaint) 是指重新绘制元素的外观。避免频繁触发这些操作可以提高性能。
     • 优化策略：
       • 将需要多次修改样式的操作合并在一次进行。
       • 使用 transform 和 opacity 进行动画，这些属性不会触发重排。

  3. 使用 CSS3 硬件加速：

     • 通过使用 transform、opacity 和 will-change 等 CSS 属性，可以触发 GPU 硬件加速，减少 CPU 的负担，提高动画和滚动的流畅度。

  4. 懒加载：

     • 对于图片和其他资源，只有在用户即将滚动到相应区域时才加载，减少首屏加载时间。
     • 例子：

       const img = document.createElement('img');
       img.loading = 'lazy';
       img.src = 'path/to/image.jpg';
       

72. Promise 和异步编程

• Promise 的工作原理是什么？

  • Promise 是一种用于处理异步操作的机制，它代表一个尚未完成但将来可能会完成的操作。Promise 有三种状态：

    1. pending（进行中）：操作尚未完成。
    2. fulfilled（已完成）：操作成功完成，并有返回值。
    3. rejected（已失败）：操作失败，并有错误信息。

  • 例子：

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

• async/await 的作用是什么？

  • async/await 是基于 Promise 的语法糖，允许开发者以同步的方式编写异步代码，简化了 Promise 的链式调用。
  • 例子：

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

73. 浏览器中的事件循环

• 什么是事件循环？

  • 事件循环 (Event Loop) 是 JavaScript 的执行机制，它负责协调代码执行、事件处理和任务调度。JavaScript 是单线程语言，因此使用事件循环来管理异步任务的执行。

• 事件循环的工作原理：

  1. 宏任务 (Macro Task)：宏任务包括主代码块、setTimeout、setInterval 等。每次执行完宏任务后，事件循环会检查微任务队列。
  2. 微任务 (Micro Task)：微任务包括 Promise.then、MutationObserver 等。微任务的优先级高于宏任务，事件循环在执行完一个宏任务后会立即清空微任务队列。
  • 例子：

    console.log('start');
    setTimeout(() => {
      console.log('timeout');
    }, 0);
    Promise.resolve().then(() => {
      console.log('promise');
    });
    console.log('end');
    // 输出顺序：start -> end -> promise -> timeout
    

74. 防抖和节流

• 防抖 (Debounce)：

  • 防抖 是指在事件被频繁触发时，只有在一定时间内没有再次触发该事件，才会执行相应的处理函数。防抖的本质是推迟执行，直到事件不再频繁触发为止。常用于减少输入框的频繁搜索请求或窗口大小调整操作。

  • 防抖的实现：

    function debounce(fn, delay) {
      let timer;
      return function (...args) {
        if (timer) clearTimeout(timer); // 如果有定时器，先清除它
        timer = setTimeout(() => {
          fn.apply(this, args); // 延迟执行目标函数
        }, delay);
      };
    }
    
    // 使用示例
    const handleResize = debounce(() => {
      console.log('窗口大小改变');
    }, 500);
    
    window.addEventListener('resize', handleResize);
    

• 节流 (Throttle)：

  • 节流 是指在一段时间内多次触发事件时，限制处理函数的执行频率，即保证在一定的时间间隔内只执行一次。常用于限制滚动事件、按钮重复点击等频繁触发的场景。

  • 节流的实现：

    function throttle(fn, interval) {
      let lastTime = 0;
      return function (...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
          lastTime = now;
          fn.apply(this, args); // 执行目标函数
        }
      };
    }
    
    // 使用示例
    const handleScroll = throttle(() => {
      console.log('页面滚动');
    }, 200);
    
    window.addEventListener('scroll', handleScroll);