2003年度在公司获得先进，做了项目经理。好久没来ASP论坛了，现在散200分庆祝一下。

gdm 2004-01-16 06:34:36
为了避免倒分之闲，先贴一篇关于asp程序调用存储过程才文章供大家参考。
==========================================================================
如果要得到返回值，需要用Command的方法。
首先说明，返回值有两种。一种是在存储过程中直接return一个值，就象C和VB的函数返回值那样；另一种是可以返回多个值，存储这些值的变量名称需要在调用参数中先行指定。
这个例子要处理多种参数，输入参数，输出参数，返回记录集以及一个直接返回值（够全了吧？）
存储过程如下：

use pubs
GO

-- 建立存储过程
create procedure sp_PubsTest

-- 定义三个参数变量，注意第三个，特别标记是用于输出
@au_lname varchar (20),
@intID int,
@intIDOut int OUTPUT

AS

SELECT @intIDOut = @intID + 1

SELECT *
FROM authors
WHERE au_lname LIKE @au_lname + '%'

--直接返回一个值
RETURN @intID + 2


调用该存储过程的asp程序如下：

<%@ Language=VBScript %>
<%
Dim CmdSP
Dim adoRS
Dim adCmdSPStoredProc
Dim adParamReturnValue
Dim adParaminput
Dim adParamOutput
Dim adInteger
Dim iVal
Dim oVal
Dim adoField
Dim adVarChar

‘这些值在 VB 中是预定义常量，可以直接调用，但在 VBScript 中没有预定义
adCmdSPStoredProc = 4
adParamReturnValue = 4
adParaminput = 1
adParamOutput = 2
adInteger = 3
adVarChar = 200

iVal = 5
oVal = 3

'建一个command对象
set CmdSP = Server.CreateObject("ADODB.Command")

'建立连结
CmdSP.ActiveConnection = "Driver={SQL Server};server=(local);Uid=sa;Pwd=;Database=Pubs"

'定义command 对象调用名称
CmdSP.CommandText = "sp_PubsTest"

'设置command调用类型是存储过程 (adCmdSPStoredProc = 4)
CmdSP.CommandType = adCmdSPStoredProc

'往command 对象中加参数
'定义存储过程有直接返回值，并且是个整数，省缺值是4
CmdSP.Parameters.Append CmdSP.CreateParameter("RETURN_VALUE", adInteger, adParamReturnValue, 4)
'定义一个字符型输入参数
CmdSP.Parameters.Append CmdSP.CreateParameter("@au_lname", adVarChar, adParaminput, 20, "M")
'定义一个整型输入参数
CmdSP.Parameters.Append CmdSP.CreateParameter("@intID", adInteger, adParamInput, , iVal)
'定义一个整型输出参数
CmdSP.Parameters.Append CmdSP.CreateParameter("@intIDOut", adInteger, adParamOutput, oVal)

'运行存储过程，并得到返回记录集
Set adoRS = CmdSP.Execute


'把每个记录打印出来，其中的字段是虚拟的，可以不用管
While Not adoRS.EOF

for each adoField in adoRS.Fields
Response.Write adoField.Name & "=" & adoField.Value & "<br/>" & vbCRLF
Next
Response.Write "<br/>"
adoRS.MoveNext
Wend

'打印两个输出值：
Response.Write "<p>@intIDOut = “ & CmdSP.Parameters("@intIDOut").Value & "</p>"
Response.Write "<p>Return value = " & CmdSP.Parameters("RETURN_VALUE").Value & "</p>"


'释放系统资源
Set adoRS = nothing
Set CmdSP.ActiveConnection = nothing
Set CmdSP = nothing
%>

===================================================================
...全文
48 26 打赏 收藏 转发到动态 举报
写回复
用AI写文章
26 条回复
切换为时间正序
请发表友善的回复…
发表回复
gdm 2004-01-16
  • 打赏
  • 举报
 回复
表格的几种用法：

================================================================================
1.表格的分隔线可以隐藏
<table border rules=cols cellspacing=0 align=left> 可以隐藏横向的分隔线

<table border rules=rows cellspacing=0 align=right>可以隐藏纵向的分隔线

<table border rules=none cellspacing=0 align=center>可以隐藏横向和纵向的分隔线


2.表格的边框不断在闪

