面试题-性能优化

2023-12-30 05:02:58

前端项目优化:

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

  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. 图片和字体资源优化:对于图片资源和字体资源,我们可以将其压缩并进行优化处理,以减小打包后的体积。
    对于图片资源,可以采用:
    • 使用在线图片压缩工具:网上有许多在线图片压缩工具,可以直接上传图片进行压缩,例如:TinyPNGCompressjpeg等。
    • 使用图片处理库:比如说,使用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的使用

文章来源:https://blog.csdn.net/GAGGAAAAA/article/details/135291710
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。