CSS细节积累

  • cursor:hand 和 cursor:pointer

cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行。
cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。
cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。

Conclusion:
cursor:pointer 比较好用!

                             IE5    IE6    IE7    Firefox
cursor:pointer       ×           √     √         √
cursor:hand          √           √      √         ×

开发指南–浏览器用户界面–选项页面(Options)

选项(Options)

你可能想通过提供一个选项页,来允许用户对你的扩展进行自定义配置。如果这样做,系统会在扩展程序管理页面(chrome://extensions)中提供一个链接指向它。点击选项链接会打开一个新的标签页来指向你的选项页面。

原文 写道
To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.

第一步: 在Manifest文件中声明你的选项页面

原文 写道
Step 1: Declare your options page in the manifest

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

第二步: 编写你的选项页面

原文 写道
Step 2: Write your options page

这是一个选项页面的例子:

原文 写道
Here is an example options page:

<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">

// 将选项保存到localStorage。
function save_options() {
  var select = document.getElementById("color");
  var color = select.children[select.selectedIndex].value;
  localStorage["favorite_color"] = color;

  // 更新状态,让用户知道选项被保存。
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// 根据localStorage中保存的值恢复选择框的状态。
function restore_options() {
  var favorite = localStorage["favorite_color"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("color");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}

</script>

<body onload="restore_options()">

Favorite Color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<br>
<button onclick="save_options()">Save</button>
</body>
</html>

重要说明

  • 这个功能在4.0.222.x版本后的某个正式主干版本中加入。
  • 原文 写道
    This feature is checked in to the trunk and should land in official builds sometime after version 4.0.222.x.
  • 我们计划提供一些默认的CSS样式,以使不同扩展的选项页面外观一致。你可以在crbug.com/25317中加星来促进更新。
  • 原文 写道
    We plan on providing some default css styles to encourage a consistent look across different extensions’ options pages. You can star crbug.com/25317 to be notified of updates.

Struts2的四种theme类型

struts2 中有四种 theme 类型:

simple theme A minimal theme with no “bells and whistles”

xhtml theme The default theme that uses common HTML practices

css_xhtml theme The xhtml theme re-implemented using strictly CSS for layout

ajax theme A theme based on the xhtml theme that provides advanced AJAX features

除了simple theme之外,其他的theme都会自动为你生成layout,例如

<s:form>

<s:submint />

</s:form>

会生成如下的HTML片段:

<form>

<table>

<tr>

<td><input type=”submit” ../>

</tr>

</table>

</form>

所以如果使用这三种类型的theme不需要使用table定layout。

如果使用simple的theme才需要使用table定layout。

但是按照你的想法,使用前三种theme无法把submit和reset放在同一个tr中(即无法放在同一行)

解决方法:

1 使用simple theme , 但是这样子的话你无法使用ajax的一些特性,需要自己编写ajax的特性。

2 基于xhtml theme自己重新写一个theme,但是难度会大一点。

 

****************************************************************

struts.xml:

 <constant name=”struts.ui.theme” value=”css_xhtml” />

jsp:

<s:form namespace=”/admin/category” id=”deleteCarSeriesForm” action=”deleteCarSeries” method=”post”  theme=”launch”>

CSS定位

动态转换        作者:未知 来源:洪恩

  通过在CSS中设置属性,我们可以准确的定义一个页面的样式,如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感。
   另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
   实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表(见下图):

定位属性

  我们在下面举一个例子,其中带了一点Script的内容,我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧,请点击这里
   看,通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下:

  <html>
    <head>
    <title>dingwei css</title>
    <style type=“text/css”>
    <!–
    #container1{position:absolute;top:100}
    //*定义container1 为绝对位置*//
    #container2{position:absolute;top:100;visibility:hidden;}
     //*定义container2为绝对定位,初始可见度为hidden(隐藏)*//
    p{font-size:12pt;}//*定义p的字体*//
    –>
    </style>
    </head>
    <body>
    <p style=“font-family:行书体;font-size:15pt;color:#cc33cc”>
    请选择一幅图片: </p>//*设置字体大小、名称、颜色*//
    <div id=“container1”>
    <dd><img src=“ss01065.jpg” width=“185”height=“280”>
    //*导入一张图片,标识符为container1*//
    <p style=“font-family:行书体;color:#cc9933;font-size:12pt”>
     名称:大漠</p>//*设置字体名称、颜色、大小*//
    </dd>
    </div>
    <div id=“container2”>
    <dd><img src=“ss01095.jpg” width=“185”height=“280”>
    //*导入另一种图片,标识符为container2*//
    <p style=“font-family:行书体;color:#3366cc;font-size:12pt”>
      名称: 大海</p>
    </dd>
    </div>
    <form name=“myform”>//*定义两个按钮*//
    <p><input type=“button” value=“大漠”      
     onclick=“container1.style.visibility=‘visible’;
     container2.style.visibility=‘hidden’”>
    //*定义鼠标点击事件图片1为可见,图片2为不可见*//
    <input type=“button” value=“大海”;
     container1.style.visibility=‘hidden’;
     onclick=“container2.style.visibility=‘visible’;
     container1.style.visibility=‘hidden’”></p>
     //*定义鼠标点击事件图片1为不可见,图片2为可见*//
     </form>
     </body>
   </html>

  代码虽然长了一些,但结构很简单,您只要用心看注释,很容易理解的。下一节我将向您继续介绍一个CSS定位的例子。

  2.空间定位

  在这一节里,我们来看一个利用z-index定位的例子,这个例子的效果在这里
   我们看到例子中的两幅图片和一段文字分别处于不同的空间位置,文字覆盖在那朵花的图片上,而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢?这里利用了CSS定位的z-index属性,代码如下:

  <html>
    <head>
    <title>zindex</title>
    <style type=“text/css”>
    <!–                   
     .pile{position:absolute;left:2in;top:2in;
     width:3in;height:3in;}//*定义了类pile,以及它的位置*//
     .pile1{position:absolute;left:3in;top:2in;
     width:1in;height:1in;} //*定义了类pile1,以及它的位置*//
     –>
     </style>
     </head>
     <body>
     <img src=“ss01010.jpg” class=“pile” id=“image”
     style=“z-index:1”>
     //*导入一张图片,使它为pile类,z-index属性定义为1,位置处于最下方
       *//
     <div class=“pile” id=“text1”
     style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
     </div>//*定义一段文字的颜色和z-index属性为2,处于中间位置*//
     <img src=“075.gif” class=“pile1” id=“image”
     style=“z-index:3”>
     //*导入第二张图片,使它为“pile1”类,z-index属性为3,位置处于最上
       方*//
     </body>
   </html>

  通过这两节的例子,我们可以看到CSS定位具有强大的功能,至于其他的一些定位属性,您可以自己尝试一下,很简单的。
   利用好了CSS的定位功能,会使您的页面更加精致,更加富有动感。

CSS雕虫小技:八卦五行布图法介绍

本质和优点



先申明一下,这里不是在谈玄论道,说八卦五行,我只是利用了一下这几个数字传统的知名度,以及阴阳说中问题归纳和状态演化的技法。

这里所说的布图,就是一种将诺干背景小图片合并在一起(传说中的CSS滑动门技术);这里说的布图说的就是如何组织这些零散的小图片。

口诛笔伐:糟糕的绝对位置布图法:

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中,比如【0,0】放置一个编辑按钮,【0,40】放置一个删除按钮【0,60】放置一个保存按钮。等等。

如此最大的问题是:无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。

那么,我们如何更好的布图呢?

首先,让我们抛弃我们使用绝对位置的习惯,理由是:

1.绝对位置不便记忆:

绝对位置都是一些数字标示,非常难记,相对位置是个有限集合,绝对位置有无限的状态。

2.绝对位置不便适应需求的变更:

比如我们一个小图片,最初是 18*18,于是,我们布图的时候,间隔为20.

但是后来开发了一套大图标皮肤,小图标的大小变成21*21,溢出了。。。,改吧,慢慢改吧,我们有的是时间。。。

3.绝对位置在编辑的时候也比较麻烦:

而相对位置,你可能只要打开你的布局管理器,轻轻点击几下对齐图标。

如果有一些小调整,绝对位置布局的时候,我们要小心的计算出新的布局位置,更新文档,更新相关代码,通知相关工程师。。。。

4.增加沟通成本:

因为绝对位置的无穷性,我们无法给数值表示的相对位置赋予通用的适合的语意,无穷的状态我们需要依赖无穷的文档。

(我们估计没有这种文档,一旦需要调整,打电话问吧,希望你能找对人。。。)。

而相对位置,只有有限的状态,我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性:

这点不必解释,绝对布图法根本就不具备这一特征。



太极生两仪,两仪生四相,四相生八卦。

最朴素的图标只有一个状态,这很简单,我们制作一张很朴素的图片即可。

然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候,我们可以采用左右两端布图。

之后呢,鼠标按下去是不是也要有一个新的状态?哦,还差点忘了,更重要的,功能禁用了我们也需要一个状态。至此四大天王到齐了,各自找个角落呆着吧。

我们常见的也就是这四种状态:

1.正常:

2.鼠标放上

3.鼠标点击

4.禁用

如果我把这四种状态自左上起,顺时针排列,我们还可以达到一个惊人的自适应性。

当我们只准备了一个图标的时候,吧他做成整幅度的图片,那么四种状态都显示为正常的图标。

需要增加状态2的时候,只需要扩展右段新图片。同样,一切正常(disablle状态不被支持,显示为正常状态,按下和鼠标移上效果一致也是一个理想的巧合)。

当需要鼠标按下的时候,扩展下方图标。同样,一切正常。

这四种状态的组合,我称之为斜四相。对应样式单为 “.quad-x-”

但是,我们的八卦可是有八个方位的,不要轻易浪费了,怎么办呢?

老子说了:”万物负阴而抱阳,冲气以为和”。

这是我们客观世界普遍纯在的规律。

比如,我们有一个展开的图标,那么我们极有可能需要一个关闭的图标。我们有一个保存按钮,那么,我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联,完全应该安排在一起。

于是,我们吧原来的布局位置,顺时针旋转45度,一个正四相产生了。对应样式为:“.quad-y-”

待续。。。。

css中position

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

此文已经讲的很详细了!

   我来简化一下,说说自己的理解:

      relative:根据他自身的位置(没有进行relative偏移时)进行偏移

      absolute则分两种情况:1、父级对象都没有设置position属性(主要是relative和absolute两个值)时,则会以body为定位对象,即按浏览器窗口进行定位;

             2、当父级对象设置了position属性时,则根据设置了position的最近的父级对象进行定位

       注意:当position设成absolute之后,margin不起作用,但是padding和border还是存在的!

对web应用效率提升的一些经验及疑问

1. 对dom节点的使用:

    尽量避免使用dom对象,大家都知道对dom树的遍历非常耗费资源,因此如果需要重复使用时,将dom对象存在一个js的变量中,然后对这个变量进行使用,避免每次使用dom节点时对dom树的遍历,切记,在使用完对dom对象引用的变量后要将其置为null,否则你会发现内存的占用率有增无减,直到你关闭了浏览器为止。

2. 对eval函数的使用:

     在使用eval函数时,会增加了对eval函数中代码解析的过程,而这个解析的过程是非常耗费资源的,因此,尽量避免使用eval函数,如果非用不可,也要尽可能的减少eval解析的代码量,将需要执行的代码提取到一个方法内,eval只解析这个函数名来提高eval的效率,可以通过以下的示例进行比较:

    方法一:

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

      方法二:

var test = function() { 
    for(var i = 0; i < 10000000; i ++) {
        var str = 'test' + i; 
    } 
} 
var testFun = eval('test'); 
testFun(); 

3. try-catch的使用:

    尽量把try-catch语句放在循环外边。

4. 全局变量的使用:

     全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。

5. 压缩合并js和css文件:

     这方面的优化估计很多人都做过,现在有好多JS和CSS压缩和混淆的工具,如yahoo的yui-compressor.jar,在页面完全使用Ext等js框架开发时压缩和混淆JS对效率提升尤其明显。

6. 异步请求中GET与POST的选择:

     大家都知道用GET方式来发送HTTP请求效率要远远高于POST请求,但是出于安全的考虑,这里需要慎重选择请求方式,可以参考我的另外一篇文章。

 

——————————————————————————————– 

 

另外,还有一些开发过程中的细节也会对效率提升起到一定得作用:

1. 不要使用with语句

2. str += “aaa”; str += “bbb”; 效率大于 str = “aaa” + “bbb”;

3. 原生的态的写法效率大于函数,如:

    a > b   a : b; 效率大于 Math.max(a, b);

    array[array.length] = obj; 效率大于 array.push(obj);

4. 对数组进行遍历时,先把数组的长度保存在变量中

for(var i = 0, len = array.length; i < len; i ++) { 
    // 遍历数组 
}

5. innerHTML方法效率大于createElement()/appendChild()方法

6. 尽量减少图片链接个数,减少对带宽的耗费

 

——————————————————————————————–

 

目前还在对以下几方面的优化进行分析和研究,都是本机测试,基本可以忽略网络问题,希望高人可以进行指点:

1. ajax以POST方式发送异步请求时的性能优化

    现状:用HTTPWATCH检测时,SEND时间过长,有时竟然会超过0.8秒,传输量并不大,   

    请求信息:

    Content-Type : application/x-www-form-urlencoded;charset=UTF-8

    Content-Length : 133 (10个字符串参数)

2. 在接收response的content时的性能优化

    现状:用HTTPWATCH监测时,RECEIVE时间过长

    response信息:

    HTTP/1.1 200 OK

    Server : Apache-Coyote/1.1

    Content-Type : text/plain;charset=UTF-8

    Content-Length : 4147

3. 在多个请求之间会有延时,如第一个请求完成之后会有零点几秒的延时才会进行下一个请求,那么这个延时的时间可以进行优化吗?这个延时的时间到底是在做什么呢?执行javascript代码?还是请求的等待队列?

希望高人可以指点,先行谢过!

 

CSS选择器

=====================

CSS选择器笔记

一、基本选择器

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

实例:

二、多元素的组合选择器

序号 选择器 含义
5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7. E > F 子元素选择器,匹配所有E元素的子元素F
8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

实例:

三、CSS 2.1 属性选择器

序号 选择器 含义
9. E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10. E[att=val] 匹配所有att属性等于“val”的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等

实例:

四、CSS 2.1中的伪类

序号 选择器 含义
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang(c) 匹配lang属性等于c的E元素

实例:

五、 CSS 2.1中的伪元素

序号 选择器 含义
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容

实例:

六、CSS 3的同级元素通用选择器

序号 选择器 含义
24. E ~ F 匹配任何在E元素之后的同级F元素

实例:

七、CSS 3 属性选择器

序号 选择器 含义
25. E[att^=”val”] 属性att的值以”val”开头的元素
26. E[att$=”val”] 属性att的值以”val”结尾的元素
27. E[att*=”val”] 属性att的值包含”val”字符串的元素

实例:

八、CSS 3中与用户界面有关的伪类

序号 选择器 含义
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31. E::selection 匹配用户当前选中的元素

实例:

九、CSS 3中的结构性伪类

序号 选择器 含义
32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

实例:

十、CSS 3的反选伪类

序号 选择器 含义
43. E:not(s) 匹配不符合当前选择器的任何元素

实例:

十一、CSS 3中的 :target 伪类

序号 选择器 含义
44. E:target 匹配文档中特定”id”点击后的效果

请参看HTML DOG上关于该选择器的详细解释实例

HTML-加速、再加速

作者:听风    文章来源:eNet技术学院

web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。

明显HTML,暗渡“公用脚本”

减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:

<script src=”myfile.js”></script>

这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。

让样式表内容进入地下工作

CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

<style>
@import url(“mysheet1.css”);
</style>
<link rel=Stylesheet href=”mysheet2.css”>

请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。

宝贵内存节省两法

尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:

1、使用同一种脚本语言

HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如javascript与VBScript。但是,不知你发觉没有:这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。

2、巧用IFrame

你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。

没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。

择优选用动画定位属性

每天上网浏览页面,你一定会看到许多动画效果。比如,一个可爱的小兔子在页面上来回地走动 … 实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的。但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

dim stringLeft, intLeft

stringLeft = element.style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;

你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth

和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

element.style.posLeft += 10

代码短小、速度却更快!

循环控制多个动画

说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。

Visibility快于Display

让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。

但是如果要处理绝对位置的元素,使用visibility会更快。

从小处着手

编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。

脚本的DEFER化

DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

<SCRIPT DEFER>
function UsedLater()
{
// 用户与页面交互操作时才使用到的函数
}
</SCRIPT>

<SCRIPT>
// 立即要执行的脚本程序
document.write(“<H1>Immediate Gratification</H1>”);
</SCRIPT>

最后请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

保持同一URL的大小写一致性

我们都知道UNIX服务器是大小写敏感的,但是你知道吗:Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。

让标记有始有终

自己编写或者查看他人的HTML代码时,我们一定都遇到过标记有头无尾的情况。比如:

<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL>

很明显,上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中,这样的标记还有一些,例如FRAME、IMG和P。

可是请不要偷懒,请将结束标记写完整,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>

OK,以上列举了有关加速HTML页面的10个处理技巧,描述这些很简单,但是只有真正领会并掌握其中的本质,并且举一反三,才会编写出更快、更好的程序。