电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 最大限度利用 JavaScript 和 Ajax 性能（2） [打印本页]

作者: look_w 时间: 2018-9-23 13:52 标题: 最大限度利用 JavaScript 和 Ajax 性能（2）

最小化 Ajax 请求Ajax 请求彻底改变了传统 web 应用程序的样子，它让 JavaScript 开发人员能创建高度动态化、交互性强、响应迅速的应用程序，就像在桌面应用程序中体验到的那样。结果，在现代的 web 应用程序中，Ajax 请求随处可见。有时候很容易忘记这点，尽管用户看不到页面加载，但 Ajax 请求执行的是完整的 HTTP 请求，它与常规页面加载一样。因此，应该多加关注，减少所使用的 Ajax 请求的数量。
这方面的一个例子是搜索结果分页。我经常看到在应用程序中，用一个 Ajax 请求以 JSON 数组形式返回搜索结果，再用一个请求返回数据库中结果条数，用于分页逻辑。和显示的是这两个请求的基本样例（使用 Prototype 框架）。
清单 1. 第一个请求：获取表记录

1
2
3
4
5
6
7
8

var url = "get_data.php";
var options = {
method: "post",
parameters: {"page":1,"rows":5},
onSuccess: firstCallbackFunction,
onFailure: firstCallbackFunction
}
new Ajax.Request(url, options);

显示的是第二个获取总记录数的请求。
清单 2.第二个请求：获取总记录数

1
2
3
4
5
6
7
8

var url = "get_count.php";
var options = {
method: "post",
parameters: {},
onSuccess: secondCallbackFunction,
onFailure: secondCallbackFunction
}
new Ajax.Request(url, options);

和显示的是对应的 JSON 格式的 HTTP 请求。
清单 3. 第一个响应：记录数组

1
2
3
4
5
6
7
8
9

{
"records": [
      {"id":1,"name":"John","email":"john@example.com"},
      {"id":2,"name":"Mary","email":"mary@example.com"},
      {"id":3,"name":"Tony","email":"tony@example.com"},
      {"id":4,"name":"Emma","email":"emma@example.com"},
      {"id":5,"name":"Alan","email":"alan@example.com"}
]
}

显示的是报告总记录数的响应。
清单 4. 第二个响应：总记录数

1	{"total_records": 95}

将这两个 Ajax 请求分开是浪费资源，它们可以合并到一个请求中，并生成以下的响应。
清单 5. 高效响应：记录总数和数组

1
2
3
4
5
6
7
8
9
10

{
"total_records": 95,
"records": [
      {"id":1,"name":"John","email":"john@example.com"},
      {"id":2,"name":"Mary","email":"mary@example.com"},
      {"id":3,"name":"Tony","email":"tony@example.com"},
      {"id":4,"name":"Emma","email":"emma@example.com"},
      {"id":5,"name":"Alan","email":"alan@example.com"}
         ]
}

这样做不仅使所需的 HTTP 请求和响应更少，而且也减少了用于响应 Ajax 请求的服务器端脚本。
本例演示非常简单 — 应用程序越复杂，减少所用的 Ajax 请求数量就越重要。
（适当）使用变量为了尽量减少代码行，很多开发人员常忽略了变量的使用，很多情况下他们其实能显著提高某段代码的执行速度。例如，在以下代码中，对一个元素应用了多种样式：
清单 6. 对一个元素应用多种样式（低效）

1
2
3

document.getElementById("myField").style.backgroundColor = "#CCC";
document.getElementById("myField").style.color = "#FF0000";
document.getElementById("myField").style.fontWeight = "bold";

以上每行代码中，浏览器都要在 DOM 中搜索 ID 为 myField 的元素。其实无需像这样执行三次，可以通过将 document.getElementById("myField") 结果赋给一个变量并在每行使用变量来提高效率。如所示。
清单 7. 对一个元素应用样式（高效）

1
2
3
4

var myField = document.getElementById("myField");
myField.style.backgroundColor = "#CCC";
myField.style.color = "#FF0000";
myField.style.fontWeight = "bold";

另一个应该用变量而没有用的地方是遍历数组的 for 循环。请看的例子。
清单 8. 用 for 循环遍历数组（低效）

1
2
3

for(var i=0; i < myArray.length; i++) {
//do something
}

这段代码效率很低，因为每次循环迭代时都要计算 myArray 数组的长度。这对小数组无关痛痒，但对大数组影响巨大。提高循环性能的方法很简单，甚至不需多加一行代码（见清单 9）。
清单 9. 用 for 循环遍历数组（高效）

1
2
3

for(var i=0, arrayLength=myArray.length; i < arrayLength; i++) {
//do something
}

清单 9 中，我们把对 myArray.length 的引用移到了语句的初始化部分，将其赋给了一个变量。这样，它只在循环第一个迭代时执行，从而在以后每次迭代时节省了宝贵的时间。
使用 DOM完全遍历和操作 DOM 会给 web 应用程序造成很大性能负担。问题是，与 DOM 的交互必不可少，能给应用程序带来快速响应和丰富接口。DOM 操作的一个特别问题是浏览器需要在屏幕上回流和重绘（主要是重新呈现）元素。因此，减少代码中回流和重绘的次数就尤为重要。
再看看前面  中的例子，我们用一个 ID 为 myField 的元素，对其应用三个不同的样式属性。这将导致三次独立的回流（re-flow）和重绘（re-paint），效率很低，因此我们可以做些小更改。这些语句效率低下，可以考虑将这些操作合并成一句。显示的是效率更高的样例。
清单 10. 通过合并修改内容来提高 DOM 操作的性能

1 2	var myField = document.getElementById("myField"); myField.style.cssText = "background-color: #CCC; color: #FF0000; font-weight: bold";

通过将样式修改合并起来，结果是只有一次回流和重绘，而且，响应速度和性能也得到提升。
本章包含了可在应用程序中发挥最佳性能的 JavaScript 和 Ajax 开发最佳实践。遗漏在所难免。请查阅，其中提供了重点介绍高性能 JavaScript 最佳实践的优秀文章、教程、书籍的链接。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)