[性能]前端单点故障(SPOF)
什么是前端单点故障？
简单理解,即因为某个静态资源(js,css,@font-face自定义字体)加载失败或者阻塞请求,导致页面主体非正常渲染.
出现的症状：页面空白
HTML文档已经加载完毕，但其他资源例如（CSS,JS,字体文件）等加载出现了阻塞，导致页面空白等待的时间。
出现的最主要原因：第三方资源
前端SPOF最频繁出现的原因是第三方内容，如果主站成功返回HTML文档，从主站返回的其他相关资源应该都成功返回，但第三方内容往往不是由主站控制，因此会出现不可预期的错误，所以一个网站的第三方资源不应该在主站资源之前被加载，这将有可能引起前端SPOF。
造成前端单点故障的情况都有哪些?
- 特定的资源(如(js,css,@font-face)
- 资源加载位置(如页头),加载方式(同步阻塞方式时)
- dns解析,服务器应答,网络超时等都可能造成资源加载失败,或者长时间阻塞请求.
- 错误的设计决策: 核心功能依赖于dom ready或者window onload事件. ----核心逻辑要尽快尽早执行(js置于页面footer部位,加载后立即执行).
如何测试前端单点故障?
首先我们需要一个测试工具：黑洞服务器 blackhole.webpagetest.org（又名72.66.115.13）
黑洞服务器是一个可路由的服务器，它使所有的请求流量被丢弃，所以它的行为完全像我们希望第三方部件的故障模式测试， 随着黑洞服务器运行起来，你现在可以使用它为手动或通过测试工具
怎么使用blackhole.webpagetest.org (IP: 72.66.115.13)？
使用blackhole.webpagetest.org (IP: 72.66.115.13)提供的服务,即配置要测试的资源ip为72.66.115.13.
配置测试的步骤：
第一步：先访问一下：jquery.com 第二步：用记事本打开C:\Windows\System32\drivers\etc\hosts
第三步：配置资源的ip为：72.66.115.13
例如：#blackhole.webpagetest.org第四步：查看效果，我们重新访问jquery.com。感觉到网页变慢了吗？
72.66.115.13 ajax.googleapis.com
72.66.115.13 apis.google.com
72.66.115.13 www.google-analytics.com
72.66.115.13 connect.facebook.net
72.66.115.13 platform.twitter.com
注意：如果你没有感觉到效果，请清除浏览器的dns缓存和http缓存. firefox浏览器下禁止dns缓存方法:
浏览器地址栏中输入about:config,回车.---> 在列表任意一项上,右键->新建->Integer类型key --->设置key为network.dnsCacheExpiration ----> 设置value为0(即强制不缓存dns解析结果) 
更简单的重现前端单点故障的方法，把下边的html，在本地运行一下，就能看到效果。
<!DOCTYPE html>
<html>
<head>
<title>
test Frontend SPOF
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
console.log($)
$(document).ready(function () {
alert('ready 此时页面才加载完成...');
});
</script>
<script src="http://blackhole.webpagetest.org/camnpr.js" type="text/javascript">
</script>
</head>
<body>
body
</body>
</html>
使用fiddle代理,对特定http(s)链接加断点
例如设置只拦截 http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js 这个脚本,
如下: 在fiddle QuickExec输入框中输入bpafter http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
如图所示：
另外,在fiddle QuickExec输入框中输入bp,回车,可以列出所有可用的breakpoint命令.
JS脚本的错误，造成功能性的SPOF
传统上,在不同<script></script>内执行的js,有异常错误时,不会互相影响. 但如果把多个<script></script>内js合并到一个<script></script>内,则前面的js模块出错时,会中止执行,导致异常点后面的功能模块完全失效.
简单的解决办法: 把不同功能模块封装到try catch中执行. 不要怕由此带来的性能损耗, 与性能相比,模块错误隔离带来的整体功能稳定性更加重要。
养成一个规范的书写JS习惯：EcmaScript5的严格模式，可以帮助我们矫正js代码。
为了网站性能，你可以自检一下：
- 你的Web站点依赖的资源是否可用性？（有很多网站使用CDN，选择一个稳定可靠的很重要。以后有空了，会上线：
前端导航栏目，推荐一下好用的CDN等） - 假如这些资源之一，如果超时，用户是否有可能，将看到你的网站卡住了？
- 请慎重选择第三方资源，因为单点故障的出现大多来自第三方。
- 你嵌入资源的方式是怎样的，能避免前端SPOF吗？
如何避免前端单点故障?
尽量在页脚 异步加载 (增加async或defer属性,或者其他异步加载方式)js(包括第三方脚本)
如<script async defer src="http://blackhole.webpagetest.org/camnpr.js" type="text/javascript"></script>
加强测试.测试所有可能造成前端单点故障的静态资源。
运维监控:对关键资源加监控,有异常立即报警。
扩展阅读
本文链接：http://camnpr.com/javascript/testing-for-frontend-spof.html
相关文章
- 细说JavaScript Source Map (sourceURL / sourceMappingURL)(2013-8-20 14:52:0)
- [UE]图片由模糊到清晰的渐进式JPEG(2013-8-8 10:39:22)
- [优化]innerHTML和appendChild哪个性能更高(2013-7-15 16:16:8)
- gif背景动态增加移除-每次无法从第一帧播放 url添加随机数(2013-7-5 13:6:38)
- 原生js事件绑定和事件移除(2013-7-3 10:14:6)
- 浏览器默认的并发数限制(2013-6-11 20:0:41)
- input file标签实现JS图片上传预览效果 选择图片后能立即查看图片(2013-5-23 16:8:59)
- this.length >>> 0表示什么？ es5-safe (2013-4-25 15:23:37)
- JS压缩的另类方法 -- 将JS文件压缩成PNG图像存储方法(2013-3-25 16:10:4)
- 合并多个js,css文件的方法集 Minify,copy,bat(2013-3-25 11:21:11)
