记一次前端优化

简直坑死我了，刚接手这个项目没几天，就各种开发任务，好多需求还不是很明白，只能一边开发，一边问别人需求什么的。

都在说，现在的版本首页访问速度太慢，找我做优化~（因为现在组里就我一个前端）

这几天也查了很多资料，看了很多关于优化的一些方案，技术文章。

说一下这个页面的耗时：

正常网络，无缓存的情况下，首页所有的请求完成需要一分钟的时间，简直受不鸟。

然后说一下我的思路：

1.要找到原因，为什么耗时这么多，是请求太多？图片太大？服务器太烂？代码写的太烂？

我去抓了包，整理了所有的请求和时间。为什么慢基本一目了然。

2.这个页面因为图片太多，有 80 多个，我选择了懒加载，图片按需加载。

3.部分接口响应时间太慢，找后台开发人员做接口优化和 sql 查询优化。

4.js,css 合并压缩，这个没什么多说的。

5.还有一个预加载，但我还没试这个。

尝试了这些之后，首屏的加载时间减少到了 8s 左右，虽然比之前的时间减少了不少，但还是没达到要求，所以还是需要改进优化的。

下面是过程中的一些笔记：

#查看首页所有网络请求，分析时间消耗

140 个请求   

34 个 XHR(16 个 ajax 请求)

16 个 js

7 个 css

80 个 img（4.5M/5.6M）

1 个 font

1 个 jsp

1 个 ico

http://..../hotRead/getList?pageNum=1&pageSize=11  9.62s(首页中加载耗时) |4107ms(直接掉接口耗时)

http://..../monthNewBook/getList |3.11s |1355ms

http://..../saleRank/getList?pageNum=1&pageSize=10        5.36s                   2959ms

http://..../popularityRank/getList?pageNum=1&pageSize=10  5.8s                    1399ms

http://..../recommendRank/getList?pageNum=1&pageSize=10   4.11s                   1671ms

http://..../subjectFine/getList?subjectTypeID=0A8192CDC19E4AE8A7421DB252E3F8FD&pageNum=1&pageSize=11   8.65s 5873ms

是否有没用的请求或者无效的资源？

js,css 文件是否有重复请求的？

js.css 能否压缩合并，减少请求个数？

能否使用预加载？

CDN？

使 css,js,font 文件可缓存，ajax 可缓存

css @import 会导致浏览器顺序加载，无法并行加载

样式表放在脚本前面

预加载：

DNS preFetch : <linkrel="dns-prefetch"href="//example.com">

PreContent : linkrel="preconnect"href="http://css-tricks.com"

Prefetch : <linkrel="prefetch"href="image.png">

Subresource : <linkrel="subresource"href="styles.css">

Prerender : <linkrel="prerender"  href="/thenextpage.html"/>

Preload : <linkrel="preload"href="image.png">

部分图片使用 lazyload 技术，部分图片按需加载

···

最后保证首屏加载速度