编程比赛题目：提高页面加载速度

没想到接近年底了，12月份还是那么忙，一直没有腾出时间来写文章。刚好最近在参加公司内部的一系列比赛，趁机整理一下学到的东西吧。

 

本关比赛的题目是抽取了公司内部的一个新项目，主要是展示各种创新作品，其中有个文章内容模块，由于文本内容很多，而且还包含了大量图片。同时由于采用了富文本编辑器，会存储大量的样式标签。最终的结果是查询作品的详情接口很慢，前端体验的效果很差。另外希望富文本编辑器能够支持从word复制文章时也带上图片，解决大量无用标签的问题。

富文本编辑器，所以主要还是解决：优化查询作品详情接口，加载速度在1s之内

 

先看看现状，打开指定优化的页面，打开F12的Network的控制台

从这里可以看到，有个接口请求大小有800多KB，响应时间为4.6s，这就是优化的突破点。另外，产品详情页面是一次性加载完所有图片之后才进行渲染，明显速度要慢。

在后端的详情接口上，逻辑比较简单，通过一个ID查询作品详情，只是Dao层上有几张表的关联查询，作品表的某些字段直接存储了文字内容和样式标签，字段是加了索引的。请求响应返回的数据很大，都是一些无用的标签，响应体数据过大也是速度慢的主要原因。

最终经过一天的猛操作，页面加载速度控制在1s以内，返回的size在200B。

 

既然是编码比赛，当然要抛弃掉软件资源上的东西，比如CDN等，更多的是从业务出发，分析前后端的代码层面上进行优化。

综合自己团队和看到的其他团队的解决思路，汇总如下：

后端：

1. 采用GZIP压缩：对请求响应的response数据进行压缩

2. Mybatis开启了二级缓存

3. 返回的json格式进行修改，改为protobuf

4. 作品入库时，对内容的无用标签进行去除

 

前端：

1. JS插件改为懒加载

2. JS插件改为按需加载

3. 减少核心公共包的大小