Question

浅谈如何提高AJAX客户端响应速度

Answer 1

根据笔者的经验，导致这种结果的根本原因并不在AJAX 。很多时候系统响应速度的降低都是由不够合理的界面设计和不够高效的编程习惯造成的。下面我们就来分析几个 AJAX 开发过程中需要时刻注意的环节。<!-- [if !supportLists]-->n <!-- [endif]-->合理的使用AJAX客户端编程和远程过程调用。AJAX客户端的编程主要都是基于 JavaScript 的。而 JavaScript 是一种解释型的编程语言，它的运行效率相对于 Java 等都要稍逊一筹。同时 JavaScript 又是运行在浏览器这样一个严格受限的环境当中。因此开发人员对于哪些逻辑可以在客户端执行应该有一个清醒的认识。在实际的应用中究竟应该怎样使用 客户端编程，这依赖于开发人员的经验判断。这里很多问题是只可意会的。由于篇幅有限，在这里我们大致归纳出下面这几个注意事项：<!-- [if !supportLists]-->u <!-- [endif]-->尽可能避免频繁的使用远程过程调用，例如避免在循环体中使用远程过程调用。<!-- [if !supportLists]-->u <!-- [endif]-->如果可能的话尽可能使用 AJAX 方式的远程过程调用（异步方式的远程过程调用）。<!-- [if !supportLists]-->u <!-- [endif]-->避免将重量级的数据操作放置在 客户端。例如：大批量的数据复制操作、需要通过大量的数据遍历完成的计算等。<!-- [if !supportLists]-->n <!-- [endif]-->改进对 DOM 对象的操作方式。客户端的编程中，对 DOM 对象的操作往往是最容易占用 CPU 时间的。而对于 DOM 对象的操作，不同的编程方法之间的性能差异又往往是非常大的。以下是三段运行结果完全相同的代码，它们的作用是在网页中创建一个 10x1000 的表格。然而它们的运行速度却有着天壤之别。/* 测试代码 1 - 耗时 : 41 秒 */ var table = document.createElement("TABLE"); document.body.appendChild(table); for(var i = 0; i < 1000; i++){ var row = table.insertRow(-1); for(var j = 0; j < 10; j++){ var cell = objRow.insertCell(-1); cell.innerText = "( " + i + " , " + j + " )"; } } /* 测试代码 2 - 耗时 : 7.6 秒 */ var table = document.getElementById("TABLE"); document.body.appendChild(table); var tbody = document.createElement("TBODY"); table.appendChild(tbody); for(var i = 0; i < 1000; i++){ var row = document.createElement("TR"); tbody.appendChild(row); for(var j = 0; j < 10; j++){ var cell = document.createElement("TD"); row.appendChild(cell); cell.innerText = "( " + i + " , " + j + " )"; } } /* 测试代码 3 - 耗时 : 1.26 秒 */ var tbody = document.createElement("TBODY"); for(var i = 0; i < 1000; i++){ var row = document.createElement("TR"); for(var j = 0; j < 10; j++){ var cell = document.createElement("TD"); cell.innerText = "( " + i + " , " + j + " )"; row.appendChild(cell); } tbody.appendChild(row); } var table = document.getElementById("TABLE"); table.appendChild(tbody); document.body.appendChild(table); 这里的“测试代码 1 ”和“测试代码 2 ”之间的差别在于在创建表格单元时使用了不同的 API 方法。而“测试代码 2 ”和“测试代码 3 ” 之间的差别在于处理顺序的略微不同。“测试代码 1 ”和“测试代码 2 ”之间如此大的性能差别我们无从分析，目前所知的是 insertRow 和 insertCell 是 DHTML 中表格特有的 API ， createElement 和 appendChild 是 W3C DOM 的原生 API 。而前者应该是对后者的封装。不过，我们并不能因此而得出结论认为 DOM 的原生 API 总是优于对象特有的 API 。建议大家在需要频繁调用某一 API 时，对其性能表现做一些基本的测试。“测试代码 2 ”和“测试代码 3 ”之间的性能差异主要来自于他们的构建顺序不同。“测试代码 2 ”的做法是首先创建最外层的 <TABLE> 对象，然后再在循环中依次创建 <TR> 和 <TD> 。而“测试代码 3 ”的做法是首先在内存中由内到外的构建好整个表格，最后再将它添加到网页中。这样做的目的是尽可能的减少浏览器重新计算页面布局的次数。每当我们将一个对象添加到网页中时，浏览器都会尝试对页面中的控件的布局进行重新计算。所以，如果我们能够首先在内存中将整个要构造的对象全部创建好，然后再一次性的添加到网页中。那么，浏览器将只会做一次布局的重计算 。总结为一句话那就是越晚执行 appendChild 越好。有时为了提高运行效率，我们甚至可以考虑先使用 removeChild 将已存在的控件从页面中移除，然后构造完成后再重新将其放置回页面当中。<!-- [if !supportLists]-->n <!-- [endif]-->提高字符串累加的速度在使用 AJAX 提交信息时，我可能常常需要拼装一些比较大的字符串通过 XmlHttp 来完成 POST 提交。尽管提交这样大的信息的做法看起来并不优雅，但有时我们可能不得不面对这样的需求。那么 JavaScript 中对字符串的累加速度如何呢？我们先来做下面的这个实验。累加一个长度为 30000 的字符串。/* 测试代码 1 - 耗时 : 14.325 秒 */