认识达内从这里开始

性能优化一直都是我们在开发app软件或者是设计网页加载速度的时候需要考虑到的问题之一。下面我们就一起来了解一下，关于加载速度的性能优化都有哪些方面。

何为性能优化

性能优化(Optimize)，简而言之，就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。

性能优化的目的

对Web端产品来说：

从用户角度而言，优化能够让页面加载得更快、对用户的操作响应更及时，能够给用户提供更为良好的体验;

从服务商角度而言，优化能够减少页面请求提升服务器性能、减小流量，能够节省可观的成本。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当多的资源。

我们是如何进行性能优化的

1.图片

了解图片格式

图片格式多种多样，其自身的优缺点决定了使用场景及环境，在什么情况下采用何种图片格式，是我们进行的一步，先从了解他们入手。

我们对常用的图片格式做了简单的对比总结：

尽量减少图片数量

之前的web图片调用方式是一张一张调用，这样会增加服务器的请求次数，降低界面响应速度，推荐使用下面两种方法来优化图片：

CSSSprites，是一种网页图片应用处理方式，是把产品相关图片整合到一张图片文件中，这样载入的图片就不会像以前那样一幅一幅地慢慢显示出来，这是减少图像请求的有效方法。通过CSS的background-image和background-position属性来显示图片的不同部分，合并后的图片会比单个分离的图片总和要小，好处在于能够在网页加载图片时减少对服务器的请求次数，降低服务器储存和请求压力，同时提高了页面的加载速度。缺点是维护的时候比较复杂。

Opacity，设置div元素的不透明级别，通过透明度的处理，且在不影响用户体验和设计的目的情况下，我们便可以只使用一张图片就能搞定控件的多种状态，从而减少图片的使用和网络请求。

缺点是IE8及以下浏览器不支持此属性。

2.iconfont

iconfont，矢量图标库，把图标处理成字体来显示在屏幕上，同样浏览器也会将其视为字体进行抗锯齿处理，有时效果并没有想象中的那么清晰锐利(相对于纯图片效果还是相当可人的)。iconfont，作为字体，其位置和大小也会受css属性的影响，同时为了得到大范围的浏览器支持，需要生成TTF、WOFF、EOT、SVG四种字体格式，这些问题阿里UX矢量库就可以完成。

3.CSS

Web的诸多样式其实都是可以用CSS来实现，例如：圆角、渐变、阴影、简单的几何图形等等，代码毕竟属于文本模式，请求资源小，加载和渲染速度都是图片不可比拟的，因为每一个图片的加载都需要一个http的请求，而浏览器同一时间对同一域名下的请求是有一定数量限制，超过限制数目的请求会被阻塞，从而延长用户的感知时间，因此减少请求次数，也就提高了页面的呈现速度。

另外通过css实现，在任何屏幕上都可以显示出良好视觉的效果，无需多分辨率、多端适配。若软件具有的自定义外观的功能，css的优势就更加的强大，属性修改一下就可以了。在后期维护时需要修改，比修改图片要方便容易。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。