官网性能优化总结

摘要

使用lighthouse进行性能检测，并对lighthouse提出的建议进行优化。

lighthouse

chrome的插件用不了，下了一个本地的。

## 下载
npm install -g lighthouse

## 运行
lighthouse 127.0.0.1:8080 --view --emulated-form-factor desktop -throttling-method=provided

主要优化

静态化

服务端渲染，“直出”页面，具有较好的SEO和首屏加载速度。主要还有以下的优点：

• 使用jsp模板语法（百度后发现是用Velocity模板语法）渲染页面，减少了js文件体积
• 减少了请求数量
• 因为不用等待大量接口返回，加快了首屏时间

可以尝试Vue的服务端渲染。首页目前有部分是用接口读取数据，然后用jq进行渲染，性能上应该不如Virtual DOM，不过内容不多。

图片懒加载

这是一个很重要的优化项。因为官网上有很多图片，而且编辑们上传文章图片的时候一般没有压缩，但是很多图片的体积都很大。还有一个轮播图，20张图标，最小的几十K，最大的两百多K。对于图片来源不可控的页面，懒加载是个很实用的操作，直接将首屏加载的资源大小加少了十几M。

图片压缩

对于来源可控，小图标等图片可以用雪碧图，base64等方法进行优化。目前只是用工具压缩了图片大小，后续可以考虑在webpack打包的时候生成雪碧图。

异步加载js

通过