Archive for the ‘javascript’ Category

Delving into the Firefox source code

Friday, April 27th, 2007

Continuing from the previous post. I downloaded the Firefox source code and started trying to figure out why textContent was faster than innerHTML.

The FF source code is a daunting beast, around 57,000 files. I started with grep. this returned 57 files for innerHTML and 72 files for textContent. I then used comm to see which files had both words in them, only one did.

Somehow I decided to try looking at the idl files that grep returned. From these files I was able to figure out what I thought were the .cpp files related to the properties.

Here are links to the files on Mozilla’s website
innerHTML is found in this file
nsGenericHTMLElement.cpp
Here is a changelog of the setInnerHTML function
http://lxr.mozilla.org/mozilla1.8/ident?i=SetInnerHTML

Here is the cpp file that contains textContent
nsHTMLOptionElement.cpp
here is the changelog of the setText function
http://lxr.mozilla.org/mozilla1.8/ident?i=SetText

I haven’t actually yet figured out what each function does, but I’m getting there. I’m also not sure if I have the correct file for textContent.

speed of innerHTML vs textContent

Friday, April 27th, 2007

I was working on one of my js apps that updates the content of an element on mouseover. The performance in FF 2 was poor compared to all other browsers. After profiling with Firebug I realized that the problem was setting the innerHTML of an element. In Firebug, setting the innerHTML took about 3 times as long as the rest of the code for the mouseover, which included getting the mouse position, pulling a value from a large array, performing math on that number, and moving a cursor to the proper place on the screen.

I looked up the js docs, and found that FF elements have a property named textContent. I used this property instead of innerHTML, and performance for the mouseover doubled.

I was happy about finding this quirk. Then I told my friend Derik about it, he asked “did you look at the source to figure out why textContent is faster?”, then he called me a pussy when I told him I hadn’t.

The next post will be about delving into the Firefox source code

Getting ie6 to cache background images

Wednesday, January 17th, 2007

to make ie 6 properly cache background images run add this command do your javascript

document.execCommand(“BackgroundImageCache”,false,true);

This makes IE properly cache background images, without this, if you have the same background image applying to multiple items on a page, ie checks with the server for each image. Sometimes this will result in hundreds of requests for bg images, slowing down page loads.

This in itself is very useful. You can really take advantadge of it by making sprite maps, multiple background images rolled into the same image, you then use css background positioning to put the part of your sprite map that you want over the div you want. This can cut the number of images loaded on each page load immensely.

Here is a spritemap that I created for aimpages

These are a couple of rules related to that spritemap.

#panelHeader #add_module:hover, #panelHeader #style_page:hover {background:url(../images/blsm.gif) 0 0 no-repeat;color:#FF7A00; } /* style_page_on3.gif */
#panelHeader #page_info.active,#panelHeader #page_info.active:hover {background: url(../images/blsm.gif) -307px -369px no-repeat;color:#000;} /* page_info_tab2.gif */
#panelHeader #style_page.active, #panelHeader #add_module.active,#panelHeader #add_module.active:hover {background: url(../images/blsm.gif) 0 -369px no-repeat;color:#000000} /* style_mod_tab2.gif */

You can view the whole css file here

I found this technique here,

http://misterpixel.blogspot.com/2006/09/forensic-analysis-of-ie6.html