Too many scripts will slow us down

by Ishai Hachlili 1. March 2009 09:01

I’ve been ‘away’ from this blog for a while. It’s been a very interesting year for me but I’ve been neglecting this blog for too long.

If you’ve read the previous posts, you can see I’m not a big fan of the Asp.Net postbacks and update panels. Too much information is sent back and forth for small actions that can be easily done in javascript.

As I’ve shown before, there are hugh performance benefits to using client side rendering in a web app. Instead of sending the entire HTML for every request, we load javascript code for creating that HTML once and after that we just send the data for subsequent requests.

One of the side effects of moving from server side rendering is that you start getting more and more javascript files. I’ve been using JQuery for a while, there are a lot of great plugins for JQuery, but loading all of those include files introduces some problems:

  1. More scripts = more requests = more loading time
  2. Managing includes can become messy

Using a Script Combiner to reduce the number of requests
Ideally you want to have only one js file and one css file, but you don’t want to have your files merged while you’re developing, a hugh file will be a pain to work with. The solution is to merge all the scripts into one big file later, either in the build process or at run time.
if you use the same scripts for all pages in your app (or if you have a one page app), merging during the build process is a good solution but I needed different files for different pages.

Asp.Net AJAX 3.5
If you’re using Asp.Net AJAX 3.5, achieving this is very simple. The scripts from Microsoft will already be combined by default and to add your own scripts all you need to do is include your scripts using the ScriptManager.

<asp:ScriptManager runat="server" ID="ScriptManager1" >
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/JScript1.js" />
            <asp:ScriptReference Path="~/JScript2.js" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

Script Combiner - The Other Solution
If you don’t use Asp.Net AJAX and don’t want those scripts loaded (or you’re still using 2.0) you can create your own handler to combine scripts.
Here’s a project I foundby Omar Al Zabir (Who wrote the excellent book Building a Web 2.0 Portal with ASP.NET 3.5 and co-founded PageFlakes)
You might want to change the way you decide which scripts to load, I use an xml configuration file to specify the location of each script file and which js files should be loaded based on the page name that’s passed to the handler. (I use the page name as the key for now). I also have a separate path for the minified version and the debug version, and based on a config I use the right one

<ClientScripts>
   <Script name=”jquery” minPath=”Scripts/JQuery/jquery.1.2.6.min.js” debugPath=”Scripts/JQuery/jquery.1.2.6.js”/>
   <Script name=”jqvalidation” minPath=”Scripts/JQuery/plugins/jquery.validate.min.js” debugPath=”Scripts/JQuery/plugins/jquery.validate.js”/>
</ClientScripts>
<Pages>
   <Page name=”home” Scripts=”jquery,jqvalidation” />
</Pages>

There are several benefits when using this custom handler

  • You can use it for css files too
  • It compresses the js files using gzip
  • The files are only read from the file system once and are then cached on the server for subsequent requests
  • You can easily add versioning to the handler and set client side caching to never expire.

Tags: ,

AJAX | Asp.Net | Javascript

Javascript debugging with visual studio on vista hangs

by Ishai Hachlili 2. February 2008 10:02

Can it be that I'm the only one having this problem? that's what I though until I found another developer who already submitted a bug report to microsoft.

I'm debugging some javascript using Visual Studio 2008 Team System and all of a sudden the IDE hangs, as well as the browser and webserver.
There's no way to get out of it, all I get is a message that asks me if I want to switch back to VS or wait for it to be available, but it won't, no matter how long I wait (I did leave it over night once), so I have to kill the process, it's the only way.

The problem is, this happens in different situations and I can't see any connection other than it's javascript debugging.

This happened to me a couple of times with VSTS 05 on vista, but with 08 it happens a lot

 

if you're developing on XP, DON'T upgrade to vista, this problem might happen on XP as well (never did to me) but I know vista/vsts/ie7 don't like working together too much.

 and another small issue I have with javascript debugging. VS requires the option to enable debugging in IE7, this means that whenever there's a javascript error in a site I'm browsing to I will see the "do you wish to debug?" message. I didn't know so many sites have bugs, don't people test their sites? a lot of bugs have to do with blocked pop ups.
This is really annoying, and it won't be less annoying to change this option everytime I start/finish debugging something.

The real problem is when opening pages in new tabs, if you open more than one page, and both pages have an error, IE7 just hangs and I have to kill the process. and when you kill the process, the history is lost, so go find that site you were on.

Maybe IE8 will solve this problem, I know that it's coming soon (by MS timetable, that probably means 6-12 months) but a patch to VS would be nice, so it can enable/disable debugging in the browser it opens when I select "view in browser" or start the app

I did submit this feature request to MS

 

and now, back to debugging, I'm keeping my fingers crossed for a hang free session

Tags: , , , ,

Javascript

About Me

Ishai Hachlili is a web and mobile application developer.

Currently working on Play The Hunt and The Next Line


Recent Tweets

Twitter October 23, 05:22
@BenThePCGuy a standard where that doesn't matter is better. One more reason to get the #Lumia920, wireless charging, no need for microUSB

Twitter October 23, 05:21
@ManMadeMoon where they dance around the issues and don't really talk about them

Twitter October 23, 05:20
@BenThePCGuy are you a @wpdev ?

Twitter October 23, 04:17
@JonahLupton But if it's black it's usually better

Twitter October 23, 02:58
@jongalloway next time ask your 5 year old how to spell

@EShy