Timelines

Web Inspector features a visual download analyzer and a JavaScript profiler to help you make your website load and your scripts run as quickly and responsively as possible.

Recording Timelines

Timelines are a graphical representation of activity that occurs during the lifetime of the open page. Timelines show network requests, CSS rendering, and JavaScript events.

All timelines record simultaneously. You can start recording timelines two ways:

To stop recording, click the Stop Recording button. The content browser shows various details depending on the selected timeline.

Network Requests

Figure 3-1 shows recorded network requests as blue horizontal bars.

Figure 3-1  Network requests in the Timelines navigation sidebar

When the Network Requests timeline is selected, the bottom portion of the content browser displays each individual file requested from the webpage. The horizontal bar graph shows you when each resource was requested, the latency of the server, and the download time for each resource. Hover over any bar to see additional details in a tooltip.

The vertical dashed blue line indicates when the DOM becomes available to Safari, and is equivalent to the DOMContentLoaded JavaScript event. The red line indicates when all resources have finished loading, and is equivalent to the load JavaScript event.

Layout and Rendering

Just as you can see great detail about every resource that has loaded, you can see great detail about how Safari's rendering engine, WebKit, renders the page. Click on Layout & Rendering in the Timelines pane to display a table of each paint that has been rendered, as shown in Figure 3-2. Each layout calculation and paint rendering is represented by a purple horizontal bar.

Figure 3-2  Layout and rendering events in the Timelines navigation sidebar

JavaScript and Events

JavaScript executed during a recording session is represented as a yellow horizontal bar in the timeline. Evaluated scripts, dispatched events, animation frames, and timers are listed in the table in the content browser, as shown in Figure 3-3.

Figure 3-3  JavaScript events in the Timelines navigation sidebar

Timing Profiles

Underneath the Timelines pane in the Timelines navigation sidebar is the Profiles pane. This pane allows you to see where execution time is being spent in your JavaScript and CSS. Use the Profiles pane to find bottlenecks in your scripts and inefficiency in your CSS selectors to optimize their performance.

JavaScript Profiling

Profiling JavaScript exposes the bulk of your code’s execution time. To use the Profiles pane, you must start profiling, either manually or by including a console.profile() call in your script. To start profiling manually, click the record button (../Art/recording_start_2x.png) in the top right of the Profiles pane, and select Start JavaScript Profile in the resulting menu. The record button turns red (../Art/recording_2x.png). To stop the profile, click the record button again. No profile is displayed until you stop profiling, either manually or through a call to console.profileEnd(). Each time you begin and end profiling, another profile is captured.

Once you have captured one or more profiles, they are listed on the left side of Web Inspector. Manual profiles are named sequentially (JavaScript Profile 1, JavaScript Profile 2, and so on). Profiles created by calls to console.profile() are named with the title of the profile provided as an optional argument. If multiple profiles are captured under the same name, a disclosure triangle reveals multiple runs within the profile.

The time spent in each function executed during the profile is displayed, as well as the number of times each function is called, as shown in Figure 3-4. The time is displayed as a percentage of total time by default, but you can view the time in seconds by clicking the percentage icon (../Art/percent_2x.png).

Figure 3-4  Profiling JavaScript

The time spent is grouped into three categories: Self, the total time spent in the function itself; Total, the total time spent in the function and any subordinate functions it calls in turn; and Average, the average time spent in the function itself during each call (the Self time divided by the number of calls).

If a function is declared with a name, the function name is displayed. If a function is created programmatically by an eval() statement or inline <script> </script> tagset, it is labeled (program) in the profile. Other unnamed functions, for example, a function defined within a variable declaration, are labeled (anonymous function). To be less vague, you can rename anonymous functions in a profile by assigning a string value to the displayName property of the function.

Where applicable, the source URL and line number of the function declaration is shown in gray to the right of the function name. The source URL is a link. Clicking it opens the source in the content browser, scrolled to the line number where the function is declared.

CSS Selector Profiling

Just as you can profile JavaScript, you can profile CSS selectors to measure their efficiency. The more general a selector (such as a selector on a tag), the more time it takes to find all matches. More specific classes (such as an ID or class) match fewer elements, and are faster for WebKit to find.

Figure 3-5  Profiling CSS