- 浏览: 202806 次
- 性别:
- 来自: 石家庄
文章分类
最新评论
-
luoqiyi:
set ANT_OPTS=-Xms64m -Xmx512m - ...
ant编译时出现内存错误:java.lang.OutOfMemoryError。 -
廖乐逍遥:
怎么还是不行呀
Eclipse部署Maven创建的webapp到Tomcat -
byf157:
Garfield.Geng 写道上面的代码行太多了。应该用现成 ...
java md5 示例 -
Garfield.Geng:
上面的代码行太多了。应该用现成的。
/**
* Tes ...
java md5 示例 -
曾经、流泪过:
CRM
客户端动态输出table数据并展示表格,是web应用中较为常见的工作。对于循环打印输出tr,td本身是一件非常僵硬和暴力的编程办法,再加上最后绑定元素innerHTML字符流输出,
系统所消耗的性能代价是非常高昂的,如果我们需要展现的数据非常庞大时,那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法,
如何才能降低性能成本,改善用户体验,快速安全的显示我们所需要的数据呢?
我认为从根本上调优需要从两个方面去考虑。
1:server的数据吐出和client的数据解析。这里涉及的知识点较多,今后再做详细的说明。但是对于较为复杂的xml的数据格式来说,client的解析应该用xpath寻址和dom内置对象相结合的方法,高速定位。
2:DHTML的优化。包括dom,css,js的优化,也就是MVC(model, view, control)的优化。
这里我们用js动态生成一个table, 构建一个3000行,8列的表格,代码分多个版本,便于清晰的比较每个版本不同的性能消耗。
vision 0.1 【耗时14694ms】
貌似以下的写法是没有任何错误,但是确是最暴力,效率最低,性能消耗最大的写法。对于大量的数据行和列,用for循环拼接元素字符串,最后innerHTML输出是不可取的。
3000记录页面加载耗时14694毫秒,近15秒。这样的页面数据加载是近乎灾难的,应该竭力避免。
<html>
<body>
<div id="tableDiv"></div>
<script>
var maxRow =3000;
var maxCol = 8;
var strTbl = "<table border='1'><tbody>";
var strTbody = '';
for(var i = 0; i < maxRow; i++){
strTbody +="<tr>";
for(var j = 0; j < maxCol; j++){
strTbody += "<td>test</td>";
}
strTbody += "</tr>";
}
strTbl = strTbody + "</tbody></table>";
var obj = document.getElementById("tableDiv");
obj.innerHTML = strTbl;
</script>
</body>
</html>
vision 0.2 【耗时3623ms】
这个版本的代码有非常大的改进,采用DOM技术动态添加元素,说明在需要处理展现大量数据的情况下,运用DOM快速定位并添加绑定元素的方法,效率远比拼接html元素字符串的方法要高许多。
整个页面加载完成所耗的时间为3623毫秒。3000行的记录耗时不到4秒,这个版本的代码结构和编程思路也无可挑剔, 那么这样的加载速度是否可以再快些呢?
<html>
<body>
<script>
var _table, _tbody, tr, td, text, maxRow, maxCol;
maxRow = 3000;
maxCol = 8;
_table = document.createElement("table");
_table.border = "1";
_tbody = document.createElement("tbody");
_table.insertBefore(_tbody, null);
document.body.insertBefore(_table, null);
for (var i=0; i<maxRow; i++) {
tr = document.createElement("tr");
for(var j = 0; j<maxCol; j++){
td = document.createElement("td");
text = document.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
_tbody.insertBefore(tr, null);
}
</script>
</body>
</html>
vision 0.3 【耗时3320ms】
基于vision 0.2中的代码,我们可以看到,整个代码段有多处用到了"body","window","document"这样的对象,在js中类似这样的对象都为全局对象,对他们的引用操作势必会消耗性能,
对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。
这里我们可以将"document.body"的引用缓存到局部变量中,这样就完成了一个将全局对象转换成局部变量的过程。
在代码中添加:var docBody = document.body;并且将行:document.body.insertBefore(_table, null);替换为:docBody.insertBefore(_table, null);
在代码中对"document"单个全局对象的引用就达到8×3000=24000次之多,获取一个document变量比局部变量大约多花费4ms时间, 所以我们下一步把document对象也缓存起来。
在代码中添加:var _doc = document;
这样,我们重新加载页面,所耗时间为3320毫秒。只比上个版本所耗的时间减少了10%,似乎性能相差不大,但是在我们日常的开发习惯中,将全局的对象缓存到局部变量中是一个好的开始。
<html>
<body>
<script>
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_tbody = _doc.createElement("tbody");
_table.insertBefore(_tbody, null);
docBody.insertBefore(_table, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
text = _doc.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
_tbody.insertBefore(tr, null);
}
</script>
</body>
</html>
vision 0.4 【耗时2779ms】
一个document对象加载速度的优化就是在<script>标签指定defer属性。首先在这里简单介绍一下defer属性。defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题,
加上defer等于在页面完全在入后再执行,相当于window.onload,但应用上比window.onload 更灵活。设置这个属性仅适合不需要立即运行<SCRIPT>中代码的情况。
(立即运行的代码指不在函数体内的--这些代码将会在脚本块加载后立即执行)当defer属性设置后,IE不会等待加载和转换这段脚本。这就也为着页面加载会快很多。
通常这意味着立即运行的脚本应该封装放在一个函数内,并通过document或者body的onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作,如点击按钮,或者移动鼠标到某个区域,会更加有用!
最后请注意两点:
1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
2、不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
<html>
<body onload="init()">
<script defer>
function init() {
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_tbody = _doc.createElement("tbody");
_table.insertBefore(_tbody, null);
docBody.insertBefore(_table, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
text = _doc.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
_tbody.insertBefore(tr, null);
}
}
</script>
</body>
</html>
vision 0.5 【耗时2650ms】
上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。
我们看到代码中dom操作,绑定子元素的方法是由下至上包裹,这样的元素绑定方式会相对较慢。
create <TR>
create <TD>
create TextNode
第一步 insert TextNode into <TD>
第二步 insert <TD> into <TR>
第三步 insert <TR> into TBODY
现在我们将元素的绑定顺序颠倒过来,由上至下的包裹绑定元素
create <TR>
create <TD>
create TextNode
第一步 insert <TR> into TBODY
第二步 insert <TD> into <TR>
第三步 insert TextNode into <TD>
<html>
<body onload="init()">
<script defer>
function init() {
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_tbody = _doc.createElement("tbody");
_table.insertBefore(_tbody, null);
docBody.insertBefore(_table, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
_tbody.insertBefore(tr, null);
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
text = _doc.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
vision 0.6 【耗时2580ms】
这个版本中我们要调优的是修改table的css属性,使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用<col>标签设置。
fixed-table布局样式将改善table的性能,因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法,特别是那些有很多列的大型表格。
这个操作也可以通过简单增加css样式实现:
<html>
<body onload="init()">
<script defer>
function init() {
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_table.style.tableLayout = "fixed";
_tbody = _doc.createElement("tbody");
_table.insertBefore(_tbody, null);
docBody.insertBefore(_table, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
_tbody.insertBefore(tr, null);
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
text = _doc.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
vision 0.7 【耗时2210ms】
最后的一个版本的调优就是给单元格赋值的方式。在所有的示例中,创建了一个TextNode,并添加给TD。而在这个版本中我们将使用innerText代替插入一个text节点,代码调整为:
td.innerText = "Text";
(注意:innerText只在IE中受支持,属于IE扩展,兼容FireFox可使用innerHTML,但是innerHTML正如文章开头所说的,效率非常低下,不建议使用)
<html>
<body onload="init()">
<script defer>
function init() {
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_table.style.tableLayout = "fixed";
_tbody = _doc.createElement("tbody");
docBody.insertBefore(_table, null);
_table.insertBefore(_tbody, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
_tbody.insertBefore(tr, null);
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
td.innerText = "Text";
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
vision 0.8 【耗时672ms】终极优化
将字符串作为数组对象的方式是目前效率最高,性能最优的方式。
<script>
var t1 = new Date();
</script>
<html>
<head>
<title></title>
<script>
function testTime(){
var t2 = new Date();
alert(t2-t1+"ms");
}
</script>
</head>
<body onload="init();testTime();">
<div id="tableDiv"></div>
<script>
var maxRow =3000;
var maxCol = 8;
var strTbody = ["<table border='1'><tbody>"];
for(var i = 0; i < maxRow; i++){
strTbody.push("<tr>");
for(var j = 0; j < maxCol; j++){
strTbody.push("<td>test</td>");
}
strTbody.push("</tr>");
}
strTbody.push("</tbody></table>");
var obj = document.getElementById("tableDiv");
obj.innerHTML = strTbody.join("");
</script>
</body>
</html>
发表评论
-
在浏览器中通过js向客户本机写文件示例
2012-09-12 17:01 916<script> var fs=new Activ ... -
MyEclipse卡死解决 总结
2012-08-16 20:14 1275MyEclipse卡死解决 在用[MyEclipse] 写 ... -
Internet Explorer无法打开站点,已终止操作 错误分析
2012-08-03 14:25 0在页面还没有ready的时候就调用了htmlObject的ap ... -
java 日期处理总结
2012-08-03 14:24 9211、通过MessageFormat转化 String dat ... -
apache 启动失败
2012-06-26 11:33 1768Apache启动报错: the requested opera ... -
实现onchange无法实现的功能:通过js监听属性变化事件
2012-06-05 16:13 1875<input type="text" ... -
解决火狐不支持Cursor:hand的方法
2012-02-22 14:39 861解决火狐不支持Cursor:hand的方法 firefox 下 ... -
Axis2服务器配置步骤
2012-02-08 17:08 1372Axis2服务器配置步骤 一、Axis2服务器目录结构如下: ... -
js 导出excels
2011-12-28 17:23 600<script> function method1 ... -
jsp 页面打印预览 收藏
2011-12-28 17:04 1202<%@ page language="java ... -
MyEclipse9.1 下安装Drools插件
2011-12-14 17:56 1292非常简单,记录如下: 在MyEclipse9.1下安装Droo ... -
Web应用缓存
2011-12-05 14:25 739利用memcached构建高性能的Web应用程序; JCS(J ... -
Http Post Xml方式传递数据
2011-09-15 11:01 2453Http Post Xml方式传递数据 一、概述 在不同的应 ... -
java中取得当月最后一天的四种方法 java Calendar 当月 第一天 最后一天
2011-06-30 15:12 1590java中取得当月最后一天 ... -
Tomcat性能调优方案
2011-04-10 11:48 692Tomcat性能调优方案 一、 ... -
tomcat 控制台乱码、标题栏修改
2011-04-10 11:33 152941、Tomcat控制台中文乱码解决办法 修改\tomca ... -
jdk 6 Derby 数据库
2011-03-26 22:08 1806Derby并不是一个新的数据库产品,它是由IBM捐献给 ... -
模态窗口 showModalDialog
2011-03-22 12:31 2911转自:http://www.cnblogs.com/don ... -
Maven常用命令
2011-03-03 22:03 526Maven常用命令 创建普通应用项目: mvn ... -
eclipse 中使用maven
2011-02-27 23:18 1122在Eclipse中使用Maven插件 关键字: m ...
相关推荐
《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括: •减少HTTP请求 •使用...
性能优化:了解性能优化的基本知识,例如代码优化、资源优化等,能够进行网站性能优化和提升用户体验。 工具使用:掌握常用的开发工具,例如编辑器、调试工具、测试工具等,能够进行高效的开发和测试工作。
前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。 跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范...
概述 Combres使用和可以帮助... 等等:CDN,HTTPS,调试模式,外部JS / CSS(从其他服务器动态请求),更少CSS等。 经过验证的解决方案,在 , 和有成千上万的下载量 查阅以获取完整的介绍。 用法 从安装 PM> Install
《高性能网站建设指南》一书介绍了如何针对网站中的Ajax、CSS、JavaScript、Flash和图片进行性能优化。每个性能规则都提供了示例,在本书的配套网站上可以找到代码片段。这些规则包括: •减少HTTP请求 •使用...
todos-vanilla:学习从现有项目中调试,测试和优化性能
艺术模板 |art-template是一个简单且超快速的模板引擎,可通过范围内预先声明的技术优化模板渲染速度,从而实现接近JavaScript极限的运行时性能。 同时,它支持NodeJS和浏览器。 。 art-template是一个简约,超快的...
前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。 跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范...
网页性能优化:学习如何优化网页性能,例如减少页面加载时间、优化图片、利用CDN等技术。 移动端开发:学习移动端开发技术,例如响应式布局、移动端框架等。 前端自动化:学习前端自动化工具和流程,例如Grunt、Gulp...
优化性能也是一个可能的用例,但它不是中心目标,因为已经有其他非常好的工具可以促进这一点(尤其是 Chrome 开发工具)。如何使用analysis.js 充当代理,因此可以非常轻松地分析 Web 应用程序,而无需集成到某个...
medea.js高度优化、健壮、轻量级的 JavaScript 3D 引擎。 Medea 具有稳定、声明性和一致的 API,具有非零测试覆盖率。 它支持高效的 WebGl 开发,并努力满足性能和健壮性方面的高要求。 它也非常快。 设计目标快速:...
第10 章 走向高大上的必经之路——简单的性能优化 / 160 第11 章 让主角不再死板 / 173 第12 章 动态的背景 / 188 第13 章 界面的文字有点丑 / 204 第14 章 超炫的效果——粒子系统 / 211 第15 章 尝试做一个更...
优化Three.js性能以模拟成千上万的独立移动对象 优化性能(Google) Stats.js threex.rendererstats Google Web跟踪框架 联网和多人游戏 意见同步RTS引擎和不同步的故事 每个程序员需要了解的有关游戏网络的知识...
Vue.js DevTools 是专门为Vue.js应用程序设计的一款开发者工具插件,它提供了丰富的功能来帮助开发者更...性能分析:部分版本提供性能分析工具,用于检测组件渲染时间和Vue实例的更新过程,有助于优化应用程序性能。
Reactime是面向React开发人员的性能和调试工具(针对Gatsby和Next.js的Beta版) 。 每当更改目标应用程序的状态时,它都会记录快照,并允许用户跳至任何以前记录的状态。 它还检测每个组件的渲染量和渲染的平均时间...
随着计算机视觉技术的不断发展,目标检测在许多领域都有着广泛的应用,如安防监控、无人驾驶、工业检测等。YOLOv5(You Only Look Once version 5)是一款性能优秀的实时目标...模型性能优化,确保在WEB端流畅运行。
jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写,还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。 jquery1.6.4 此版本较jQuery 1.6.3进行了小幅改进,包括: Data:修复了用“-...
fiddler(fiddler中文版)是一个http协议调试代理工具。fiddler能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点查看所有的“进出”Fiddler的数据(指html,cookie,css,js等文件,...性能分析和优化等等。
fiddler(fiddler中文版)是一个http协议调试代理工具。fiddler能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点查看所有的“进出”Fiddler的数据(指html,cookie,css,js等文件,...性能分析和优化等等。