SPA首屏性能优化可探索点

专业名词解释

• SPA

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
来源：百度百科-->百度百科：SPA

• 骨架屏

简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。
来源：segmentfault（思否）Vue页面骨架屏注入实践

探索点

基础

1. 压缩、混淆
2. css sprite（雪碧图）
3. 放弃图片图片，采用自体图标
4. 懒加载
   • 首屏非可见部分懒加载。首屏部分，只可见部分不适用，其余部分使用懒加载
   • 路由懒加载。通过模块化方法，将非首页部分的页面模块全部使用懒加载，只用在访问时才加载该部分
   • 图片懒加载。
5. 减少不必要的数据传输
   • 减少XHR中的非必要数据

需探索

1. 骨架屏
2. 浏览器端缓存
3. 通过CDN，减少第三方js的体积
4. 图片使用专门的服务器
5. 开启gzip
6. SSR(Server Side Render/服务端渲染)/前后端同构
7. 预渲染

---

后记

基础部分几乎是每一个项目中都在使用的方案，需探索部分则是我没有采坑的部分，后续有时间对每一项进行深入探索。