behavior绑定后执行速度变慢，如何解决

yoken 2003-09-23 03:28:57
为了减少a.htm中的代码量，我把td里的
OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"
抽取出来放到tdBehavior.htc里，然后利用css将这个htc绑定到td上得到b.htm

在b.htm里，当dataTable里的tr变得多起来（你可以copy-paste使其变多）时，页面显示出来的时间就会变化很大，而在a.htm里，tr变多时页面显示速度变化不算太大。

如何即能减少代码量，又能防止htc绑定时过多的时间消耗

---------------------------------------------
a.htm

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function showDetail(field) {
if (field.childNodes[0].childNodes[0] != null) {
window.open("basicInfoTZbShhModifyTMain.jsp?zbId=" + field.childNodes[0].childNodes[0].nodeValue, "rightFrame");
}
}
</script>
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#EAE4C2" text="#000000">
<table width="325" border="0" align="center">
<tr>
<td>
<table width="320" cellspacing="1" bgcolor="#0000cc">
<tr align="center" class='tdtitlebackground'>
<td width="80">代 码</td>
<td width="80">名 称</td>
<td width="80">型 号</td>
<td width="80">配发时间</td>
</tr>
</table>
<DIV style="position:relative;top:-1px;width:336px;height:120px;overflow-x:auto;overflow-y:auto">
<table width="320" cellspacing="1">
<tr ondblclick="showDetail(this)">
<td style="display:none;">100</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1996-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">120</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1999-06-14</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">121</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1999-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">122</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1999-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3384</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1996-06-17</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3450</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1996-06-27</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3699</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';"></td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">桑塔纳普通型卧车</td>
<td width="80" OnMouseOver="this.bgColor='#B9DAFB';" OnMouseout="this.bgColor='#FCFCFC';">1997-03-03</td>
</tr>

</table>
</div>
</td>
</tr>
</table>
</body>
</html>



...全文
41 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
coolstar 2003-12-26
  • 打赏
  • 举报
 回复
htc的确存在性能问题
cloudchen 2003-09-23
  • 打赏
  • 举报
 回复
我的一个日历本来也打算用htc的，不过那个慢啊，在单元格间移动变换背景色老是出现鼠标沙漏，后来不用了！
循环 + attachEvent()
liusong1234 2003-09-23
  • 打赏
  • 举报
 回复
前几个月我也做这个效果也试了htc，本以为script在客户端应该没有效率问题，结果叫人失望。后来还是放弃htc,通过给table自定义属性（还是特定className属性记不清了）和attachEvent实现的。记得当时特意分了thead和tbody以区分不同的效果。代码写在一个全局js中，window.onload时attach过去的。
好消息,迷失老大发贴了
http://expert.csdn.net/Expert/topic/2286/2286729.xml?temp=.342312
yoken 2003-09-23
  • 打赏
  • 举报
 回复
---------------------------------------------------------

b.htm

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function showDetail(field) {
if (field.childNodes[0].childNodes[0] != null) {
window.open("basicInfoTZbShhModifyTMain.jsp?zbId=" + field.childNodes[0].childNodes[0].nodeValue, "rightFrame");
}
}
</script>
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" bgcolor="#EAE4C2" text="#000000">
<table width="325" border="0" align="center">
<tr>
<td>
<table width="320" cellspacing="1" bgcolor="#0000cc">
<tr align="center" class='tdtitlebackground'>
<td width="80">代 码</td>
<td width="80">名 称</td>
<td width="80">型 号</td>
<td width="80">配发时间</td>
</tr>
</table>
<DIV style="position:relative;top:-1px;width:336px;height:120px;overflow-x:auto;overflow-y:auto">
<table width="320" cellspacing="1" id="dataTable">
<tr ondblclick="showDetail(this)">
<td style="display:none;">100</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1996-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">120</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1999-06-14</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">121</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1999-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">122</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1999-01-01</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3384</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1996-06-17</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3450</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1996-06-27</td>
</tr>

<tr ondblclick="showDetail(this)">
<td style="display:none;">3699</td>
<td width="80"></td>
<td width="80">桑塔纳</td>
<td width="80">桑塔纳普通型卧车</td>
<td width="80">1997-03-03</td>
</tr>

</table>
</div>
</td>
</tr>
</table>
</body>
</html>



---------------------------


style.css里

#dataTable td {
behavior:url(../htc/tdBehavior.htc)
}




----------------------------------

tdBehavior.htc

<public:component>
<public:attach event="onmouseover" onevent="mouseOver()"/>
<public:attach event="onmouseout" onevent="mouseOut()"/>
<script language=javascript>
function mouseOver(){
this.bgColor="#B9DAFB";
}

function mouseOut(){
this.bgColor="#FCFCFC";
}
</script>
</public:component>






UC浏览器主界面滑动折叠效果 使用自定义behavior实现 难度五颗星*****
判断速度，比如速度大于800 我们才认为是快速滑动了。 核心代码： private boolean startExpandOrClose(float velocityY){ //获取松开手瞬间,图片已经平移的距离 float translationY = dependency....
代理模式
主要解决：在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给...
基于 Vue3打造前台+中台通用提效解决方案（上）
本项目使用 + 来实现前中台解决方案因为，之前的项目一直都是使用作为构建工具；出来这么久了，也没有用过；所以想在当前项目下进行使用；webpack vite 2.2、这么快会有什么问题吗？ 如果大家对的构建机制有了解的...
vue全网最全笔记
- 表单标签 - 如：input、select、textarea - value - v-model - `` - 注意，v-model中仅能使用一个变量，不存在拼接和多变量 - 双向数据绑定 - 绑定属性 - 媒体标签 - video、audio、img - v-bind - v-bind:属性 `...
WPF（三）
23 程序集资源 添加资源 内容文件 24 将元素绑定到一起 绑定表达式 绑定错误 绑定模式 使用代码创建绑定多绑定 绑定更新 25 绑定到非元素对象 Sourse属性 RelativeSource属性 DataContext 属性
JavaScript

87,902

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章