2010
3
23
http://blog.sina.com.cn/situdesign
Loading and Execution
........................................................................................................ 2
Data Access
............................................................................................................................ 26
DOM Scripting DOM
.................................................................................................................... 56
Algorithms and Flow Control
.................................................................................. 104
Strings and Regular Expressions
...................................................................... 139
Responsive Interfaces
.......................................................................................................... 184
Ajax
JavaScript XML ............................................................................................................. 216
Programming Practices
........................................................................................................ 261
Building and Deploying High-Performance JavaScript Applications ..................................................... 279
Tools
............................................................................................................................................ 306
Loading and Execution
JavaScript performance in the browser is arguably the most important usability issue facing developers. The
problem is complex because of the blocking nature of JavaScript, which is to say that nothing else can happen
while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI)
updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript
takes to execute, the longer it takes before the browser is free to respond to user input.
JavaScript
JavaScript
UI
JavaScript
JavaScript
JavaScript
On a basic level, this means that the very presence of a <script> tag is enough to make the page wait for the
script to be parsed and executed. Whether the actual JavaScript code is inline with the tag or included in an
external file is irrelevant; the page download and rendering must stop and wait for the script to complete before
proceeding. This is a necessary part of the pages life cycle because the script may cause changes to the page
while executing. The typical example is using document.write() in the middle of a page (as often used by
advertisements). For example:
<script>
JavaScript
document.write()
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>
<script type="text/javascript">
document.write("The date is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>
When the browser encounters a <script> tag, as in this HTML page, there is no way of knowing whether the
JavaScript will insert content into the <p>, introduce additional elements, or perhaps even close the tag. Therefore,
the browser stops processing the page as it comes in, executes the JavaScript code, then continues parsing and
rendering the page. The same takes place for JavaScript loaded using the src attribute; the browser must first
download the code from the external file, which takes time, and then parse and execute the code. Page rendering
and user interaction are completely blocked during this time.
<script>
HTML
JavaScript
JavaScript
<p>
src
JavaScript
Script Positioning
The HTML 4 specification indicates that a <script> tag may be placed inside of a <head> or <body> tag in an
HTML document and may appear any number of times within each. Traditionally, script> tags that are used to
load external JavaScript files have appeared in the <head>, along with <link> tags to load external CSS files and
other metainformation about the page. The theory was that it's best to keep as many style and behavior
dependencies together, loading them first so that the page will come in looking and behaving correctly. For
example:
HTML 4
<script>
CSS
<script>
HTML
JavaScript
<head>
<head>
<body>
<link>
<html>
<head>
<title>Script Example</title>
<-- Example of inefficient script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Though this code seems innocuous, it actually has a severe performance issue: there are three JavaScript files
being loaded in the <head>. Since each <script> tag blocks the page from continuing to render until it has fully
downloaded and executed the JavaScript code, the perceived performance of this page will suffer. Keep in mind
that browsers don't start rendering anything on the page until the opening <body> tag is encountered. Putting
scripts at the top of the page in this way typically leads to a noticeable delay, often in the form of a blank white
page, before the user can even begin reading or otherwise interacting with the page. To get a good understanding
of how this occurs, it's useful to look at a waterfall diagram showing when each resource is downloaded. Figure
1-1 shows when each script and the stylesheet file get downloaded as the page is loading.
<head>
<script>
JavaScript
JavaScript
<body>
1-1
Figure 1-1. JavaScript code execution blocks other file downloads
1-1
JavaScript
Figure 1-1 shows an interesting pattern. The first JavaScript file begins to download and blocks any of the
other files from downloading in the meantime. Further, there is a delay between the time at which file1.js is
completely downloaded and the time at which file2.js begins to download. That space is the time it takes for the
code contained in file1.js to fully execute. Each file must wait until the previous one has been downloaded and
executed before the next download can begin. In the meantime, the user is met with a blank screen as the files are
being downloaded one at a time. This is the behavior of most major browsers today.
1-1
file1.js
file2.js
JavaScript
file1.js
Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 all allow parallel downloads of JavaScript files. This is
good news because the <script> tags dont necessarily block other <script> tags from downloading external
resources. Unfortunately, JavaScript downloads still block downloading of other resources, such as images. And
even though downloading a script doesnt block other scripts from downloading, the page must still wait for the
JavaScript code to be downloaded and executed before continuing. So while the latest browsers have improved
performance by allowing parallel downloads, the problem hasnt been completely solved. Script blocking still
remains a problem.
Internet Explorer 8, Firefox 3.5, Safari 4,
<script>
Chrome 2
<script>
JavaScript
JavaScript
京公网安备 11010802033920号
Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved
评论