高性能javascript

所需积分/C币:9 2017-01-01 21:07:32 11.67MB PDF
收藏 收藏
举报

高性能javascript
script typ=text/javascript> document. write("The date is +(new DateO) to Date String); </script> </body> </html> When the browser encounters a <script> tag, as in this html page, there is no way of knowing whether the Java Script will insert content into the <p>, introduce additional elements, or perhaps even close the tag. Therefore Che 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 当浏览尜遇到一个<srip标签时,正如上面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 behavio dcpendcncics togcthcr, loading thcm first so that the page will comc in looking and behaving corrcctly. For cxamplc. HTML4文档指出,一个< - script标签可以放在HTML文档的<head>或<body>标签中,可以在其中多次 出现。传统上,< cript>标签用于力载外部 Java Script文件。head部分除此类代码外,还包含<link>标 用于川载外部CSS文件和其他页面中闫件。乜就是说,最妘把风格和行为所依赖的部分放在一,首先加 载他们,使得页面可以得到正确的外观和行为。例如 Khtml> head> <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/css" href=styles.css"> <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 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 thc form of a blank white pagc, bcforc thc uscr can cven begin reading or otherwise interacting with thc pagc. 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显示出页面加载过程中,每个脚木文件 和样式表文件下载的过程。 王i1e1.js 1 file2. js file3. is Code executing styles. Css Tim巴 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 the behavior of most major browsers today 图1-1是一个令人感兴趣的模板,第一个 Javascript文件开始下载,并阻塞了其他文件的下载过程。进 步,在 filel. js下载完之后和file2js开始下载之前有一个延时,这是 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 hasnt 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 因为脚本阻塞其他页面资源的下载过程,所以推荐的办法是:将所有<rip>标签放在尽可能接近<body> 标签底部的位置,尽量减少对墼个页面下载的影响。例如 html> tle>Script Example</title> <link rel="stylesheet" type="Lext/css"hre[-"styles. Css Head p>Hello world!</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> </bod </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 team's first rule about JavaScript: put scripts at the bottom 此代码示了所推荐的<cri标签在HTML文件中的位置。尽管本下载之间互相阻塞,但页面已经 下载完成并且显示在用宀面前了,进入页面的速度不会昱得太慢。这正是 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 external files Evcry timc a <script> tag is cncountcrcd during the parsing of an HTML pagc, thcrc is going to bc a dclay whilc the codc is cxccutcd; minimizing thesc delays improves thc ovcrall performancc of the pagc 由于每个<crpt>标签下我时阻塞页面解析过程,所以限制页面的<scri>总数也可以改善性能。这个规 则对内联脚本和外部脚本同样适用。每当页面解析碰到一个< script标签时,紧接着有一段时间用于代码执 行。最小化这些延迟时间可以改善页面的整体性能。 Thc 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 be 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文件。你可以将这些文件整合成个文件,只需要个 . scrip标 签引用,就可以减少性能损失。这一系列的工作可通过一个打包工具实现(我们在第9章讨论),或者 个实时⊥具,诸如Yaoo! combo handler'” Yahoo! created the combo handler for use in distributing the Yahoo! User Interface (YUD) library files through Lheir Content Delivery Network(CDN). Any website can pull in any number of YUI files by using a combo-handled URL and specifying the files to include For example, this URL includes two files hup: //yui. yahooapis. com/combo? 2.7. 0/build/yahoo/yahoo-min,js&2. 7.0/build/event/event-min js This URL loads thc 2.7.0 versions of thc yahoo-min js and cvent-min. js files. Thcsc files exist scparatcly on thc 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! Uscr interface,YU)”库创建一个“联合句柄”,这是通过包 们的内容投递网终( Contcnt Dclivcry Nctwork,CDN)”实现的。任何一个网站可以使用一个“联合句柄RL 指出包含YUI文件包中的哪些文件。例如,下面的URL包含两个文件 http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/cvent/cvcnt-min.js 此URL请用2.70版本的 yahoo-minj和 event-min. Js文件。这些文件在服务器上是两个分离的文件,但是 当服务器收到此URL请求时,两个文件将被合并仁一起返回给客户端。通过这种方法,就不再需要两个 < script>标签(每个标签加载一个文件),一个< scrip标签就可以加载他们: <html> Head> <title>Script Example</title> <link rel="stylesheet"type="text/css" href="styles.css"> <body> <p>Hello world! </p> <- Example of recommended script positioning <script type="text/javascript src="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 extermal JavaScript on an HTML page 此代码只有一个 - scrip标签,位于页而的底部,加载多个 Java Script文件。这是在HTML页而中 多个外部 Java script的最佳方法 Nonblocking Scripts非阻塞脚本 Javascript's tendency to block browser processes both Http requests and Ui updates is the most notable performance issue facing developers Keeping Javascript files small and limiting the number of Http requests re 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 the page in a way that docsn't block the browser JavaScript倾向于陧塞浏览器某些处理过程,如HTTP请求和界而刷新,这是开发者而临的最显著的性 能问题。保持Javascript文件短小,并限制HTTP请求的数量,只是创建反应迅速的网页应用的第一步。 个应用程序所包含的功能越多,所需要的 JavaScript代码就越大,保持源码短小并不总是一和选择。尽 管下载一个人JavaScript文件只产生一次HTTP请求,却会锁定浏览器一人段时间。为避开这和情况,你 需要向页面中逐步添加 Java script,某种程度上说不会阻塞浏览器 The sccrct to nonblocking scripts is to load thc Java Script sourcc codc after the pagc 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 非阻塞脚本的秘密在于,等页面完成加载之后,再加载 Java Script源码。从技术角度讲,这意味着在 window的load事件发出之后开始下载代码。有几和方法可以实现这种效果。 Deferred Scripts延期脚本 HTML 4 dcfincs an additional attribute for the <script> tag called defer. 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 I 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 dcfcr may bc placed anywhere in the document. Thc Java Script filc will begin downloading at the 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为< cript>标签定义了一个扩展属性: defer。这个 defer属性指明元素所包含的脚本不打算修 改DOM,因此代码可以稍后执行。 defer属性只被 nternet Explorer4和 I Firefox3.5更高版本的浏览器所支 捋,它不是一个理想的跨浏览器解决方案。在其他浏览器上, defer属性被忽略,< script标签按照默认方 式被处卫(造成阻塞)。如果浏览器支持的话,这种方法仍是种有用的解决方案。示例如下: <script type="text/javascript"src="filel. js" defer></script> 个带有 defer属性的< script>标签可以放置在文档的任何位置。对应的 JavaScript文件将在<sit被解析 时启动下载,但代码不会被执行,直到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属性如何影响脚木行为: himle <title> Script Defer Example< /title> <head <body> <script defer> alert("defer ); </script> <script

...展开详情
试读 127P 高性能javascript
立即下载 低至0.43元/次 身份认证VIP会员低至7折
    抢沙发
    一个资源只可评论一次,评论内容不能少于5个字
    img
    小区2

    关注 私信 TA的资源

    上传资源赚积分,得勋章
    最新推荐
    高性能javascript 9积分/C币 立即下载
    1/127
    高性能javascript第1页
    高性能javascript第2页
    高性能javascript第3页
    高性能javascript第4页
    高性能javascript第5页
    高性能javascript第6页
    高性能javascript第7页
    高性能javascript第8页
    高性能javascript第9页
    高性能javascript第10页
    高性能javascript第11页
    高性能javascript第12页
    高性能javascript第13页
    高性能javascript第14页
    高性能javascript第15页
    高性能javascript第16页
    高性能javascript第17页
    高性能javascript第18页
    高性能javascript第19页
    高性能javascript第20页

    试读已结束,剩余107页未读...

    9积分/C币 立即下载 >