以下方法可以令表格的边框不断在闪，很实用的
在BODY区加上

<table border="0" width="280" id="myexample"
style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<script language="JavaScript1.2">

<!--

function flashit(){

if (!document.all)

return

if (myexample.style.borderColor=="yellow")

myexample.style.borderColor="lime"

else

myexample.style.borderColor="yellow"

}

setInterval("flashit()", 500)

//-->

</script>


3.表格分行下载

这个对表哥内容很大比较实用

在需要分行下载处加上 <tbody >

比如：
<table >
<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td >skdjfsdjfksd</td >
</tr >
</tbody >

<tbody >
<tr >
<td >flsdjfsdjfkdsjf</td >
</tr >
<tr >
<td>skdjfsdjfksd</td >
</tr >
</tbody >
</table >

4.几种样式不同的表格

<table border="1" width="220" style="position: absolute; left:
11; top: 11" height="26" >

<tr>

<td width="100%">普通表格</td>

</tr>

</table>

5.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"
bordercolordark="#000000" style="position: absolute; left: 10; top:
49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>


6.细表格

<table border="0" frame=vsides width="219"
bgcolor="#000000" cellspacing="1" cellpadding="0"
height="22" style="position: absolute; left: 11; top: 86">

<tr bgcolor="#FFFFFF">

<td width="100%" height="2">细表格</td>

</tr>

</table>

7.立体表格

<table border="1" width="220" bordercolorlight="#ffffff"
bordercolordark="#ffffff" style="position: absolute; left: 10; top:
112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"
bordercolorlight="#000000" bordercolordark="#eeeeee" >立体表格</td>

</tr>

</table>


8.无名表格

<table width="220" align="center" style="position: absolute;
left: 246; top: 12" height="51">

<tr>

<td><fieldset style="width:220" align="center">
<legend> 无名表格 </legend> 　<p align="right">　</fieldset>
<br>

</td>

</tr>

</table>

9.表中表效果Ⅱ

<table width="220" align="center" style="position:
absolute; left: 245; top: 89" height="110">
<tr>
<td height="75"><fieldset style="width:220"
align="center"> <legend> 表中表效果Ⅱ </legend> <table
frame="hsides" border="1"
bordercolorlight="#000000" bordercolordark="#ffffff"
width="100%" cellspacing="1" cellpadding="0" height="78">
<tr bgcolor="#ffffff">
<td width="100%" height="76"></fieldset></td>
</tr>
</table>

10.表中表效果Ⅰ

<table width="220" align="center" style="position: absolute;
left: 10; top: 120" height="138" cellspacing="1"
cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;
border-style: groove" align="center"> <legend style="color:
#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>
</legend> 　<p align="right">　</fieldset>

</td>

</tr>

</table>


11.表格中边框的显示


只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
============================================================================
gdm 2004-01-16
  • 打赏
  • 举报
 回复
接上

==============================================================================
< html >
< HEAD >
< TITLE >行为效果演示< /TITLE >
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
< /HEAD >
< BODY >
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br >
< span class='myfilter' >鼠标指向后产生辉光< /span >< br >
< span class='myfilter' >同时文字变白< /span >< br >
< span class='myfilter' >按下鼠标后文字变黄< /span >< br >
< span class='myfilter' >抬起鼠标后文字变蓝< /span >< br >
< span class='myfilter' >鼠标离开后文字恢复原状< /span >< br >
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br >
< button onclick="myspan.move_down();" >向下移动第一行文字< /button >
< /BODY >
< /html >
　　通过以上的简单介绍，可以看出，我们很容易地在一个“行为”中同时组合了多种文字变化效果，通过简单的“样式”设置，任意地将它与页面元件相关连，体现了“行为”组件的优点和强大功能。一个“行为”组件，不仅能在一个页面内重复使用，也可供同一站点上的所有页面使用。试想一下，如果不使用“行为”来完成上述的效果，虽然可以在页面内调用一组预定的函数来完成同样的功能，但页面内每一个使用文字效果的元件都要附加四个鼠标事件，如果在多个页面内使用相同的效果，被调用的函数也需要在每一个页面内重复设置。相比之下，孰优孰劣是很明显的。所以，使用“行为”组件，可以制作出简洁、高效、通用和便于维护的页面。本文的举例只是为了说明“行为”组件的编写和使用过程，使读者对“行为”编程有一个概括的了解，并以此基础制作出自己所需要的“行为”组件，或直接引用满足个人需要的现成“行为”组件，因为“组件共享”的概念也是“行为”开发者的初衷。最后，愿本文能起到“抛砖引玉”的目的，使读者步入精彩的DHTML网页编程天地。

