面试题-性能优化

前端项目优化：

一般考虑方面: (挑几点记住)

1. 我们学的: 懒加载: 路由、图片懒加载

   骨架屏的使用

2. 压缩文件：可以使用压缩工具（如GZIP）对页面文件进行压缩，减小文件大小，提高页面加载速度。

3. 减少HTTP请求：减少页面元素的请求次数，可以使用雪碧图、字体图标、JS、CSS合并等优化方式，减小文件数量，提高页面加载速度。

4. 图片优化：尽量避免在页面中使用大量图片，使用图片时建议进行优化（如进行压缩、减小图片大小等），以提高页面加载速度。

5. JavaScript优化：尽量避免使用全局变量、提取公共方法、减少全局函数调用、异步加载JS文件等，优化JavaScript代码，提高网页响应效率。

6. CSS优化：避免使用不必要的样式、提取重复样式、减少选择器的数量等操作，优化CSS代码，减小页面加载时间。

7. 使用CDN：使用CDN可以将静态文件分发到全球多个节点，减少响应时间和资源文件下载时间，加快资源文件传输速度，提高页面性能和用户体验。

减少项目打包体积: (建议记2,3,5)

减小打包后的体积，我们可以采取以下几种方法：

1. Tree shaking：webpack内置的功能，打包时自动运行。
   • 能剔除掉 JavaScript 中未被使用的代码，当模块 export 的代码没有被其它模块引用时，打包工具会自动将其从依赖树中剔除
   • 是基于ES6模块机制实现的，只能对静态代码进行剔除，对于动态，无法进行优化 (静态就是我们常用的export, import ; 动态就是require的)
2. 按需引入第三方库：对于一些常用的第三方库，可以只引入自己需要的功能，例如只引入 lodash 中的某个函数。
3. 图片和字体资源优化：对于图片资源和字体资源，我们可以将其压缩并进行优化处理，以减小打包后的体积。
   对于图片资源，可以采用:
   • 使用在线图片压缩工具：网上有许多在线图片压缩工具，可以直接上传图片进行压缩，例如：TinyPNG、Compressjpeg等。
   • 使用图片处理库：比如说，使用JavaScript图片处理库，如：Sharp等。
   • 使用webpack-loader：在webpack中，有一些图片压缩的loader可以用来实现自动压缩图片，如：image-webpack-loader、url-loader、file-loader等。这些loader也可以与其他构建工具一起使用。
   • 使用精灵图技术：可以将多张小图片合并成一张图，通过调整图片的位置来显示不同的小图，从而减少网页的加载次数和带宽消耗。
4. 减少重复代码：在编写代码时，以通过函数封装、代码抽离等方式减少不必要的重复代码，来减小代码体积。 (尽可能遵循 DRY 原则: Don’t Repeat Yourselt)
5. 服务器和webpack打包同时配置Gzip:
   • 是一种常见的压缩方式，前端开发中，常常将静态资源（如 CSS、JavaScript 和字体等）进行 Gzip 压缩，从而减小文件大小。
   • 原理是将文件中出现重复的字符串压缩掉，然后将压缩后的结果和原始文件一起传输给浏览器，浏览器接收到数据后再进行解压缩 (HTTP 协议支持 Gzip 压缩)
   • 项目中使用插件可以 vite-plugin-compression
   • 后端需要进行相应配置，开启gzip的使用