前端面试的性能优化部分（2）每篇10题

1. 常见的图片格式及使用场景

常见的图片格式有 JPEG、PNG、GIF、WebP 和 SVG，它们各有适用的使用场景：

  1. JPEG (Joint Photographic Experts Group)：

    • 使用场景：适用于照片和真实场景的图片，特别是色彩丰富和渐变丰富的图像。
    • 优点：压缩率高，图片文件较小，保持较高的图像质量。
    • 缺点：不支持透明度。

  2. PNG (Portable Network Graphics)：

    • 使用场景：适用于需要透明背景的图片，如图标、logo 等。
    • 优点：支持透明背景和透明度，无损压缩。
    • 缺点：文件大小通常较大，对于照片和复杂图像压缩效果不如 JPEG。

  3. GIF (Graphics Interchange Format)：

    • 使用场景：适用于简单动画、图标和简单图形。
    • 优点：支持简单动画，可设置透明度。
    • 缺点：颜色受限，不适合存储复杂图像或照片。

  4. WebP：

    • 使用场景：适用于大多数图片类型，可替代 JPEG 和 PNG 格式。
    • 优点：有损和无损压缩，压缩率更高，文件更小，支持透明度。
    • 缺点：部分浏览器兼容性较差。

  5. SVG (Scalable Vector Graphics)：

    • 使用场景：适用于矢量图形，如图标、矢量图等。
    • 优点：无论放大还是缩小，图像质量不变，文件大小小，适用于响应式设计。
    • 缺点：不适合存储复杂图像或照片。

根据图片的特点和应用场景，选择合适的图片格式可以提高网页性能和用户体验。在开发过程中，需要根据实际情况选择最适合的图片格式，并结合压缩、懒加载等优化手段，使网页加载更加高效和流畅。

2. 如何⽤webpack 来优化前端性能？

使用 webpack 来优化前端性能可以采取以下措施：

  1. 代码压缩与优化： 使用 webpack 的 UglifyJsPlugin 或 TerserPlugin 来压缩和优化 JavaScript 代码，减小文件体积，提高加载速度。

  2. 懒加载与代码分割： 使用 webpack 的动态导入特性和代码分割功能，将页面上不需要立即加载的模块进行懒加载，减少初始加载的文件大小。

  3. 图片优化： 使用 image-webpack-loader 对图片进行压缩和优化，使用 url-loader 将图片转换为 base64 编码，减少 HTTP 请求次数。

  4. 缓存控制： 使用 webpack 的文件名哈希或 chunkhash，保证文件内容改变时文件名也会改变，利用浏览器缓存机制，提高资源的缓存利用率。

  5. Tree Shaking： 使用 webpack 的 Tree Shaking 特性，剔除未使用的代码，减少打包后的文件大小。

  6. CDN 加速： 使用 webpack 的 publicPath 配置将静态资源部署到 CDN，加速文件加载速度。

  7. Scope Hoisting： 使用 webpack 的 Scope Hoisting 特性，减少模块包裹代码，提高代码执行速度。

  8. 使用 Webpack Dev Server： 在开发环境中使用 webpack-dev-server，启用热更新和自动刷新，提高开发效率。

  9. 使用 MiniCssExtractPlugin： 将 CSS 提取为单独的文件，避免将 CSS 内联到 HTML 中，减少文件体积。

  10. 使用 HappyPack： 使用 HappyPack 并行处理任务，提高构建速度。

  11. 使用 DllPlugin 和 DllReferencePlugin： 使用 DllPlugin 将第三方库单独打包，减少构建时间。

  12. 使用缓存： 使用缓存来存储编译过的结果，加快再次构建的速度。

通过以上优化手段，可以有效地提高 webpack 打包构建的速度，减小文件体积，优化前端性能，提升用户体验。

3. 如何提⾼webpack 的构建速度？

提高 webpack 构建速度是前端开发中非常重要的优化目标。以下是一些提高 webpack 构建速度的方法：

  1. 使用最新版本的 webpack： 确保使用最新版本的 webpack，因为每个新版本都可能带来性能的改进和优化。

  2. 合理配置模块解析规则： 在 webpack 配置中，可以通过 resolve.alias 和 resolve.extensions 配置项来优化模块的解析速度。

  3. 使用缓存： 使用 webpack 的缓存功能，在配置中启用 cache: true，这样可以将编译过的模块缓存起来，减少重新编译的时间。

  4. 使用 HappyPack 或 thread-loader： 使用 HappyPack 或 thread-loader 来并行处理任务，将任务分配给多个子进程，加快构建速度。

  5. 优化 loader 和 plugin： 优化 loader 和 plugin 的配置，避免无效的 loader 和 plugin，确保只加载必要的资源。

  6. 使用 DllPlugin 和 DllReferencePlugin： 使用 DllPlugin 将第三方库单独打包，减少构建时间，使用 DllReferencePlugin 加速依赖查找。

  7. 使用 Tree Shaking： 启用 Tree Shaking 特性，剔除未使用的代码，减少打包后的文件大小。

  8. 使用 externals： 使用 externals 配置来将第三方库排除在打包范围之外，减小构建体积。

  9. 使用缓存目录： 使用缓存目录来存储中间和最终构建结果，避免重复构建相同的资源。

  10. 分割代码： 使用代码分割功能，将代码拆分为多个小块，根据需要异步加载，优化初始加载时间。

  11. 使用 Scope Hoisting： 启用 Scope Hoisting 特性，减少模块包裹代码，提高代码执行速度。

  12. 使用 MiniCssExtractPlugin： 将 CSS 提取为单独的文件，避免将 CSS 内联到 HTML 中，减少构建时间。

通过上述优化措施，可以显著提高 webpack 的构建速度，加快项目的开发和部署流程，提高前端开发效率。

4.如何对vue项目进行性能优化

对 Vue 项目进行性能优化可以采取以下措施：

  1. 使用异步组件： 将页面中不常用的组件设置为异步组件，减少初始加载时间。

  2. 使用路由懒加载： 使用 Vue 的路由懒加载特性，按需加载路由对应的组件，减小初始包大小。

  3. 使用 keep-alive： 对于频繁切换的组件，使用 keep-alive 缓存组件实例，减少组件的重复渲染。

  4. 使用 v-if 和 v-show： 合理使用 v-if 和 v-show 来控制组件的显示和隐藏，减少不必要的渲染。

  5. 使用 v-for 的 key： 在使用 v-for 时，为每个元素添加唯一的 key，提高列表渲染的性能。

  6. 合理使用 computed 和 watch： 避免在 computed 中进行复杂的计算，使用 watch 监听数据变化来执行异步操作。

  7. 优化网络请求： 合并请求，减少 HTTP 请求次数，使用 CDN 加速静态资源加载。

  8. 使用图片懒加载： 使用图片懒加载库，将图片的加载推迟到它们即将进入视口时。

  9. 减小包体积： 压缩代码、剔除未使用的代码，优化 webpack 配置，减小打包后的包体积。

  10. 优化列表渲染： 使用虚拟滚动技术，只渲染当前可见区域的列表项，提高列表渲染性能。

  11. 使用 Web Workers： 使用 Web Workers 在后台线程执行耗时任务，避免阻塞主线程。

  12. 合理使用 v-if 和 v-show： v-if 在条件不满足时不会渲染元素，v-show 则只是控制元素的显示与隐藏。

  13. 使用异步组件： 对于页面中不常用的组件，可以使用异步组件，按需加载，减少初始加载时间。

  14. 避免不必要的响应式数据： 避免将大量数据设置为响应式数据，使用 ref 或 reactive 来避免 Vue 对其进行侦听。

  15. 优化 computed 属性： 避免在 computed 中进行复杂的计算，优化计算属性的逻辑，减少不必要的计算。

