《高性能 JavaScript》

所需积分/C币:10 2017-08-16 4.04MB PDF

《高性能 JavaScript》.pdf
Script type="text/javascript document. write(The date is +(new DateO) toDateStringO); script </hunI> 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 Java Script 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 uscr intcraction arc complctcly blocked during this timc 当浏览器遇到一个<scip标签时,正如上面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 HTML4文档指出,一个< script>标签可以放在HTML文档的<head>或<body标签中,可以在其中多次 出现。传统上,< script>标签用于加载外部 JavaScript文件。<head部分除此类代码外,还包含<link>标签 用于加载外部CSS文件和其他页面中间件。也就是说,最好把风格和行为所依赖的部分放在一起,首先加 载他们,使得页面可以得到正确的外观和行为。例如: <html> <title>Script Example</title> Example of inefficient script positioning-> <script type=text/javascript"src=filel.js"></script> <script type="text/javascript "src=file2. js"></script> <script type=text/javascript"src="file3.js"></script> <link rel="stylesheet"type"text/ess" href=styles.css"> </head> <p>Hello world! </p> </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 ofa blank while 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>标签阻寒了页面的解析过程,直到它完整地下载并运行了外部 Java script代码之后,页面 处理才能继续进行。用户必须忍受这种可以察觉的延迟。请记住,浏览器在遇到<body>标签之前,不会渲 染页面的仟何部分。用这种方法把脚本放在页面的顶端,将导致一个可以察觉的延迟,通常表现为:页面 打开时,首先显示为一幅空白的页面,而此时用户即不能阅读,也不能与页面进行交互操作。为了更好地 理解此过程,我们使用瀑布图来描绘每个资源的下载过程。图1-1显示出页面加载过程中,每个脚本文件 和样式表文件下载的过程 filel. js 回回 fileZ. js file3. is Code executing styles. css T 1Ime Figurc 1-1.JavaScript codc exccution blocks othcr filc downloads 图1-1, JavaScript代码运行过程阻塞其他文件下载 Figure l-l 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 filel is 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 filel. 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 lime. This is the behavior of most major browsers loday 图1-1是一个令人感兴趣的模板。第一个 Javascript文件廾始下载,并阻塞了其他文件的卜载过程。进 步,在 filel.js卜载完之后和 nile. js开始卜载之前有一个延时,这是 ile.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 rcsourccs. Unfortunatcly, JavaScript downloads still block downloading of othcr rcsourccs, such as images. And cven though downloading a script docsn't block othcr 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 problen Internet Explorer8, Firefox3.5, Safari4,和 Chrome2允许并行下载 JavaScript文件。这个好消息表明,当 个< <script>标签正在下载外部资源时,不必阻塞其他< script>标签。不幸的是, JavaScript的下载仍然要阻 塞其他资源的下载过程,例如图片。即使脚本之间的下载过程互不阻塞,页面仍旧要等待所有 JavaScript 代码下载并执行亢成之后才能继续。所以,当浏览器通过允许并行下载提高性能之后,该问题并没有完全 解决。脚本阻塞仍旧是一个问题。 Because scripts block downloading of all resource types on the page, it's recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page. For example 因为脚本阻塞具他页面资源的下载过程,所以推荐的办法是:将所有< script>标签放在尽可能接近<body> 标签底部的位置,尽量减少对整个页面下载的影响。例如: chtml> head <title> Script Examples/title> <link rel="stylesheet"type=text/css "href"styles. css"> </head <p>Hello world /p K-- Example of recommended script positioning <script type=text/javascript"src=filel. js"></script> <script type="text/javascript"sre="file2. js"></script> <script type="text/javascript"src="file3. js"><script </html> This code represents the recommended position for <script> tags in an HTML file. Even though the script downloads will block one another, the rest of the page has already been downloaded and displayed to the user so that the entire page isnt perceived as slow. This is the Yahoo! Exceptional Performance teams first rule about JavaScript: put scripts at the bottom 此代码展示了所推荐的< cript标签在HTML文件中的位置。尽管脚本下载之间互相阻塞,但页面已纤 下载完成并且显示在用户面前了,进入页面的速度不会显得太慢。这正是“ Yahoo!优越性能小组”关于 JavaScript的第一条定律:将脚本放在底部。 Grouping Scripts成组脚本 Sincc cach <script> tag blocks the pagc from rendering during initial download, it' s helpful to limit the total number of <script> tags contained in the page. This applies to both inline scripts as well as those in external files Every time a <script> tag is encountered during the parsing of an HTML page, there is going to be a delay while the code is executed; minimizing these delays improves the overall performance of the page 由于每个< script标签下载时阻塞页面解析过程,所以限制页面的< script->总数也可以改善性能。这个规 则对内联脚本和外部脚本同样适用。每当页面解析碰到一个< script>标签时,紧接着有一段时间用于代码执 行。最小化这些延迟时间可以改善页面的整体性能 The problem is slightly different when dealing with external JAvascript files eaCh Http request brings with it additional performance overhead, so downloading one single 100 KB file will be faster than downloading four 25 KB liles. To that end, it's helpful to limit the number of external script files that your page references. Typically, a large website or web application will have several required JavaScript files. You can minimize the performance impact by concatenating these files together into a single file and then calling that single file with a single <script> tag. The concatenation can happen offline using a build tool(discussed in Chapter 9)or in real-time using a tool such as the yahoo combo handler 这个问题与外部JavaScript文件处理过程略有不同。每个HTTP请求都会产生额外的性能负担,下载一 个100KB的文件比下载四个25KB的文件要快。总之,减少引用外部脚本文件的数量。典型的,一个大型 网站或网页应用需要多次请求 JavaScript文件。你可以将这些文件整合成一个文件,只需要一个< scrip标 签引用,就可以减少性能损尖。这一系列的工作可通过一个打包工具实现(我们在第9章讨论),或者一 个实时工具,诸如“ Yahoo! combo handler” Yahoo! created the combo handler for use in distributing the Y ahoo! User Interface (YUD) library files through their Content Delivery Network(CDN). Any website can pull in any number of Y Ul files by using a combo-handled URL and specifying the files to include, For example, this URL includes two files http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/buildevent/event-min.js This URL loads thc 2.7.0 versions of the yahoo-min js and cvcnt-min. js files. Thcsc files exist scparatcly on the server but are combined when this URL is requested. Instead of using two <script> tags(one to load each file),a single <script> tag can be used to load both Yahoo!为他的" Yahoo!用户接口( Yahoo! User Interface,YUI)”库创建一个“联合句柄”,这是通过他 们的内容投递网络( Content Delivery Network,CDN)”实现的。仁何一个网站可以使用一个“联合句柄URL 指山包含YU文件包中的哪些文件。例如,下面的URL包含两个文件: http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js 此URL调用2.7.0版本的 yahoo- mIns和 event- min S文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此URL请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个 < script>标签(每个标签加载一个文件),一个< script>标签就可以加载他们: chunl head <title>Script Examples/title:> <link rel="stylesheet"type="text/css"href="styles. css"> </head> cllo world<p> Example of recommended script positioning --> <script type="text/javascript" http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js></s cript This code has a single <script> tag at the bottom of the page that loads multiple JavaScript files, showing the best practice for including external JavaScript on an HTML page. 此代码只有一个< script>标签,位于面的底部,加载多个 JavaScript文件。这是在HTML贞面中包含 多个外部 Java script的最佳方法。 unblocking Scripts非阻塞脚本 avascript'S tendency to block browser processes both Http requests and Ui updates is the most notable performanceissuefacingdevelopersKeepingJavascriptfilessmallandlimitingthenumberofhttprequests are only the first steps in creating a responsive web application. The richer the functionality an application requires, the morc JavaScript codc is rcquircd, and so kccping sourcc codc small isn't always an option. Limiting yourself to downloading a single large JavaScript file will only result in locking the browser out for a long period of time despite it being just one Http request To get around this situation you need to incrementally add more JavaScript to the page in a way that doesn't block the browser. Java script倾向于阻塞浏览器某些处理过程,如HIP请求和界面刷新,这是开发者面临的最显著的性 能问题。保持 JavaScript文件短小,并限制HIIP请求的数量,只是创建反应迅速的网页应用的第一步 个应用程序所包含的功能越多,所需要的 JavaScriυt代码就越大,保持源码短小并不总是种选择。尽 管下载一个大Javascript文件只产生一次HTTP请求,却会锁定浏览器一大段时间。为避廾这种情况,你 需要向页面中逐步添加 Javascript,某种程度上说不会阻塞浏览器。 The secret to nonblocking scripts is to load the Java Script source code after the page has finished loading In technical terms, this means downloading the code after the window's load event has been fired. There are a few techniques for achieving this result 非阻塞脚本的秘密在于,等页面完成加载之后,再加载 JavaScript源码。从技术角度讲,这意味着在 window的load事件发出之后开始下载代码。有几种方法可以实现这种效果。 Deferred Scripts延期脚本 hTML 4 defines an additional attribute for the <script> tag called defer. The defer attribute indicates that the script contained within the element is not going to modify the dom and therefore execution can be safely deferred until a later point in time. The defer attribute is supported only in Internet Explorer 4+ and Firefox 3.5 making it lcss than idcal for a gencric cross-browscr solution. In othcr browsers, the defer attribute is simply ignored and so thc <script> tag is trcatcd in thc default (blocking )manncr. Still, this solution is uscful if your target browsers support it. The following is an example usage <script type="text/javascript " src=filel. js"defer></script> A <script tag with defer may be placed anywhere in the document. Thc JavaScript filc will begin downloading at he point that the <script> tag is parsed, but the code will not be executed until the dOM has been completely loaded(before the onload event handler is called). When a deferred JavaScript file is downloaded, it doesn't block the browser's other processes, and so these files can be downloaded in parallel with others on the page HIML4为< script>标签定义了一个扩展属性: defer。这个 defer属性指明元素中所包含的脚本不打算修 改DOM,因此代码可以稍后执行。 defer属性只被 Internet Explorer4和 Firefox3.5更高版本的浏览器所支 持,它不是个理想的跨浏览器解决方案。在其他浏览器上, defer属性被忽略,< scrip标签按照默认方 式被处理(造成阻塞)。如果浏览器支持的话,这种方法仍是一种有用的解决方案。示例如卜 script Lype="text/javascript"src="filel.js" defer></ scripT> 个带有deer属性的< scrIp标签可以放置在文档的任何位置。对应的 JavaScript文件将在< script>被解析 时启动下载,但代码不会被执行,直到DOM加载完成(在 onload事件句枘被调用之前)。当一个deer 的 JavaScript文件被下载时,它不会阻塞浏览器的其他处理过程,所以这些文件可以与页面的其他资源一 起并行下载 Any <script> element marked with defer will not execute until after the doM has been completely loaded; this holds true for inline scripts as well as for external script files. The following simple page demonstrates how the defer attribute alters the behavior of scripts 任何带有 defer属性的< script>元素在DOM加载完成之前不会被执行,不论是内联脚本还是外部脚本文 件,都是这样。下面的例子展示了 defer属性如何影响脚本行为: <html <head> <title>Script Defer Example</title> <body> script defer> alert("defer"); </script> script→

