Kristoffer's tidbits

Calling WinRT functions from low level C++

Kristoffer Henriksson — Mon, 26 Mar 2012 21:19:00 GMT

The high level projection available in C++ targeting WinRT make working with WinRT from C++ a much easier task. It handles error reporting, reference counting, string conversions etc for you. As an example let's consider the following high level C++ code to retrieve the path of the temporary folder:

void GetTempFolderPathHighLevel(std::wstring& path)
{
path = Windows::Storage::ApplicationData::Current->TemporaryFolder->Path->Data();
}

Short, simple, and to the point. The equivalent low level code to get this is heinous:

#include <windows.storage.h>
#include <wrl/client.h>
#include <wrl/wrappers/corewrappers.h>

HRESULT GetTempFolderPath(std::wstring& path)
{
HRESULT hr;
Microsoft::WRL::ComPtr<ABI::Windows::Storage::IApplicationDataStatics> applicationDataStatics;

hr = Windows::Foundation::GetActivationFactory(Microsoft::WRL::Wrappers::HStringReference(RuntimeClass_Windows_Storage_ApplicationData).Get(), &applicationDataStatics);
if (FAILED(hr))
{
return hr;
}

Microsoft::WRL::ComPtr<ABI::Windows::Storage::IApplicationData> applicationData;
hr = applicationDataStatics->get_Current(&applicationData);
if (FAILED(hr))
{
return hr;
}

Microsoft::WRL::ComPtr<ABI::Windows::Storage::IStorageFolder> storageFolder;
hr = applicationData->get_TemporaryFolder(&storageFolder);
if (FAILED(hr))
{
return hr;
}

Microsoft::WRL::ComPtr<ABI::Windows::Storage::IStorageItem> storageItem;
hr = storageFolder.As(&storageItem);
if (FAILED(hr))
{
return hr;
}

HSTRING folderName;
hr = storageItem->get_Path(&folderName);
if (FAILED(hr))
{
return hr;
}

UINT32 length;
PCWSTR value = WindowsGetStringRawBuffer(folderName, &length);
path = value;
WindowsDeleteString(folderName);
return S_OK;
}

A concise history of the Bing Maps Windows 8 Map control.

Kristoffer Henriksson — Tue, 20 Mar 2012 21:05:00 GMT

The Windows 8 Bing map XAML control (as opposed to the javascript control which is an entirely different beast) has a slightly different API when compared to earlier Bing Map XAML controls. Previous XAML controls have all been written in managed code whereas the Windows 8 map control is written in native code. Written in mostly cross platform C++ it originally shipped inside the Bing iPhone app. It was later branched and shipped as an iPhone map control without functional parity with the script and XAML map controls. With some more work we shipped it as part of the Bing Android app and now as a separate control for Windows 8. The Windows 8 version has had adjustments to make it behave as a native Windows 8 XAML control allowing data binding, native XAML child elements and all the good stuff you would expect from a XAML control.

Since we do our own Direct3D rendering we can get better performance with polygons and polylines on our map by managing the vertices ourselves and just adjusting the camera per frame instead of pushing across new vertices. As a side effect of this MapPolygon and MapPolyline do not descend from UIElement and can't be placed just anywhere in the UI tree but instead need to be children of the separate Map.ShapeLayers property to differentiate them from XAML overlay controls. XAML children still go on the Children property like you would expect.

<bm:Map x:Name="map" Width="800" Height="600" Credentials="INSERT_YOUR_BING_MAPS_KEY">

<bm:Map.Children>
    <bm:Pushpin bm:MapLayer.PositionAnchor="11,11">
      <bm:MapLayer.Position>
        <bm:Location Latitude="0" Longitude="0" />
      </bm:MapLayer.Position>
    </bm:Pushpin>
</bm:Map.Children>

<bm:Map.ShapeLayers>
    <bm:MapShapeLayer>
      <bm:MapShapeLayer.Shapes>
        <bm:MapPolygon>
          <bm:MapPolygon.Locations>
            <bm:Location Latitude="-10" Longitude="-10" />
            <bm:Location Latitude="-10" Longitude="10" />
            <bm:Location Latitude="10" Longitude="10" />
            <bm:Location Latitude="10" Longitude="-10" />
          </bm:MapPolygon.Locations>
        </bm:MapPolygon>
      </bm:MapShapeLayer.Shapes>
    </bm:MapShapeLayer>
</bm:Map.ShapeLayers>
</bm:Map>

Side note: there's a XAML compiler bug in the consumer preview that prevents setting FillColor on MapPolygon but you can set it via code fine or wait until the final release where it can be set from XAML as well.

Side note 2: We're already hard at work creating the final version of the Map control with tons of tweaks and fixes. As an example Pushpin no longer requires setting PositionAnchor on it as it will default to the center of the pushpin.

Working with the Bing Maps Metro style map in XAML

Kristoffer Henriksson — Thu, 15 Mar 2012 17:31:29 GMT

Win 8 xaml unfortunately does not supporting anything similar to TypeConverters to convert from strings to objects so some properties like Location end up being more verbose and less intuitive than in previous versions of Bing Maps xaml-compatible controls like Silverlight and WPF. In Silverlight one could set the Center inline:

<bm:Map Center="0,0" />

On the Win8 metro version of the map this looks a bit different:

<bm:Map>
<bm:Map.Center>
<bm:Location Latitude="0" Longitude="0" />
</bm:Map.Center>
</bm:Map>

Other properties are similarly affected. The attached property MapLayer.Position for example:

<bm:Map>
<bm:Map.Children>
    <Button Width="100" Height="40" Content="Button" bm:MapLayer.PositionAnchor="50,40" Background="Black">
      <bm:MapLayer.Position>
        <bm:Location Latitude="0" Longitude="0" />
      </bm:MapLayer.Position>
    </Button>
</bm:Map.Children>
</bm:Map>

Note that MapLayer.PositionAnchor can be set inline since it is of type Point which is natively supported by the Xaml parser whereas it does not know how to convert from a string to a Location object so it needs a little help there.

Using Bing Maps in a Windows 8 Metro style app

Kristoffer Henriksson — Fri, 09 Mar 2012 17:46:00 GMT

The recently released Bing Maps controls for Windows 8 (available in the Visual Studio Gallery) actually contains two separate map controls to support the two types of Windows 8 applications. One is a port of our existing Javascript map control and is used to write html/javascript applications, the other is written in native C++ and is usable by any Xaml application whether it's using C#, VB.NET, or C++. We've helpfully included a template to make it easy to get started with the Xaml control. Once the Bing Maps SDK for Metro style apps is installed there will be a Bing Maps Application template available under the Visual C#.