通过以上优化措施，可以提高 Vue 项目的性能，加快页面加载速度，提升用户体验。

5.如何对项目进行加载优化

对项目进行加载优化可以采取以下措施：

  1. 使用异步加载： 将不必要的代码和资源拆分为异步加载的模块，按需加载，减少初始加载时间。

  2. 使用代码分割： 使用工具如 webpack 的代码分割功能，将代码拆分为多个小块，实现按需加载。

  3. 压缩代码： 使用压缩工具压缩代码，包括 JavaScript、CSS 和 HTML，减小文件体积。

  4. 使用 CDN： 将静态资源如图片、CSS 文件等存放在 CDN 上，减轻服务器压力，提高加载速度。

  5. 缓存资源： 合理设置缓存策略，使用缓存来避免重复加载已有的资源。

  6. 使用图像懒加载： 图像懒加载可以将页面中的图片加载推迟到它们即将进入视口时。

  7. 使用 WebP 图片格式： WebP 格式是一种现代的图片格式，它可以大大减小图片的体积，提高加载速度。

  8. 使用预加载： 使用 <link rel="preload"> 标签来预加载重要的资源，提前加载可能会用到的资源。

  9. 延迟加载不重要的资源： 将不重要的资源设置为延迟加载，优先加载页面核心内容。

  10. 使用字体图标： 使用字体图标而不是图片图标，字体图标可以减小文件体积，加快加载速度。

  11. 避免阻塞渲染： 将 JavaScript 放在页面底部或使用 async 或 defer 属性，避免阻塞页面渲染。

  12. 使用服务端渲染： 对于需要大量处理的页面，可以考虑使用服务端渲染，提高首屏加载速度。

  13. 使用缓存机制： 对于经常请求的数据，使用缓存来减少服务器的压力和网络请求次数。

  14. 优化资源加载顺序： 将关键资源放在页面的头部，将不重要的资源放在页面底部。

  15. 使用 Gzip 压缩： 在服务器端启用 Gzip 压缩可以减小资源文件的体积，加快传输速度。

通过以上优化措施，可以显著提高项目的加载速度，提升用户体验。

6.图片优化

图片优化是为了减小图片文件的大小，提高页面加载速度和用户体验。以下是一些常见的图片优化技巧：

  1. 选择合适的图片格式： 根据图片的内容选择合适的图片格式。JPEG 格式适合照片和复杂图像，PNG 格式适合透明图像和简单图标，WebP 格式是一种现代的高效图片格式，通常比JPEG和PNG格式更小。

  2. 压缩图片： 使用压缩工具对图片进行压缩，减小文件大小。常见的图片压缩工具有 TinyPNG、ImageOptim 等。

  3. 使用适当的分辨率： 将图片调整为适当的分辨率，不要使用过大的图片。

  4. 使用图像懒加载： 图像懒加载可以将页面中的图片加载推迟到它们即将进入视口时，减少页面的加载时间。

  5. 使用 CSS Sprites： 将多个小图标合并成一张图片，通过 CSS 的 background-position 来显示不同的图标，减少 HTTP 请求次数。

  6. 使用响应式图片： 根据不同设备的屏幕大小，提供不同尺寸的图片，避免在小屏幕设备上加载过大的图片。

  7. 使用图像缓存： 设置适当的缓存策略，让浏览器缓存图片，避免重复加载已有的资源。

  8. 避免使用过多的动画和 GIF 图片： 动画和 GIF 图片通常文件大小较大，应谨慎使用，以免影响页面加载速度。

  9. 使用 SVG 图片： 对于简单的图标和矢量图像，可以考虑使用 SVG 图片，它是一种矢量图形格式，文件大小较小。

  10. 使用图片优化工具： 使用一些图片优化工具和插件，如 ImageOptim、TinyPNG、SVGO 等，自动优化图片文件。

