on web performance
Browser performance guru, Nat Duca, has introduced high resolution timing to JavaScript. Ready to try in Chrome 20, the experimental window.performance.webkitNow() interface provides microsecond resolution and guarantees not to flow backward (monotonically nondecreasing). Microseconds matter Until now , creating a new Date object and querying its time was the only way to measure elapsed time on…
"I know I should look at Chrome's Timeline panel, but what do I do with it?" was roughly the opening line in two recent web performance meetings. In both we found nice speedups using the same mantra: "Don't ask how to make an operation faster, ask why it is done at all." To ward off a third meeting, I decided to write about it. This is best demonstrated with a real world example, and it happens…
The recent beta release of Chrome on Android marks a great time to look at what happens when web applications consume too much memory: something gets killed. Previously I've blogged about the importance for web developers to mind their memory usage . On powerful desktop machines enjoyed by many developers, this can seem like an academic concern. But on mobile devices the limitation is all too…
The Chrome Beta for Android is solid Chrome. That means it inherits my favorite speed features from its older desktop siblings. Some of them are novel to mobile browsers. For all of them, the absolute performance benefit is usually greater than on more powerful desktops. In no particular order, here are ten I'm most excited to see together in the mobile world. Remote debugging Probably the most…
[cross-posted from 2011 Performance Calendar ] Rich developer tools are available for all modern web browsers. They are typically easy to use and can provide all of the information necessary to optimize web pages. It is rare to need to go beyond the unified networking/scripting/rendering view of the Web Inspector's Timeline panel . But they aren't always perfect: a tool may be missing information,…
Over lunch last week Mikhail Naganov (creator of the DevTools Heap Profiler ) and I were discussing how invaluable it has been to have the same insight into JavaScript memory usage that we have into applications written in languages like C++ or Java. But the heap profiler doesn't seem to get as much attention from developers as I think it deserves. There could be two explanations: either leaking…
The major web browsers load web pages in basically the same way. This process is known as parsing and is described by the HTML5 specification . A high-level understanding of this process is critical to writing web pages that load efficiently. Parsing overview As chunks of the HTML source become available from the network (or cache, filesystem, etc), they are streamed to the HTML parser. Next, in a…
Recently two different projects required compiling a list of ways to trigger a download through HTML: Resource Timing and Preload Scanner optimization. There's no centralized list in the WebKit source nor did a web search turn one up. So in hopes it may be useful to others, here's what I was able to come up with. Please let me know what I forgot (note that ways to download through CSS, JS, SVG and…
As most web developers are aware, a significant amount of a script's running time may be spent performing DOM operations triggered by the script rather than executing the JS byte code itself. One such potentially costly operation is layout (aka reflow) -- the process of constructing a render tree from a DOM tree. The larger and more complex the DOM, the more expensive this operation may be. An…
While defining the set of page load time metrics that we think are most important for benchmarking, Mike Belshe, James Simonsen and I went through a seemingly simple exercise: enumerate the ways in which Chrome caches data. The resulting list was interesting enough to me that I thought it worthwhile to share. When most people think of "the browser's cache" they envision a single map of HTTP…
Web Page Replay now supports editing recorded web pages. Credit for the idea goes to Sergey Chernyshev . To use it: record a web page then use httparchive's edit command. $ ./httparchive.py edit --host=example.com --path=/ ~/archive.wpr Since all other aspects of the page are controlled, this allows you to measure the effect of tweaking just a single aspect of the page without having to worry…
WebKit's HTMLDocumentParser frequently must block parsing while waiting for a script or stylesheet to download. During this time, the HTMLPreloadScanner looks ahead in the source for subresource downloads which can be started speculatively. I've always assumed that discovering subresources sooner is a key factor in loading web pages efficiently, but until now, never had a good way to quantify it.…
In the pursuit of creating blazingly fast web applications, we spend hours benchmarking, profiling, and optimizing to shave off precious milliseconds. But what is a millisecond? I found it interesting to take a step back today and remind myself what a millisecond feels like. Enter a delay in the text box and then click the white boxes to reveal a super secret message. The delay represents hard…
JsBench now has a help page with information on how to get started, an explanation of the benchmark methodology, and some examples. Check it out and feel free to let me know if anything is missing.
In the search for techniques to produce truly blazing JavaScript, I've found lots of conflicting and downright misinformation on the web. When Googe's App Engine was released, I decided to kill two birds with one stone: (1) play with App Engine and (2) create a tool for sharing real world cross browser JavaScript benchmarks. Try it out: http://jsbench.appspot.com/ If you aren't sure how to get…
After a long period of forgetting this blog existing, I figured its about time to pick it up again. Recently I've become interested in lending a hand to the Firebug Working Group to help fix some of the 341 open bugs and feature requests: http://code.google.com/p/fbug/issues/list Here's my first patch: http://code.google.com/p/fbug/issues/detail?id=43
I'm experimenting with a new speed test feature in Fasterfox. Here's a sneak preview of Fasterfox 2.0.1 which includes this new feature: Fasterfox 2.0.1 To use: right click the Fasterfox icon and select "Speed Test." The speed test allows you to measure the mean/median load time for a specified number of loads of a given web page. This is very useful for those wanting to test the rendering speed…
I have seen plenty of articles on CSS shorthand (tips for conserving bytes in your CSS syntax), but I have never seen one that mentions when to use color names over their hexidecimal codes. There are 16 colors names which are supported by all major browsers: white: #fff yellow: #ff0 red: #ff0 fuscia: #f0f silver: #c0c0c0 gray: #808080 olive: #808000 purple: #800080 maroon: #800000 aqua: #f00 lime:…