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