我爱Aspx >> Asp.Net >> 加快 DHTML 的一组技巧- :未知 Դ:internet :2007-5-5 19:50:56 ؼ:
- 使用 DOM 方法建立大表。
请显示 慢：
var row; var cell; for (var i=0; i<100; i++) { row = tblUpdate.insertRow(); for (var j=0; j<10; j++) { cell = row.insertCell(); cell.innerText = "第 " + i + " 行，第 " + j + " 单元格"; } } 快：
var row; var cell; var tbody = tblUpdate.childNodes[0]; tblUpdate.appendChild( tbody ); for (var i=0; i<100; i++) { row = document.createElement( "TR" ); tbody.appendChild( row ); for (var j=0; j<10; j++) { cell = document.createElement( "TD" ); row.appendChild( cell ); cell.innerText = "第 " + i + " 行，第 " + j + " 单元格"; } }
编写一次，使用多次
如果您的 Web 站点使用脚本来执行一些常用操作，可以考虑将这些功能放到独立的文件中，以便可以由多个 Web 页面重复使用。这样做，不仅可以改善代码的维护性，而且使该脚本文件保留在浏览器的缓存中，从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。
要更好地利用脚本重用功能，请将常用的脚本操作放到 DHTML 附加代码或元素行为（英文）中。行为提供了一个有效的方法，用于重用脚本和建立从 HTML 访问的组件，并使您可用自己的对象、方法、属性和事件来扩展 DHTML 对象模型。对于未使用 viewlink（英文）功能的行为，可以考虑使用 Internet Explorer 5.5 中的 lightweight（英文）行为特性进行更有效的代码封装。另外，如果您的脚本代码在一个 SCRIPT（英文）块中，会获得更高的性能。技巧 7： 通过将常用代码放到行为或独立文件中来重用脚本。 请勿过多使用动态属性
动态属性（英文）为 Web 作者提供了一种将表达式用作属性值的方法。表达式在运行时计算，其结果值将应用于属性。这是一个强大的特性。此特性可用于减少页面上的脚本数量，但是因为必须定时重算表达式，而且该表达式经常与其他属性值相关，所以它会对性能带来消极的影响。这种情况对定位属性尤其明显。技巧 8： 限制使用动态属性。 数据绑定很有效
数据绑定（英文）是一个强大的功能，它使您可以将数据库查询的结果或 XML 数据岛（英文）的内容，绑定至 Web 页面上的 HTML 元素。您无需返回服务器提取数据，就可以提供数据排序和过滤功能，以及不同的数据视图。设想一个 Web 页面可以将公司的数据显示为折线图、条形图或饼图，还具有将数据按办公室、产品或销售阶段排序的按钮，而且所有这些功能只需要访问一次服务器就能实现。
