本文探讨了前端性能优化的目的，如用户体验和经济效益，并提出了减少请求数量、压缩文件、合理缓存等通用方法。重点讲解了CSS、JavaScript、HTML和移动端的优化策略，包括合并资源、精灵图、懒加载等。同时提到了性能监控和部署优化，如CDN、预加载和安全方面的考虑。最后，总结了前端优化需结合用户行为和数据进行分析，并提倡持续学习和实践。
性能优化
可能一直听到前端性能优化？然后就只想着如何优化！其实重要的是我们要想为什么优化？只是为了提高代码的质量？其实不仅仅；比如用户体验；比如经济利益…我们可以放大来看…
前端优化相关（目的）
主要有两个方面：企业资源和用户体验。很多企业在自己的服务器进行web开发，由于硬件资源有限，同时又有商业用途，怎样用有限的资源去满足企业网站商用化的目标，这成为了对Web前端优化的原动力。从用户的体验角度讲，必然希望自己浏览的网站文字、图片、视频动画，以及其他模块的加载是流畅的，从而获得好的浏览体验。
优化的追求可以主要分为以下四个方面
- 速度
优化肯定是速度越快越好。带宽1秒内传输的数据量越大；程序写得好对速度都有很大的影响 - 省钱
如果电商平台卖出一件商品需要的成本是3元；那如果经过优化将其将为一半的钱；比如；某宝。那是多大的一笔利润；还有后续网站的维护,性能优化有很大的帮助… - 抗压
也就是负载。比如鹿晗结婚导致微博崩溃；还有之前12306春节买票把系统挤爆；直接影响着我们的用户，同时也影响着产品本身。 - 回退
系统不正常如何才能减少损失，减少造成的影响；商业盈利是比较重要
一些共通的方法
请求数量—越少越好 --关键就是合并外部资源文件
80%的终端响应时间是耗费在前端上，大部分的时间是在加载页面上的组件:images, stylesheets, scripts, Flash…减少http请求这是加快页面速度的关键
- 合并外部文件；比如将js，css文件整合成一个
- 精灵图(CSS Sprites)可以减少图片的请求；
- . Image Maps： 也是将多幅图拼在一起，然后通过坐标来控制显示导航。这里有个经典的例子，选中图片中的某个人就会将你带到不同的链接。
- Inline ima
最低0.47元/天 解锁文章
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