说明:
HTC是HTML component的缩写,
是IE5.0的主要扩展之一,
除了具备一般组件的可重用优点之外,
还具有易于开发使用等优点,
因为需要引入外部文件,这里就不举例了,宝库里有例子.

控件和组件
HTC提供了一个简单机制以在脚本中实现DHTML行为。一个HTC文件和HTML文件没有任何差别，并且以“.htc”为后缀，

可以使用HTC实现以下行为：
设定属性和方法。通过“PROPERTY”和“METHOD”元素定义
设置自定义事件。通过“EVENT”元素实现，用该元素的“fire()”方法释放事件，
通过“createEventObject()”方法设置事件环境。
访问所包含该HTC的的HTML页的DHTML对象模型，使用HTC的“element"对象，返回
一个附加行为的元素，使用该对象，HTC可以访问包含文挡及它的对象模型（属性、方法、事件）。
收取通知，使用”ATTACH“元素实现，浏览器不但通知HTC标准的DHTML事件，而且通知HTC两种特殊事件：oncontentready事件和ondocumentready事件 。


定义标记和命名空间
HTC的基础是自定义标记
要为页面定义自定义标记，必须为该标记提供命名空间
要使用该标记必须在该标记前加上正确的XML命名空间前缀
例如:

定义一个新标记RIGHT的例子
代码片断如下：<HTML XMLNS:DOCJS>
<HEAD>
<STYLE>
@media all {
DOCJS\:RIGHT {text-align:right; width:100}
}
</STYLE>
</HEAD>
<BODY>
<DOCJS:RIGHT>
Read Doc JavaScript's columns, tips, tools, and tutorials
</DOCJS:RIGHT>
</BODY>
</HTML>


可以在单个HTML标记
中定义多个命名空间：
<HTML XMLNS:DOCJS XMLNS:DOCjavascript>

组件定义
组件的名字是由HTC文档里定义在第一行的XML命名空间决定的
该页不用调用其他的HTC话,就只有一个命名空间定义
实际上，HTML组件的定义就是自定义标签行为的定义
该行为包括一个属性和一个事件：

<HTML xmlns:MyTag>
<HEAD>
<PUBLIC:COMPONENT tagName="MyTag">
<PROPERTY NAME="value"></PROPERTY>
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"<>/ATTACH>
</PUBLIC:COMPONENT>
<STYLE>//为组件定义样式表
.cssMyTag{
}
</STYLE>
<SCRIPT language=javascript>
function MyTagBehavior1(){} //为组件定义方法
</SCRIPT>
</HEAD>
<BODY onclick=MyTagBehavior1> //为组件定义响应事件
</BODY>
</HTML>


其中的oncontentready是在组件被调用者完全导入时触发
再看看fnInit()

function fnInit() {
document.body.innerHTML = element.value;//设定组件显示内容
document.body.className = "clsMyTag"; //设定显示样式表,
defaults.viewLink = document; //使本组件对其他文档可见
element.aProperty = element.value; //设置组件的属性值
}


组件的调用

<HTML xmlns:MyCom>
<HEAD>
<?IMPORT NAMESPACE="MyCom" IMPLEMENTATION="MyTag.htc"/>
</HEAD>
<BODY>
<MyCom:MyTag></MyCom:MyTag>
</BODY>
</HTML>
gdm 2004-01-16
  • 打赏
  • 举报
 回复
