[转帖] 加快 DHTML 的一组技巧,吐血推荐!!!!!!!!

转身就走

Julia

版主

Rank: 9 Rank: 9 Rank: 9

经常被模仿，从未被超越

UID: 68188
帖子: 5351
精华: 7
积分: 3421
菊花元: 521 元
威望: 58 点
阅读权限: 100
在线时间: 942 小时
注册时间: 2005-6-12
最后登录: 2008-12-4

顶楼大中小发表于 2007-2-21 15:14 只看该作者

加快 DHTML 的一组技巧,吐血推荐!!!!!!!!

声明一下:此内容来自MSDN CHINA
# C9 k) O" r6 t( o3 L/ w
( H, k& _/ S3 q2 G: c( @7 h加快 DHTML 的一组技巧" E8 s& j, b+ `
Mark Davis2 Y" Z2 z& ?5 u& R: g* _7 `+ }
Microsoft Corporation
0 U' u3 o, Z A6 j$ w! b
摘要：本文说明了某些 DHTML 功能对性能的重大影响，并提供了一些提高 DHTML 页面性的技巧。 `; h5 `; R" C8 i- F

目录6 N- E& A' d7 z1 T; _+ P+ p9 u

简介! ?0 Z0 w* g/ b; J
成批处理 DHTML 更改
使用 innerText- ^( x c. m3 x5 ~: E7 I8 {
使用 DOM 添加单个元素" F% A: M% ^' k! q' x2 S t9 w
扩展 SELECT 元素中的选项. Z& r1 Y- {6 q. {2 U& S. K: \
用 DOM 更新表9 \+ Y' r2 S1 q U# }
编写一次，使用多次, E% E8 Q8 V; C8 ?- I5 Y" |3 u
请勿过多使用动态属性1 B* O% Q8 Q& f `' Z; L
数据绑定很有效% Z4 z+ I: k2 K) v1 |. L+ g$ @
不要在 document 对象中设置 expando 属性
避免切换类和样式规则
查找父项之前，先折叠文本范围
其他资料
" V5 s' a: a0 }" F
简介
动态 HTML (DHTML) 在 Microsoft® Internet Explorer 4.0 中的引入，使 Web 作者和开发人员可以使用新的编程模型。此后，Web 作者充分利用了这个强大的特性来提供动态内容、样式和定位，使 Web 用户得以体验丰富的交互式功能。DHTML 的灵活性使得通常会有多种方式可以实现您的构思。理解 Internet Explorer 的 HTML 分析和显示组件如何处理请求，可帮助您确定完成工作的最佳方法。本文介绍了某些 DHTML 功能对性能的重大影响，并提供了一些提高页面性能的技巧。9 \5 t& w p8 M V2 ^
( @8 E0 E, k C; }! q
成批处理 DHTML 更改
在 DHTML Web 页面上，提高性能的最有效方法是改进对页面上 HTML 内容的更改。有多种方法可以更新 Web 页面，了解这一点非常重要。从客户的反馈来看，Web 作者可以应用 HTML 文本块，也可以通过使用 DHTML 对象模型（英文）或 W3C 文档对象模型 (DOM)（英文）来访问个别 HTML 元素。无论何时更改 HTML 内容，Internet Explorer 的 HTML 分析和显示组件都必须重新组织该页面的内部表现形式，重新计算文档布局和文档流，并显示这些变化。虽然实际性能由 Web 页面的内容和您所作的更改决定，但是这些操作代价都比较大。如果您应用 HTML 文本块，而不是个别访问元素，则必须调用 HTML 分析器，这将导致额外的性能开销。接受 HTML 文本的方法和属性包括 insertAdjacentHTML（英文）和 pasteHTML（英文）方法，以及 innerHTML（英文）和 outerHTML（英文）属性。

技巧 1：在一个脚本函数中对 HTML 内容进行更改。如果您的设计使用了多个事件处理程序（例如响应鼠标移动），则应集中进行更改。 7 x- S% g6 l- l& x$ e$ b
! ]2 g6 t" s' U9 M0 p7 Q

HTML 分析和显示组件的另一项重要事实是：一旦脚本返回控制（例如，当脚本事件处理函数退出时，或者当调用 setTimeout（英文）等方法时），该组件将重新计算布局并显示 Web 页面。现在，您已经了解 Internet Explorer 如何处理变化，下面将开始提高 Web 页面的性能。

技巧 2：建立一个 HTML 字符串并对文档进行一次更改，而不是进行多次更新。如果 HTML 内容不是必要的，可考虑使用 innerText（英文）属性。

% j2 g! u6 @ l7 h
在以下示例中，速度较慢的方法每次设置 innerHTML 属性时都调用 HTML 分析器。要提高性能，可以先建立一个字符串，然后将其分配给 innerHTML 属性。- j6 A1 `7 P# H5 K! s' s9 A [
6 B7 l, S+ d: J O8 ?% R- ~
请显示% v+ a' ^6 A& H3 W3 I6 w3 h; C* E' ^

慢：
; a% @. v: `! e+ M! K
divUpdate.innerHTML = "";
for ( var i=0; i<100; i++ )
{9 H# p* C* T, P& L9 Y; R
divUpdate.innerHTML += "<SPAN>这是一个较慢的方法！</SPAN>";
}( }* {: F" L% b

快：' h2 y+ ^4 _ a0 K n
, {- m5 U g+ f+ w8 _. w' g4 Z. e
var str="";/ `4 P$ ^% v" o/ J" y: v
for ( var i=0; i<100; i++ )
{" z6 X% F3 g0 e0 E& P$ _! d( f1 k
str += "<SPAN>因为使用字符串，此方法较快！</SPAN>";
}# ~! ~/ C" g' O2 f
divUpdate.innerHTML = str;- w% o- J/ @# b- `( [* O
+ ~6 R9 m$ H9 S
有关详细信息，请参见动态内容（英文）。
9 Y( f1 [4 I3 O3 W! ]/ U- N/ f. P3 P W
使用 innerText7 z- A4 V/ R! Y; ^6 D& g
DHTML 对象模型通过 innerText（英文）属性访问 HTML 元素的文本内容，而 W3C DOM 则提供一个独立的子文本节点。直接通过 innerText 属性更新元素的内容，比调用 DOM createTextNode（英文）方法更快。2 r) r$ r6 l, ]
* |6 f( {3 r& u7 z# }0 a! ]
技巧 3：使用 innerText 属性更新文本内容。
# h3 X# x* a* F
! g7 Q9 e/ E! n6 b" F, s
以下示例显示了如何使用 innerText 属性提高性能。# s% o/ b4 o+ R: I& t
7 y% a' b7 |6 a$ ? [- F+ |
请显示' u+ e5 r1 C1 b8 \2 ^0 F4 v2 k0 U7 Q
, f% P' T, Z. X3 o* {
慢：0 R8 ~" H7 h% o! X- ?4 m" i0 y/ z

var node;; Y+ L# s) u+ }$ ?" x
for (var i=0; i<100; i++)+ w. m! P- ]4 `2 N' y# o5 q2 r
{* A$ u( z! }; X
node = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "使用 createTextNode() ") );& C( z$ q* g: ~" A4 R9 B- o% c; K; C1 G
divUpdate.appendChild( node );
}

快：2 r+ t k1 Y* A# V- O' V- o4 b" n
9 T2 b: |3 n6 L1 T8 C: R4 v
var node;
for (var i=0; i<100; i++)7 J+ g5 N, Y3 _+ S0 Z! d
{
node = document.createElement( "SPAN" );
node.innerText = "使用 innerText 属性";/ X$ }6 G4 Z& I
divUpdate.appendChild( node );# p2 f: c( `3 X Y: N
}

使用 DOM 添加单个元素 w; t0 r, z" c/ ~
如前所述，应用 HTML 文本的访问方法将导致调用 HTML 分析器，从而会降低性能。因此，使用 createElement（英文）和 insertAdjacentElement（英文）方法添加元素比调用一次 insertAdjacentHTML 方法快。5 P1 P9 N; ~$ C' F5 E2 t# Q7 e

技巧 4：调用 createElement 和 insertAdjacentElement 方法比调用 insertAdjacentHTML 方法快。 & x; V! b1 p @1 g
+ I y% x2 h7 S" ~* c$ i

成批处理 DHTML 更新并调用一次 insertAdjacentHTML 方法可以提高性能，但是有时直接通过 DOM 创建元素效率更高。在下面的方案中，您可以尝试一下这两种方法并确定哪一种更快。

请显示
6 T' P; ~- T* ^" B! f
慢：

for (var i=0; i<100; i++)
{8 R) W& M2 I! }! l7 Q% |* K
divUpdate.insertAdjacentHTML( "beforeEnd", "<SPAN> 使用 insertAdjacentHTML() </SPAN>" );
}8 S/ P1 y H% T5 B0 X! E/ ]- t
5 h9 W1 j9 L& p% H0 v- y
快：7 n- h3 c9 x; Z+ F/ t& k! b$ `
- |( }# K# t4 d8 P- ]
var node;
for (var i=0; i<100; i++)& V3 W q4 X w# v! E
{
node = document.createElement( "SPAN" );3 c" ~6 \0 T* G
node.innerText = " 使用 insertAdjacentElement() ";# o$ T% h+ W9 r$ `- w! P
divUpdate.insertAdjacentElement( "beforeEnd", node );
}
& l! @ P) C. a; j
扩展 SELECT 元素中的选项0 i3 s" Z, {1 j9 c4 [4 F# \
对于上一条使用 HTML 文本方法的规则来说，将大量 OPTION（英文）元素添加到 SELECT（英文）中的情况是一种例外。这时候，使用 innerHTML 属性比调用 createElement 方法访问选项集合效率更高。