综合运用以上技巧，可以有效地优化网页中的图片，提高页面加载速度，为用户提供更好的浏览体验。

7.渲染优化

渲染优化是指通过一系列技术和方法来提高网页在浏览器中的渲染性能，以减少页面加载时间、提高用户体验。以下是一些常见的渲染优化技巧：

  1. 减少 HTTP 请求次数： 将多个小文件合并为一个，使用 CSS Sprites、图标字体等减少图片和图标的请求次数。

  2. 使用懒加载： 图片、视频等非关键内容可以延迟加载，只有当用户滚动到可视区域时才加载，减少初始加载时间。

  3. 优化 CSS 和 JavaScript： 将 CSS 放在头部，将 JavaScript 放在底部，减少阻塞渲染的情况。

  4. 避免使用多层嵌套的 DOM 结构： 减少 DOM 操作次数，尽量简化 DOM 结构，避免复杂的布局。

  5. 使用 CSS 动画代替 JavaScript 动画： 使用 CSS3 动画效果代替 JavaScript 实现的动画，因为 CSS 动画更高效。

  6. 避免使用不必要的重绘和回流： 使用 translate、opacity 等属性触发硬件加速，减少重绘和回流。

  7. 使用 Web Workers： 将一些计算密集型的任务交给 Web Workers 处理，避免阻塞主线程。

  8. 使用缓存： 合理使用缓存，将常用的资源缓存起来，减少重复请求。

  9. 使用响应式布局： 为不同设备提供不同的布局和资源，以提供更好的用户体验。

  10. 避免使用过大的图片： 使用适当的图片压缩和裁剪，避免使用过大的图片，减少加载时间。

  11. 减少重复渲染： 使用 shouldComponentUpdate 或 PureComponent 来优化组件的重复渲染。

  12. 使用前端性能监测工具： 使用工具分析页面性能，找出瓶颈并优化。

综合运用以上渲染优化技巧，可以显著提高网页的渲染性能，提升用户体验和用户留存率。

8.首屏优化

首屏优化是指优化网页的加载速度，确保网页的关键内容在用户打开页面的第一屏能够快速呈现，提高用户的首次访问体验。以下是一些常见的首屏优化技巧：

  1. 减少 HTTP 请求次数： 将多个小文件合并为一个，使用 CSS Sprites、图标字体等减少图片和图标的请求次数。

  2. 使用懒加载： 图片、视频等非关键内容可以延迟加载，只有当用户滚动到可视区域时才加载，减少初始加载时间。

  3. 优化关键资源加载顺序： 将关键资源（例如 CSS、JavaScript）放在 head 中，减少首屏渲染的延迟。

  4. 压缩资源： 对 HTML、CSS、JavaScript 等文件进行压缩，减小文件大小，加快下载速度。

  5. 使用响应式图片： 根据不同设备的屏幕大小，提供不同尺寸的图片，避免在小屏幕设备上加载过大的图片。

  6. 使用字体图标： 使用字体图标替代图片图标，减少 HTTP 请求和图片的加载时间。

  7. 避免使用不必要的重绘和回流： 使用 translate、opacity 等属性触发硬件加速，减少重绘和回流。

  8. 使用 SSR（服务器端渲染）： 使用服务器端渲染可以在服务端生成首屏内容，减少客户端渲染的时间。

  9. 使用缓存： 合理使用缓存，将常用的资源缓存起来，减少重复请求。

  10. 延迟加载非关键资源： 将非关键的资源（例如广告、推荐内容）延迟加载，优先加载关键内容。

  11. 优化关键资源的加载顺序： 确保关键资源在页面加载时优先加载，减少用户等待时间。

  12. 使用预加载： 使用 <link rel="preload"> 预加载关键资源，提前下载可能会用到的资源。

综合运用以上首屏优化技巧，可以显著提高网页的首屏加载速度，为用户提供更好的浏览体验。

9.页面样式兼容

