javascript - 页面加载慢,有什么优化方案

Question

哪位大神帮忙看一下，页面加载很慢是什么原因，希望能具体分析一下，有什么好的解决办法
线上地址http://cqwind.chinacloudapp.c...

Answer 1

看了图，耗时最长的几个都是Ajax/XHR请求。

由于静态资源加载很快，所以不可能是网速的原因。所以你可以：

1. 在前端尽量合并HTTP请求。

2. 让后台优化一下，提高相应速度。（你的情况看，最关键的地方应该在这里；如果后台甩锅，那你换个地方模拟HTTP请求，如使用Postman之类的工具，用事实说话。）

Answer 2

1.压缩js，css，看了都没压缩

2.压缩图片

3.可以把css这些打包，或者建议第一次加载得时候，做一个loading层

这些资源文件最好都压缩打包了一下，用gulp最简单就能实现，还有如果提供更好的用户体验，可以学学google
earth，第一次访问加载所有资源，bundle，提供一个loading层。后面的动态数据要么轮训，要么直接做websocket

还有就是我仔细看了，你得数据是调用的耗时比较严重，所以建议还是得折腾下后端优化。google也有健康检查工具，会给你提供建议

Answer 3

1. 检查客户端和服务端网络，40秒一般来说不正常；

2. Chrome -> F12 -> Audits 仔细看他给的建议；

3. png 全部转 webP，至少全部用 tinyPNG；

4. 找出拖累加载的静态资源，上 CDN；

5. 升级 http/2；

6. 预加载 / 本地缓存；

7. 不是 JSP 的话，换掉 Tomcat，例如 nginx；

Answer 4

1. 关于耗时长的计算部分可以交给后台定时处理,将结果缓存,页面直接调用缓存就行

2. 优化计算逻辑

3. 检测耗时 sql