面试前端性能优化八股文十问十答第二期

面试前端性能优化八股文十问十答第二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）如何优化动画？

优化动画可以通过以下几个方面进行：

• 使用 CSS 动画：利用 CSS3 提供的 transition 和 animation 属性来实现动画效果，因为 CSS 动画是由浏览器来执行的，通常比 JavaScript 动画性能更高。
• 使用硬件加速：通过 CSS 属性 transform 和 opacity 来触发 GPU 加速，可以使动画更加流畅。例如，可以使用 translate3d() 来进行 3D 变换，或者使用 opacity 来实现淡入淡出效果。
• 避免强制同步布局（Layout）：在动画过程中避免频繁地读取和修改布局信息，因为这会触发浏览器的重排和重绘，导致动画卡顿。可以通过将动画元素设置为 position: absolute 或 fixed，或者使用 transform 属性来避免布局抖动。
• 使用 requestAnimationFrame：使用 requestAnimationFrame 方法来执行动画，它可以让浏览器在下一次重绘之前执行动画逻辑，保证动画的流畅性，并且在页面被隐藏或最小化时自动暂停动画，节省 CPU 资源。
• 节流和防抖：对于一些频繁触发的事件（如滚动、鼠标移动等），可以使用节流（Throttling）和防抖（Debouncing）等技术来控制事件的触发频率，减少不必要的动画计算和渲染次数，提高性能。

2）documentFragment 是什么？

DocumentFragment 是一个轻量级的文档片段，它是 DOM 结构的一部分，但是不属于文档树的一部分。它可以作为一个临时的容器，用来存储和操作 DOM 元素，然后一次性地将这些元素添加到文档中，从而减少 DOM 操作所带来的性能开销。

DocumentFragment 可以通过 document.createDocumentFragment() 方法来创建，然后可以像操作普通的 DOM 元素一样来操作它，比如添加子节点、移除子节点等。一般情况下，当需要频繁地操作 DOM 元素时，可以将这些操作放在 DocumentFragment 中进行，然后将整个 DocumentFragment 添加到文档中，以提高性能。

3）用 documentFragment 跟直接操作 DOM 的区别是什么？

使用 DocumentFragment 和直接操作 DOM 的主要区别在于性能和渲染效率：

• 性能：直接操作 DOM 可能会导致浏览器频繁地触发重排和重绘，因为每次操作都会导致浏览器重新计算布局和样式。而使用 DocumentFragment 可以将多次操作合并成一次，然后一次性地将所有操作结果添加到文档中，减少了浏览器的重排和重绘次数，提高了性能。
• 渲染效率：直接操作 DOM 可能会导致页面闪烁或者布局抖动的问题，因为每次操作都会影响到页面的渲染。而使用 DocumentFragment 可以避免这些问题，因为所有的操作都是在一个虚拟的文档片段中进行的，直到操作完成后才将结果添加到文档中，用户在这个过程中不会看到任何中间状态的页面渲染。

因此，总的来说，使用 DocumentFragment 可以提高 DOM 操作的性能和渲染效率，特别是在需要频繁操作大量 DOM 元素时，使用 DocumentFragment 是一个很好的优化手段。

4）对节流与防抖的理解

• 节流（Throttling）：节流是一种限制一个函数在一定时间内执行的频率的技术。当一个函数被节流控制时，它不会在短时间内被连续调用，而是以一定的时间间隔执行。这可以防止过多的函数调用，特别是在一些频繁触发的事件中，如滚动、鼠标移动等。
• 防抖（Debouncing）：防抖是一种在一定时间内，延迟执行函数的技术。当一个函数被防抖控制时，如果在规定的时间内再次触发该函数，则会重新计时，直到没有新的触发事件。这通常用于处理输入框的输入事件，确保在用户输入结束后再触发相应的处理逻辑，避免频繁的处理。

5）实现节流函数和防抖函数

下面是简单的 JavaScript 实现：

节流函数：

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

防抖函数：

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

使用方式如下：

const throttledFn = throttle(() => {
  console.log('Throttled function called');
}, 1000);

const debouncedFn = debounce(() => {
  console.log('Debounced function called');
}, 1000);

// 使用节流函数
window.addEventListener('scroll', throttledFn);

// 使用防抖函数
document.getElementById('inputField').addEventListener('input', debouncedFn);

6）如何对项目中的图片进行优化？

对项目中的图片进行优化是提高页面加载性能的重要步骤。一些优化技术包括：

