`
真爱无敌
  • 浏览: 23819 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

对《30个提高Web程序执行效率的好经验》的理解

    博客分类:
  • Web
阅读更多

阅读了博客园发布的IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。

下面是我对这些准则的理解和分析,有些有关JS性能的准则,我也测试了它们的差异,大家可以下载DEMO页面,如有理解不正确的地方,请大家指正。也非常欢迎大家补充。

测试环境:

OS:Vista;

Processor:3.40GHz;

Memory: 2.00GB;

System type: 32-bit Operating System;

Browser: IE8, Forefox 3.5.7, Chrome4.0.249

   1. 尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild() 法。

我们可以用如下的代码进行测试:

function testInnerHTML(){

var div1 = document.getElementById("testDiv");

var startTime = new Date();

var buf = new Array();

for (var n = 0; n < 5000; n ++){

buf.push('<a href="">test');

buf.push(n);

buf.push('</a>');

}

div1.innerHTML = buf.join('');

document.getElementById('divShowTime1').innerHTML = '耗时1' +  (new Date() - startTime) + 'ms';

div1.innerHTML = "";

}

function testCreateElement(){

var div1 = document.getElementById("testDiv");

var startTime = new Date();

for (var n = 0; n < 5000; n ++){

var e = document.createElement('a');

e.href = '';

e.innerText = 'test' + n;

div1.appendChild(e);

}

document.getElementById('divShowTime2').innerHTML = '耗时2' +  (new Date() - startTime) + 'ms';

div1.innerHTML = "";

}

 

测试结果:

 

 

IE8

Firefox

Chrome

1

耗时1134ms
耗时2857ms

耗时1570ms
耗时2658ms

耗时161ms
耗时247ms

2

耗时1131ms
耗时2846ms

耗时1474ms
耗时2610ms

耗时158ms
耗时248ms

3

耗时1131ms
耗时2927ms

耗时1673ms
耗时2674ms

耗时157ms
耗时249ms

4

耗时1132ms
耗时2846ms

耗时1540ms
耗时2686ms

耗时155ms
耗时246ms

测试结果显示使用innerHTML对比document.createElement/appendChild()方法,在IE8中,效率的提高是非常明显的,但是在FirefoxChrome中,差别不大。

2. eval()有问题,new Fuction()构造函数也是,尽量避免使用它们。

eval方式比直接调用方式多了一步解析的过程,所以尽量避免使用它,如果必须用它,则最好是把调用的代码包装到函数中,然后eval这个函数,这样减少了解析的时间。eval函数的效率,我们可以用如下的代码测试:

 

function testNoEval() {

var startTime = new Date();

for(var i=0; i<500000; i++) {

var str = 'test';

}

var endTime = new Date();

document.getElementById('divShowTime1').innerHTML = '耗时1' +  (endTime - startTime) + 'ms';

}

function testEval() {

var startTime = new Date();

eval("for(var i=0; i<500000; i++) { var str = 'test'; }");

var endTime = new Date();

document.getElementById('divShowTime2').innerHTML = '耗时2' +  (endTime - startTime) + 'ms';

}

 

测试结果:

 

 

IE8

Firefox

Chrome

1

耗时185ms
耗时2251ms

耗时12ms
耗时2203ms

耗时11ms
耗时2340ms

2

耗时182ms
耗时2251ms

耗时12ms
耗时2204ms

耗时12ms
耗时2344ms

3

耗时181ms
耗时2250ms

耗时12ms
耗时2205ms

耗时11ms
耗时2338ms

4

耗时182ms
耗时2251ms

耗时12ms
耗时2213ms

耗时12ms
耗时2344ms

 

测试发现,eval的效率明显慢很多,尤其在Firefoxchrome中。 new Fuction的执行原理和eval类似,所以效率也是不高。

3. 拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。

原因明确,不过使用with语句,代码会非常简洁,我个人还是经常使用这个语句的。

4. 使用for()循环替代for…in 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。

原因明确,没有补充。

5. try-catch语句放在循环外面,不要放在循环里面,因为异常是很少发生的,放在外面避免每次都要执行 它们。

原因明确,这是我认为使用任何语言都有必要遵守的准则。

6. 甚至圣经里都提到过这个不要全局的。全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚 本引擎需要搜索整个全局命名空间。

防止内存泄漏和提高查找解析速度,另外,变量定义在最小使用范围内,代码的可读性好。

7. fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings';

还是采用测试代码:

 

function testString1() {

var startTime = new Date();

for(var i=0; i<500000; i++) {

var fullName = "";

fullName += 'John';

fullName += 'Holdings';

}

var endTime = new Date();

document.getElementById('divShowTime1').innerHTML = '耗时1' +  (endTime - startTime) + 'ms';

}

function testString2() {

var startTime = new Date();

for(var i=0; i<500000; i++) {

var fullName = "";

fullName += 'John' + 'Holdings';

}

var endTime = new Date();

document.getElementById('divShowTime2').innerHTML = '耗时2' +  (endTime - startTime) + 'ms';

}

 

测试结果:

 

IE8

Firefox

Chrome

1

耗时1492ms
耗时2477ms

耗时1151ms
耗时27ms

耗时152ms
耗时251ms

2

耗时1532ms
耗时2456ms

耗时1150ms
耗时27ms

耗时150ms
耗时251ms

3

耗时1493ms
耗时2454ms

耗时1148ms
耗时27ms

耗时153ms
耗时250ms

4

耗时1491ms
耗时2466ms

耗时1204ms
耗时28ms

耗时151ms
耗时250ms

 

测试结果出乎意料,在IE8chrome中,两者的效率差不多,但是在Firefox中,第一种写法反而比第二种慢很多。IE6下测试也是如此,看来这条规则还有待进一步研究。

8. 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。

验证还是用测试代码:

 

function testNoJoin(){

var startTime = new Date();

var testStr = "abcdefghqwertyuiolkjmzxv";

var result = "";

for(var i=0; i<50000; i++) result += testStr;

document.getElementById('divShowTime1').innerHTML = '耗时1' +  (new Date() - startTime) + 'ms';

}

function testJoin(){

var startTime = new Date();

var testStr = "abcdefghqwertyuiolkjmzxv";

var result = "";

var strs = new Array();

for(var i=0; i<50000; i++) strs[i] = testStr;

result = strs.join("");

document.getElementById('divShowTime2').innerHTML = '耗时2' +  (new Date() - startTime) + 'ms';

strs = null;

}

 

测试结果:

<td style="width: 87pt; background-color: transparent; border: #ece9d8; padding: 1.

 

IE8

分享到:
评论

相关推荐

    小型web程序实例DAO

    这个"小型web程序实例DAO"是一个教学或实践项目,它演示了如何在Web应用程序中使用DAO来处理数据存取操作。下面将详细介绍DAO模式以及在Web程序中的应用。 DAO模式的核心思想是将业务逻辑与数据存取操作分离,这样...

    《web程序设计》程序源代码

    《Web程序设计》是吉根林主编的一本深入讲解Web应用程序开发的经典著作,其第二版在第一版的基础上进行了更新和完善,旨在帮助读者掌握构建高效、动态、交互式的Web应用的关键技术。源代码作为教材的重要组成部分,...

    Web程序设计16 Web程序设计16 Web程序设计16 Web程序设计16

    【标题】: "Web程序设计16 - 深入理解Web开发的关键概念与技术" 【描述】: "Web程序设计16涵盖了Web开发的核心领域,包括前端开发、后端开发以及两者之间的交互。深入学习这个主题,我们将探索HTML、CSS、...

    web服务程序

    IIS是微软提供的一个强大的Web服务器,用于托管网站和应用程序,但它的安装和配置可能对一些用户来说较为复杂。 这个"web服务程序"的特点在于其便捷性,用户只需启动它,然后输入网页所在的网址目录位置,就能直接...

    C# Web自定义安装包示例程序 源码

    总的来说,"C# Web自定义安装包示例程序 源码"是一个深入学习Web应用程序部署和安装包制作的好材料。通过学习和实践这个示例,开发者可以提升自己的项目打包技能,理解Web应用程序在实际部署中的复杂性,并掌握如何...

    ASP.NET Web程序设计-电子教案

    在本教程中,你将深入理解ASP.NET Web程序设计的基础概念和核心功能。首先,你会接触到Web Forms,这是ASP.NET的核心部分,用于构建基于服务器的用户界面。Web Forms允许开发者使用事件驱动的编程模型,类似于桌面...

    vb.net构建web程序

    【VB.NET构建Web程序】是关于使用Visual Basic .NET(简称VB.NET)语言来开发Web应用程序的技术主题。VB.NET是Microsoft .NET Framework的一部分,它提供了一种强大的编程环境,用于创建高效、可扩展的Web应用。 **...

    fastdfs的web程序

    《FastDFS的Web程序实践与解析》 FastDFS是一个开源的高性能、轻量级的分布式文件系统,主要用于解决大容量存储和负载均衡的问题。在Java环境下,我们可以利用FastDFS开发Web应用程序,实现文件的上传、下载和删除...

    基于WEB程序设计基础-浙江大学(1)

    【标题】"基于WEB程序设计基础-浙江大学(1)"涵盖了Web开发的基础概念和技术,这是学习Web应用程序开发的起点。在这一课程中,我们主要探讨如何使用各种编程语言和框架来构建交互式的Web应用。 【描述】"基于WEB程序...

    web程序设计

    Web程序设计是构建基于互联网的应用程序的过程,它允许用户通过Web浏览器访问和交互。在"Visual C#.NET Web应用程序设计"这一主题中,我们将深入探讨使用C#编程语言和.NET框架来开发高效、动态和交互式的Web应用。C#...

    基于规划、长文本理解和程序合成的实际网页代理(WebAgent)

    WebAgent利用两个预训练的语言模型:HTML-T5专门负责HTML的理解和摘要,而Flan-U-PaLM则用于生成Python程序执行具体的动作。这两个模型通过自体验监督进行调优,从而有效地解决了现实世界中复杂多样的网页自动化任务...

    java web程序开发项目资源

    【Java Web程序开发项目资源】是一个综合性的学习资料包,主要涵盖了使用Eclipse IDE进行Java Web应用程序开发的相关知识。这个项目旨在帮助开发者理解和掌握如何在Eclipse环境下搭建、设计和实现Web应用程序。以下...

    超小编译调试C#WEB程序

    本文将深入探讨“超小编译调试C# WEB程序”的主题,解析如何利用轻量级的C#编译器和.NET设计环境高效地进行Web应用程序的开发与调试。 标题中的“超小编译调试”意味着我们将讨论一种轻量级、高效的C#编译器和调试...

    精通ASP.NET Web程序测试.rar

    ASP.NET Web程序测试是开发高质量Web应用程序不可或缺的一部分。在深入探讨这一主题之前,先要理解ASP.NET的基础。ASP.NET是由微软公司推出的Web应用程序框架,它允许开发者构建动态、数据驱动的网站和应用程序。该...

    java web程序开发

    Java Web程序开发是构建互联网应用程序的关键技术,它涵盖了从服务器端到客户端的全面开发过程。在Java Web领域,开发者利用一系列技术和工具来创建动态、交互式的网页应用。本主题主要涉及以下几个关键知识点: 1....

    了解 Web 服务规范_第 7 部分:Web 服务业务流程执行语言

    ### Web 服务业务流程执行语言 (WS-BPEL) 概览 #### 一、引言 随着互联网技术的发展及企业间协作需求的增长,Web 服务作为一种标准接口被广泛采用,用于不同系统间的通信与数据交换。Web 服务不仅简化了分布式应用...

    理解Ajax:用Javascript构建Web程序(CHM电子书)

    本资料《理解Ajax:用Javascript构建Web程序》将深入探讨这一技术。 **JavaScript**是实现Ajax的核心,是一种广泛用于客户端的脚本语言,主要在浏览器环境中运行。JavaScript允许开发者动态地修改HTML文档、处理...

    如何建立JSP操作用以提高数据库访问效率

    在JSP中高效地进行数据库访问是提升Web程序性能的关键,这涉及到如何让开发者理解和应用更加高效且整洁的数据库访问方式。 首先,我们需要理解JSP与数据库交互的基础。JSP可以通过Java Database Connectivity (JDBC...

Global site tag (gtag.js) - Google Analytics