之前我在负责游戏频道的首页，由于我们面对的用户是东南亚用户，在印尼、菲律宾等国家可能网络较差，页面可交互时间经常来到四五秒，影响用户体验。针对这问题，我进行了一系列操作，取得了较好的结果。
结果：首屏时间优化到一秒，可交互时间从三秒优化到了1.8秒，命中缓存的情况下可以到0.5秒到一秒。
我是怎么做到的呢?
在优化前，我先排查了一下页面慢在什么地方，页面加载慢的瓶颈还是在前端，后端的处理时间才两三百毫秒，主要时间耗费在html的下载，js的下载解析，获取渲染页面用的数据这三块上。
因此了使用了service-worker+同步渲染屏+localstorage 三板斧来解决这问题
第一个和第三个就不仔细讲了，service-worker使用缓存优先的策略可以缓存html，localstorage可以缓存时效性不强的接口数据来提前渲染。
这里重点讲讲同步渲染屏。
这是我发明的词语，其实也不复杂，由于原本的js文件有一百多kb，依赖太多，要将其优化到十几二十kb不太现实，因此我参考了骨架屏的方法，研发了同步渲染屏：即使用原生js，不引入外部依赖的渲染出首屏必要元素。同时把该js和一些图片内联在html里，免去下载资源的时间，达到跟骨架屏接近的效果。
原理讲起来容易，但也有些细节需要处理，比如js可以使用之前localstrage缓存的接口数据来渲染一些关键组件，而内联的图片，可以使用一些低清晰的版本，来减小体积，同时也给用户一种渐进式加载的感觉，不会突兀。
那么，这同步渲染屏跟骨架屏比，有什么优点呢？
一、由于使用了内敛的图片，同步渲染屏是彩色的，不像骨架屏只是灰色的
二、由于使用了缓存的渲染数据，同步渲染屏可以达到跟真实完整渲染十分接近的效果，通过绑定一些简单的事件监听来达到减少页面可交互时间的目的，这是骨架屏做不到的。