再贴一篇关于HTC组件的介绍：
在微软IE 5.0版本的浏览器发布以前，网页编程中面对的最大挑战就是不能轻易地创建组件，以达到代码重用和多页面共享的目的。这个问题一直困扰着DHTML（动态 HEML）的网页编程者。他们只能不断地重复书写HTML、CSS和javascript的代码，以满足多个页面上的重复或相似的功能。自IE 5.0浏览器发布后，这种情况得到了改善，它带给我们一个新的指令组合方法，可把实现特定功能的代码封装在一个组件内，从而实现多页面的代码重用，使网页编程进入一个全新的天地。这个新的技术就是我们要谈到的DHTML中的“行为”（Behaviors）。
　　“行为”作为一个简单易用的组件，它封装了页面上特定的功能或动作。当把一个“行为”附到WEB页面中的一个元件上时，这个元件的原有行为就会有所改变。因此，网页编程者可以开发通用的DHTML指令，并改变原有对象的一些属性，用“行为”来增强一个对象的功能，同时也简化了页面的HTML代码。而且“行为”的创建和使用也非常简单方便，所需的知识也只是原来已经习惯使用的CSS样式表、HTML指令和javascript脚本语言。只要你对此有所了解，有过实际编程的经历，学习并掌握“行为”的使用完全没有问题。我们将以一个改变字体效果的“行为”组件为例来说明如何编写和使用一个“行为”，并体验“行为”给页面编辑带来的优点和方便之处。

　　首先新建一个名为font_efftce.htc的文本文件，组成“行为”组件的文件都是以.htc为扩展名，这个文件中的内容就是我们对这个“行为”的描述。它的创建和使用步骤如下：
（1）首先给这个“行为”增加几个事件响应，语句书写格式如下：
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
　　“EVENT”对应所需事件名，在这里分别为：onmouseover,onmouseout,onmousedown,onmouseup四个事件名，你当然可以再增加其它的事件名来满足你的特定需求。“ONEVENT”对应着个自的事件句柄，即事件触发时所调用的函数名称。glowit()函数使字体周围产生一个红色的辉光。noglow()函数是消除字体的辉光效果。Font2yellow()函数是把字体颜色改为黄色。Font2blue()函数是把字体颜色改为蓝色。四个事件的定义都是相似的。
（2）接下来，再给这个“行为”增加二个“方法”定义，内容如下。
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
　　“NAME”参数对应的是给定的“方法”名称。move_down和move_right分别是向下和向右移动的“方法”对应的函数名称。注意，在方法名的后面不要带“( )”括号，即不要写成“move_down()”这个样子，这在“方法”定义的语法上是不允许的。

（3）接下来的工作就是在我们熟悉的DHTML环境下，用javascript脚本语句编写“事件句柄”和“方法”所对应的函数内容，实现预期的效果。具体内容参考下面的源程序。其中的“element”参数指的是这个“行为”所附着的对象，因为“行为”总是被附着到页面的元件上面，并通过这个元件发挥作用。其它语句都是DHTML的编程内容，就不再多说了。如有不明之处，可参考微软的MSDN开发文档中有关IE浏览器的内容，上面有详细的DHTML编程参考内容、属性和方法使用说明等，并包含了大量的文章和举例程序。经常访问微软的MSDN文档，尤其对于初学者来说是一个良好的学习习惯，你几乎可以得到任何你想找的答案，它的网址为：http://msdn.microsoft.com/ie/。
　　完整的“行为”文档“font_effect.htc”的内容如下：
////////////////////////////“行为”文档开始///////////////////////////////////
//给“行为”增加四个鼠标事件
< PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()" / >
< PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()" / >
< PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()" / >
< PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()" / >
//给“行为”定义二个方法
< PUBLIC:METHOD NAME="move_down" / >
< PUBLIC:METHOD NAME="move_right" / >
< SCRIPT LANGUAGE="JScript" >
//定义一个保存字体颜色的变量
var font_color;
//定义向下移动文字的方法
function move_down()
{
element.style.posTop+=2;
}
//定义向右移动文字的方法
function move_right()
{
element.style.posLeft +=6;
}
//定义鼠标onmouseup事件的调用函数
function font2blue(){
if (event.srcElement == element)
{
element.style.color='blue';
}
}
//定义鼠标onmousedown事件的调用函数
function font2yellow(){
if (event.srcElement == element)
{
element.style.color='yellow';
}
}

//定义鼠标onmouseover事件的调用函数
function glowit()
{
if (event.srcElement == element)
{
font_color=style.color;
element.style.color='white';
element.style.filter="glow(color=red,strength=2)";
}
}

//定义鼠标onmouseout事件的调用函数
function noglow()
{
if (event.srcElement == element)
{
element.style.filter="";
element.style.color=font_color;
}
}
< /SCRIPT >
//////////////////“行为”文档结束///////////////////////////////

