提高代码性能的技巧

原创 2003年09月10日 11:08:00

提高HTML页面性能的技巧<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Michael Wallent
微软公司

http://msdn.microsoft.com/library/en-us/dndude/html/dude100499.asp?frame=true

微软的开发周期中很重要的一块是调整产品的性能。性能调整也是开发者应当留心的关键部分之一。 经过多年发展,业界对于如何优化Win32程序性能已经有非常多的了解。

现在开发者遇到的问题之一是不太清楚是什么导致DTHMLHTML页面运行快或者慢。当然,有一些很简单的方法——比如不要使用2MB大的图片。我们曾经使用过另外一些有趣的技巧提高了DHTML页面的性能,希望它们能帮助你改善自己的页面性能。

这里我使用了一个建立Table的程序例子。其中用document.createElement()element.insertBefore()方法创建了1000(Row)的表(Table)。每行有一列(Cell)Cell中包含的内容称为"Text"。这段代码能有多糟呢?这么小的程序又能有多大调整余地呢?请看介绍。

一开始我写了一段自认为会很快的程序,我尽量避免一些低级问题----像没有显式定义变量、或者在一个页面中同时使用VBScriptJavascript。程序如下:

View the first sample.

我在PII233/64MB内存/NT4.0/IE5.0的机器上运行这段程序。页面从本机上装载。从开始装载页面到页面完全安静下来(所有的事件均已经运行,屏幕显示完成)的时间为2328毫秒,这也是本次测试的基线(我称之为Test1)。

这个页面中,一个很耗时的操作是频繁引用全局对象,如“document”、“body”、“window”等。引用所有这些类似的全局变量远比引用一个本地变量代价高昂。

因此我作了第一次改进尝试:缓存(Cachedocument.body 到本地变量“theBody”中:

增加了如下代码:

然后修改这一行:

将之改为:

View the second sample.

这次修改并没有太大影响到整体时间,它只缩短了3 ms。但它已经表明,如果在循环中也有document.body对象而对其引用做出修改,带来的好处将是可观的。

随后,我缓存了document对象----在我们这个测试中,document对象共被引用了3002次。修改后代码如下:

View the third sample.

此次运行时间只有2100ms,节约了大约10%的时间。使用本地变量而不是直接引用document对象平均每次节约了0.4毫秒。

一个常用的优化性能的方法是:当脚本不需要立即运行时,在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。)  设置“defer”属性后,IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行,使用defer属性得到的好处就不太大。

下面是使用了defer属性修改后的代码版本:

View the fourth sample.

这次测试的时间为2043 ms。相对基线测试提高了12%,比上次测试提高了2.5%

下面我们谈到的一个改进方法非常有用,当然也稍微麻烦一点。当需要创建元素然后将其插入树状的结构中时,将其直接插入到主干中效率更高----而不是首先将其插入大的子树,然后再将大的子树插入主干。例如,如果你创建一个每行有一列、列中有一些文字的表,你可以这样做:

1.                创建<TR>

2.                创建<TD>

3.                创建TextNode节点

4.                TextNode 插入<TD>

5.                <TD> 插入到 <TR>

6.                <TR>插入到TBODY

当它要比下面的方法慢一些:

1.                创建<TR>

2.                创建<TD>

3.                创建TextNode

4.                <TR> 插入到TBODY

5.                <TD> 插入到<TR>

6.                TextNode插入到<TD>

上面的四次测试使用的都是前一种方法。我们用后一种方法进行第5次测试。代码如下:

View the fifth sample.

Test5只需1649ms。这比上次测试提高了25%,比基线快了几乎30%

随后的修改是使用了预制的样式表。使用了预制样式表的表格列宽或者是通过<COL>标签设置,没有<COL>标签时,每列的宽度均匀分布。因为不需要对每一列重新计算大小等,使用样式表实际上提高了性能,尤其当表格中的列数很多时。

增加样式表(CSS)的代码非常简单,如下:

