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

1. 特定的资源(如(js,css,@font-face)
2. 资源加载位置(如页头),加载方式(同步阻塞方式时)
3. dns解析,服务器应答,网络超时等都可能造成资源加载失败,或者长时间阻塞请求.
4. 错误的设计决策: 核心功能依赖于dom ready或者window onload事件. ----核心逻辑要尽快尽早执行(js置于页面footer部位,加载后立即执行).

如何测试前端单点故障?

例如测试<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解析结果)

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

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

1. 尽量在页脚 异步加载 (增加async或defer属性,或者其他异步加载方式)js(包括第三方脚本) 如<script async defer src="http://blackhole.webpagetest.org/test.js" type="text/javascript"></script>
2. 加强测试.测试所有可能造成前端单点故障的静态资源.
3. 运维监控:对关键资源加监控,有异常立即报警.

1. frontend SPOF
2. testing-for-frontend-spof
3. spofcheck-fighting-frontend-spof-at-its-root
4. https://gist.github.com/dongyuwei/5506992