高性能javascript.pdf

所需积分/C币:8 2016-11-15 08:33:29 11.67MB PDF

高性能javascript.pdf
<script type="text/javascript document. write( The date is +(new DateO)to DateStringO); /script> </body> </htm> 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 renderin and user interaction are completely blocked during this time 当浏览尜遇到一个< script>标签时,正如上面HTML页面中那样,元法顸知 Javascript是杏在<p>标签中 添加内容。因此,浏器停下来,运行此 Java Script代钙,然后继续解析、翻译页面。同样的事情发生 在使用src属性加载 Java Script的过程咔。浏览器必须首先下载外部文件的代码,这要口用一些时间,然后 解析并运行此代码。此过程中,由解析和用户交正是被完全阳塞的c 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 Icpendcncics togcthcr, loading them first so that thc page will comc in looking and behaving corrcctly. For cxamnlc HTML4文档指出,一个< cript>标签可以放在HIML文档的<head>或<body>标签中,可以在其中多次 出现。传统上,< cript>标签用于力载外部 Java script文什。<head>部分除此类代码外,还包含link>标 用于加载外部CSS文件和其他页面中间件。也就是说,最好把风格和行为所依赖的部分放在一冠,首光加 载他们,使得页面可以得到正确的外观和行为。例如 <html> <title>script Example</title> <-- Example of inefficient script positioning cript type=text/javasc 'filel </s <script type=text/javascript"src=file2.js"></ <script type=text/javascript" src=file3. js"></script> <link rel="stylesheet" type="text/css href=styles.css"> hello <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 any thing on the page until the opening <body> tag is encountered. Putting scripts at thc top of thc pagc in this way typically Icads to a noticcablc dclay, often in the form of a blank white pagc, bcforc thc uscr can cven begin reading or otherwise interacting with the page. To gct a good undcrstanding of how this occurs, it's useful to look at a waterfall diagram showing when each resource is downloaded. Figure I-I shows when each script and the stylesheet file get downloaded as the page is loading 虽然这些代码看起来是无害的,但它们确实存在性能问题:在<hcad>部分加载了三个 JavaScript文件 因为每个< script>标签阻塞了页面的解析过程,直到它完整地下载并运行了外音 Java Script代码之后,页面 处理才能继续进行。月户必须忍受这种可以察觉的延迟。请记住,浏览器在遇到<body>标签之前,不会渲 染页面的任何部分。用这种方法扣脚本放在页面的顶端,将导致一个可以察觉的延迟,通常表现为:页面 打开时,首先显示为一幅空白的页面,而此时用户即不能阅读,也不能与页面进交互操作。为了更好地 呷解此过程,我们用瀑布图来描绘每个资源的下蔹过程。图1-1显示出页面加载过程中,每个脚木文件 和样式表文件下载的过程。 filel. js file2. js file3. is Code executing styles. css Time 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 filel. 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 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 bcing downloaded onc at a timc. This is thc behavior of most major browsers today 图11是一个令人感兴趣的模板。第一个 JavaScript文件开始下载,并阻塞了其他文件的下毂过程。进 步,在 filel.js下载完之后和fle2js开始下载之前有一个延时,这是 filel js完全运行所需的间。每个 文件必頒等待前一个文件下载完成并运行完之后,才能开始自己的下载过程。当这些文件下载时,用户面 对一个空自的屏幕。这就是今天大多数浏览器的行为馍式。 Internet Explorer 8, Firefox 3.5, Safari 4, and Chrome 2 all allow parallel downloads of Java Script 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 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> 标签底部的位置,尽量减少对整个页面下载的影响。例如 html> <title>Script Examples/title> <link rel="stylesheet" type="Lext/css" href-"styles. Css">> <head p>Hello world!s/p <- 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=filc3js"></script> </body> </> 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 isn't perceived as slow. This is the Y ahoo! Exceptional Performance team's first rule about JavaScript: put scripts at the bottom 此代码展示了所推荐的< script>标签在HML文件中的位置。尽管本下载之间互相阻塞,但页面已经 下载完成并且显示在用广面前了,进入页面的速度不会昱得太慢。这正是“" Yahoo!!优越性能小组”关千 JavaScript的第条定律:将脚本放在底部 Grouping Scripts成组脚本 Since each <script> tag blocks the page 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 extermal files Evcry timc a <script> tag is cncountcred during thc parsing of an HTML pagc, there is going to be a dclay whilc the codc is cxccutcd; minimizing thesc delays improves thc ovcrall performancc of thc pagc 由于每个< cript标签下载时阻塞页面解析过程,所以限制页面的<srit总数也可以改善性能。这个规 则对内联脚本和外部脚本同样适用。每当页面解析碰到一个<scip标签时,紧接着有一时间用于代码执 行。最小化这些延迟时间可以改善页面的整体性能。 The problcm is slightly diffcrent whcn dcaling with cxtcrnal Javascript filcs. eaCh Http rcqucst brings with it additional performance overhcad, so downloading onc singlc 100 KB filc will bc fastcr than downloading four 25 KB files. 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文件。你可以将这些文件整合成个文件,只需要个 script标 签引用,就可以减少性能损失。这一系列的工作可通过一个打包工具实觋(我们在第9章讨论),或者 实时⊥具,诸如 Yahoo! combo handler” Yahoo! created the combo handler for use in distributing the Yahoo! User Interface(YUD library files through their Content Delivery Network(CDN). Any website can pull in any number of YUI liles 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/buildevenv/event-min.js This URL loads thc 2.7.0 versions of thc yahoo-min js and cvent-min. js files. Thesc 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 Yaho!为他的"Yaho!用户接口( Yahoo! Uscr interface,YU)”库创建一个“联合句柄,这是通过他 们的“内容投递网络 Contcnt Dclivcry Nctwork,CDN)”实现的。任何一个对站可以使用一个“联合句柄URL 指出包含YUI文件包中的哪些文件。例如,下面的URL包含两个文件 http:/yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/cvcnt/cvcnt-min.js 此URL请用2.70版本的 yahoo-min. js和 event-min. JS文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此URL请求时,两个文件将被合并仁一起返回给客户端。通过这种方法,就不再需要两个 < script>标签(每个标签加载一个文件),一个< <scrip标签就可以加载他们 <html> <title>Script Example</title> <link rel="stylesheet "type="text/css" href=styles. css' <head <body> <p>Hello world </p> - Example of recommended script positioning--> <script type=text/javascript sre=http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></s cript> body </html 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>标签,位于页甬的底部,加载多个 Java Script文件。这是在HTML页而 多个外部 Java script的最佳方法 Nonblocking Scripts非阻塞脚本 Javascript'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 more JavaScript code is required, and so keeping source code 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 thc pagc in a way that docsn't block the browser. Javascript倾向于阼塞浏览器某些处理过程,如HTTP请求和界面刷新,这是开发者面临的最显著的性 能问题。保持 Javascript文件短小,并限制HTP请求的数量,只是创建反应迅速的网页应用的第一步。 一个应用程序所气含的功能越多,所需要的 JavaScript代码就越大,保持源码短小并不总是一和选择。尽 管下载一个人 JavaScript文件只产生一次HTP请求,却会锁定浏览器一人段时间。为避开这和情况,你 需要向页面中逐步添加 Java Script,,某种程度上说不会阻塞浏览器 The sccrct to nonblocking scripts is to load thc Java Script sourcc codc aftcr the pagc has finishcd 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 非阻塞脚本的秘密在于,等页面元成加载之后,再加载 Java Script源码。从技术角度讲,这意味着在 window的load事件发出之后开始下载代码。有几和方法可以实现这种效果。 Deferred Scripts延期脚本 HTML 4 dcfincs an additional attribute for thc <script> tag called dcfcr. The dcfcr attribute indicates that the script contained within thc clement is not going to modify the dOM and thcrcforc exccution can bc safely deferred until a later point in time. The defer attribute is supported only in Internet Explorer 4+ and Firefox 3.5 making it less than ideal for a generic cross-browser solution. In other browsers, the defer attribute is simply ignored and so the <script> tag is treated in the default(blocking)manner. Still, this solution is useful 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 documcnt. Thc Java Script 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 HTML4为<crip标签定义了一个扩展属性:dcfr。这个dfr属性指明元素所包含的脚本不打算修 改DOM,因此代码可以稍后执行。 defer属性只被 Internet Explorer4和 Firefox35更高版本的浏览器所支 捋,它不是一个理想的跨浏览器解决方案。在其他浏览器上, defer属性被忽略,< script标签按照默认方 武被处坦(造成阻塞)。如果浏览器支持的话,这种方法仍是种有用的解决方案。示例如下 <script type="text/javascript"src=filel. js" defer></script> 个带有 defer属性的<scip标签可以放置在文档的任何位置。对应的 Javascript文什在< script被解析 时启动下载,但代码不会被执行,直到DOM加载完成(在 onload事件句柄被调用之前)。当一个 defer 的 Java Script文件飯下载时,它不会阻塞浏览器的其他欠理过程,所以这三文件可以与页面的其他资源 起并行下载。 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属性如何影响脚木行为 chtml <title>Script Defer Example< /title> <head>> <body> <script defer> alert("defer"); </script> <script>

...展开详情

评论 下载该资源后可以进行评论 11

aifengzi 深入理解js的好书
2018-08-27
回复
JSP21106 比较好的js技术
2018-08-15
回复
haorenyiliage 很不错的资料
2018-03-12
回复
weixin_38175375 好,很不错的资料
2017-10-15
回复
qq_22206007 不错,赞一个
2017-09-06
回复
img
ideal_me

关注 私信 TA的资源

上传资源赚积分,得勋章
最新资源