前端技术方面的性能优化有哪些？

• 資深大佬 : qyf1994

  做的挺多的就是想不起来了

• 資深大佬 : qyf1994

  简历上不知道写些什么

• 資深大佬 : mnikn

  基本思路主要是这些，但是落实到具体业务就没有这么简单了。例如怎么定义性能指标，怎么知道优化后的提升了多少。

• 資深大佬 : Ptu2sha

  CDN HTTP2 webp 按需加载 雪碧图 字体图标 图片缩放

• 資深大佬 : connection

  与#3 类似，先定义指标，再结合业务特点做性能优化

• 資深大佬 : ryougifujino

  前端其实没有后端那么重视性能，一般来说也就 CDN 、Tree Shaking 、缓存这些了，都是必备，没什么新意。
  确实还是要结合自己的业务，因为一般都会遇到一些实际的问题，再去讲述，就更有说服力一些。
  比如我之前由于后端的逻辑，导致请求某一个接口后 token 就会变，并发请求的时候会出现授权错误，最后写了一个调度器解决了。
  还有就是项目中遇到了 RSA 解密的场景，会卡主线程，导致操作卡顿，后面采取将解密方法异步化后分片操作。这样的话就可以展开说。

• 資深大佬 : aaronlam

  之前在公司做项目时内部总结了几个点，可以给大家参考一下： https://docs.google.com/document/d/1FCJ0M0KNR_FpdueOYjFvqBrw2Qp0aL2xJz5f9LupcbU/edit

• 資深大佬 : 9yu

  WASM

• 資深大佬 : cyrbuzz

  https://github.com/HuberTRoy/myown/blob/master/%E5%9F%BA%E4%BA%8E%E6%80%9D%E8%80%83%E6%89%80%E5%81%9A%E7%9A%84%E6%8E%A2%E7%B4%A2/%E6%80%A7%E8%83%BD%E6%96%B9%E9%9D%A2%E7%9A%84%E6%8E%A2%E7%B4%A2.md

  https://github.com/HuberTRoy/myown/blob/master/web%E7%A8%8B%E5%BA%8F%E4%BC%98%E5%8C%96%E6%80%9D%E8%B7%AF.pdf

  优化公司产品时的总结，lighthouse 从不到 10 分已经提升到了 50~60+。

  我自己的实践优化方面是：
  1. 第三方资源非阻塞加载，async/defer 标记，这个提速很大。
  2. DNS/CDN(百度统计等)链接的预查询与预连接，这个看不出来效果，提速微小。
  3. 服务器端支持 HTTP2，比 HTTP1.1 快了不是一点两点。
  4. 利用服务器端进行延迟加载，本身是个 Nuxt 的服务器端项目，利用 client-only 标签配合 import() + v-if 条件渲染，其实就是个分块+懒加载不过效果巨大，鹅且平时写组件的时候几乎都用 import 静态导入，调用频率低的模块也可以用 import()来改写。
  5. webpack 打包时的 tree-shaking，老生常谈的 lodash 和 lodash-es 等等，这个减少的是传输体积，如果项目本身冗长这块提升也非常大。
  6. 缓存这个就不用说了，检查检查有没有配置合理。
  7. 图片移动端剪裁成 2 倍实际显示大小的尺寸，PC 端 1 倍，牺牲小部分清晰度的同时大幅减少传输体积。
  8. 项目具体内部的代码优化，比如之前实现了一个利用 vue computed 属性的动态设置 style 的滚动效果，发现占用 CPU 20%以上….然后改成了 animation 。

• 資深大佬 : yhxx

  挑点不常见的？
  比如 HTTP3 ？比如特别极致的图片优化（ HEIC 、APNG 之类的，或者比如提升 CDN 命中率）？

• 資深大佬 : murmur

  没啥能优化的，国内的策略都是放弃低端机，乱七八糟堆一大堆东西，咋个优化

  少放东西别整花里胡哨是最管事的

• 資深大佬 : orzzyd

  《简历里写了前端性能优化》 -> 简历里去掉前端性能优化。
  面试遇到八股文算我倒霉，可能惹不起，可能躲不起，但不要主动给自己找麻烦呀。

• 資深大佬 : agdhole

  哔哩哔哩把视频上传处理的一些步骤放到了本地 wasm 里面运行，比如预览图生成

• 資深大佬 : walpurgis

  传输层的性能优化有些实在过于 hack，就为了提升一丢丢速度而引入复杂度，现在网速快了真不差这 0 点几秒
  接触过一个屎山项目，一个 table 几千行，加载再快也没用，拖都拖不动，能搞定这种才叫性能优化吧

• 資深大佬 : xiayue

  我也是最近才知道的。有个概念叫做 “关键渲染路径（ Critical Rendering Path ）” 你可以搜索一下。感觉有点用。