活动介绍

高性能JavaScript编程1

preview
试读
349页
需积分: 0 1 下载量 50 浏览量 更新于2022-08-03 收藏 3.6MB PDF 举报
《高性能JavaScript编程》一书深入探讨了如何优化JavaScript在浏览器中的性能，这在现代Web开发中至关重要。浏览器中的JavaScript性能直接影响用户体验，因为JavaScript执行时会阻塞其他操作。以下是各章节主要内容的概述： 第一章 “加载和执行”： 本章探讨JavaScript在浏览器中的加载和执行过程，强调了JavaScript执行的阻塞特性。由于大多数浏览器使用单进程处理用户界面更新和JavaScript代码，因此这两者不能同时进行，这就意味着JavaScript执行时间越长，用户界面的响应速度就越慢。作者会介绍如何通过延迟加载、代码分割和异步执行策略来改善这一问题。 第二章 “数据访问”： 这一章关注的是如何高效地访问和操作数据，包括数组、对象和JSON。讨论了不同数据结构的选择对性能的影响，以及如何利用缓存机制提高访问效率。 第三章 “DOM Scripting”： DOM（文档对象模型）是JavaScript与HTML交互的关键。本章讲解如何高效地遍历和修改DOM树，避免DOM操作导致的重绘和回流，以及使用文档片段（DocumentFragment）等技术来提升性能。 第四章 “算法和流程控制”： 本章涵盖了基础算法和流程控制结构，如循环、条件语句等，以及它们在JavaScript中的实现。讨论了如何优化循环性能，避免不必要的计算，以及合理选择控制流工具来提高代码执行效率。 第五章 “字符串和正则表达式”： 字符串和正则表达式是JavaScript中的常见操作，但不当使用可能导致性能瓶颈。本章将介绍如何有效地使用字符串拼接、模式匹配和正则表达式，以及如何避免常见的性能陷阱。 第六章 “响应接口”： 响应式设计是提升用户体验的关键。本章讲述了如何使用JavaScript创建流畅的用户界面，包括事件处理、动画和触摸事件的优化，以及如何利用requestAnimationFrame实现平滑动画。 第七章 “Ajax”： 异步JavaScript和XML（Ajax）是Web应用程序的核心技术。本章详细介绍了Ajax的工作原理，包括XMLHttpRequest对象、JSONP、CORS等，并探讨了如何优化Ajax请求的性能。 第八章 “编程实践”： 这一章提供了编写高性能JavaScript代码的最佳实践，包括代码组织、错误处理、调试技巧，以及如何利用性能分析工具来识别和修复性能问题。 第九章 “构建和部署高性能JavaScript应用”： 本章专注于构建流程和部署策略，如压缩、合并JS文件，使用CDN加速资源加载，以及如何进行性能测试和持续优化。 第十章 “工具”： 最后一章介绍了用于提高JavaScript开发效率和性能的各种工具，包括浏览器开发者工具、性能分析工具、代码质量检查工具和自动化工具，帮助开发者更好地理解和改进代码性能。 以上各章节内容相互关联，共同构建了一套完整的高性能JavaScript编程体系，旨在帮助开发者实现更快速、更响应式的Web应用。
《高性能 JavaScript 编程》
原文 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
的阻塞特征而复杂，也就是说，当 JavaScript 运行时其他的事情不能被浏览器处理。事实上，大多数浏览
器使用单进程处理 UI 更新和 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 page’s 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 是否在<p>标签中
添加内容。因此，浏览器停下来，运行此 JavaScript 代码，然后再继续解析、翻译页面。同样的事情发生
在使用 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>标签可以放在 HTML 文档的<head>或<body>标签中，可以在其中多次
出现。传统上，<script>标签用于加载外部 JavaScript 文件。<head>部分除此类代码外，还包含<link>标签
用于加载外部 CSS 文件和其他页面中间件。也就是说，最好把风格和行为所依赖的部分放在一起，首先加
载他们，使得页面可以得到正确的外观和行为。例如：
<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>部分加载了三个 JavaScript 文件。
因为每个<script>标签阻塞了页面的解析过程，直到它完整地下载并运行了外部 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 是一个令人感兴趣的模板。第一个 JavaScript 文件开始下载，并阻塞了其他文件的下载过程。进
一步，在 file1.js 下载完之后和 file2.js 开始下载之前有一个延时，这是 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 don’t 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 doesn’t 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 hasn’t been completely solved. Script blocking still
remains a problem.
Internet Explorer 8, Firefox 3.5, Safari 4, 和 Chrome 2 允许并行下载 JavaScript 文件。这个好消息表明，当
一个<script>标签正在下载外部资源时，不必阻塞其他<script>标签。不幸的是，JavaScript 的下载仍然要阻

剩余348页未读，继续阅读

身份认证 购VIP最低享 7 折!
30元优惠券
资源推荐
资源评论
lirumei
  • 粉丝: 78
上传资源 快速赚钱
voice
center-task 前往需求广场，查看用户热搜

最新资源