-
为使Web作者和开发人员使用一种新的编程模型而引入的。
这个强大的特性用于提供动态内容、样式和位置，使Web用户能够
经验丰富的交互功能，DHTML的灵活性使得它可以有很多方法来实现它
你的想法。了解IE的HTML分析，以及如何显示它如何处理它。
问，可以帮助你确定完成工作的最好方法。本文介绍了DHTML功能对
它具有重大的影响，并提供了一些改进页面性能的技巧。
DHTML更改批处理
在DHTML网页，以提高性能的最有效方法是提高网页上的HTML
更新网页的方法有很多种，从客户那里了解这一点非常重要。
从用户的反馈来看，网络作家可以将HTML文本块，或通过使用DHTML
对象模型（英文）或W3C文档对象模型（DOM）来访问单个HTML
元素。每当更改HTML内容时，Internet Explorer的HTML分析和显示。
有必要整理页面的内部表示和重新布局的文件和文档
流程，并显示这些更改。尽管实际的性能取决于Web页面的内容和所做的更改。
当然，但是这些操作很贵。如果你应用HTML文本块，而不是个人。
访问元素必须调用HTML分析器，这将导致额外的性能开销。
本文的方法和属性，包括insertadjacenthtml（英语）和pastehtml
方法，以及innerHTML（英文）和outerHTML属性（英文）。
技巧1：改变脚本函数中的HTML内容。
一个以上的事件处理程序，如对鼠标移动的响应，应该更加集中。
改变。
HTML分析和显示的另一个重要事实是，一旦脚本返回到控件（例如，
当脚本事件处理函数退出的时候，或当setTimeout（英语）的方法被称为，
这将重新布局和显示网页。现在你知道Internet Explorer
如何处理这些变化将开始改进Web页面的性能。
技巧2：创建一个HTML字符串并对文档进行更改，而不是更多。
二次更新。如果没有必要的HTML内容，考虑使用
InnerText（英语）的财产。
在下面的例子中，较慢的方法调用HTML每次innerHTML属性设置。
分析仪 u3002to提高性能，你可以先设置一个字符串，并将它分配给innerHTML
财产。
慢：
divupdate.innerhtml = ；
对于（var i = 0；i {）
divupdate.innerhtml =这是一个缓慢的方法！；
}
快：
var；
对于（var i = 0；i {）
由于使用字符串，此方法更快！；
}
divupdate.innerhtml = str；
使用innerText
DHTML对象模型访问的HTML元素的innerText属性文本（英文）
内容，和W3C DOM提供了一个独立的潜台词节点直接通过innerText属。
性更新元素的含量比调用DOM方法的作用是：快（英语）的方法。
技巧3：使用innerText属性更新文本内容。
下面的示例演示如何使用innerText属性来提高性能。
慢：
无功节点；
对于（var i = 0；i {）
节点= document.createelement（跨）；
node.appendchild（文件。作用是：）（使用createtext
Node（）
divupdate.appendchild（节点）；
}
快：
无功节点；
对于（var i = 0；i {）
节点= document.createelement（跨）；
node.innertext = 使用innerText属性；
divupdate.appendchild（节点）；
}
使用DOM添加单个元素
如前所述，HTML文本应用程序的访问方法将调用HTML解析器，从
它会降低性能。因此，使用createElement（英语）和insertadjacent
元素（英文）方法是更快地叫insertadjacenthtml方法添加一个元素比。
提示4：调用createElement方法和insertadjacentelement比电话
的insertadjacenthtml方法快速。
DHTML更新批处理和调用insertadjacenthtml方法可以改进
性能，但有时通过DOM直接创建元素更有效。
试试这两种方法，确定哪一种更快。
慢：
对于（var i = 0；i {）
DivUpdate.insertAdjacentHTML（beforeend ，使用插入）
AdjacentHTML（））；
}
快：
无功节点；
对于（var i = 0；i {）
节点= document.createelement（跨）；
node.innertext = 使用insertadjacentelement（）；
divupdate.insertadjacentelement（beforeend
}
扩展select元素中的选项
对于使用HTML文本方法的最后一条规则，有大量的选项（英文）
案件中的元素被添加到选择是个例外。在这个时候，使用innerHTML
性能比调用createElement方法访问选项的设置更有效。
技巧5：使用innerHTML添加大量的选项来选择元素。
使用字符串连接操作来构建select元素的HTML文本，并使用这个
该技术集的innerHTML属性，特别是大量的选项，字符串连接操作也将
影响性能。在这种情况下，请设置一个数组，调用微软Jｓｃｒｉｐｔ join
该方法用于执行选项元素HTML文本的最后连接。
慢：
变量选择；
divupdate.innerhtml =选择ID = 'selupdate '；
对于（var i = 0；i {）
选择= document.createelement（选项）；
SelUpdate.options.add（选择）；
opt.innertext =第一+我+项目；
}
快：
var str = 选择ID = 'selupdate '；
对于（var i = 0；i {）
选项选项；
}
=；
divupdate.innerhtml = str；
快：
var arr =新阵（1000）；
对于（var i = 0；i {）
ARR {我} = 选项> +我+项目/选项；
}
divupdate.innerhtml = 选择ID = 'selupdate+ arr.join（）+
；
用DOM更新表
行和单元格，使用DOM方法插入的表格进行比较，使用insertRow（英文）和插入
细胞（英文）方法（对DHTML表格对象模型的一部分）是更有效的，特别是在
当创建一个大表时，效率差异更明显。
技巧6：使用DOM方法设置一个大表。
慢：
无功行；
VaR的细胞；
对于（var i = 0；i {）
行= tblupdate.insertrow（）；
对于（var j = 0；j）
细胞= row.insertcell（）；
cell.innertext =第一+我+ ，+ J +细胞；
}
}
快：
无功行；
VaR的细胞；
VaR tbody = tblupdate子{ 0 }；
tblupdate.appendchild（把）；
对于（var i = 0；i {）
行= document.createelement（TR）；
tbody.appendchild（行）；
对于（var j = 0；j）
细胞= document.createelement（TD）；
row.appendchild（细胞）；
cell.innertext =第一+我+ ，+ J +细胞；
}
}
一次写，多次使用
如果您的Web站点使用脚本来执行一些常见操作，那么请考虑做这项工作。
可以放在一个单独的文件中，以便它可以被多个Web页面重用。
它可以提高代码的可维护性，并将脚本文件保存在缓存中，从而
你只需要在用户访问网站的时候把它下载到网站上。
可以在文件中获得相同的好处。
技巧7：通过在行为或独立文件中放置公共代码来重用脚本
为了更好地利用脚本的重用，把常见的脚本操作DHTML扩展
代码或元素行为（英文）。行为为重用脚本提供了一种有效的方法。
从HTML中建立访问权限，使您能够使用自己的对象、方法、属性和事件
扩展DHTML对象模型的行为，不使用viewlink（英文）功能，它可以
考虑在Internet Explorer 5.5中使用轻量级（英文）行为特性
更有效的代码封装。此外，如果脚本代码在脚本中（英文）。
在块中，将获得更高的性能。
不要使用太多的动态属性。
动态属性（英文）为Web作者使用表达式作为属性值提供了一种方法。
一个表达式在运行时计算，其结果值将应用于属性。这是一个强大的feature.this
属性可用于减少页上脚本的数量，但因为必须重新运行时间和表达式。
这种表达是经常与其他属性值有关，因此对所产生负面影响
位置属性的情况尤其明显。
技巧8：限制动态特性的使用。
数据绑定非常有效。
数据绑定（英文）是一个功能强大的特性，它允许您将查询连接到节点。
水果或XML数据岛的内容绑定到Web页面上的HTML元素。
为了返回提取的数据，您可以提供数据排序和过滤功能，以及不同的编号。
根据视图，想象一个网页，可以显示公司的数据作为一个折叠，酒吧，或馅饼。
图表还具有在办公室、产品或销售阶段对数据进行排序的按钮，以及所有这些按钮。
该函数只需要访问一次。
技巧9：使用数据绑定提供客户端数据的丰富视图。
不要在文档对象的扩展属性
expando（英文）属性可以添加到任何对象。这个属性是非常有用的，它可以
将信息存储在当前网页，提供了另一种方式来扩展DHTML对象模型
方法。例如，您可以指定一个点击属性的DHTML元素，这是因为此属性
这些元素被用户点击，一个事件的事件，也可以使用expando属性，
事件处理函数提供了更多的上下文信息。无论你如何使用expando属性，切
记住不要把它们放在文档（英文）对象上。
询问属性，文档必须执行额外的重试操作。
技巧10：设置expando属性窗口（英文）对象。
慢：
对于（var i = 0；i {）
VaR TMP；
Window.document.myProperty = first + I + item;
TMP = window.document.myproperty；
}
快：
对于（var i = 0；i {）
VaR TMP；
window.myproperty =第一+我+项目；
TMP = window.myproperty；
}
避免切换类和样式规则
开关类和文体规则是一个非常昂贵的操作，需要重新计算和调整。
一个文档的布局。如果您的网站使用样式表提供的内容备份视图，
要考虑直接修改要更改的元素的样式（英文）对象，而不是修改元素。
类名（英语）的属性或样式表（英文）对象与类关联。
技巧11：在更改内容外观时直接修改样式对象。
在找到父项之前，首先折叠文本范围。
TextRange对象的（英语）代表一个选定的或从HTML元素由用户
文本区域，如体。通过调用parentelement（英语）的方法，
父项的可识别的文本范围。对于复杂的文本范围，称parentelement
在方法之前，调用崩溃（英文）方法会更有效。
方法12：在访问parentelement方法、文本范围折叠第一。
摘录