页面样式兼容是指确保网页在不同浏览器和设备上都能正确显示和呈现相同的样式效果。由于不同浏览器对 CSS 的解析和渲染有差异，以及不同设备的屏幕尺寸和分辨率不同，可能会导致网页在不同环境下出现样式上的差异。以下是一些常见的页面样式兼容技巧：

  1. 使用 CSS Reset 或 Normalize： 在项目中引入 CSS Reset 或 Normalize 样式库，它们能够帮助消除浏览器的默认样式差异，使页面在不同浏览器中表现更加一致。

  2. 使用 Flexbox 和 Grid 布局： 使用 Flexbox 和 Grid 布局能够更方便地实现页面布局，且兼容性较好，适用于大多数现代浏览器。

  3. 使用 Autoprefixer： 使用 Autoprefixer 工具可以根据配置自动添加浏览器前缀，避免手动写不同浏览器的样式前缀。

  4. 注意不同浏览器对 CSS 属性的支持： 在编写样式时，注意一些 CSS 属性在不同浏览器中的支持情况，需要针对性地写兼容性样式。

  5. 测试和调试： 在不同浏览器和设备上测试和调试页面样式，确保页面在各种环境下都能正确显示。

  6. 使用 CSS Polyfills： 对于不支持 CSS 新特性的旧版本浏览器，可以使用 CSS Polyfills 来模拟这些特性，使其在这些浏览器上也能正常工作。

  7. 使用图片格式兼容性： 对于图片，根据浏览器的支持情况，选择合适的图片格式，如 WebP、JPEG、PNG 等。

  8. 使用媒体查询： 使用媒体查询可以根据不同设备的屏幕尺寸和分辨率，为不同设备提供不同的样式。

  9. 检测浏览器特性支持： 在代码中检测浏览器是否支持某些特性，如果不支持，则提供替代方案或降级处理。

综合运用以上样式兼容技巧，可以使网页在不同浏览器和设备上都能正确呈现，并提供一致的用户体验。

10.服务端渲染(SSR)如何优化性能？它有哪些优势和局限性？

服务端渲染是一种将网页内容在服务器端生成，并直接返回渲染好的HTML内容给客户端的技术。相比于传统的客户端渲染（Client-Side Rendering，CSR），SSR 有一些优势和局限性：

优势：

  1. SEO友好： 由于搜索引擎爬虫能够直接获取服务端渲染后的HTML内容，SSR 对搜索引擎的友好性较高，有利于网页的搜索引擎优化（SEO）。

  2. 更快的首次加载时间： SSR 可以在服务端生成完整的HTML内容，并直接返回给客户端，因此首次加载页面的速度可能会更快，特别是对于较慢的网络连接或较低性能的设备。

  3. 更好的用户体验： SSR 可以在服务器端渲染一部分页面内容，使得客户端在接收到响应后能更快地展示内容，提供更好的用户体验。

  4. 较好的性能表现： 对于一些低性能设备或网络环境较差的情况，SSR 可以减轻客户端的工作量，提高页面性能表现。

局限性：

  1. 服务器压力： SSR 需要在服务器端进行渲染，会增加服务器的负担和压力，尤其在高并发访问的情况下可能会对服务器性能产生较大影响。

  2. 部署复杂： SSR 需要在服务器端运行一定的渲染逻辑，因此对于前端开发来说，部署和维护可能会相对复杂一些。

  3. 开发成本： SSR 需要开发人员具备后端开发的能力，对于前端团队来说，可能需要投入更多的开发资源。

  4. 首次加载时间可能较长： 虽然 SSR 可以在首次加载时提供更快的内容展示，但如果渲染逻辑较为复杂，服务器响应时间可能会较长，导致首次加载时间较长。

综合考虑，SSR 可以在一些特定场景下优化性能，提供更好的用户体验和SEO效果，但也需要根据具体项目需求和情况来进行选择和权衡。