（4）如何在一个页面上使用“行为”
　　在页面上使用“行为”组件，并不需要学习新的知识。所需的知识的也不过是CSS样式表和HTML的设置而已，请看下面的语句。
< STYLE >
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
< /STYLE >
　　可以看出，这和以前我们已经熟知的样式表设置完全相同。上面的语句定义了一个样式名：“myfilter”，其中对我们来说比较新的内容是：“behavior:url(font_effect.htc);”，“behavior”是新增的“行为”属性名，这就是“行为”在样式表中的设置方式。括号中的内容是“行为”文档的文件名，本例中表明“行为”文档在与页面文件在同一个目录下，如果“行为”文档安置在其它目录下，在此参数的前面要加上相应的路径名，以保证可以正确地定位“行为”文档的位置。此“样式”中的其它内容就是普通的样式属性设置，可根据你的需要增减，但在此例中，由于使用了“glow”滤镜效果，至少要设置一个宽度（width）属性。通过以上的样式指定，我们就有了一个名为：“myfilter”的样式，它附带一个有字体变化效果的“行为”。如果你想要在一个页面元件上使用这个附带“行为”的样式，同样也很简单，只要把这个“样式名”安置在元件的属性设置区域即可，见下面的语句。
< span id="myspan" class='myfilter' >行为产生的文字效果< /span >< br >
< span class='myfilter' >鼠标指向后产生辉光< /span >
　　以上语句里面没有什么新的内容，class='myfilter'就是我们所熟悉的样式设置。在第一个“span”标记的属性中还定义了一个“id”标记，稍后就会看到，这是用来演示调用“行为”内的“方法”而设置的。这样设置后，“span”元件中的内容就可以显示出“行为”组件内的预定效果：
1． 鼠标指针移动到文字内容上时，在文字周围产生红色的辉光效果，同时文字变成白色。
2． 当鼠标按钮按下时，文字颜色改变为黄色。
3． 鼠标按钮抬起后，文字颜色又改变为蓝色。
4． 当鼠标指针移动到文字区域以外时，去掉了红色辉光效果，文字恢复原样。
　　另外，我们在定义“行为”时设置了二个“方法”，“move_down”和“move_right”。为调用这二个“方法”，定义了二个按钮：
< button onclick="myspan.move_right();" >向右移动第一行文字< /button >< br >
< button onclick="myspan.move_down();" >向下移动第一行文字< /button >
　　用按钮的onclick事件去调用这二个“方法”，先前定义的“id”标记就作为元件的对象名称，用“myspan.move_down”来调用“方法”，操纵这个对象。可以看到，在按下相应的按钮后，会使第一行的文字产生向下或向右的移动。虽然只是用第一行文字做了示范，实际上，只要做相应的设置，你也可以移动其它对象。页面源文档的完整内内容如下：
sinusoid 2004-01-16
  • 打赏
  • 举报
 回复
恭喜~~
接分来了
Drowning 2004-01-16
  • 打赏
  • 举报
 回复
恭喜恭喜，拿分来了
driftarter 2004-01-16
  • 打赏
  • 举报
 回复
恭喜,向楼主学习
DwNet 2004-01-16
  • 打赏
  • 举报
 回复
恭喜升级啦!
ralphchen 2004-01-16
  • 打赏
  • 举报
 回复
恭喜。
tuoshi 2004-01-16
  • 打赏
  • 举报
 回复
恭喜，接分！~~
lhtyx 2004-01-16
  • 打赏
  • 举报
 回复
恭喜。
xht_123qwe 2004-01-16
  • 打赏
  • 举报
 回复
恭喜！！！！！！！！！
snower01 2004-01-16
  • 打赏
  • 举报
 回复
恭喜
qunluo 2004-01-16
  • 打赏
  • 举报
 回复
呵！呵！
同喜！贺喜！和偶一样！
gdm 2004-01-16
  • 打赏
  • 举报
 回复
再来一篇

=================================================================================
提高HTML页面性能的技巧
Michael Wallent
微软公司

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

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

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

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

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

<html>


<body>


<script>


var tbl, tbody, tr, td, text, i, max;


max = 1000;





tbl = document.createElement("TABLE");


tbl.border = "1";


tbody = document.createElement("TBODY");


tbl.insertBefore(tbody, null);


document.body.insertBefore(tbl, null);