• 选择合适的图片格式：选择适合场景的图片格式，如JPEG、PNG、WebP等。JPEG适合照片，PNG适合图标和透明图像，而WebP通常可以在保持高质量的同时减小文件大小。
• 压缩图片：使用工具对图片进行压缩，以减小文件大小。常见的工具有TinyPNG、ImageOptim等。在构建过程中，可以使用构建工具集成压缩操作。
• 懒加载（Lazy Loading）：仅在用户滚动到视口附近时加载图片，而不是一开始就加载所有图片。这可以通过设置loading="lazy"属性或使用JavaScript库来实现。
• 使用CSS Sprites：将多个小图标或图片合并成一个图集，减少HTTP请求次数，提高加载速度。
• 适当的图片尺寸：确保图片的实际尺寸和在页面上显示的尺寸一致，避免加载过大的图片。
• CDN加速：使用内容分发网络（CDN）来加速图片加载，将图片资源分布到全球多个服务器，提高访问速度。
• 响应式图片：为不同设备提供不同尺寸的图片，以确保在不同屏幕大小和分辨率下都能够获得最佳的用户体验。

综合使用这些优化技术，可以显著提升项目中图片的加载性能，加快页面加载速度。

7）常见的图片格式及使用场景

常见的图片格式有：

• JPEG（.jpg、.jpeg）：适用于照片和复杂图像，具有较高的压缩比，但会损失一定的图像质量。
• PNG（.png）：适用于图标、透明图片等，支持无损压缩，保留图像质量的同时可以实现透明效果。
• GIF（.gif）：适用于动画，支持多帧动画，但颜色数较少，适用于简单的动画场景。
• WebP：一种现代的图片格式，结合了JPEG和PNG的优点，支持有损和无损压缩，可以实现更小的文件大小和更高的图像质量。
• SVG（.svg）：矢量图形格式，适用于图标、简单图形等，可无限放大而不失真。

使用场景一般根据图片的特性来选择：

• 如果需要高质量的照片或者复杂图像，可以选择JPEG格式。
• 如果需要保留透明度或者是简单的图标，可以选择PNG格式。
• 如果是动画，可以选择GIF格式。
• 如果希望在保证高质量的同时减小文件大小，可以考虑使用WebP格式。
• 如果是简单的图形或需要无限放大而不失真的图形，可以选择SVG格式。

8）如何提⾼webpack的打包速度?

提高Webpack的打包速度可以采取以下措施：

• 升级Webpack版本：Webpack的新版本通常会优化性能，使用最新版本可以获得更好的打包速度。
• 合理配置Loader：尽量减少Loader的使用数量，避免不必要的转换和处理。可以使用loader的include和exclude配置选项，只对必要的文件进行处理。
• 使用HappyPack或ThreadLoader：这些工具可以将Loader的工作分配给多个子进程或者线程，提高并行处理能力，加快打包速度。
• 使用DllPlugin：将不经常变动的第三方库打包成单独的文件，并使用DllPlugin插件进行缓存，避免每次重新打包。
• 优化resolve.modules配置：通过配置resolve.modules选项，告诉Webpack在哪些目录下搜索模块，避免搜索过多的目录，提高搜索速度。
• 使用Tree Shaking：通过配置Webpack进行无用代码的剔除，减少打包体积，提高打包速度。

9）如何减少 Webpack 打包体积

减少Webpack打包体积可以采取以下策略：

• 优化代码：删除无用的代码、注释和日志输出，减少不必要的代码量。
• 按需加载：使用按需加载的方式引入模块，而不是一次性加载所有模块。
• 使用代码分割：将代码分割成多个小块，并在需要的时候动态加载，以减小单个包的体积。
• 压缩代码：使用Webpack的压缩插件（如UglifyJsPlugin、TerserPlugin）对代码进行压缩，减小文件体积。
• 使用CDN引入公共库：将公共库（如React、Vue等）通过CDN引入，减少打包体积。
• 优化图片：对图片进行压缩和懒加载，减少图片文件的体积。
• 使用Tree Shaking：通过配置Webpack进行无用代码的剔除，减少打包体积。

10）如何⽤webpack来优化前端性能？

Webpack可以通过一系列的优化手段来提高前端性能：

• 代码压缩：使用UglifyJsPlugin等插件对代码进行压缩，减小文件体积。
• 代码分割：使用SplitChunksPlugin等插件将代码分割成多个小块，按需加载，提高页面加载速度。
• 按需加载：使用import()语法或者动态import()函数进行按需加载，减少首次加载时间。
• 资源优化：对图片、字体等静态资源进行压缩和懒加载，减小文件体积，提高页面加载速度。
• 缓存优化：通过Webpack的hash或chunkhash等机制生成文件名，实现文件内容变化时文件名变化，利用浏览器缓存机制，减少不必要的请求。
• 环境分离：使用Webpack的DefinePlugin等插件将开发环境和生产环境分离，提高开发效率，减小生产环境下的文件体积。
• 服务端渲染：使用Webpack配合服务器端渲染（SSR）框架，将部分页面逻辑在服务端完成，减少客户端渲染时间，提高页面加载速度和SEO。

综合使用这些优化手段，可以有效提高前端项目的性能，提升用户体验。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

前后端总计已经 700+ Star，1W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