浅析如何更好的进行性能优化:构建策略、图像策略、分发策略、缓存策略、CSS策略、DOM策略、阻塞策略、回流策略、异步更新策略

本文是关于前端性能优化的学习笔记,涵盖网络层面和渲染层面的9大策略,包括构建策略、图像策略、分发策略、缓存策略、CSS策略等,并提及6大优化指标。内容涉及webpack的优化技巧,如代码分割、摇树优化、压缩资源等,以及CSS策略和DOM策略的注意事项,旨在提升网页访问速度和代码执行效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  主要来源于这篇文章:写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践,算是这篇文章的学习笔记。

  性能优化:从过程趋势来说,可分为网络层面和渲染层面;从结果趋势来说,可分为时间层面和体积层面。

一、网络层面

  网络层面的优化就是让资源体积更小,加载更快。

1、构建策略 —— webpack

  减少打包时间:缩减范围、缓存副本、定向搜索、提前构建、并行构建、可视结构

  减少打包体积:分隔代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源

(1)缩减范围:配置 include/exclude 缩小 loader 对文件的搜索范围。好处是避免不要的转义,node_modules 目录体积这么大,那得增加很长时间去检索文件。

(2)缓存副本:配置cache缓存Loader对文件的编译副本,好处是再次编译时只编译修改过的文件,未修改过的文件就不需要要随着修改过的文件重新编译了。

(3)定向搜索:配置resolve提高文件的搜索速度,好处是定向指定必须文件路径。若某些第三方库以常规形式引入可能报错或希望程序自动索引特定类型文件都可通过该方式解决。

  alias映射模块路径,extensions表明文件后缀,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值