📄 performance optimization the dojo toolkit.mht
字号:
From: <由 Windows Internet Explorer 7 保存>
Subject: Performance Optimization | The Dojo Toolkit
Date: Sun, 2 Dec 2007 16:36:35 +0800
MIME-Version: 1.0
Content-Type: multipart/related;
type="text/html";
boundary="----=_NextPart_000_0333_01C83501.81102EE0"
X-MimeOLE: Produced By Microsoft MimeOLE V6.00.2900.3198
This is a multi-part message in MIME format.
------=_NextPart_000_0333_01C83501.81102EE0
Content-Type: text/html;
charset="utf-8"
Content-Transfer-Encoding: quoted-printable
Content-Location: http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/performance-optimization
=EF=BB=BF<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" =
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=3Den xml:lang=3D"en" =
xmlns=3D"http://www.w3.org/1999/xhtml"><HEAD><TITLE>Performance =
Optimization | The Dojo Toolkit</TITLE><!--=0A=
section: docs -->
<META http-equiv=3DContent-Type content=3D"text/html; =
charset=3Dutf-8"><LINK=20
href=3D"/book/dojo-book-0-9/part-4-meta-dojo/d-o-h-unit-testing" =
rel=3Dprev><LINK=20
href=3D"/book/dojo-book-0-9/part-4-meta-dojo-0" rel=3Dup><LINK=20
href=3D"/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-bu=
ilds"=20
rel=3Dnext>
<STYLE type=3Dtext/css>.geshifilter {
FONT-FAMILY: monospace
}
.geshifilter .imp {
FONT-WEIGHT: bold; COLOR: red
}
.geshifilter .kw1 {
COLOR: #b1b100
}
.geshifilter .kw2 {
FONT-WEIGHT: bold; COLOR: #000000
}
.geshifilter .kw3 {
COLOR: #000066
}
.geshifilter .coMULTI {
COLOR: #808080; FONT-STYLE: italic
}
.geshifilter .es0 {
FONT-WEIGHT: bold; COLOR: #000099
}
.geshifilter .br0 {
COLOR: #66cc66
}
.geshifilter .st0 {
COLOR: #ff0000
}
.geshifilter .nu0 {
COLOR: #cc66cc
}
.geshifilter .sc0 {
COLOR: #00bbdd
}
.geshifilter .sc1 {
COLOR: #ddbb00
}
.geshifilter .sc2 {
COLOR: #009900
}
</STYLE>
<LINK href=3D"/sites/all/themes/dtk/favicon.ico" type=3Dimage/x-icon=20
rel=3D"shortcut icon">
<META content=3Den name=3Dlanguage>
<STYLE type=3Dtext/css media=3Dall>@import url( =
/files/css/4538c7b86f5ddf0e20fe837f59d90fef.css );
</STYLE>
<SCRIPT src=3D"http://dojotoolkit.org/dojo/config/6"=20
type=3Dtext/javascript></SCRIPT>
<SCRIPT=20
src=3D"http://dojotoolkit.org/sites/all/modules/dojo/dtk_build/dojo/dojo.=
js"=20
type=3Dtext/javascript></SCRIPT>
<SCRIPT =
type=3Dtext/javascript>dojo.addOnLoad(function(){dojo.addClass(dojo.body(=
),"tundra");});</SCRIPT>
<SCRIPT type=3Dtext/javascript>dojo.require("dojo.parser");</SCRIPT>
<SCRIPT =
type=3Dtext/javascript>document.documentElement.className=3D"js";</SCRIPT=
>
<SCRIPT src=3D"http://dojotoolkit.org/sites/all/themes/dtk/js/common.js" =
type=3Dtext/javascript></SCRIPT>
<SCRIPT type=3Dtext/javascript>
dojo.require("dijit._base.sniff");
</SCRIPT>
<META content=3D"MSHTML 6.00.6000.16544" name=3DGENERATOR></HEAD>
<BODY class=3D"" id=3Dbdy>
<DIV id=3Dpage-block><!-- region_user_header.php -->
<DIV id=3Dlogin-block><SPAN id=3Duser-header> </SPAN> <SPAN =
id=3Dlogin-prompt><A=20
href=3D"http://dojotoolkit.org/user">Login</A></SPAN> <SPAN =
id=3Dregister-prompt><A=20
href=3D"http://dojotoolkit.org/user/register">Register</A></SPAN> =
</DIV><!-- /region_user_header.php -->
<DIV id=3Dbody-block><!-- region_header.php -->
<DIV id=3Dlogo-block>
<DIV id=3Ddojo-logo><A title=3DHome =
href=3D"http://dojotoolkit.org/"><IMG=20
id=3Ddojo-logo-img alt=3D"The Dojo Toolkit"=20
src=3D"http://dojotoolkit.org/sites/all/themes/dtk/img/banner-logo-text.g=
if"></A>=20
</DIV>
<DIV id=3Dsearch-block>
<FORM id=3Dsearch-theme-form action=3D/search/node method=3Dpost>
<DIV>
<H6 class=3Dhidden><LABEL =
for=3Dsearch_theme_form_keys>Search</LABEL></H6>
<DIV class=3Dcontainer-inline id=3Dsearch>
<DIV class=3Dform-item><INPUT class=3Dform-text =
id=3Dedit-search-theme-form-keys=20
title=3D"Enter the terms you wish to search for." maxLength=3D128 =
size=3D25=20
name=3Dsearch_theme_form_keys><BUTTON class=3Dform-submit =
id=3Dedit-submit-1 name=3Dop=20
type=3Dsubmit><SPAN class=3Dhidden>Search</SPAN></BUTTON> <INPUT=20
id=3Dedit-search-theme-form type=3Dhidden value=3Dsearch_theme_form =
name=3Dform_id>=20
<INPUT id=3Da-unique-id type=3Dhidden =
value=3D3f69e328cbd47ff457e4b25037ebd4be=20
name=3Dform_token> </DIV></DIV></DIV></FORM></DIV></DIV><!-- =
/region_header.php -->
<DIV id=3Dglobal-menu-block>
<UL id=3Dglobal-menu>
<LI id=3Dnav-about><A class=3Dplink =
href=3D"http://dojotoolkit.org/about">About</A>=20
<LI id=3Dnav-demos><A class=3Dplink =
href=3D"http://dojotoolkit.org/demos">Demos</A>=20
<LI id=3Dnav-downloads><A class=3Dplink=20
href=3D"http://dojotoolkit.org/downloads">Downloads</A>=20
<LI id=3Dnav-documentation><A class=3Dplink=20
href=3D"http://dojotoolkit.org/docs">Documentation</A>=20
<LI id=3Dnav-support><A class=3Dplink=20
href=3D"http://dojotoolkit.org/support">Support</A>=20
<LI id=3Dnav-community><A class=3Dplink=20
href=3D"http://dojotoolkit.org/community">Community</A>=20
<LI id=3Dnav-fullmenu><A onclick=3D"return false;"=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/perfor=
mance-optimization#fullmenu">Full=20
Menu</A> </LI></UL></DIV><!-- region_banner.php -->
<DIV class=3Dbanner-docs id=3Dbanner-block>
<DIV id=3Dsection-heading>
<P>Documentation</P></DIV>
<DIV id=3Dsection-subheading>
<P>learn about the dojo toolkit</P></DIV></DIV><!-- /region_banner.php =
-->
<DIV id=3Dtop-breadcrumb-block>
<DIV class=3Dbreadcrumb><A href=3D"http://dojotoolkit.org/">Home</A> =
=C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A> =C2=BB <A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo-0">Par=
t 4:=20
Testing, Tuning and Debugging</A> =C2=BB Performance =
Optimization</DIV></DIV>
<DIV id=3Dcontent-block>
<DIV class=3Dcols-narrow-wide>
<DIV class=3D"col-a content-region-container" =
id=3Dsidebar-left-container>
<DIV class=3Dcontent-block><!-- Block: menu -->
<DIV class=3D"block block-menu" id=3Dblock-menu-572>
<H2 class=3Dtitle>The Book of Dojo</H2>
<DIV class=3Dcontent>
<UL class=3Dmenu>
<LI class=3Dexpanded id=3Dmenu-item-296><A=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-9-0">The Book of =
Dojo</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-312><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/quick-=
installation">Quick=20
Installation</A>=20
<LI class=3Dleaf id=3Dmenu-item-652><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial">H=
ello=20
World</A>=20
<LI class=3Dleaf id=3Dmenu-item-651><A=20
=
href=3D"http://dojotoolkit.org/book/book-dojo/part-4-meta-dojo-making-you=
r-dojo-code-run-faster-and-better/debugging-facilities/deb">Debugging=20
Tutorial</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-297><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/introduction">Introduct=
ion</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-324><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo-0">Par=
t 1:=20
Life With Dojo</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-298><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0">Part =
2:=20
Dijit</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-299><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dij=
it-and-dojo-0">Part=20
3: JavaScript With Dojo and Dijit</A>=20
<LI class=3Dexpanded id=3Dmenu-item-300><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo-0">Par=
t 4:=20
Testing, Tuning and Debugging</A>=20
<UL class=3Dmenu>
<LI class=3Dleaf id=3Dmenu-item-506><A=20
title=3D"Downloading Dojo using Subversion"=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/using-=
subversion">Using=20
Subversion</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-409><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/develo=
pment-tools">Development=20
Tools</A>=20
<LI class=3Dcollapsed id=3Dmenu-item-414><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/debugg=
ing-facilities">Debugging=20
Facilities</A>=20
<LI class=3Dleaf id=3Dmenu-item-490><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/d-o-h-=
unit-testing">D.O.H.=20
Unit Testing</A>=20
<LI class=3Dleaf id=3Dmenu-item-420><A class=3Dactive=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/perfor=
mance-optimization">Performance=20
Optimization</A>=20
<LI class=3Dleaf id=3Dmenu-item-419><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/packag=
e-system-and-custom-builds">The=20
Package System and Custom Builds</A> </LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-301><A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-5-dojox-extensions=
-dojo-0">Part=20
5: DojoX</A> </LI></UL>
<LI class=3Dcollapsed id=3Dmenu-item-54><A title=3D"The Dojo Book, =
0.4"=20
href=3D"http://dojotoolkit.org/book/dojo-book-0-4">The Dojo Book, =
0.4</A>=20
</LI></UL></DIV></DIV></DIV></DIV>
<DIV class=3D"col-b content-region-container">
<DIV id=3Dmain-container><!-- main_content region -->
<H2>Performance Optimization</H2><!--Node: -->
<DIV class=3Dnode>
<DIV class=3Dsubmitted>Submitted by Carla on Wed, 06/06/2007 - =
21:42.</DIV>
<DIV class=3Dcontent>
<P>So you've built an application using Dojo and it "feels slow". Now =
what?=20
Unfortunately, you can't send the latest Dual Core processors to your =
users But=20
fortunately, experience has taught us that in JavaScript, smaller =3D =
faster, no=20
matter what the client. So basically, you want to concentrate on the =
size of=20
your pages. The smaller they are, the less time it takes to download, =
parse and=20
execute them.=20
<P>By default, all dojo.require() statements try to find the module in =
memory=20
first. If it's not present, it will ask the server for a "full sized" =
version of=20
the code in a synchronous manner , and incurring network I/O overhead.=20
Synchronous network requests from a browser are necessary for loading =
external=20
code because it's the only way to block execution of JavaScript while=20
dependencies are satisfied. Once the code is fecthed it is then eval()'d =
and=20
execution picks up after the dojo.require() statement. </P>
<P>Unfortunately synchronous IO requests also have the effect of =
"locking" the=20
UI of the browser, preventing loading other resources affecting the =
layout of=20
the page. Each request is serial. The package system doesn't know enough =
to try=20
to request multiple files at once. To be fair, scripts included in a =
page via=20
the <script> tag also suffer from the same serial behavior.</P>
<P>But there are still plenty of things you can do:</P>
<UL>
<LI>
<P>Use Dojo's custom build system. A custom build of Dojo will improve =
the=20
download of the page by grouping related modules into one script, and=20
optimizing it for fast parsing. See <A=20
=
href=3D"http://dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/packag=
e-system-and-custom-builds">The=20
Package System and Custom Builds</A> for more information.</P>
<LI>Configure the web server to cache JavaScript files aggressively =
and send=20
status information quickly. Servers that don't send adequate cache =
information=20
may find that UIs are very slow even when the script content isn't =
sent.=20
Instead, browsers may be checking to see if the file has changed since =
it was=20
last seen. This "has it changed?" check is synchronous and serial and =
so we=20
want to eliminate it if possible.=20
<LI>Use data compression and application program structure as your =
server=20
permits. See the article <A=20
=
href=3D"http://lazutkin.com/blog/2007/feb/1/improving-performance/">Impro=
ving=20
performance of Dojo-based web applications</A> which contains useful=20
information on these topics.=20
<LI>If you find IE is repeatedly downloading the same image, read <A=20
href=3D"http://ahinea.com/en/tech/ie-dhtml-image-caching.html">this =
article</A>=20
for advice. This also helps get rid of ugly image flickering in IE.=20
<LI>Reduce then number of tags on a page.=20
<P>It sounds obvious, but many web pages have a lot of unnecessary =
markup. For=20
example, instead of=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/table.html"><SPAN=20
class=3Dkw2><table</SPAN></A> ...<SPAN =
class=3Dkw2>></SPAN></SPAN><SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/br.html"><SPAN=20
class=3Dkw2><BR></SPAN></A></SPAN><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></BR></SPAN></SPAN> <SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/tr.html"><SPAN=20
class=3Dkw2><tr></SPAN></A></SPAN><BR><SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/td.html"><SPAN=20
class=3Dkw2><td></SPAN></A></SPAN>Hello World<SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></td></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></tr></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></table></SPAN></SPAN></DIV>just do:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/div.html"><SPAN=20
class=3Dkw2><div</SPAN></A> <SPAN class=3Dkw3>class</SPAN>=3D<SPAN=20
class=3Dst0>"foo"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN>Hello =
World<SPAN=20
class=3Dsc2><SPAN class=3Dkw2></div></SPAN></SPAN></DIV>To =
achieve this, you=20
definitely want to leverage CSS. The web standards movement has =
championed=20
this approach, and Dijit uses it for reducing the widget download =
time.=20
<LI>Instead of downloading your whole page at once, defer portions =
until the=20
user needs them. The judicious use of <A=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -