对你的 SPA 提提速

简明扼要

1. RUM能很好的跟踪用户在网页中的各种操作并且能够给出网站的实时加载数据情况
2. 优先渲染首屏内容能够提高Frist Meaningful Paint (FMP) 和 Time to Interactive（TTL）的性能指标
3. 延迟是瓶颈，最快的速度莫过于什么也不传输
4. 对实时性较强的应用使用WebSocket
5. 一个“源”由应用协议、域名和端口这三个要件共同定义

文章概要

1. 监控 SPA 性能
2. 提升 SPA 性能(6种)
   1. 延迟渲染首屏下的内容
   2. 非必要数据的懒加载
   3. 缓存静态内容
   4. 对实时性较强的应用使用WebSocket
   5. 使用JSONP/CORS绕过同源策略
   6. CDN处理

1. 监控 SPA 性能

有很多工具能帮助你监控SPA的性能。首先，可以利用Chrome自带的开发者工具(Devtool)或者特定的插件。

1. Lighthouse :一个开源的自动化工具，用于改进网络应用的质量
2. Ember Inspector ：针对Ember.js项目的插件
3. React Performance Devtools :针对React.js项目的优化插件

这些工具的弊端是，他们不能准确的测出 SPA 应用的加载速度。

为了能够真正的测出 SPA 的真实加载速度，在Chrome 中也存在一些子工具（如：Speed Index）用于模拟用户真正的上网过程。这里有一篇关于Speed Index的文章可以参考一下。

但是，真实的用户操作受各种设备和网络影响，很难利用单一的插件和工具进行模拟。

所以，我们可以使用 真实用户模拟 Real User Monitoring （RUM）对应用进行处理。他能很好的跟踪用户在网页中的各种操作并且能够给出网站的实时加载数据情况。

这里列出一些针对SPA的RUM工具（有些地址，需要