前端优化实践



     最近参与了一个基于微信公众号的项目，上线发布后，打开速度有较慢，用户体验很差，经过一番折腾总算达到了一个暂时可以接受的程度，归纳如下：

问题0：

     通过配置NGINX日志和TOMCAT访问日志，进行分析查看处理速度，发现服务器处理速度很快，不是服务器端逻辑处理的问题。那么就是网络环境或者页面解析的问题；最终发现以下问题：

问题1：

     页面跳转过多，对于G网络发起连接慢的环境会对速度体验造成巨大的问题；

处理办法：

     1，去掉 项目中不必要的跳转；

 

问题2：

    通过Chrome浏览器，查看页面的资源下载速度和连接数，获知JS，CSS资源很多导致连接数很大，amazeui相关CSS和JS很大，大大300K左右；

处理办法：

    1，开启TOMCAT压缩，减少下发数据量; --效果不够明显；

    2，合并相关的JS和CSS，通过压缩工具对JS和CSS进行再次压缩 ---过度压缩会导致以后开发成本加大，建议：有选择的压缩；

    3，对比较大的图片通知美工进行压缩或者更换图片格式，尽量减小；

    4，使用CSS  Spirite技术，减少图片下载的连接数

问题3：

     通过以上两个步骤的调优后速度有很大提升，但是还不尽如人意，尤其G网在网络不稳定的情况，问题更加明显，表现为时好时坏。

   处理办法：
      1，动静分离，使用阿里云CDN，将比较大的比较大的JS、CSS和IMG文件部署在CDN上，提供服务器的可用性；--更新问题通过添加版本 来保证清理缓存；

      2，使用域名预解析和资源预加载，在登陆跳转页面对社区中用到的域名和部分资源进行预处理，充分利用跳转页；

      3，加大域名解析的TTL时间，降低域名解析的时间；

      4，配置NGINX缓存，将IMG资源文件在NGINX服务器进行缓存，减少到后端服务器获取的时间（虽然很小），设置浏览器过期时间，减少请求链接；

      5，设置图片服务器缓存到期时间和CDN上静态资源缓存时间为30天；

问题4:

      登陆过程中在网络不好的情况下，登陆跳转页面会有卡的感觉，分析后是因为服务器端使用了ACTION重定向，原本以为这个是服务器端的跳转，其实是通知客户端浏览器打开一个新的地址（唉。。。开发知识很重要）

    处理方法：

        1，修改页面请求方式，改为AJAX方式获取不在进行重定向

        

总结：
   1，WEB应用开发不仅仅要保证服务器端处理速度足够快，还要保证前端页面加载和解析速度足够快；

   2，通过日志和分析工具来判断问题所在，针对问题去解决问题；

   3，规范开发，学习各种开发方式，保证代码灵活，动静分离等。

其他资源：

     1，前端速度检查工具 ：

          (1)  https://gtmetrix.com/  

          (2)  https://developers.google.com/speed/pagespeed/insights/

      2，前端优化基本思路：

           (1),  毫秒必争，前端网页性能最佳实践    http://blog.jobbole.com/48746/#httprequest

           (2),  移动网站性能优化：网页加载技术概览   http://blog.jobbole.com/46599/

      3，前端自动构建：

             (1), 工具    http://www.gulpjs.com.cn/

            (2), 实例： http://www.tuicool.com/articles/ri2Ar2