彭逸飞：用6种工具优化网站应用的访问速度

性能问题很严重

最近为客户开发了一个网站应用，为了效果好，引用了一个漂亮的框架，但是问题也来了，这个框架有个巨大的css，导致这个网站访问速度奇慢无比。登录页面居然要10多秒钟才能打开......客户虽然没有说，但是我自己也受不了。于是抽时间来分析解决这个问题

工具一：谷歌performance分析

第一步，我需要分析当前网站为什么慢，虽然我判断多半是那个>1M的css引起的，我还是希望有一些数据来支持我的判断。

打开谷歌浏览器，Ctrl-shift-I   进入开发模式，查看performance标签，录制性能数据。

（具体使用我不赘述了，请见最后的参考资料）

大家可以看到，有一个css用时10秒钟传输，占用了大量时间。

另外一个jquery.min.js也占用了10秒钟以上的时间。

考虑该服务器带宽1Mbps，1MB的文件传输恰好需要10秒钟。这个数据还是比较靠谱的。所以传输应该是网站最大的问题。

如果不清楚谷歌performance的功能，这里有个图片，大家也可以参考一下：

 

根据“蓉城IT精英”群里一帮小伙伴的建议，我采用了多个工具进行该网站优化。

工具二，TinyPNG 压缩图片

         该网站有个漂亮的背景图，但是比较大。443K，也是一个瓶颈。按照服务器带宽，它占用了约4.5秒的加载时间。

         用TinyPNG压缩之后，居然只有78K，一下节约了3秒钟时间，节约了83%的时间。

         TinyPNG的网站是：https://tinypng.com/， 很简单，自己试试。

 

 工具三：删除无效字符

            网上这样的工具比较多，但是我试了一下，效果很有限，而且影响代码格式。所以我最终没有用

工具四：拆分css

          由于该网站启动的时候需要启动一个3万多行的巨大css，文件最后是1MB，带来性能问题。

          有个思路是拆分css，按照功能分开加载。

          我承认这是一个好注意，效果也一定显著。 但是前提条件是开发者对这个css非常熟悉。而且不怕代码书写n个css文件的麻烦。

工具五：对css进行gzip压缩传输

           这个是个非常好的工具！！

           我采用这个方法，效果明显，部分文件只占用了压缩前1/10的时间，尤其是那些复杂的css，js，html，效果显著！

          其原理是将文本类似的文件，如css，xml，js，采用gzip压缩之后再传输，从而降低对带宽的要求。

          当然，由于压缩和解压会占用CPU的时间。但是当前电脑性能过剩，并不会引起额外的问题。

           方法也不复杂，按照下面的方法修改nginx的配置：

#修改nginx配置文件 /usr/local/nginx/conf/nginx.conf
[root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf    #将以下配置放到nginx.conf的http{ ... }区域中
 
#修改配置为
gzip on;                     #开启gzip压缩功能
gzip_min_length 10k;         #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小.
gzip_buffers 4 16k;          #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
gzip_http_version 1.1;       #压缩版本
gzip_comp_level 2;           #设置压缩比率，最小为1，处理速度快，传输速度慢；9为最大压缩比，处理速度慢，传输速度快; 这里表示压缩级别，可以是0到9中的任一个，级别越高，压缩就越小，节省了带宽资源，但同时也消耗CPU资源，所以一般折中为6
gzip types text/css text/xml application/javascript;      #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
gzip_disable "MSIE [1-6]\.";       #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip vary on;    #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩

 修改完毕之后，用下面的命令检查语法，以及重启nginx：

$ nginx -t                         // 检查nginx配置文件
$ nginx -s reload            //使配置生效

工具六： 简单背景image 换成svg

         当前我们的背景图是png格式的几何图形。据高手指点，这样的图形，换成svg也就几百字节或者几k。压缩率比会是100:1.

         而且svg还不存在不同分辨率的清晰度问题，相当牛掰。

 

一次成功的技术探索。

在此感谢“蓉城IT精英”群的小伙伴热心指点，尤其是：

          刘刚，Diego，jason，王爱民

如果是有互联网，电商，小程序，App方面的开发应用，也可以找我们来开发。成都暴风雨科技，资深团队，质量有保证，哈哈。

 

参考资料：

谷歌performance的使用：
https://blog.csdn.net/kongduxue/article/details/82017491

https://www.cnblogs.com/xiaohuochai/p/9182710.html

https://www.cnblogs.com/zjjing/p/9106111.html

nginx的压缩配置

https://www.cnblogs.com/kevingrace/p/10018914.html