Performance and Resilience: Stress-Testing Third Parties
https://csswizardry.com/2017/07/performance-and-resilience-stress-testing-third-parties/
对网页中嵌入的第三方资源（譬如字体、广告、CDN 服务等）进行性能调优与弹性容错可借助的工具：
- Chrome - DevTools - Performance - Bottom-Up (Group by domain)，可以看到每个 domain 下资源进行加载、解析、渲染等的耗时；
- Chrome - Network，对每条请求而言，右键可选择是否阻塞这条请求。通过这种方式可以看出当缺少某一项资源会对页面造成什么影响；
- Charles，代理工具，可修改网络带宽，可调试不同网络状况下页面的加在状况；
- Blackhole Server，服务器宕机的状况。WebPagetest 可模拟黑洞服务器，我们修改下 Host 就可以模拟页面依赖的资源所在的服务器宕机时页面的加载情况。对于阻塞渲染的资源（样式表与未 async / defer 的脚本），这种情况会导致页面白屏一段时间（浏览器判断超时要一点儿时间）。
通过上述工具可以发现页面存在哪些问题，然后开发者可以根据这些问题制定相应的解决方案，以避免页面在依赖的第三方资源出状况的时候失去服务。
Crafting Webfont Fallbacks
如何处理 WebFont 加载缓慢或失败导致的页面渲染缓慢：
不同浏览器对 WebFont 加载有不同的处理方式，IE / Edge 支持立刻 fallback，Chrome / Firefox / Safari（Ver >= 10） 则会等待三秒，对于低版本的 Safari 与安卓浏览器则会一直等待 WebFont 的加载直到其完成才开始渲染页面。（待验证）
解决方案：动态加载字体，加载完成后再设置字体重新渲染。
工具：fontfaceobserver（检测啥时候字体加载完成）、css font stack（选取系统通常支持的 fallback 字体）、font style matcher（比较 fallback 与需加载的字体之间的差异，通过设置样式尽可能地减少用户感知到的前后差异）