笔者在维护App时，发现其白屏时间较长，用户体验较差，经过分析后找到一些优化思路，并得到验证。
分析
分析过程使用chrome浏览器自带的性能分析功能，打开开发者工具，找到性能(performance)，点击录制(record)按钮并请求目标网站即可。
以下是该网站的报告
可以看到在fp之前花了将近两秒的时间get html，为什么一个get请求需要花费这么久的时长呢？主要是该页面使用了ssr，服务端渲染，在返回html之前，服务端需要请求后端服务器，获取数据，并组装html页面，恰好在请求的接口中有一个请求和底层的推荐服务相关，整个请求从request到response需要花费将近1秒的时间。这无疑拉长了html返回的时间。
在dcl之前，有一个长任务的执行也block了整个页面加载，dcl事件是不受样式加载影响的，但是会被同步js脚本（sync、defer）阻塞，而我们这个长任务正是一个defer脚本。
优化
- 针对ssr get html耗时较久的问题，我们看到推荐接口返回的内容并不在一屏中展示，因此，考虑将推荐内容走csr，并加上加载提示
- 将defer脚本改为async脚本
结果
优化一将白屏时间从平均3秒降低到平均1.5s缩减了一半
ps
根据公司内部的监控平台可以发现，加载时间还受终端，浏览器内核等影响。
