加快DHTML的一组技巧
2008-02-23 09:41:29来源:互联网 阅读 ()
目录
简介
成批处理 DHTML 更改
使用 innerText
使用 DOM 添加单个元素
扩展 SELECT 元素中的选项
用 DOM 更新表
编写一次,使用多次
请勿过多使用动态属性
数据绑定很有效
不要在 document 对象中设置 expando 属性
避免切换类和样式规则
查找父项之前,先折叠文本范围
其他资料
简介
动态 HTML (DHTML) 在 Microsoft® Internet Explorer 4.0 中的引入,使 Web 作者和开发人员可以使用新的编程模型。此后,Web 作者充分利用了这个强大的特性来提供动态内容、样式和定位,使 Web 用户得以体验丰富的交互式功能。DHTML 的灵活性使得通常会有多种方式可以实现您的构思。理解 Internet Explorer 的 HTML 分析和显示组件如何处理请求,可帮助您确定完成工作的最佳方法。本文介绍了某些 DHTML 功能对性能的重大影响,并提供了一些提高页面性能的技巧。
成批处理 DHTML 更改
在 DHTML Web 页面上,提高性能的最有效方法是改进对页面上 HTML 内容的更改。有多种方法可以更新 Web 页面,了解这一点非常重要。从客户的反馈来看,Web 作者可以应用 HTML 文本块,也可以通过使用 [url href=http://msdn.microsoft.com/workshop/author/om/doc_object.asp]DHTML 对象模型[/url](英文)或 [url href=http://msdn.microsoft.com/workshop/author/dom/domoverview.asp]W3C 文档对象模型 (DOM)[/url](英文)来访问个别 HTML 元素。无论何时更改 HTML 内容,Internet Explorer 的 HTML 分析和显示组件都必须重新组织该页面的内部表现形式,重新计算文档布局和文档流,并显示这些变化。虽然实际性能由 Web 页面的内容和您所作的更改决定,但是这些操作代价都比较大。如果您应用 HTML 文本块,而不是个别访问元素,则必须调用 HTML 分析器,这将导致额外的性能开销。接受 HTML 文本的方法和属性包括 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacenthtml.asp]insertAdjacentHTML[/url](英文)和 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/pastehtml.asp]pasteHTML[/url](英文)方法,以及 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp]innerHTML[/url](英文)和 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/outerhtml.asp]outerHTML[/url](英文)属性。 技巧 1:在一个脚本函数中对 HTML 内容进行更改。如果您的设计使用了多个事件处理程序(例如响应鼠标移动),则应集中进行更改。
HTML 分析和显示组件的另一项重要事实是:一旦脚本返回控制(例如,当脚本事件处理函数退出时,或者当调用 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/settimeout.asp]setTimeout[/url](英文)等方法时),该组件将重新计算布局并显示 Web 页面。现在,您已经了解 Internet Explorer 如何处理变化,下面将开始提高 Web 页面的性能。 技巧 2:建立一个 HTML 字符串并对文档进行一次更改,而不是进行多次更新。如果 HTML 内容不是必要的,可考虑使用 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innertext.asp]innerText[/url](英文)属性。
在以下示例中,速度较慢的方法每次设置 innerHTML 属性时都调用 HTML 分析器。要提高性能,可以先建立一个字符串,然后将其分配给 innerHTML 属性。
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip2.asp]请显示[/url]
慢:
divUpdate.innerHTML = ""; for ( var i=0; i<100; i ) { divUpdate.innerHTML = "<SPAN>这是一个较慢的方法!</SPAN>"; }
快:
var str=""; for ( var i=0; i<100; i ) { str = "<SPAN>因为使用字符串,此方法较快!</SPAN>"; } divUpdate.innerHTML = str;
有关详细信息,请参见[url href=http://msdn.microsoft.com/workshop/author/dyncontent/content.asp]动态内容[/url](英文)。
使用 innerText
DHTML 对象模型通过 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innertext.asp]innerText[/url](英文)属性访问 HTML 元素的文本内容,而 W3C DOM 则提供一个独立的子文本节点。直接通过 innerText 属性更新元素的内容,比调用 DOM [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createtextnode.asp]createTextNode[/url](英文)方法更快。 技巧 3:使用 innerText 属性更新文本内容。
以下示例显示了如何使用 innerText 属性提高性能。
[url href=http://www.microsoft.com/china/msdn/msdnonline/features/articles/tip3.asp]请显示[/url]
慢:
var node; for (var i=0; i<100; i ) { node = document.createElement( "SPAN" ); node.appendChild( document.createTextNode( "使用 createTextNode() ") ); divUpdate.appendChild( node ); }
快:
var node; for (var i=0; i<100; i ) { node = document.createElement( "SPAN" ); node.innerText = "使用 innerText 属性"; divUpdate.appendChild( node ); }
使用 DOM 添加单个元素
如前所述,应用 HTML 文本的访问方法将导致调用 HTML 分析器,从而会降低性能。因此,使用 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp]createElement[/url](英文)和 [url href=http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertadjacentelement.asp]insertAdjacentElement[/url](英文)方法添加元素比调用一次 insertAdjacentHTML 方法快。 技巧 4:调用 createElement 和 insertAdjacentElement 方法比调用 insertAdjacentHTML 方法快。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:结束ADOVB.INC的办法
下一篇:聊天室关键技术[用户断线]处理
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash