适应读者

FE研发工程师

对fiddler有基本了解的的同学

对web性能优化感兴趣的同学

本文不会讲太多fiddler基本概念，基本用法，以及安装步骤，所以希望知道以上知识的同学，请在fiddler的官方网站上去了解，官方网站http://www.fiddler2.com/fiddler2/。

什么是fiddler

为了开一个头，还是先简单介绍下fiddler:

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。更多详细的信息我们可以在fiddler的官方网站上去了解，http://www.fiddler2.com/fiddler2/，上面详细介绍了fiddler的用法与扩展。

我们为什么要限速

限速对于web前端研发是非常重要的，由于开发者的机器一般配置都很高，并且是在localhost下来调试程序，所以很难模拟到用户的真实使用情况，如正在下载js,css等静态资源的时候，页面的一个渲染情况。当网速很慢的时候，我们更希望看到的是先渲染出用户界面，而不是让用户看到一片空白。那么这个时候，网络限速就能很方便在localhost针对类似的情况来做性能调试与优化。

fiddler模拟限速的原理

我们可以通过fiddler来模拟限速，因为fiddler本来就是个代理，它提供了客户端请求前和服务器响应前的回调接口，我们可以在这些接口里面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑，此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和上传速度，从而达到限速的效果。

那么我们的算法就是 1000/下载速度 = 需要delay的时间(毫秒)，比如50kb/s  需要delay200毫秒来接收数据。

通过fiddler-script模拟限速

Fiddler-script是fiddler的提供的一个强大的子脚本系统，这个系统可以调用fiddler的接口来完成开发者自定义的功能。

我们可以在fiddler-script提供的OnBeforeRequest方法里增加以下两句代码：

 
       
     
        
  1. // Delay sends by 300ms per KB uploaded.  
    2.  
        
  2. oSession["request-trickle-delay"] = "300";  
    3.  
        
  3. // Delay receives by 150ms per KB downloaded.  
    4.  
        
  4. oSession["response-trickle-delay"] = "150"; 
    5.  
       
 
      
 
     
 
    
 
    
每一次我们针对自己写的网站测试限速时，可以根据自己的需要更改以上效果的值，比如延迟的时间越长，限速就越明显。
 
    
我们还可以做的更好- 通过c#写fiddler的限速插件
 
    
虽然我们可以通过fiddlerscript来模拟限速，但还是会有以下不方便的地方：
 
    
1.每次想模拟不同网速时都要去更改fiddlerscript的那两句代码,有没有更好的方式来修改，比如在界面修改。
 2.没有办法模拟网速不稳定的情况（网速时快时慢）。
 
    
我们可以通过fiddler更强大的扩展功能来解决上述两个问题，fiddler是可以加入一个Inspector插件对象，来使用.net下的任何语言来编写Fiddler，我这次选择用c#来扩展fiddler插件。
 
    
我们引入一个c#类库项目，引用fiddler的Inspector的插件对象，继承IAutoTamper类，重载onload方法与AutoTamperRequestBefore方法。
 
    
Onload:是fiddler在装载此插件时回调的方法，AutoTamperRequestBefore与fiddlerscript的onbeforerequest回调事件功能相同，都可以在request前请求自定义逻辑。
 
    
我们可以通过winform表单来为插件开发界面。
  
 
    
 
    
再通过用户配置的下载速度与上传速度来推算出下载每kb/s与上传每kb/s所delay的时间。
 从而调用与fiddlerscirpt同样实现的接口
 
    
oSession["request-trickle-delay"] = [delay time];
 oSession["response-trickle-delay"] = [delay time];
 
    
我们也可以在AutoTamperRequestBefore里给不同的随机数[1-500]来模拟每次请求可能会碰到网速不稳定的情况。
 
    
插件限速的效果
 
    
当我们设置下载速度与上传速度都为10kb/s,并且清楚掉缓存时，ie下访问www.baidu.com的效果。可以看到我们主页是边下载数据边渲染页面的，这说明我们www.baidu.com在网速较低时，也不会出现一个空白页面，让用户有不好的体验。
 
    
但如果访问页面较大的网站，比如：www.sina.com.cn时，同样的10kb/s网速，就会长时间的有一个空白页面，FE可以针对这种情况来分析js的阻塞与html的渲染。
 
    
总结：
 
    
Fiddler是web开发的利器，我们还除了利用它来限速之外，还可以通过文件匹配来实现本地开发来调试线上环境的等等更多的功能。通过限速我们可以看到在网络速度很低的时候页面的载入与渲染效果，对于FE工程师是非常有帮助，也有助于让项目的开发人员关注更多不同环境下的效果。
 
    
by fangxiao
 
    
 
 
    

      【本文首发于： 
     搜索研发部官方博客】 
     http://stblog.baidu-tech.com/?p=1068 
    
 
    

      【 
     关注百度技术沙龙】