for (i=0; i<max; i++) {


tr = document.createElement("TR");


td = document.createElement("TD");


text = document.createTextNode("Text");


td.insertBefore(text, null);


tr.insertBefore(td, null);


tbody.insertBefore(tr, null);


}


</script>


</body>


</html>


View the first sample.

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

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

因此我作了第一次改进尝试：缓存（Cache）document.body 到本地变量“theBody”中：

增加了如下代码:

var theBody = document.body;


然后修改这一行:

document.body.insertBefore(tbl, null);


将之改为:

theBody.insertBefore(tbl, null);


View the second sample.

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

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

<html>


<body>


<script>


var tbl, tbody, tr, td, text, i, max;


max = 1000;


var theDoc = document;


var theBody = theDoc.body;





tbl = theDoc.createElement("TABLE");


tbl.border = "1";


tbody = theDoc.createElement("TBODY");


tbl.insertBefore(tbody, null);


theBody.insertBefore(tbl, null);


for (i=0; i<max; i++) {


tr = theDoc.createElement("TR");


td = theDoc.createElement("TD");


text = theDoc.createTextNode("Text");


td.insertBefore(text, null);


tr.insertBefore(td, null);


tbody.insertBefore(tr, null);


}


</script>


</body>


</html>


View the third sample.

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

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

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

<html>


<body onload="init()">


<script defer>


function init() {


var tbl, tbody, tr, td, text, i, max;


max = 1000;


var theDoc = document;


var theBody = theDoc.body;





tbl = theDoc.createElement("TABLE");


tbl.border = "1";


tbody = theDoc.createElement("TBODY");


tbl.insertBefore(tbody, null);


theBody.insertBefore(tbl, null);


for (i=0; i<max; i++) {


tr = theDoc.createElement("TR");


td = theDoc.createElement("TD");


text = theDoc.createTextNode("Text");


td.insertBefore(text, null);


tr.insertBefore(td, null);


tbody.insertBefore(tr, null);


}


}


</script>


</body>


</html>


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次测试。代码如下：

<html>


<body onload="init()">


<script defer>


function init() {


var tbl, tbody, tr, td, text, i, max;


max = 1000;


var theDoc = document;


var theBody = theDoc.body;





tbl = theDoc.createElement("TABLE");


tbl.border = "1";


tbody = theDoc.createElement("TBODY");


tbl.insertBefore(tbody, null);


theBody.insertBefore(tbl, null);


for (i=0; i<max; i++) {


tr = theDoc.createElement("TR");


td = theDoc.createElement("TD");


text = theDoc.createTextNode("Text");


tbody.insertBefore(tr, null);


tr.insertBefore(td, null);


td.insertBefore(text, null);


}


}


</script>


</body>


</html>


View the fifth sample.

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

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

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

tbl.style.tableLayout = "fixed";


View the sixth sample.

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

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

td.innerText = "Text";


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应用程序性能；需要知道什么慢，什么快。希望这些方法能帮你提高页面性能。

=================================================================================
tweit 2004-01-16
  • 打赏
  • 举报
 回复
接着
gdm 2004-01-16
  • 打赏
  • 举报
 回复
接上

function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;

c = lastSelection;

if (c.tagName != "TD") {
return null;
}

ls = c.nextSibling;

if (ls == null)
return null;

p = ls.parentElement;

ls = ls.nextSibling;

p.insertBefore(c, ls);

return c;
}

function nothingSelected() {
return (lastSelection == null);
}

function rowSelected() {
var c;
if (lastSelection == null)
return false;

c = lastSelection;

return (c.tagName == "TR")
}

function cellSelected() {
var c;
if (lastSelection == null)
return false;

c = lastSelection;

return (c.tagName == "TD")
}

function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}

</script>
==================================================================================
gdm 2004-01-16
  • 打赏
  • 举报
 回复
动态编辑表格
=================================================================================
<html>
<head>
<style>
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<div id=TableContainer>
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr>
</tbody>
</table>
</div>

<br><br><br>

<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"><br>
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"><br>
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"><br>
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"><br>
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"><br>
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"><br>
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"><br>
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"><br>
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();">
<input type=text style="display: none; width: 400px;" id=EditCell><br>
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();">
<input type=text style="display: none; width: 400px;" id=EditStyle><br>
<script>
var lastSelection = null;

ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");

function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}

window.event.cancelBubble = true;
}

