29｜经验：优化就是减少请求数量和质量
唐俊开
你好，我是三桥。
前几节课，我们主要围绕 Web Vitals 的核心指标优化了前端性能问题。
前端全链路的性能优化是一个复杂的问题。一些常见的优化技巧，总结起来大概有 6 点。
优化以减少请求量，包括合并资源、减少 HTTP 请求数、gzip 压缩、懒加载等。
优化以加快请求速度，包括 DNS 预解析、减少域名数量、HTTP2 协议、CDN 分发、WebP 图片格式等。
缓存优化，包括离线缓存 manifest、HTTP 协议的缓存请求等。
渲染优化，包括服务器端渲染（SSR）、客户端渲染（CSR）、静态站点生成（SSG）等。
CSS 优化，具体方法包括避免使用 table 布局、减少深层级的选择器、使用 className 批量修改元素样式、利用 GPU 渲染动画等。
前端工程化，例如代码分包、tree shaking 等。
这些优化方法都是前端技术的基础，但在实际性能优化的时候不一定都会用到。这节课，我们就梳理一些容易被忽视但非常实用的技巧。有 4 个方向，用户网络环境、小图标、响应式设计以及缓存数据优先。
用户网络环境
我们的目标是让前端页面快速触达用户，让用户优先体验到内容，然后才是功能交互。
第 27 节课，我们在 4G 网络和不缓存资源两个条件下模拟了低速网络用户的情况，并对此进行了性能优化。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. 前端性能优化的方法包括减少请求量、加快请求速度、缓存优化、渲染优化、CSS优化和前端工程化。 2. 使用Network Information API来根据网络速度提供不同格式的资源，以提升用户体验。 3. 使用SVG格式来减少网页加载过程中图片的异步加载数量，提高网页加载速度。 4. CSS媒体查询是响应式设计的关键部分，可以根据视口的大小创建不同的布局，以适配不同设备和网络环境。 5. 缓存优先策略可以通过LocalStorage实现数据缓存，优化页面加载速度，改善用户体验。 6. 前端性能优化的最终目的是提升业务转化率并促成交易，需要以用户为中心，解决用户问题并提升产品用户体验。 7. 前端性能优化需要减少不必要的请求和文件大小，优化异步链路，根据用户群体做降级方案，以提高业务转化率。 8. 前端全链路性能优化和常见性能优化的基本原理相似，需要探讨减少请求量和优化链路的经验。 9. 前端性能优化没有固定标准和方法，只有实践经验，需要不断探索和实践。 10. 前端全链路性能优化需要使用工具来辅助，以提升产品用户体验和解决用户问题。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《前端全链路优化实战课》，新⼈⾸单¥59
《前端全链路优化实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论