你知道的前端性能优化手段有哪些

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

本文仅作方向性的概述，因为每一种优化，都值得深入研究，暂不求深入，尽可能多的描述出个人所了解到的优化相关的内容。

核心描述

个人认为，所谓的前端优化，核心都是在围绕两个点，如何让静态资源（HTML\CSS\JS\图片\音视频等）更快的发送到浏览器，如何让浏览器更快的渲染这些元素

• 让浏览器更快的下载资源

  • 合理利用缓存
    • 本地数据缓存：cookie、localStorage
    • 内存缓存：浏览器内存缓存、代码中常用数据可以放到内存中
    • Cache API ：PWA、ServiceWorker
    • HTTP 缓存：强缓存、协商缓存
    • Push Cache ：HTTP2.0 特性
  • 网络请求优化
    • 避免多余的重定向：301、302
    • DNS 解析优化：预解析、DNS 缓存、保证 DNS 服务器稳定
    • 使用 CDN ：手动、工程化、更新时机
  • 服务端响应优化
    • 数据层面：Redis 缓存、数据库缓存、服务端代码优化
    • 静态资源层面：资源压缩（Gzip 压缩等）
    • 接口聚合：合并接口、BFF 层

• 让浏览器更快的渲染元素

  • 页面解析与处理
    • 资源按需加载：如 Vue 的路由懒加载、图片懒加载、等
    • 减少资源大小：精简 html 代码、压缩 html、js、css 代码、压缩图片、合并图片、小图片用 base64
    • 合理放置资源的加载顺序：优先加载 css，后加载 js，因为渲染 css 和执行 js 的行为互斥，合理使用 async、defer 属性
  • JS 代码
    • Tree Shaking ：抛去无用代码，减少代码体积
    • 合理引入 polyfill：减少不必要的 ployfill 引用
    • 代码书写：
      • 减少耗时的逻辑
      • 组件库、UI库的提取，减少代码冗余
      • 其他：如虚拟列表
  • CSS 代码
    • 合理复用样式
    • 合理使用选择器，提高浏览器渲染速度

• 开发效率中的性能优化：

  • webpack 编译：提高编译速度、通过插件方式批量添加或更改内容
  • 自动化流程，减少手动参与：CI/CD

• 实际项目中做过的优化

  • 基于 jQuery 库的模块化合并方案
    • 在 jQuery 项目时代，通过代码层面的自定义模块化（登录、分享、上传、播放器等等），利用 nodejs + gitlab + jenkins + glup 实现的多模块按需压缩引用的内部平台。
    • 核心是在不同的业务页面，引入需要的一个或几个模块，而无需将这些模块都放到项目中。
  • 官方上传至 CDN
    • 基于 webpack 插件 prerender-spa-plugin 预渲染打包后的静态文件，上传至服务器，并在云服务平台开启 CDN 加速
    • 此处由于应用的场景较小，后续拓展可以考虑通过 webpack 打包链路优化，将 CDN 上传及更新策略变为自动化方式
  • 微信小程序相关：

    • 包体积优化

      • 主包过大无法正常上传
      • 通过 webpack-bundle-analyzer 插件，分析包体积依赖关系
      • 确定受影响的 moment.js 库，并在其打包时，排除国际化语言相关的依赖包，从而减少了整体包体积大小

    • 分离图片资源至资源服务器，减少直接在小程序中打包加载资源

知识拓展

在我看来，前端性能优化的目标是提高用户体验，以此为方向，前端的优化手段，便不应局限于技术，也不应局限于代码，有时不妨换个角度如从产品的角度出发，尝试更多的优化方案。

• 产品或运营方向的优化：
  • 引入骨架屏、友好的 Loading，减少用户焦虑
  • 引导式强更新或升级，适时的抛弃一些老的兼容，可以为用户带来更好的体验
• 引入监控，定期分析、定位、主动优化
  • 性能监控
  • 异常监控

参考资料

• 如何减少白屏时间：juejin.cn/post/710596…
• 前端性能优化：alienzhou.com/projects/fe…

浏览知识共享许可协议

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。