test frontend SPOF

什么是前端单点故障?

简单理解,即因为某个静态资源(js,css,@font-face自定义字体)加载失败或者阻塞请求,导致页面主体非正常渲染.

什么情况下可能会造成前端单点故障?

1. 特定的资源(如(js,css,@font-face)
2. 资源加载位置,加载方式(同步阻塞方式时)
3. dns解析,服务器应答,网络超时等都可能造成资源加载失败,或者长时间阻塞请求.

如何测试前端单点故障?

使用blackhole.webpagetest.org (IP: 72.66.115.13)提供的服务,即配置要测试的资源ip为72.66.115.13.

例如测试<script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js"></script>的阻塞效果,可以如下配置:

#blackhole.webpagetest.org
72.66.115.13 partner.googleadservices.com

注意,要清除浏览器的dns缓存和http缓存. firefox浏览器下禁止dns缓存方法: 浏览器地址栏中输入about:config,回车.---> 在列表任意一项上,右键->新建->Integer类型key --->设置key为network.dnsCacheExpiration ----> 设置value为0(即强制不缓存dns解析结果)

使用fiddle代理,对特定http(s)链接加断点:

例如设置只拦截http://partner.googleadservices.com/gampad/google_service.js这个脚本,如下: 在fiddle QuickExec输入框中输入 bpafter http://partner.googleadservices.com/gampad/google_service.js.

另外,在fiddle QuickExec输入框中输入 bp,回车,可以列出所有可用的breakpoint命令.

如何避免前端单点故障?

1. 尽量在页脚异步加载js(包括第三方脚本)
2. 加强测试
3. 运维监控

参考链接:

frontend SPOF testing-for-frontend-spof spofcheck-fighting-frontend-spof-at-its-root