性能优化

男娘i 2022-08-19 15:18 352阅读 0赞

在系统开发中，性能优化占开发周期很大一部分比重，它在不改变原有系统功能的前提下，提高系统的执行速度，系统运行更加稳定；系统优化，要根据实际情况分析系统运行缓慢的原因是因为前台还是后台，确定自己的主攻方向。

# 【第一步分析】 #

在代码调试过程中firebug给我们提供了极大的便利，我们要积极利用身边的工具，作出科学的分析，如下图：

![SouthEast][]

图   1.1  性能分析

可以分析出：

1）整个页面加载所需要的时间占总时间的15%左右，系能优化则主要集中在前台当中。

2）样式加载与报错.woff之间存在时间间隙

3）有一个调用后台的请求在所有请求的最后。

# 【前台系统优化学习内容】 #

![SouthEast 1][]

图2.1  优化内容

由上图，减少HTTP请求能很大一部分降低反应时间，图1.1一个页面加载调用了22个请求，相对页面元素内容显示的又比较少，是不正常的，减少HTTP请求的方法有很多种，其中比较经典的是图片地图和解决easy-ui错误使用的问题；

页面的美观和效果，以及与后台数据交互，都要用到js和css样式表，css和js的大小，摆放位置，是否重复等都会直接影响到页面加载速度。

缓存是所有网站开发都要用到的技术，按照发布文件的使用频率，设置缓存保存的时间，可以提高系统速度的同时也不至于让用户保存太多的缓存。

# 【具体介绍与实践】 #

当一个网页图片较多时，每一张图片都添加一个url链接，这样造成http请求增多，使用**图片地图**，多张图片共用一个url链接，传递用户单击的x，y坐标以减少请求。

** easy-ui的正确引用**：在本次项目开发过程中前台使用大量的**easy-ui**的内容，但由于easy-ui声明了class变量，导致url重复解析，请求增多：

![SouthEast 2][]

删除掉html中的class声明，就可以解决问题：

![SouthEast 3][]

![SouthEast 4][]

如果同一个请求任然存在多次，则需要在html代码中搜索重复url引用，去除掉即可。

**设置Expires头**，延长缓存时间，也可以提高优化的效果，在IIS发布的网站上双击HTTP相应表头-->添加常用表头，设置web内容过期时间，即可达到延长缓存时间的目的。

![SouthEast 5][]

浏览器通过Expires头信息展示过期时间（如下js的服务请求为灰色，即为调用的缓存信息）：

![SouthEast 6][]

**js和样式表的引用**：引用会添加HTTP请求，页面的显示分为加载和下载，如图1.1 响应时间：938ms（onload 886ms），938ms指从第一个请求开始到最后一个请求结束所花费的时间，886ms则是页面加载所需要的时间。加载包括样式和html的加载，但一些涉及功能的js则不需要立即加载，而且还有可能发生js阻塞（js加载与以下加载文件之间存在时间间隙），所以正确的引用方式是将css引用放到html头部，js则放到尾部。

# 【总结】 #

系统性能优化涉及的方面很多，只有在不断发现问题的基础上，采用合理的分析工具进行分析，最后才是寻找解决问题的方法，优化任在进行中。。。

[SouthEast]: /images/20220731/98a0dfd68ce14ee9b86fefa3f5244f8f.png
[SouthEast 1]: /images/20220731/414b115d68ea4d43b77b14fc965ee13d.png
[SouthEast 2]: /images/20220731/8f6fae03c2b04a97912f1dfa31e062a2.png
[SouthEast 3]: /images/20220731/bda4fbbeb4e94e1d9a543b185dcc4cc8.png
[SouthEast 4]: /images/20220731/51f0214bc83144138c5b21f3dfe933d2.png
[SouthEast 5]: /images/20220731/be9d276c04e74a4f81362522709d37e7.png
[SouthEast 6]: /images/20220731/c430f330208b4bc6b784dc5ffd69177b.png