VS2013: BrowserLink Cause Javascript or jQuery Perform Very Slowly

Today one of the developers came to me asking for help regarding his web page performance is very bad. His web page contain less than 50 lines of javascript code and using latest version of jQuery. What actually happen is after the page load, it binds a jQuery change event to a dropdown list control, but it takes a few seconds time to complete. We know that by simply clicking the dropdown control, the browser is not responding.

Environment

Project Type: ASP.NET Web Form

IDE Tool: Visual Studio 2013

Browser version: IE11

CPU: i7-3720QM

Memory: 16GB

With the above hardware spec, the browser should not perform badly with a simple javascript. We have tested with IE6 and IE11, we experience the same behavior for both browsers. From the task manager, we realize that the browser process actually spike up the CPU and memory usage for few seconds after the page load.

Profiler

In order to further investigate, I turn on the profiler from my IE11. In case you are not aware of IE actually has a built-in profiler, just press the F12 key, then look for Profiler, click the Play button to start profiling your web page.

Note: Start profiling only when you are ready to load the problematic page. If you start profiling at the starting page, the profiler results are accumulating and you will find too much data and difficult in tracing the actual problem.

So, after loading the problematic web page, I stop the profiler, and to my surprise there are a lot of functions call from a unknown script.

Notice the URL? The browserLink look fishy to me. After some searching, I realize this is a new feature from Visual Studio 2013 which is used to create communication channel between browsers. This article actually recommend you to turn off the BrowserLink before you publish your application.

My developer tested the web page with IE6, his profiler result is slight different from mine, there are a lot of anonymous function call to a URL that contain "poll" keyword. At first thought he may have implemented SignalR in his project that causing the problem, but he is 100% sure no SignalR was developed in his project.

After further explore and understanding how Browser Link work, it actually use SignalR and it explain the result of IE6 profiler show the "poll" keyword because IE6 do not support web socket, SignalR internal change the communication method with polling. Here is the quote from the ASP.NET site article:

"Browser Link uses SignalR to create a communication channel between Visual Studio and the browser. When Browser Link is enabled, Visual Studio acts as a SignalR server that multiple clients (browsers) can connect to. Browser Link also registers an HTTP module with ASP.NET. This module injects special <script> references into every page request from the server."

Solutions

The problem should not happen if you are aware of purpose the debug mode in your config file and you always turn it off while publishing your application to production environment. 

<system.web>

  <compilation debug="true" targetFramework="4.5" />

</system.web>

But, we tested out that turning off debug mode only is not enough, we have to disable the Browser Link from the Visual Studio 2013 before publishing your project, then only you will see the performance improve and no more SignalR stuffs flooding from your profiler.

Alternatively, add the following AppSetting to your config file.

<appSettings>

  <add key="vs:EnableBrowserLink" value="false"/>

</appSettings>