基於fiddler來模擬限速

適應讀者

web開發工程師

對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的時間(毫秒)，n

比如50kb/s 需要delay200毫秒來接收數據。

通過fiddler-script模擬限速

Fiddler-script是fiddler的提供的一個強大的子腳本系統，這個系統可以調用fiddler的介面來完成開發者自定義的功能。

我們可以在fiddler-script提供的OnBeforeRequest方法里增加以下兩句代碼：

// Delay sends by 300ms per KB uploaded. noSession["request-trickle-delay"] = "300"; n// Delay receives by 150ms per KB downloaded. tnoSession["response-trickle-delay"] = "150";n

每一次我們針對自己寫的網站測試限速時，可以根據自己的需要更改以上效果的值，比如延遲的時間越長，限速就越明顯。

我們還可以做的更好- 通過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]; noSession["response-trickle-delay"] = [delay time]; n

我們也可以在AutoTamperRequestBefore里給不同的隨機數[1-500]來模擬每次請求可能會碰到網速不穩定的情況。

插件限速的效果

當我們設置下載速度與上傳速度都為10kb/s,並且清楚掉緩存時，ie下訪問http://www.lu.com的效果。可以看到我們主頁是邊下載數據邊渲染頁面的，這說明我們http://www.lu.com在網速較低時，也不會出現一個空白頁面，讓用戶有不好的體驗。

但如果訪問頁面較大的網站，比如：http://www.lu.com時，同樣的10kb/s網速，就會長時間的有一個空白頁面，FE可以針對這種情況來分析js的阻塞與html的渲染。

總結：

Fiddler是web開發的利器，我們還除了利用它來限速之外，還可以通過文件匹配來實現本地開發來調試線上環境的等等更多的功能。通過限速我們可以看到在網路速度很低的時候頁面的載入與渲染效果，對於FE工程師是非常有幫助，也有助於讓項目的開發人員關注更多不同環境下的效果。