Adaptive to the reader
FE R & D Engineer
Classmates who have basic understanding of Fiddler
Classmates for optimal interested in Web performance
This article does not speak too many Fiddler’s basic concepts, basic usage, and installation steps, so I hope to know the above knowledge, please understand on the official website of Fiddler, the official website http://www.fiddler2.com/fiddler2/.
What is Fiddler
In order to open a head, it is still a brief introduction to Fiddler:
Fiddler is a web debugger. It can record HTTP requests between all clients and servers, allow you to monitor, set breakpoints, and even modify the input and output data, the Fiddler contains a powerful event script subsystem and can expand using the .NET framework language. More details We can learn from the official website of Fiddler, http://www.fiddler2.com/fiddler2/, the above details describes the use and extensions of the Fiddler.
Why should we speed limit?
The speed limit is very important for web front-end research. Since the developer’s machine general configuration is very high, it is difficult to simulate the real usage of the user, if you are downloading JS, CSS, etc. Static resources. At the time, a rendering situation of the page. When the network speed is very slow, we even want to see the user interface first, not let the user sees a blank. So this time, the network speed limit can easily perform performance debugging and optimization in LocalHost.
The principle of Fiddler analog speed limit
We can simulate the speed limit through Fiddler, because Fiddler is originally a proxy, which provides a callback interface before the client request and the server response, we can customize some logic in these interfaces. The simulation speed of the Fiddler is a logic from the defined speed at the client request. This logic is to limit the download speed and upload speed of the network by delaying the time of transmitting data or received data, thereby achieving the effect of speed limit.
Then our algorithm is 1000 / download speed requires delay time (milliseconds), such as 50kb / s needs Delay200 millisecond to receive data.
Simulation speed limit through the Fiddler-Script
Fiddler-Script is a powerful sub-script system provided by Fiddler, which calls the interface of the FIDDLER to complete the developer’s customization.
We can add the following two codes in the OnBeForeRequest method provided by Fiddler-Script:
// delay sends by 300ms per kb Uploaded.osesis [“1000”; // delay receivers by 150ms per kb Downloaded.osesis [“Response-Trickle-delay”] “150”;
Every time we test the speed limit for your own website, you can change the above effect according to your needs, such as the longer time of the delay, the more obvious speed limit.
We can also do better – speed limit plug-in by c # writing fiddler
Although we can simulate the speed limit through FiddlerScript, there will be a place where it is inconvenient:
1. Every time you want to simulate different network speeds, you have to change the two codes of FiddlerScript, there is no better way to modify, such as modifying in the interface.
2. There is no way to simulate the unstable network speed (slow speed when the speed is fast).
We can solve the above two problems through the Fiddler more powerful extension.
We introduce a C # class library project, refer to the Fiddler’s Inspector plugin object, inherit the IAUTAMPER class, overload the online method and the AutoTamperRequestBefore method.
Onload: is the method that fiddler callbacks when loading this plugin, the AutoTamPerRequestBeforeese callback event function is the same as the FiddlerScript’s OnBeForeRequest callback event, and the custom logic can be requested before request.
We can use the WinForm form to develop interface.
The time of downloading each kb / s and uploading each kb / s is then approved by the user-configured download speed.
To call the same implementation with FiddlersCIRPT [“Revel-Trickle-delay”] [Delay Time];
Ossession [“” “” “” “” “” “” “” “” “” “” “” “”
We can also give different random numbers [1-500] in AutoTamPerRequestBefore to simulate the case where the request may encounter the network speed.
The effect of the plug-in speed limit
When we set up the download speed and upload speed of 10kb / s, and you will access the effect of www.baidu.com when you clear the cache. You can see that our homepage is to download the data edge rendering page, this shows that our www.baidu.com does not have a blank page when the network speed is low, so that the user has a bad experience.
But if you access a large website, such as www.sina.com.cn, the same 10kb / s network speed, a blank page for a long time, FE can analyze the blocking of JS for this situation. HTML rendering.
Fiddler is a webger web, we also use it to speed up the right to test the online environment, etc., by file matching. Through speed limit, we can see that the page load and rendering effects are very helpful in network speed, which is very helpful for Fe engineers, and helps the project’s developers pay attention to more different environments.