In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-28 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article will explain in detail how to improve the client response speed of AJAX. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
In theory, AJAX technology can reduce the waiting time of user operation to a great extent, and save data traffic on the network at the same time. However, this is not always the case. Users often complain that systems that use AJAX are less responsive.
The author has been engaged in the research and development of AJAX for many years and participated in the development of dorado, a relatively mature AJAX platform in China. According to the author's experience, the root cause of this result is not AJAX. In many cases, the decrease of system response speed is caused by unreasonable interface design and inefficient programming habits. Let's analyze a few links that need to be paid attention to in the process of AJAX development.
Rational use of client programming and remote procedure calls
Client programming is mainly based on JavaScript. JavaScript is an interpretive programming language, and its running efficiency is slightly lower than that of Java. At the same time, JavaScript runs in a strictly restricted environment like a browser. Therefore, developers should have a clear understanding of which logic can be executed on the client side.
How to use client-side programming in practical applications depends on the experience of developers. Many of the problems here are understandable. Due to the limited space, here we roughly summarize the following points for attention:
Avoid using remote procedure calls as frequently as possible, such as using remote procedure calls in the body of a loop.
Use AJAX remote procedure calls (asynchronous remote procedure calls) whenever possible.
Avoid placing heavyweight data operations on the client. For example: mass data replication operations, calculations that need to be completed through a large amount of data traversal, and so on.
Improve the way you manipulate DOM objects.
In client programming, operations on DOM objects are often the easiest to take up CPU time. For the operation of DOM objects, the performance differences between different programming methods are often very large.
Here are three pieces of code that run exactly the same, and their function is to create a 10x1000 table in the web page. However, their speed is very different.
The copy code is as follows:
/ * Test Code 1-time: 41 seconds * /
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"的做法是首先创建最外层的对象,然后再在循环中依次创建和。而"测试代码3"的做法是首先在内存中由内到外的构建好整个表格,最后再将它添加到网页中。这样做的目的是尽可能的减少浏览器重新计算页面布局的次数。每当我们将一个对象添加到网页中时,浏览器都会尝试对页面中的控件的布局进行重新计算。所以,如果我们能够首先在内存中将整个要构造的对象全部创建好,然后再一次性的添加到网页中。那么,浏览器将只会做一次布局的重计算。总结为一句话那就是越晚执行appendChild越好。有时为了提高运行效率,我们甚至可以考虑先使用 removeChild将已存在的控件从页面中移除,然后构造完成后再重新将其放置回页面当中。 提高字符串累加的速度 在使用AJAX提交信息时,我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交。尽管提交这样大的信息的做法看起来并不优雅,但有时我们可能不得不面对这样的需求。那么JavaScript中对字符串的累加速度如何呢?我们先来做下面的这个实验。累加一个长度为30000的字符串。 复制代码 代码如下: /* 测试代码1 - 耗时: 14.325秒 */ var str = ""; for (var i = 0; i < 50000; i++) { str += "xxxxxx"; } 这段代码耗时14.325秒,结果并不理想。现在我们将代码改为如下的形式: 复制代码 代码如下: /* 测试代码2 - 耗时: 0.359秒 */ var str = ""; for (var i = 0; i < 100; i++) { var sub = ""; for (var j = 0; j < 500; j++) { sub += "xxxxxx"; } str += sub; } 这段代码耗时0.359秒!同样的结果,我们做的只是首先拼装一些较小的字符串然后再组装成更大的字符串。这种做法可以有效的在字符串拼装的后期减小内存复制的数据量。知道了这一原理之后我们还可以把上面的代码进一步拆散以后进行测试。下面的代码仅耗时0.140秒。 复制代码 代码如下: /* 测试代码3 - 耗时: 0.140秒 */ var str = ""; for (var i1 = 0; i1 < 5; i1++) { var str1 = ""; for (var i2 = 0; i2 < 10; i2++) { var str2 = ""; for (var i3 = 0; i3 < 10; i3++) { var str3 = ""; for (var i4 = 0; i4 < 10; i4++) { var str4 = ""; for (var i5 = 0; i5 < 10; i5++) { str4 += "xxxxxx"; } str3 += str4; } str2 += str3; } str1 += str2; } str += str1; } 不过,上面这种做法也许并不是最好的!如果我们需要提交的信息是XML格式的(其实绝大多数情况下,我们都可以设法将要提交的信息组装成XML格式),我们还能找到更高效更优雅的方法-利用DOM对象为我们组装字符串。下面这段代买组装一个长度为950015的字符串仅须耗时0.890秒。 复制代码 代码如下: /* 利用DOM对象组装信息 - 耗时: 0.890秒 */ var xmlDoc; if (browserType == BROWSER_IE) { xmlDoc = new ActiveXObject("Msxml.DOMDocument"); } else { xmlDoc = document.createElement("DOM"); } var root = xmlDoc.createElement("root"); for (var i = 0; i < 50000; i++) { var node = xmlDoc.createElement("data"); if (browserType == BROWSER_IE) { node.text = "xxxxxx"; } else { node.innerText = "xxxxxx"; } root.appendChild(node); } xmlDoc.appendChild(root); var str; if (browserType == BROWSER_IE) { str = xmlDoc.xml; } else { str = xmlDoc[xss_clean]; } 避免DOM对象的内存泄漏 关于IE中DOM对象的内存泄露是一个常常被开发人员忽略的问题。然而它带来的后果却是非常严重的!它会导致IE的内存占用量持续上升,并且浏览器的整体运行速度明显下降。对于一些泄露比较严重的网页,甚至只要刷新几次,运行速度就会降低一倍。 比较常见的内存泄漏的模型有"循环引用模型"、"闭包函数模型"和"DOM插入顺序模型",对于前两种泄漏模型,我们都可以通过在网页析构时解除引用的方式来避免。而对于"DOM插入顺序模型"则需要通过改变一些惯有的编程习惯的方式来避免。 有关内存泄漏的模型的更多介绍可以通过Google很快的查到,本文不做过多的阐述。不过,这里我向您推荐一个可用于查找和分析网页内存泄露的小工具--Drip,目前的较新版本是0.5,下载地址是http://outofhanwell.com/ieleak/index.php。 复杂页面的分段装载和初始化 对系统当中某些确实比较复杂而又不便使用IFrame的界面,我们可以对其实施分段装载。例如对于多页标签的界面,我们可以首先下载和初始化多页标签的默认页,然后利用AJAH(asynchronous JavaScript and HTML)技术来异步的装载其他标签页中的内容。这样就能保证界面可以在第一时间首先展现给用户。把整个复杂界面的装载过程分散到用户的操作过程当中。 利用GZIP压缩网络流量 除了上面提到的这些代码级的改良之外,我们还可以利用GZIP来有效的降低网络流量。目前常见的主流浏览器已经全部支持GZIP算法,我们往往只需要编写少量的代码就可以支持GZIP了。例如在J2EE中我们可以在Filter中通过下面的代码来判断客户端浏览器是否支持GZIP算法,然后根据需要利用 java.util.zip.GZIPOutputStream来实现GZIP的输出。 复制代码 代码如下: /* 判断浏览器对GZIP支持方式的代码 */ private static String getGZIPEncoding(HttpServletRequest request) { String acceptEncoding = request.getHeader("Accept-Encoding"); if (acceptEncoding == null) return null; acceptEncoding = acceptEncoding.toLowerCase(); if (acceptEncoding.indexOf("x-gzip") >= 0) return "x-gzip"
If (acceptEncoding.indexOf ("gzip") > = 0) return "gzip"
Return null
}
Generally speaking, the compression ratio of GZIP to HTML and JSP can reach about 80%, and the performance loss of server and client is almost negligible. Combined with other factors, websites that support GZIP are likely to save us 50% of our network traffic. Therefore, the use of GZIP can bring significant performance improvement for those applications whose network environment is not very good. Using the monitoring tool Fiddler of Http, you can easily detect the amount of communication data of web pages before and after using GZIP. (the download address of Fiddler is http://www.fiddlertool.com/fiddler/)
Performance optimization of Web applications is actually a very big topic. Due to the limited space, this paper can only cover a few details, and can not fully show you the optimization of these details. It is expected that this paper can arouse people's full attention to Web applications, especially client performance optimization. After all, server-side programming skills have been known for many years, and there is little potential to tap performance on the server side. On the other hand, the improvement of the method on the client side often leads to amazing performance improvement.
This is the end of the article on "how to improve the client response speed of AJAX". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 245
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.