JavaScript Profiling With Chrome

Make your page load faster

Your website works. Now let’s make it work faster. Website performance is about two things: how fast the page loads, and how fast the code on it runs. Plenty of services make your website load faster, from minimizers to CDNs, but making it run faster is up to you. Little changes in your code can have gigantic performance impacts. A few lines here or there could mean the difference between a blazingly fast website and the dreaded “Unresponsive Script” dialog. This article shows you a few ways to find those lines of code with Chrome Developer Tools.

 

Zack Grossbart will look at a simple application called a color sorter, which presents a grid of rainbow colors that you can drag and drop to mix up. Each dot is a div tag with a little CSS to make it look like a circle. The page loads pretty fast, but it still takes a moment and blinks a little before it paints. Time to profile the page and make it faster. Always start performance-improvement projects with a baseline understanding of how fast or slow your application already is. The baseline will let you know whether you’re making improvements and help you make tradeoffs. For this article, he’ll use Chrome Developer Tools.

Comments

Be the first to write a comment

You must me logged in to write a comment.