web性能优化

背景

电梯维保项目首页第一次打开,需要等30秒,用户满意度低下,今天抽空想办法做优化。


11.png

解决

首页动画效果比较多,加载的css和js文件有60个以上,http异步请求数据有
5次。打开谷歌浏览器调试工具,发现有个echarts.js插件耗时最长4s,文件有2m,竟然是源码文件,没有经过压缩。果断采用第三方CDN加速服务加载js:http://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.common.min.js

页面初始化时,上面的按月统计工单和下面的故障原因饼图统计同时启动多个ajax并发请求,造成请求阻塞。想到的解决办法:页面初始化时候,下面的故障原因先不请求数据,等用户下拉滚动条后再请求数据。

nginx优化,开启gzip 来提高页面加载速度。

用上这3招,首页加载时间降到3s。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,911评论 1 45
  • 1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像、样式...
    兔子不打地鼠打代码阅读 554评论 0 1
  • RTMP协议是Real Time Message Protocol(实时信息传输协议)的缩写,它是由Adobe公司...
    iOS小肖阅读 3,557评论 0 4
  • 亲爱的自己:你好! 骑行坚持到第三天了,游泳也一天没拉下,更夸张的是,今天晚上还打羽毛球了。 这节奏,早上骑行,中...
    Leice阅读 252评论 0 1