Cover by Steve Souders

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Chapter 6. Positioning Inline Scripts

The previous three chapters focused on the impact of external scripts. This chapter focuses on inline scripts (JavaScript included in the HTML document directly). Even though inline scripts don’t introduce additional HTTP requests, they can block resources in the page from being downloaded in parallel. They can also thwart progressive rendering. This chapter explains why the decisions of when and where to inline JavaScript have an impact on page performance.

Inline Scripts Block

Chapter 5 describes how external scripts block parallel downloads and rendering. It’s not surprising that inline scripts have the same behavior for the same reasons (preserving execution order and document.write dependencies). The Inline Scripts Block example demonstrates this behavior.

Figure 6-1 shows the HTTP requests issued for this page. In addition to the HTML document, there are two image requests, each configured to take one second. An inline script is inserted between these two images. The inline script is represented by a line in Figure 6-1. It does not generate an HTTP request, but the impact it has is observable.

Inline scripts block parallel downloads (six seconds)

Figure 6-1. Inline scripts block parallel downloads (six seconds)

The inline script is configured to take five seconds to execute. This is what causes the four seconds ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required