立即下载 最低0.43元/次 身份认证VIP会员低至7折
举报 举报 收藏 收藏
高性能JavaScript 高清完整.pdf版下载

如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2017-03-10 立即下载

如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2018-04-19 立即下载
高性能JavaScript.pdf 高清版

【这是2015年8月出版的书籍】如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2018-03-12 立即下载
高性能JavaScript(2015版)高清完整 扫描版PDF

【这是2015年8月出版的书籍,非2010年版的】如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2016-09-27 立即下载

《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2015-07-14 立即下载
高性能JavaScript + 高清+目录 PDF

高性能JavaScript + 高清+目录 PDF,JS学习高级书籍,

2018-02-26 立即下载
JavaScript模式 PDF完整版带目录


2015-08-07 立即下载


2016-11-15 立即下载


2018-02-25 立即下载
高性能JavaScript 2015

高性能JavaScript 2015新版 High Performance JavaScript [美] Nicbolas C. Zakas

2018-01-22 立即下载

扫描版 作者:Nicholas C. Zakas(尼古拉斯.泽卡斯) 著,丁琛 译 出版时间:2015年08月

2017-10-02 立即下载


2018-01-15 立即下载


2018-01-25 立即下载
(红皮书)JavaScript高级程序设计(第3版).pdf 高性能JavaScript

1、红皮书可作为入门入籍查看,其实还有一本绿皮书(犀牛的权威指南),更像一本工具词典。红皮书相对好入门一点; 2、高性能JavaScript里面描述了一些JavaScript的奇淫技巧,以及JS这门语言的一些精华和糟粕,不可多得之书 3、书籍为高清,自带书签 无水印 喜欢的可以看看

2018-05-12 立即下载
高性能JavaScript_编程》 PDF


2018-08-29 立即下载

前端必备书籍之一,2015年8月第一版,如果你使用JavaScript构建交互丰富的Web应用,那么JavaScript代码可能是造成你的Web应用速度变慢的主要原因。《高性能JavaScript》揭示的技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能,包括代码的加载、运行、DOM交互、页面生存周期等。雅虎的前端工程师Nicholas C. Zakas和其他五位JavaScript专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

2019-01-03 立即下载
高性能javascript pdf

高性能javascript 电子书 中英文对照 清晰版

2013-01-21 立即下载
  • GitHub


关注 私信 TA的资源