TableContainer.onclick = select;

function cancelSelect() {

if (window.event.srcElement.tagName != "BODY")
return;

if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}

document.onclick = cancelSelect;

function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}

function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}

function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}

function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}

function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;

if (r.tagName == "TD") {
r = r.parentElement;
}

p = r.parentElement;
}

nr = document.createElement("TR");

p.insertBefore(nr, r);

select(nr);

addCell();

return nr;
}

function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;

r = lastSelection;

if (r.tagName == "TD") {
r = r.parentElement;
}

p = r.parentElement;

p.removeChild(r);

lastSelection = null;

return r;
}

function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;

r = lastSelection;

if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}

nc = document.createElement("TD");
text = document.createTextNode("New Cell");

nc.insertBefore(text, null);
r.insertBefore(nc, c);

select(nc);

return nc;
}

function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;

c = lastSelection;

if (c.tagName != "TD") {
return null;
}

p = c.parentElement;

p.removeChild(c);

lastSelection = null;

return c;
}

function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;

c = lastSelection;

if (c.tagName != "TD") {
return null;
}

EditCell.style.display = "";

EditCell.value = c.innerHTML;

c.setExpression("innerHTML", "EditCell.value");

EditCell.focus();

EditCell.onblur = unhookContentsExpression;
}

function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}

function editStyle() {
var c;

if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}

EditStyle.style.display = "";

EditStyle.value = c.style.cssText;

c.style.setExpression("cssText", "EditStyle.value");

EditStyle.focus();

EditStyle.onblur = unhookStyleExpression;
}

function unhookStyleExpression() {
var c;

if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");

EditStyle.value = '';
EditStyle.style.display = "none";
}

function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;

r = lastSelection;

if (r.tagName != "TR") {
return null;
}

if (r.rowIndex == 0)
return;

ls = r.previousSibling;

p = ls.parentElement;

p.insertBefore(r, ls);

return r;
}

function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;

r = lastSelection;

if (r.tagName != "TR") {
return null;
}

ls = r.nextSibling;

if (ls == null)
return null;

p = ls.parentElement;

ls = ls.nextSibling;

p.insertBefore(r, ls);

return r;
}

function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;

c = lastSelection;

if (c.tagName != "TD") {
return null;
}

ls = c.previousSibling;

if (ls == null)
return null;

p = ls.parentElement;

p.insertBefore(c, ls);

return c;
}

gdm 2004-01-16
  • 打赏
  • 举报
 回复
to:anddytang(风衣笛手)
SQL联机丛书。
最好在对数据批处理、批量运算时自己多动手编写，写的多了想的多了也就熟了。
kinglately 2004-01-16
  • 打赏
  • 举报
 回复
恭喜楼主：）接分：）

可怜我还没工作：（
TrueAndFalse 2004-01-16
  • 打赏
  • 举报
 回复
top10
加载更多回复（6）
电子商务项目设计（案例）
电子商务项目设计案例 一、项目概述 简要说明项目的要点，让读者了解整个项目的大体情况。 1、项目名称：“芬芳”网上花店项目规划设计方案 2、项目背景：(需求及迫切性) 随着互联网技术
Palm史话
来源：Hi-PDA作者：ediot在这篇文章中，我们将带您回顾整个palm OS掌上电脑的历史：Palm 和其他公司的产品是如何诞生的，背后的幕后英雄是谁，究竟经过了怎样激烈而有趣的竞争才形成了现在这样的市场格局。...
[转帖]我的2006
- 秋毫ERP咨询-微软Dynamics Ax Axapta Nav SL CRM论坛 (http://www.qiuhao.com/index.asp)-- 『精品IT咨询和评论论坛』 (http://www.qiuh...
《战略人力资源管理》
在 2003年度的比赛中，中国内地是世界上参赛队最多的。今年的比赛目前激战正酣，在刚刚结束的前两轮比赛中，中国学生力压来自哈佛、沃顿和 INSEAD 等名校的竞争对手，在全球前十名中占据六席，其中前三名被对外经济...
windows类书的学习心得
windows类书的学习心得 这篇文章应该是凑的，不够很长...创建人： paul 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千,很多陌生的出版社,很多陌生的作者,很多陌生的译者,书名也是越来越夸张,什
ASP

28,391

社区成员

357,060

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章