技巧 5：使用 innerHTML 将大量选项添加到 SELECT 元素中。 + X! |- g- E& J

0 s! r; V9 w; E1 Q+ I M
使用字符串连接操作来建立 SELECT 元素的 HTML 文本，然后使用此技巧设置 innerHTML 属性。对于数量特别大的选项，字符串连接操作也会影响性能。在此情况下，请建立一个数组并调用 Microsoft JScript® join（英文）方法来执行 OPTION 元素 HTML 文本的最终连接。3 Y0 g. n! \7 [5 T9 n2 V9 i+ \' ]* X
/ i+ M, V: Q6 c& ]
请显示
$ x: P3 l- O- l3 B
慢：/ e0 Q$ w& H: Q

var opt;
divUpdate.innerHTML = "<SELECT ID='selUpdate'></SELECT>";
for (var i=0; i<1000; i++)
{, y; ?$ J2 p; V$ `, R! W
opt = document.createElement( "OPTION" );
selUpdate.options.add( opt );
opt.innerText = "第 " + i + " 项";, v4 r: T' v7 \% @
}/ }6 ~5 C' ]0 ~0 B
% J0 `: [ D7 i0 J! h8 {
快：2 s. `* l O: Z1 B3 b# g
/ O8 i& K+ n p
var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)# k( X x Q1 A p
{ w) ?5 L# I$ I' t1 E" ]
str += "<OPTION>第 " + i + " 项</OPTION>";
}
str += "</SELECT>";" ~: T6 g* h! L6 w2 F0 C# v
divUpdate.innerHTML = str;
& `6 B' A9 S2 v+ t- l( K
更快：: \. Q; V8 I' t6 \! P
9 n, \/ B0 M- Z2 Y
var arr = new Array(1000);4 i' a+ J) ]" v( }. Y- P
for (var i=0; i<1000; i++)! y; y5 ], Z6 _& m7 s2 l# [+ e$ x
{
arr ［i］ = " <OPTION>第 " + i + " 项</OPTION>";
}3 R2 ^/ Z4 ]7 s5 b+ S* F# C
divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";

用 DOM 更新表8 F+ ?3 p w5 l' u* R" j) w: d
使用 DOM 方法插入表的行和单元格比使用 insertRow（英文）和 insertCell（英文）方法（DHTML table 对象模型的一部分）效率更高。尤其在创建大的表时，效率上的差别更加明显。2 K' L V3 P/ w
' o/ b9 V- Z' p( x! K4 r8 E: H. k( Q: F
技巧 6：使用 DOM 方法建立大表。 ( |$ l; h) V7 T% \3 s

请显示. s7 S t9 v4 T+ v
. m4 U% n S2 K2 c2 M
慢：

var row;
var cell;
for (var i=0; i<100; i++)
{
row = tblUpdate.insertRow();
for (var j=0; j<10; j++)
{
cell = row.insertCell();6 M% k+ J$ N. G3 [5 p6 |+ p5 ~
cell.innerText = "第 " + i + " 行，第 " + j + " 单元格";+ S* p5 w) ~3 ]
}$ w0 i c, `3 k* t9 \4 ]) S
}

快：- Q& u$ b2 `/ O' x
7 o, q# d, j2 o
var row;
var cell;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild( tbody );
for (var i=0; i<100; i++)1 o9 f c# v& e7 c2 P
{
row = document.createElement( "TR" );
tbody.appendChild( row );: e4 M$ X: z% b# G$ X% A
for (var j=0; j<10; j++)) c9 w# y. l) j. \1 R
{# d& s) s; X3 J8 t# Z
cell = document.createElement( "TD" );& k1 ?5 |/ i. ^" u6 N) ~
row.appendChild( cell );& ?, q) V1 W% D. y* i2 `" ?8 E6 g
cell.innerText = "第 " + i + " 行，第 " + j + " 单元格"; e& o/ }4 b# u8 s) f
}
}

编写一次，使用多次8 {8 u4 E) m8 |% u3 l! j. ~
如果您的 Web 站点使用脚本来执行一些常用操作，可以考虑将这些功能放到独立的文件中，以便可以由多个 Web 页面重复使用。这样做，不仅可以改善代码的维护性，而且使该脚本文件保留在浏览器的缓存中，从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。
5 V( n9 \5 b9 C+ n, k0 o
技巧 7：通过将常用代码放到行为或独立文件中来重用脚本。 8 S& |. h" P: e! ^6 _2 j

要更好地利用脚本重用功能，请将常用的脚本操作放到 DHTML 附加代码或元素行为（英文）中。行为提供了一个有效的方法，用于重用脚本和建立从 HTML 访问的组件，并使您可用自己的对象、方法、属性和事件来扩展 DHTML 对象模型。对于未使用 viewlink（英文）功能的行为，可以考虑使用 Internet Explorer 5.5 中的 lightweight（英文）行为特性进行更有效的代码封装。另外，如果您的脚本代码在一个 SCRIPT（英文）块中，会获得更高的性能。! P+ V$ I4 b. w7 j! R" m3 E# H3 h
6 L" s8 a/ \8 O2 K
请勿过多使用动态属性: q& Y2 \# J& F2 L3 i
动态属性（英文）为 Web 作者提供了一种将表达式用作属性值的方法。表达式在运行时计算，其结果值将应用于属性。这是一个强大的特性。此特性可用于减少页面上的脚本数量，但是因为必须定时重算表达式，而且该表达式经常与其他属性值相关，所以它会对性能带来消极的影响。这种情况对定位属性尤其明显。. L l" j, r6 g6 W7 ~! A# k& Y
4 B, T/ {9 ?. }& e2 `
技巧 8：限制使用动态属性。 $ O5 a$ Z4 [, |0 N1 m
( k/ |0 T+ D' ]$ Q

数据绑定很有效
数据绑定（英文）是一个强大的功能，它使您可以将数据库查询的结果或 XML 数据岛（英文）的内容，绑定至 Web 页面上的 HTML 元素。您无需返回服务器提取数据，就可以提供数据排序和过滤功能，以及不同的数据视图。设想一个 Web 页面可以将公司的数据显示为折线图、条形图或饼图，还具有将数据按办公室、产品或销售阶段排序的按钮，而且所有这些功能只需要访问一次服务器就能实现。
) b& w+ ~4 |# W+ x
技巧 9：使用数据绑定来提供丰富的客户端数据视图。 ' F& U6 S. V4 k2 T

有关数据绑定的详细信息，请参见以下文章： ; a' ]+ M8 A9 b8 e; N1 S

数据绑定概述（英文）2 B/ S6 Z0 A5 C8 X+ r) D' m
. C- j/ I3 m9 ` L: E- c7 r7 h, \
绑定页面数据（英文）
' P. Q U8 I' a' W# ?; u4 K6 P1 b
倾斜的、平均的和事实上的数据绑定（英文） ( O) U9 h' W" l2 n
不要在 document 对象中设置 expando 属性 k: R# C/ z h/ Z1 @1 g3 s6 {
expando（英文）属性可以添加至任何对象。此属性非常有用，它可以存储当前 Wed 页面内的信息，并提供了另一种扩展 DHTML 对象模型的方法。例如，您可以给 DHTML 元素指定一个 clicked 属性，用此属性提示用户已经单击了哪一个元素。在引发事件时，也可以使用 expando 属性，向事件处理函数提供更多的上下文信息。无论您如何使用 expando 属性，切记不要在 document（英文）对象上设置它们。如果您这样做，则当您访问该属性时，文档必须执行额外的重算操作。; T, k, c/ `, d7 g+ F, v2 A
" ~0 b5 y8 M: K X! `0 F, i1 E4 }$ U
技巧 10：在 window（英文）对象上设置 expando 属性。 $ u' Q& N' Z1 e8 H5 I/ ~* u% W
' Y9 ?% a! {+ F& i0 p4 {
4 f/ f5 a! r8 H1 t6 ?& h6 C* C$ ]
请显示
+ O* _- {$ g& f9 o
慢：, ^6 w: k6 C& ^1 O

for (var i=0; i<1000; i++)' n- R1 R/ R1 Z- I
{
var tmp;6 q, C. T7 c9 k! v' {" j
window.document.myProperty = "第 " + i + " 项";' b& {! r& V3 _" `- L$ O2 {1 h; ?
tmp = window.document.myProperty;6 c& R, `; x0 V4 l
}: I4 e( o0 w, P: }: W7 F: J3 P; U6 x& t
$ M6 j/ z# t8 T' O n
快：

for (var i=0; i<1000; i++)% W/ q; ?1 w7 W3 O, V! z: D
{6 [# w+ G) W9 ]9 F$ n- A# v
var tmp;7 c4 _7 s7 K% X. e1 T
window.myProperty = "第 " + i + " 项";
tmp = window.myProperty;& W% {6 f" V- D ^
}- H* {% d+ l4 m `
9 I7 _0 U8 p5 L, @
避免切换类和样式规则
切换类和样式规则是一种代价非常高的操作，需要重新计算并调整整个文档的布局。如果您的 Web 站点使用样式表来提供内容的备用视图，可以考虑直接修改要更改的元素的 style（英文）对象，而不是修改元素的 className（英文）属性或与类关联的 styleSheet（英文）对象。

技巧 11：在更改内容的外观时，直接修改 style 对象。

查找父项之前，先折叠文本范围
TextRange（英文）对象表示用户选定或从 HTML 元素中检索的一个文本区域，例如 BODY（英文）。通过调用 parentElement（英文）方法，可以标识文本范围的父项。对于复杂的文本范围，在调用 parentElement 方法之前，先调用 collapse（英文）方法效率会更高。: M4 b6 h% K( K1 }7 T( n
% u$ T3 n. d& j% j" g. b& G
技巧 12：在访问 parentElement 方法之前，先折叠文本范围。

有关详细信息，请参见使用 TextRange 对象（英文）。' o2 y& P4 W9 f$ D5 z9 b
% H1 S0 C( W8 F
其他资料
有关提高性能的其他技巧来源，请参见以下文章：

建立高性能 HTML 页面（英文）
8 b9 L+ [0 K$ B6 w$ i2 X5 Q
提高性能的更多技巧（英文）* N$ L5 s: J& a% b. S% L5 S

频繁的飞跃：提高 DHTML 页面的性能（英文）
4 A4 U% X' @; ?6 s. u( u
7 u9 [6 o3 S- H! r% |
Mark Davis 是 Internet Explorer SDK 文档组的软件设计工程师。他不懈地探索 Internet Explorer 的最新技术，不过有时也会到西北部去放松一下。

本帖最近评分记录