It's also easy enough to use Bing Maps in an application from scratch. First add a Reference to Bing Maps for C#, C++, or Visual Basic (Beta) and Microsoft Visual C++ Runtime Package (if you're writing a managed app, C++ only needs Bing Maps).

If you try to build at this point you'll be presented with a most confusing set of error messages:

Could not find SDK "Microsoft.VCLibs, Version=11.0".
"APPX" attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no "APPX" attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.
The referenced component 'Microsoft Visual C++ Runtime Package' could not be found.

Don't be alarmed. This just means you're writing a managed application and have left the platform target at the default Any CPU and both Bing Maps and Visual C++ Runtime require a specific architecture to be set. Change the Active solution platform to x64 or x86 and then it will build properly. The Visual C++ Runtime package is required to deploy on computers that do not have Visual Studio installed. To use the Map control you can drag it from the Toolbox and drop it on your page or declare it yourself with the following two snippets:

xmlns:bm="using:Bing.Maps"

<bm:Map Width="800" Height="600" Credentials="INSERT_YOUR_BING_MAPS_KEY" />

You will need a Bing Maps Key to use the map but fortunately we have generous pre-release licensing terms that permit you to use it for free during the beta period. You can read more the licensing terms on the Bing Maps blog. For digging deeper we have also worked hard to make sure the documentation is helpful and up to date.

Shrinking .NET assemblies by removing unnecessary attributes

Kristoffer Henriksson — Wed, 28 Apr 2010 17:47:00 GMT

.NET assemblies contain a rich set of metadata for use by the run time, debugger, and compiler. This information is stored in the assembly whether it will be used or not which for certain types of shipping assemblies is unnecessary. For example when you create a new automatic property:

public int MyProperty { get; set; }

The compiler generates the following disassembled code:

.field private int32 '<MyProperty>k__BackingField'

.method public hidebysig specialname instance int32

get_MyProperty() cil managed

{

.custom instance void [mscorlib]System.Runtime.CompilerServices.CompilerGeneratedAttribute::.ctor() = ( 01 00 00 00 )

// Code size 11 (0xb)

.maxstack 1

.locals init (int32 V_0)

IL_0000: ldarg.0

IL_0001: ldfld int32 ConsoleApplication1.Test::'<MyProperty>k__BackingField'

IL_0006: stloc.0

IL_0007: br.s IL_0009

IL_0009: ldloc.0

IL_000a: ret

} // end of method Program::get_MyProperty

.method private hidebysig specialname instance void

set_MyProperty(int32 'value') cil managed

{

.custom instance void [mscorlib]System.Runtime.CompilerServices.CompilerGeneratedAttribute::.ctor() = ( 01 00 00 00 )

// Code size 8 (0x8)

.maxstack 8

IL_0000: ldarg.0

IL_0001: ldarg.1

IL_0002: stfld int32 ConsoleApplication1.Test'<MyProperty>k__BackingField'

IL_0007: ret

} // end of method Program::set_MyProperty

Note the extra CompilerGeneratedAttribute that the compiler inserts to note that this code was generated by the compiler. This attribute is used by the debugger to step over code but when you’re done debugging and ready to ship it adds little value.

Thanks to the Common Compiler Infrastructure Metadata Components we can easily create a tool to remove attributes from an assembly. Using MetadataMutor we override Visit(List<ICustomAttribute>) and return a modified list of attributes by removing all attributes of a certain type:

public class AttributeMutator : MetadataMutator

{

private Dictionary<string, string> attributesToRemove;

public AttributeMutator(IMetadataHost host, IEnumerable<string> attributesToRemove)

: base(host)

{

this.attributesToRemove = new Dictionary<string, string>();

foreach (string attribute in attributesToRemove)

{

this.attributesToRemove.Add(attribute.ToUpperInvariant(), attribute);

}

public override List<ICustomAttribute> Visit(List<ICustomAttribute> customAttributes)

{

List<ICustomAttribute> result = new List<ICustomAttribute>(customAttributes);

for (int i = result.Count - 1; i >= 0; i--)

{

if (this.attributesToRemove.ContainsKey(result[i].Type.ToString().ToUpperInvariant()))

{

result.RemoveAt(i);

}

return base.Visit(result);

}

The rest of the code to read and write assemblies can be copied from the CCI samples.

Download the Visual Studio 2010 project

To use this program run:

StripAttributes.exe C:\Input\MyAssembly.dll C:\Output @attributes.txt

where attributes.txt is a list of attributes, one per line, to be removed from the assembly. The resulting file is written to C:\Output. Since the assembly is rewritten it will need to be resigned with sn.exe before shipping.

The cost savings per assembly will vary depending on your attribute usage and how the PE pages line up. Sometimes no savings can be achieved even if attributes are removed because the assembly is written in 512 byte chunks.

For desktop CLR assemblies disk size is relatively unimportant but when the end user has to download your code (Silverlight for example) every byte matters.

Streetside photos is live!

Kristoffer Henriksson — Fri, 12 Feb 2010 00:11:00 GMT

Bing Maps just shipped a tech preview of Streetside photos which overlays Flickr photos on Streetside to show where the photos were taken. The team worked hard to get it out the door and we're proud to share it with the rest of the world. Check it out on Bing Maps.

Streetside smoove

Kristoffer Henriksson — Wed, 20 Jan 2010 22:41:00 GMT

Bing Maps Streetside just released a minor update that allows you to smoothly glide through streets like a first-person shooter or pacman. Try it out yourself, just hold down the Up key and turn with Left and Right. Faster connections give a more pleasant experience.

It's 10 pm, do you know what your JITter is doing?

Kristoffer Henriksson — Fri, 13 Nov 2009 21:52:00 GMT

Ever have that awkward feeling like you don't know what actually gets executed as a result of your managed code? Visual Studio allows you to inspect the JITted code easily but does require a few tweaks first:

First set your project to build in Release mode.
Next go to Tools|Options|Debugging and uncheck both Suppress JIT optimization on module load (Managed only) and Enable Just My Code (Managed only)

Now you can run your project and set a breakpoint where you want to look at code and go to Debug | Windows | Disassembly to get an annotated disassembly like the following:

    static void Main(string[] args)
    {
        DoTest();
00000000 push ebp 
00000001 mov ebp,esp 
00000003 push esi 
00000004 call dword ptr ds:[00159B7Ch] 
        Console.WriteLine(s);
0000000a mov esi,dword ptr ds:[037D5B20h] 
00000010 call 6B20BE78 
00000015 mov ecx,eax 
00000017 mov edx,esi 
00000019 mov eax,dword ptr [ecx] 
0000001b call dword ptr [eax+000000D8h] 
00000021 pop esi 
    }
00000022 pop ebp 
00000023 ret  

OutOfMemoryException is special

Kristoffer Henriksson — Wed, 25 Feb 2009 20:25:00 GMT

Consider the humble OutOfMemoryException and its most common usage. If it is thrown when the system is well and truly out of memory then how would the system allocate enough memory to create a new instance of OutOfMemoryException? Luckily this problem has a simple solution: OutOfMemoryException is allocated up front so it's available when it needs to be thrown.

The .NET runtime does first try to create a new OutOfMemoryException instance but if it fails it will fall back to the preallocated instance so there is always an exception available to be thrown.

Some other exceptions are preallocated: StackOverflowException, ExecutionEngineException, and ThreadAbortException.

Troubleshooting a failed Virtual Earth 3D installation

Kristoffer Henriksson — Fri, 16 May 2008 22:54:00 GMT

The Virtual Earth 3D setup program is a small executable that downloads and installs pre-requisites if they're not already installed and then the correct MSI for your OS flavor (32 or 64 bit). The pre-requisites are Windows Imaging Components and .NET Framework 2.0. WIC comes with Vista and XP sp3 and doesn't need to be downloaded on those platforms. The setup program logs its status to a file named VirtualEarth3DInstallLog.txt in the Temp folder. On a default Windows XP installation the Temp folder is located at C:\Documents and Settings\[username]\Local Settings\Temp.

After the pre-requisites have been validated VirtualEarth3D.msi or VirtualEarth3D64.msi are downloaded and installed. The 64 bit MSI contains both 32 and 64 bit modules so you can run internet explorer in 32 or 64 bit mode. The MSI log is stored in MsiInstall.log, also in the Temp folder.

So what errors go to what log?

If the error happens in the Setup program, for example a failure to download a prerequisite or the MSI, VirtualEarth3DInstallLog.txt will have an error message with the details.
If the error happens once Setup starts running the Virtual Earth 3D MSI MsiInstall.log will contain the details.

If you still have problems installing Virtual Earth 3D, Live Maps support is only a click away.

How does Virtual Earth 3D find and load plugins?

Kristoffer Henriksson — Fri, 07 Dec 2007 21:45:00 GMT

On startup VE3D looks in the Plugins folder of the install directory (ProgramFiles\Virtual Earth 3D) and iterates through the assemblies in each subfolder of Plugins. A plugin named Sample would install itself as C:\Program Files\Virtual Earth 3D\Plugins\Sample\Sample.dll. Note that this folder doesn't exist by default so your plugin installer will need to create it.

Next each assembly is probed for classes that descend from Microsoft.MapPoint.PlugIns.PlugIn. For security reasons only assemblies that are in the GAC are allowed to run. The good news is that we are investigating allowing partially trusted plugins for our next release. This means you will be able to visit a website and have it load its own plugins to add new functionality to VE3D without forcing you to go through an install process. Since we're still in the early parts of our next release I don't know for sure if this will make the cut but it is something we would like to add.

Using a plugin to add a billboard to Virtual Earth 3D

Kristoffer Henriksson — Wed, 14 Nov 2007 23:10:00 GMT

To add objects to the VE3D world we need to create our own actor that knows how to render itself.

Actors descend from Microsoft.MapPoint.Rendering3D.Steps.Actors.Actor and must override the Render method. When it comes time to render a frame, all actors have their Render method called to queue up renderable objects. To show a billboard we'll create a BillboardActor and use a SpriteGraphicsObject to render our image.

        public BillboardActor(LatLonAlt position)
        {
            this.texture = Texture.FromResource(this.GetType().Assembly, "VirtualEarth3DSamplePlugins.Billboard.Flower.png");
 
            this.billboard = new SpriteGraphicsObject();
            this.billboard.Texture = this.texture;
            this.billboard.Mode = SpriteMode.Billboard;
            this.billboard.Scale = new Vector2D(1000, 1000);
            this.billboard.Color = Color.White;
            this.billboard.AlphaEnable = true;
            this.billboard.Position = position.GetVector();
        }

 
        public override void Render(Microsoft.MapPoint.Rendering3D.Scene.SceneState sceneState)
        {
            RenderQueues renderQueues = sceneState.GetData<RenderQueues>();
 
            renderQueues.AddAlphaRenderable(0, this.billboard);
        }

Once we have our actor we just need to add it to the ActorManager so it knows to start rendering it. We can do this in our Activate method on the plugin.

            LatLonAlt position = LatLonAlt.CreateUsingDegrees(46.849743288383046, -121.7498016357422, 5000);
            // Add the actor at the specified position
            this.Host.Actors.Add(new BillboardActor(position));

You can browse the source code for the actor and the plugin online or download the entire project.
BillboardActor.cs | BillboardPlugin.cs
Download project

Creating a Hello World plugin for Virtual Earth 3D

Kristoffer Henriksson — Tue, 13 Nov 2007 20:33:00 GMT

With latest release of the Virtual Earth 3D release we now support loading plugins to perform additional functionality not implemented in the main product. Two new features of the release are even implemented as plugins (bird's eye photos and user created models).

To get you started with creating your own plugin for VE3D here's a short starter guide using Visual Studio 2005.

Create a new C# Class Library project, call it HelloWorld.
Add references to the following assemblies located in C:\Program Files\Virtual Earth 3D:
- Microsoft.MapPoint.Rendering3D.dll
- Microsoft.MapPoint.Rendering3D.Utility.dll
Rename Class1.cs to HelloWorldPlugin.cs and paste the following code over the file:

using System;

using System.Collections.Generic;

using System.Text;

using Microsoft.MapPoint.PlugIns;

using Microsoft.MapPoint.Rendering3D;

namespace VirtualEarth3DSamplePlugins.HelloWorld

{

    public class HelloWorldPlugin : PlugIn

    {

        #region Constructor

        public HelloWorldPlugin(Host host)

            : base(host)

        {

        }

        #endregion

        #region Overrides

        public override void Activate(object activationObject)

        {

            this.Host.Notifications.Display("Hello world!");

            base.Activate(activationObject);

        }

        public override string Name

        {

            get

            {

                return "HelloWorldPlugin";

            }

        }

        #endregion

    }

}
Go to Project Properties, Signing, check Sign the assembly and create a new key to sign your project with. Only plugins that are in the GAC will be granted permissions to run and only strongly named assemblies may be placed in the GAC.
Build your project and copy HelloWorld.dll to a new folder named C:\Program Files\Virtual Earth 3D\Plugins\HelloWorld. From a Visual Studio 2005 Command Prompt run
gacutil -i "C:\Program Files\Virtual Earth 3D\Plugins\HelloWorld\HelloWorld.dll"

Now start up 3D mode on maps.live.com and you should see a notification upon startup from the hello world plugin.

That's it for creating a simple plugin. If you want to explore further on your own the Host object contains all the interfaces for a plugin to communicate with VE3D.

Mandatory disclaimer so I don't get into trouble: creating plugins is not officially supported.

Is your e-mail going unanswered?

Kristoffer Henriksson — Fri, 29 Jun 2007 21:00:00 GMT

As a general rule the chance of your e-mail getting a response is inversely proportional to the number of people on the To and Cc lines.

Let's take an example:

You e-mail Bob a question. Bob now feels directly responsible for your question and promptly replies.

You e-mail Bob, Anna, and Frank a question and put them all on the To line. Now Bob, Anna, and Frank are only one third responsible each for replying and all three ignore your e-mail hoping one of the other two will respond.

Psychologists call this "diffusion of responsibility".

Virtual Earth update

Kristoffer Henriksson — Wed, 04 Apr 2007 04:47:00 GMT

Virtual Earth released a new version this afternoon; read about the new features on the Virtual Earth blog.

Visual Studio Tip: Examining long strings while debugging

Kristoffer Henriksson — Tue, 03 Apr 2007 19:53:23 GMT

Long strings can be a pain to examine in Visual Studio while you're debugging but in .NET projects you can easily write these to a file on the fly. If for example we want to examine the contents of string s, open up the Immediate Window (Ctrl+I) and type

System.IO.File.WriteAllText("C:\\Debug.txt", s);

Then open up C:\Debug.txt to see the entire string.

Navigate large solutions in Visual Studio quicker

Kristoffer Henriksson — Fri, 23 Mar 2007 19:25:57 GMT

The one Visual Studio tip that everyone should know is how to quickly open a file in a large solution without having to remember which folder or project it's in.

Press Ctrl+Alt+A to open up the Command Window, then type open and the first few letters of the filename and you'll get a dropdown of all matching files in the current solution. Press Enter to open the selected file.

Javascript prototype versus closure execution speed

Kristoffer Henriksson — Tue, 13 Feb 2007 19:49:12 GMT

When Javascript execution speed matters consider using prototype instead of closures where possible. Even for a small closure the difference can be noticable when called hundreds of times. Consider the following example that implements a Pixel object with some ancillary functions in both the closure and prototype patterns:

// Closure implementation
function Pixel(x, y)
{
  this.x = x;
  this.y = y;
  this.getX = function()
  {
    return this.x;
  }
  this.getY = function()
  {
    return this.y;
  }
  this.setX = function(value)
  {
    this.x = value;
  }
  this.setY = function(value)
  {
    this.y = value;
  }
}
 
// Prototype implementation
function PixelP(x, y)
{
  this.x = x; 
  this.y = y;
}
PixelP.prototype.getX = function()
{
  return this.x;
}
PixelP.prototype.getY = function()
{
  return this.y;
}
PixelP.prototype.setX = function(value)
{
  this.x = value;
}
PixelP.prototype.setY = function(value)
{
  this.y = value;
}
 
 
function TestPerformance()
{
  var closureStartDateTime = new Date();
  for (var i = 0; i < 20000; i++)
  {
    var x = new Pixel(i, i);    
  }
  var closureEndDateTime = new Date();
 
  var prototypeStartDateTime = new Date();
  for (var i = 0; i < 20000; i++)
  {
    var x = new PixelP(i, i);    
  }
  var prototypeEndDateTime = new Date();
  var closureTime = closureEndDateTime.getTime() - closureStartDateTime.getTime();
  var prototypeTime = prototypeEndDateTime.getTime() - prototypeStartDateTime.getTime();
  alert("Closure time: " + closureTime + ", prototype time: " + prototypeTime);
}

When this is run in IE7 on my machine, the closure implementation takes around 450ms and prototype takes around 140ms. Add two more empty functions and the closure time increases to 560ms and prototype to 155ms.

On Firefox 1.5.0.9 the difference is in the listed example is even larger with the closure taking 515ms and prototype still around 140ms.

For small applications that don't construct hundreds or thousands of the same type of object the execution speed difference between closure and prototype probably doesn't matter so as with all performance advice measure, measure, measure.

Debugging memory usage in managed code using Windbg

Kristoffer Henriksson — Tue, 09 Jan 2007 20:08:00 GMT

Windbg, is there anything it can't do?

CLR Profiler is great for getting an overview of memory allocations and usage for managed applications but it doesn't work for very large applications and can't be attached after the application has been running for a while to determine why after 12 hours memory use spikes. Windbg can be an acceptable alternative when you find yourself looking at an unexpected memory spike and you're curious where all that memory is being allocated.

Start Windbg, attach to the process, and load the sos dll (see previous post).

We start out by getting a summary of our memory allocations with !dumpheap

0:004> !dumpheap -stat total 8952 objects Statistics:
       MT    Count    TotalSize Class Name 
7b4779b8        1           12 System.Windows.Forms.OSFeature 
7b475ca8        1           12 System.Windows.Forms.FormCollection 
7b474f8c        1           12 System.Windows.Forms.Layout.DefaultLayout 
7b4749e0        1           12 System.Windows.Forms.ClientUtils+WeakRefCollection 
79128f18        1           12 System.Collections.Generic.GenericEqualityComparer`1[[System.Int16, mscorlib]] 
79128b94        1           12 System.Collections.Generic.ObjectEqualityComparer`1[[System.IntPtr, mscorlib]] 
79127ae4        1           12 System.Collections.Generic.ObjectEqualityComparer`1[[System.Object, mscorlib]] 
79114408        1           12 System.Security.Permissions.ReflectionPermission 
791142e8        1           12 System.Security.Permissions.FileDialogPermission 
----------------- snip ---------------------- 
790fd4ec       82         1968 System.Version 
7ae76b24      208         2496 System.Drawing.KnownColor 
791242ec       20         2952 System.Collections.Hashtable+bucket[] 
79114bf0      181         5068 System.Security.SecurityElement 
791036b0      229         5496 System.Collections.ArrayList 
00155a48       50        23424      Free 
79124228      306        47780 System.Object[] 
790fa3e0     6662       379600 System.String 
79124418        9      3156304 System.Byte[] Total 8952 objects

We've got about 3 megs worth of System.Byte[] allocated so let's focus in on this to see why these objects exist.

0:004> !dumpheap -type System.Byte[] 
 Address       MT     Size 
01241e5c 79124418       12      
0124aaf4 79124418       28      
0124ab48 79124418      140      
01251178 79124418      172      
0125129c 79124418       28      
01254f7c 79124418    10148      
02246da8 79124418  1048592      
02346db8 79124418  1048592      
02446dc8 79124418  1048592      
total 9 objects 
Statistics:       MT    Count    TotalSize Class Name 
79124418        9      3156304 System.Byte[] 
Total 9 objects

A few small Byte arrays but 3 of them are a meg each so let's find out why the first object is still alive (or if it is alive at all, a GC might not have happened to collect it yet).

0:004> !gcroot 02246da8 
Note: Roots found on stacks may be false positives. Run "!help gcroot" for more info. 
ebx:Root:012525d8(System.Windows.Forms.Application+ThreadContext)-> 
01251d58(WindbgDemo.Form1)-> 
01251edc(System.Collections.ArrayList)-> 
0125c278(System.Object[])-> 
02246da8(System.Byte[]) 
Scan Thread 0 OSTHread 1194 
Scan Thread 2 OSTHread 1720

The application has a reference to Form1 which has a reference to an ArrayList which has a reference to my Byte array. If a GC were to happen right now this object would be kept alive.

Instead of checking each Byte array by address individually we can use the .foreach token.

0:004> .foreach (obj {!dumpheap -type System.Byte[] -short}) {.echo obj;!gcroot obj} 
01241e5c 
Note: Roots found on stacks may be false positives. Run "!help gcroot" for more info. 
Scan Thread 0 OSTHread 1194 
Scan Thread 2 OSTHread 1720 
DOMAIN(00149768):HANDLE(Pinned):3e13fc:Root:02241010(System.Object[])-> 
01241e5c(System.Byte[]) 
0124aaf4 
Note: Roots found on stacks may be false positives. Run "!help gcroot" for more info. 
Scan Thread 0 OSTHread 1194 
Scan Thread 2 OSTHread 1720 
DOMAIN(00149768):HANDLE(Pinned):3e13fc:Root:02241010(System.Object[])-> 
0124a1c4(System.Environment+ResourceHelper)-> 
0124a358(System.Resources.ResourceManager)-> 
0124a3a0(System.Collections.Hashtable)-> 
0124a3d8(System.Collections.Hashtable+bucket[])-> 
0124a9f8(System.Resources.RuntimeResourceSet)-> 
0124aa5c(System.Resources.ResourceReader)-> 
0124aaac(System.IO.BinaryReader)-> 
0124aaf4(System.Byte[]) 
0124ab48 
Note: Roots found on stacks may be false positives. Run "!help gcroot" for more info. 
Scan Thread 0 OSTHread 1194 
Scan Thread 2 OSTHread 1720 
DOMAIN(00149768):HANDLE(Pinned):3e13fc:Root:02241010(System.Object[])-> 
0124a1c4(System.Environment+ResourceHelper)-> 
0124a358(System.Resources.ResourceManager)-> 
0124a3a0(System.Collections.Hashtable)-> 
0124a3d8(System.Collections.Hashtable+bucket[])-> 
0124a9f8(System.Resources.RuntimeResourceSet)-> 
0124aa5c(System.Resources.ResourceReader)-> 
0124aaac(System.IO.BinaryReader)-> 
0124ab48(System.Byte[]) 
--------------- remainder of output snipped --------------

By using the /ps parameter to .foreach (see Windbg help file for details) you can run gcroot on every nth item to get a sample of objects.

Debugging lock issues in managed code using Windbg

Kristoffer Henriksson — Fri, 05 Jan 2007 19:35:00 GMT

Windbg can be helpful for locking lock issues in managed code that seem to only happen on client machines when the moon is full and the stars are aligned just right. Windbg is a minimal installation and with managed code doesn't require debug symbols to still be useful.

For my test scenario I have an application that hangs for 10 seconds at a time once a button is pressed so I start up windbg and break during the hang so I can inspect what's going on. First we check to see what the managed threads are currently running what:

0:000> ~*e!clrstack 
OS Thread Id: 0x123c (0) 
ESP       EIP      
0012eec8 7c82ed54 [GCFrame: 0012eec8]  0012ef98 7c82ed54 [HelperMethodFrame_1OBJ: 0012ef98] 
System.Threading.Monitor.Enter(System.Object) 
0012eff0 00cc0381 TestApp.Form1.button1_Click(System.Object, System.EventArgs) 
0012f02c 7b060a6b System.Windows.Forms.Control.OnClick(System.EventArgs) 
0012f03c 7b105379 System.Windows.Forms.Button.OnClick(System.EventArgs) 
0012f048 7b10547f System.Windows.Forms.Button.OnMouseUp(System.Windows.Forms.MouseEventArgs) 
0012f06c 7b0d02d2 System.Windows.Forms.Control.WmMouseUp(System.Windows.Forms.Message ByRef, System.Windows.Forms.MouseButtons, Int32) 
0012f0b8 7b072c74 System.Windows.Forms.Control.WndProc(System.Windows.Forms.Message ByRef) 
0012f0bc 7b0815a6 [InlinedCallFrame: 0012f0bc]  0012f158 7b0814c3 System.Windows.Forms.Button.WndProc(System.Windows.Forms.Message ByRef) 
0012f160 7b07a72d System.Windows.Forms.Control+ControlNativeWindow.OnMessage(System.Windows.Forms.Message ByRef) 
0012f164 7b07a706 System.Windows.Forms.Control+ControlNativeWindow.WndProc(System.Windows.Forms.Message ByRef) 
0012f178 7b07a515 System.Windows.Forms.NativeWindow.Callback(IntPtr, Int32, IntPtr, IntPtr) 
0012f324 0033216c [NDirectMethodFrameStandalone: 0012f324] System.Windows.Forms.UnsafeNativeMethods.DispatchMessageW(MSG ByRef) 
0012f334 7b084766 System.Windows.Forms.Application+ComponentManager.System.Windows.Forms.UnsafeNativeMethods.IMsoComponentManager.FPushMessageLoop(Int32, Int32, Int32) 
0012f3d4 7b08432d System.Windows.Forms.Application+ThreadContext.RunMessageLoopInner(Int32, System.Windows.Forms.ApplicationContext) 
0012f440 7b08416b System.Windows.Forms.Application+ThreadContext.RunMessageLoop(Int32, System.Windows.Forms.ApplicationContext) 
0012f470 7b0c69fe System.Windows.Forms.Application.Run(System.Windows.Forms.Form) 
0012f480 00cc00a8 TestApp.Program.Main() 
0012f69c 79e88f63 [GCFrame: 0012f69c]  
OS Thread Id: 0x1408 (1) 
Unable to walk the managed stack. The current thread is likely not a  
managed thread. You can run !threads to get a list of managed threads in 
the process 
OS Thread Id: 0xb30 (2) 
Failed to start stack walk: 80004005 
OS Thread Id: 0x161c (3) 
Unable to walk the managed stack. The current thread is likely not a  
managed thread. You can run !threads to get a list of managed threads in 
the process 
OS Thread Id: 0x149c (4) 
ESP       EIP      
011ef82c 7c82ed54 [HelperMethodFrame: 011ef82c] System.Threading.Thread.SleepInternal(Int32) 
011ef880 793d80f5 System.Threading.Thread.Sleep(Int32) 
011ef884 00cc042d TestApp.Form1.ThreadProc() 
011ef8b4 793d7a7b System.Threading.ThreadHelper.ThreadStart_Context(System.Object) 
011ef8bc 793683dd System.Threading.ExecutionContext.Run(System.Threading.ExecutionContext, System.Threading.ContextCallback, System.Object) 
011ef8d4 793d7b5c System.Threading.ThreadHelper.ThreadStart() 
011efaf8 79e88f63 [GCFrame: 011efaf8]  
OS Thread Id: 0x7e0 (5) 
Unable to walk the managed stack. The current thread is likely not a  
managed thread. You can run !threads to get a list of managed threads in 
the process 
OS Thread Id: 0xf94 (6) 
Unable to walk the managed stack. The current thread is likely not a 
managed thread. You can run !threads to get a list of managed threads in 
the process 
OS Thread Id: 0x5e4 (7) 
Unable to walk the managed stack. The current thread is likely not a 
managed thread. You can run !threads to get a list of managed threads in 
the process

So we've got two managed threads: 0 (the message pumping thread) and 4. Thread 0 is currently in a call to System.Threading.Monitor.Enter which the lock statement wraps. Let's see what locks are held by the application.

0:000> !syncblk 
Index SyncBlock MonitorHeld Recursion Owning Thread Info  SyncBlock Owner    
11 001b415c            3         1 001be180  149c   4   012cfdfc TestApp.Form1 
----------------------------- 
Total           11 
CCW             0 
RCW             0 
ComClassFactory 0 
Free            0

So thread 4 (which is currently sleeping) holds a lock on the object at address 012cfdfc. Let's see what type of object this is:

0:000> !DumpObj -nofields 012cfdfc 
Name: TestApp.Form1 
MethodTable: 008f5ac4 
EEClass: 008f165c 
Size: 332(0x14c) bytes 
 (C:\Testing\WindowsApplication17\WindowsApplication17\bin\Debug\WindowsApplication17.exe)

Thread 4 has a lock on the Form. Looking at the stack objects for thread 0 we can see the Form object right before a synchronization context.

0:000> !dso 
OS Thread Id: 0x123c (0) 
ESP/REG  Object   Name 
0012edd0 012d05f4 System.Windows.Forms.WindowsFormsSynchronizationContext 
0012ef00 012cfdfc TestApp.Form1 
0012ef54 012f9f1c System.Threading.ThreadStart 
0012ef58 012f9f3c System.Threading.Thread 
0012ef64 012f9f1c System.Threading.ThreadStart 
0012ef6c 012f9f3c System.Threading.Thread 
0012efac 012cff60 Microsoft.Win32.SafeHandles.SafeWaitHandle 
0012efd4 012cfdfc TestApp.Form1 
0012eff0 012cfdfc TestApp.Form1 
0012eff4 012f9f3c System.Threading.Thread 
0012eff8 012cfdfc TestApp.Form1 
0012effc 012ea688 System.Windows.Forms.Button 
-------------- snip -----------------------
 0012f46c 012ec1e0 System.Windows.Forms.ApplicationContext 
0012f474 012cfdfc TestApp.Form1

We can confirm this by looking at the IL code for TestApp.Form1.button1_Click.

0:000> !dumpmt -md 008f5ac4 
EEClass: 008f165c 
Module: 008f2d5c 
Name: TestApp.Form1 
mdToken: 02000003 
 (C:\Testing\WindowsApplication17\WindowsApplication17\bin\Debug\WindowsApplication17.exe)
BaseSize: 0x14c 
ComponentSize: 0x0 
Number of IFaces in IFaceMap: 15 
Slots in VTable: 376 
-------------------------------------- 
MethodDesc Table 
   Entry MethodDesc      JIT Name 
7b05c298   7b4a5518   PreJIT System.Windows.Forms.Form.ToString() 
793539c0   7913bd50   PreJIT System.Object.Equals(System.Object) 
793539b0   7913bd68   PreJIT System.Object.GetHashCode() 
7a4a6510   7a75bf58   PreJIT System.ComponentModel.Component.Finalize() 
79361e50   7913dbd8   PreJIT System.MarshalByRefObject.GetLifetimeService() 
7b0662a4   7b4a5530   PreJIT System.Windows.Forms.Form.OnResizeEnd(System.EventArgs) 
------------------ snip -----------------
008f61d4   008f5a68      JIT TestApp.Form1.InitializeComponent() 
008f61b0   008f5a70      JIT TestApp.Form1..ctor() 
008f6cfc   008f5a78      JIT TestApp.Form1.ThreadProc() 
008f6a54   008f5a80      JIT TestApp.Form1.button1_Click(System.Object, System.EventArgs) 
0:000> !dumpil 008f5a80 
ilAddr = 00402274 
IL_0000: nop 
IL_0001: ldarg.0 
IL_0002: ldftn TestApp.Form1::ThreadProc
IL_0008: newobj System.Threading.ThreadStart::.ctor 
IL_000d: newobj System.Threading.Thread::.ctor 
IL_0012: stloc.0 
IL_0013: ldloc.0 
IL_0014: callvirt System.Threading.Thread::Start 
IL_0019: nop 
IL_001a: ldarg.0 
IL_001b: ldfld TestApp.Form1::threadStarted
IL_0020: callvirt System.Threading.WaitHandle::WaitOne 
IL_0025: pop 
IL_0026: ldarg.0 
IL_0027: dup 
IL_0028: stloc.1 
IL_0029: call System.Threading.Monitor::Enter 
IL_002e: nop 
.try
{
  IL_002f: nop 
  IL_0030: nop 
  IL_0031: leave.s IL_003b
} // end .try
.finally
{
  IL_0033: ldloc.1 
  IL_0034: call System.Threading.Monitor::Exit 
  IL_0039: nop 
  IL_003a: endfinally 
} // end .finally
IL_003b: nop 
IL_003c: ldloc.0 
IL_003d: callvirt System.Threading.Thread::Join 
IL_0042: nop 
IL_0043: ret 

Sure enough Form1 is passing itself to System.Threading.Monitor.Enter.

Debugging exceptions in managed code using Windbg

Kristoffer Henriksson — Wed, 03 Jan 2007 19:04:27 GMT

By default Windbg will break for access violations (or null reference exceptions as they're called in managed code). To get Windbg to break for managed exceptions use the sxe command.

0:004> sxe clr
0:004> g

A little while later our program generates a CLR exception and pops into the debugger.

(17c.1194): CLR exception - code e0434f4d (first chance)
First chance exceptions are reported before any exception handling.
This exception may be expected and handled.
eax=0012eea0 ebx=0014d578 ecx=00000000 edx=00000025 esi=0012ef2c edi=e0434f4d
eip=77e55e02 esp=0012ee9c ebp=0012eef0 iopl=0         nv up ei pl nz na po nc
cs=001b  ss=0023  ds=0023  es=0023  fs=003b  gs=0000             efl=00000202
KERNEL32!RaiseException+0x53:
77e55e02 5e              pop     esi

This is a first chance exception so this may be expected and handled, as the message helpfully reminds you. Let's find out what caused this exception.

0:000> !PrintException
Exception object: 01289fb0
Exception type: System.ArgumentException
Message: Value does not fall within the expected range.
InnerException: <none>
StackTrace (generated):
<none>
StackTraceString: <none>
HResult: 80070057

We can also have a look at the managed stack trace to see where this exception happened.

0:000> !CLRStack
OS Thread Id: 0x1194 (0)
ESP       EIP      
0012ef78 77e55e02 [HelperMethodFrame: 0012ef78]
0012f01c 00cc0795 WindbgDemo.Form1.CauseOtherException()
0012f024 00cc075d WindbgDemo.Form1.btnOtherException_Click(System.Object, System.EventArgs)
0012f02c 7b060a6b System.Windows.Forms.Control.OnClick(System.EventArgs)
0012f03c 7b105379 System.Windows.Forms.Button.OnClick(System.EventArgs) 
0012f048 7b10547f System.Windows.Forms.Button.OnMouseUp(System.Windows.Forms.MouseEventArgs)
0012f06c 7b0d02d2 System.Windows.Forms.Control.WmMouseUp(System.Windows.Forms.Message ByRef, System.Windows.Forms.MouseButtons, Int32)
0012f0b8 7b072c74 System.Windows.Forms.Control.WndProc(System.Windows.Forms.Message ByRef)
0012f0bc 7b0815a6 [InlinedCallFrame: 0012f0bc] 
0012f158 7b0814c3 System.Windows.Forms.Button.WndProc(System.Windows.Forms.Message ByRef)
0012f160 7b07a72d System.Windows.Forms.Control+ControlNativeWindow.OnMessage(System.Windows.Forms.Message ByRef)
0012f164 7b07a706 System.Windows.Forms.Control+ControlNativeWindow.WndProc(System.Windows.Forms.Message ByRef)
0012f178 7b07a515 System.Windows.Forms.NativeWindow.Callback(IntPtr, Int32, IntPtr, IntPtr)
0012f324 0033216c [NDirectMethodFrameStandalone: 0012f324] System.Windows.Forms.UnsafeNativeMethods.DispatchMessageW(MSG ByRef)
0012f334 7b084766 System.Windows.Forms.Application+ComponentManager.System.Windows.Forms.UnsafeNativeMethods.IMsoComponentManager.FPushMessageLoop(Int32, Int32, Int32)
0012f3d4 7b08432d System.Windows.Forms.Application+ThreadContext.RunMessageLoopInner(Int32, System.Windows.Forms.ApplicationContext)
0012f440 7b08416b System.Windows.Forms.Application+ThreadContext.RunMessageLoop(Int32, System.Windows.Forms.ApplicationContext)
0012f470 7b0c69fe System.Windows.Forms.Application.Run(System.Windows.Forms.Form)
0012f480 00cc0097 WindbgDemo.Program.Main()
0012f69c 79e88f63 [GCFrame: 0012f69c]

If we want to get a feel for what sorts of exceptions are generated by our program but not necessarily inspect each one we can tell Windbg to stop on exceptions, print out some information about the exception, and then continue running all without user intervention.

0:000> sxe -c "!pe;!clrstack;gc" clr

Setting a breakpoint in managed code using Windbg

Kristoffer Henriksson — Tue, 02 Jan 2007 19:49:06 GMT

One of the great features of managed code is getting call stacks and proper class and member function names without debug symbols. We can examine the methods of a class and set breakpoints based on name.

To see the methods on an object in Windbg we first need to find its method table. We can do this with the !name2ee command which will look up information about a class.

0:004> !Name2EE *!WindbgDemo.Form1
Module: 790c2000 (mscorlib.dll)
--------------------------------------
Module: 00912380 sortkey.nlp)
--------------------------------------
Module: 00912010 (sorttbls.nlp)
--------------------------------------
Module: 008f2d5c (WindbgDemo.exe)
Token: 0x02000004
MethodTable: 008f5b5c
EEClass: 008f15dc
Name: WindbgDemo.Form1
--------------------------------------
Module: 7b442000 (System.Windows.Forms.dll)
--------------------------------------
Module: 7a714000 (System.dll)
--------------------------------------
Module: 7ae72000 (System.Drawing.dll)

With the method table address we can examine all the methods defined on the object.

0:004> !DumpMT -MD 008f5b5c
EEClass: 008f15dc
Module: 008f2d5c
Name: WindbgDemo.Form1
mdToken: 02000004  (C:\Testing\WindbgDemo\WindbgDemo\bin\Release\WindbgDemo.exe)
BaseSize: 0x16c
ComponentSize: 0x0
Number of IFaces in IFaceMap: 15
Slots in VTable: 383
--------------------------------------
MethodDesc Table
   Entry MethodDesc      JIT Name
7b05c298   7b4a5518   PreJIT System.Windows.Forms.Form.ToString()
793539c0   7913bd50   PreJIT System.Object.Equals(System.Object)
793539b0   7913bd68   PreJIT System.Object.GetHashCode()
7a4a6510   7a75bf58   PreJIT System.ComponentModel.Component.Finalize()
79361e50   7913dbd8   PreJIT System.MarshalByRefObject.GetLifetimeService()
79360770   7913dbe0   PreJIT System.MarshalByRefObject.InitializeLifetimeService()
--------------- snip ----------------
7b06621c   7b4a5528   PreJIT System.Windows.Forms.Form.OnResizeBegin(System.EventArgs)
7b0662a4   7b4a5530   PreJIT System.Windows.Forms.Form.OnResizeEnd(System.EventArgs)
008f62a0   008f5ac8      JIT WindbgDemo.Form1.InitializeComponent()
008f627c   008f5ad0      JIT WindbgDemo.Form1..ctor()
008f62bc   008f5ad8     NONE WindbgDemo.Form1.btnLockBlock_Click(System.Object, System.EventArgs)
008f6249   008f5ae0     NONE WindbgDemo.Form1.LockBlock()
008f62d0   008f5ae8     NONE WindbgDemo.Form1.btnException_Click(System.Object, System.EventArgs)
008f6251   008f5af0     NONE WindbgDemo.Form1.CauseException()
008f630c   008f5af8     NONE WindbgDemo.Form1.btnOtherException_Click(System.Object, System.EventArgs)
008f6259   008f5b00     NONE WindbgDemo.Form1.CauseOtherException()
008f62e4   008f5b08     NONE WindbgDemo.Form1.btnMemoryGrowth_Click(System.Object, System.EventArgs)
008f62f8   008f5b10     NONE WindbgDemo.Form1.btnBreakpoint_Click(System.Object, System.EventArgs)
008f6265   008f5b18     NONE WindbgDemo.Form1.Foo()

For the curious we can see whether the function is ngen'ed code or if it has been JITted yet. PreJIT means ngen code, JIT and NONE is whether the function has been JITted or not. From here we can set a breakpoint.

0:004> !bpmd -md 008f5b10 
MethodDesc = 008f5b10
Adding pending breakpoints...

It's a pending breakpoint because this code has not been jitted yet and thus has no place to put the debug breakpoint. You can also set breakpoints directly by name using !bpmd.

Getting started with Windbg and managed code

Kristoffer Henriksson — Sat, 30 Dec 2006 00:51:10 GMT

Windbg (or wind bag as my friend calls it) is my one stop shop for almost everything debugging related. It's great for finding issues that only happen on a client machine and you don't want a full blown Visual Studio installation mucking up your repro.

With the sos extension Windbg becomes useful at debugging managed code as well. To get started with Windbg and sos fire up Windbg and attach to a managed process. I'm using .Net 2.0 for my development so I need to load the sos dll from the Framework directory (for 1.1 .Net use .load clr10\sos.dll instead) . I can do this with the .loadby command:

0:000> .loadby sos mscorwks

This tells Windbg to load the debugger extension sos.dll from the same directory that the current process has mscorwks.dll loaded from.
Next we hit Debug | Go (or F5) and the process is now happily running away.

Once the problem occurs go back to Windbg and press Debug | Break and we can now examine the process state in safety. If at any point you need help with the sos commands, !help will get you going.

Coming up next week: using Windbg to debug exceptions, deadlocks, and memory problems in managed code.

Loading website images in parallel

Kristoffer Henriksson — Wed, 27 Dec 2006 20:10:00 GMT

By default web browsers will only open 2 simultaneous connections to a named website to be a good client. If you're loading several images this means you may hamstring your bandwidth usage and make your website load slower.

Take the following HTML source as our base, off a site hosted at www.example.com:

<img src="Image1.png" width="200" height="200" />
<img src="Image2.png" width="200" height="200" />
<img src="Image3.png" width="200" height="200" />
<img src="Image4.png" width="200" height="200" />
<img src="Image5.png" width="200" height="200" />
<img src="Image6.png" width="200" height="200" />

Network traffic for downloading 6 images over 2 connections

www	Image1.png	Image3.png	Image5.png
www	Image2.png	Image4.png	Image6.png

By not allowing more than 2 images to be downloaded at once the total page load time takes longer than is necessary. Since we own the host in question we know we can safely allow more than 2 images to be downloaded at once so we create two DNS aliases, img1.example.com and img2.example.com that both point to www.example.com. We now modify our HTML source to make use of these two new hosts:

<img src="Image1.png" width="200" height="200" />
<img src="Image2.png" width="200" height="200" />
<img src="http://img1.example.com/Image3.png" width="200" height="200" />
<img src="http://img1.example.com/Image4.png" width="200" height="200" />
<img src="http://img2.example.com/Image5.png" width="200" height="200" />
<img src="http://img2.example.com/Image6.png" width="200" height="200" />

Web browsers will now open 2 connections per named host (www.example.com, img1.example.com, and img2.example.com) for a total of 6 concurrent connections.

Network traffic for downloading 6 images over 6 connections

www	Image1.png
www	Image2.png
img1	Image3.png
img1	Image4.png
img2	Image5.png
img2	Image6.png

Downloading all of them at the same time decreases the amount of bandwidth available for any individual image but will maximize the overall bandwidth usage leading to faster load times.

Loading Javascript files in parallel

Kristoffer Henriksson — Fri, 22 Dec 2006 23:58:00 GMT

You've got your website all set up but are experiencing slow load times for some customers, especially on slower connections. One possible cause is inefficient network usage because of serialized loading of external Javascript files.

Static links in <head>

If you include script files in the HEAD element both IE and Firefox will download the scripts serially, waiting for each one to finish downloading before proceeding with the next one. Take the following HTML snippet that loads two external javascripts:

   
<head>
    <script type="text/javascript" src="Script1.js"></script>
    <script type="text/javascript" src="Script2.js"></script>
</head>

Network traffic for loading scripts in <head> tag

Script1.js

Script2.js

In this common scenario a large amount of network bandwidth can potentially go unused.

Loading the scripts in parallel

You have two options for loading scripts in parallel:

Attach them as elements dynamically
Use document.write to attach them

Both of these options will produce the same network traffic with the difference being in how the scripts are executed on the client. By loading the scripts in parallel we can cut down initial page load time drastically. The time for Script1.js to finish downloading will probably go up slightly over serial loading (since more of the connection is used) but the overall download time should decrease.

Network traffic for loading scripts in parallel

Script1.js

Script2.js

Attaching scripts as elements dynamically

<head>
    <script type="text/javascript">
        function AttachScript(src)
        {
            var script = document.createElement("SCRIPT");
            script.type = "text/javascript";
            document.getElementsByTagName("body")[0].appendChild(script);
            script.src = src;
        }
    </script>
</head>
<body>
  <script type="text/javascript">
    AttachScript("Script1.js");
    AttachScript("Script2.js");
  </script>
</body>

In this scenario IE and Firefox will download both scripts but Internet Explorer will also execute them in the order they finish downloading in whereas Firefox downloads them asynchronously but still executes them in the order they are attached in the DOM.

In Internet Explorer this means your scripts cannot have dependancies on one another as the execution order will vary depending on network traffic, caches, etc.

In Firefox you can mostly get away with keeping dependancies on Script1 from Script2 with the caveat that if the user presses stop after Script2 has finished downloading but Script1 has not, Firefox will execute Script2 and abort downloading Script1. Ensure that Script2 can properly handle Script1 failing to load.

Attaching scripts via document.write

<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>

Using document.write produces the same effect in both Internet Explorer and Firefox: the scripts are downloaded in parallel but executed in the order they're written to the page. The same caveat above about the user stopping the page after Script2 has finished downloading before Script1 has applies.

This technique can be used to download more than two files at the same time as long as more than 1 hostname is used. IE will only open 2 HTTP connections to a named server in order to be a good client (Firefox will open 4) but you can easily work around this by creating additional domain names like scripts1.example.com, scripts2.example.com etc that point to the same host. At some point you will see diminishing returns and possibly even slowdowns from trying to download too many files at once so don't go too crazy with parallelizing.

Edit: Noted that Firefox will open 4 connections per named host by default.