View the sixth sample.

因为我们测试中的表格只有一列,这种改变只提高了页面1.6%的性能。如果有更多的列,性能增加会更多。

最后两次测试改变了将文字插入到表格中的方法。前面的测试中,我们都先创建一个TextNode ,然后将其插入到TD中。在Test7, 取而代之,我们通过innerText 指定包含的文字。修改的代码是:

View the seventh sample.

令人惊奇的是,这次修改产生的差异很大----比上次提高了9%的性能,比最初总共提高了36%的性能。时间从最初的2323ms到最后的1473ms

现在,几乎人人都知道使用element.innerHTML 非常慢. 为了看看究竟它如何慢,我做了最后一次测试:使用 innerHTML替代innerText插入文字。这大大降低了性能。时间达到3375ms,比上次测试慢了80%,比基线测试慢了45%。显然,innerHTML是非常耗时的。

下表总结了各次测试及其结果:http://msdn.microsoft.com/library/en-us/dndude/html/results2.asp

调整HTML页面性能类似于调整Win32应用程序性能;需要知道什么慢,什么快。希望这些方法能帮你提高页面性能。

提高C++程序运行效率的10个简单方法

这篇文章主要介绍了提高C++程序运行效率的10个简单方法,包括了循环、变量、继承等等应用的技巧,非常具有实用价值,需要的朋友可以参考下 本文以C/C++程序为例讲述了程序运行效率的10个简单...
  • u013220405
  • u013220405
  • 2016年03月08日 22:44
  • 3279

提高代码性能,写出高质量js/jq代码常记

论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月16日 10:25
  • 1102

提高MySQL性能的7个技巧

原文:7 keys to better MySQL performance 作者:Peter Zaitsev 译者:Peter 译者注: 随着尺寸和负载的增长,MySQL的性能会趋于下降。...
  • dev_csdn
  • dev_csdn
  • 2017年11月02日 14:19
  • 15337

java代码性能提高技巧之String.intern()

这篇文章将要讨论 Java 6 中是如何实现 String.intern 方法的,以及这个方法在 Java 7 以及 Java 8 中做了哪些调整。 字符串池      字符串池(有名字符串标...
  • zhushuai1221
  • zhushuai1221
  • 2016年09月25日 20:00
  • 424

提高PHP性能的实用方法+40个技巧优化您的PHP代码

1、用单引号代替双引号来包含字符串,这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"(译注:PHP手册...
  • qq_16030133
  • qq_16030133
  • 2017年07月25日 17:28
  • 143

Java技巧:提高J2SE性能的代码技巧

1.java开发工具集(jdk) ■ 设计了一组通用用途的类 ■ 设计的质量和实现多样化 一 有些部分设计和实现得很好 一 而有些部分... ■ 你可以访问jdk的源代码 一 %java_...
  • javazhuanzai
  • javazhuanzai
  • 2012年01月10日 04:37
  • 144

Python 代码性能优化技巧

  • 2014年07月30日 18:48
  • 278KB
  • 下载

Java 代码性能优化技巧

Java性能优化技巧参考了些书籍,网络资源整理出来,适合于大多数Java应用在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身。养成良好的编码习惯非常重要,能够显著地提升程序性能...
  • a58YYXG
  • a58YYXG
  • 2016年12月20日 19:05
  • 145

Python 代码性能优化技巧

Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 原则,实现程序的重构、优化、扩展以及文档相关的事情通常需要消耗 ...
  • horstlinux
  • horstlinux
  • 2012年08月26日 20:02
  • 852

Python 代码性能优化技巧

Python 代码性能优化技巧   Python 代码优化常见技巧 代码优化能够让程序运行更快,它是在不改变程序运行结果的情况下使得程序的运行效率更高,根据 80/20 ...
  • xiyanlgu
  • xiyanlgu
  • 2013年04月01日 09:48
  • 940
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:提高代码性能的技巧
举报原因:
原因补充:

(最多只允许输入30个字)