前端常用优化策略 | Hisenber的Blog

type

status

date

slug

summary

一般分两类:

开发流程优化

这个优化主要针对启动速度慢，热更新时间长的问题

生产资源优化

一般是根据项目的实际问题优化，一般我们可以用pageSpeed分析一下网站的常见通用问题，同时利用analyze插件分析项目目录，是否有某个资源过大的情况

常见优化策略有

1.页面懒加载

可以缓解服务器并发压力，加快页面加载时间

2.数据缓存

可以缓解服务器压力，减少loading时间，快速看到页面数据

数据永久存储（可以增加过期时间）

接口过期时间（强缓存/协商缓存）

3.虚拟滚动（大数据表格）

4.分包（针对单文件过大）

5.静态文件先压缩再上传cdn

6.更深入的是查看浏览器的performance的堆栈图，针对性的优化js代码

7.节流和防抖

通常在处理输入框输入，异步搜索之类的场景

css

1.文件压缩，文件不宜过多，减少http请求

2.使用css预处理器，提高代码复用性

3.避免过度嵌套,避免使用css表达式在js代码中

4.动画使用css3过渡，可以使用硬件加速，减少复杂度

Html

1.减少文件大小，避免过度嵌套

2.使用语义化html标签

3.避免过多内联样式

4.静态资源也可以上cdn托管

React优化

1.memo使用

memo允许组件在 props 没有改变的情况下跳过重新渲染

默认通过Object.is比较每个prop，可通过第二个参数，传入自定义函数来控制对比过程

2.useMemo

每次重新渲染的时候缓存计算结果

3.合理使用Fragment

可以减少dom层级，复杂页面可以提升性能

4.合理使用Context

Context 能够在组件树间跨层级数据传递，正因其这一独特机制，Context 可以绕过 React.memo 或 shouldComponentUpdate 设定的比较过程。

也就是说，一旦 Context 的 Value 变动，所有使用 useContext 获取该 Context 的组件会全部 forceUpdate。即使该组件使用了memo，且 Context 更新的部分 Value 与其无关

为了使组件仅在 context 与其相关的value发生更改时重新渲染，将组件分为两个部分。在外层组件中从 context 中读取所需内容，并将其作为 props 传递给使用memo优化的子组件。

5.合理使用React.lazy和React.Suspense

通过React.lazy和React.Suspense实施代码分割策略，将React应用细分为更小的模块，确保在具体需求出现时才按需加载相应的部分

6.组件卸载时的清理

在组件卸载时清理全局监听器、定时器等。防止内存泄漏影响性能

常见优化指标有哪些

网络优化

使用Http2

减少合并http请求

使用http缓存，如强缓存，协商缓存

使用cdn

📎 参考文章

https://juejin.cn/post/7371777383588954175?utm_source=gold_browser_extension#heading-4

https://juejin.cn/post/7273119689185673253?searchId=20240807195045A6962BDFC06628FF71E5

💡

有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~