裁纸刀下 » javascript

对《优化浏览器渲染》的补充【译】

小李刀刀 — Mon, 14 Mar 2011 08:06:50 +0000

ISD Webteam的大布同学（twitter：@tc_bryanzhang）在2010年1月翻译了google Page Speed系列中的Optimize browser rendering，很是方便了大家。在此基础上，google又有了更新，我且在此把google新增的部分翻译一下，作为对大布同学译稿的补充。

google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点：

前四点大布同学已经翻译过了，没拜读过的同学可以点击上面的链接到涛哥的博客学习，第五点的翻译如下：

概述

为HTML文档尽早指定字符编码，可以让浏览器立刻开始执行脚本。

细节

HTML文档是作为带有字符编码信息的字节流序列在互联网中传送的。字符编码信息可以在随文档发送的HTTP响应头信息中指定，也可以在文档的HTML标签中指定。浏览器根据字符编码信息将字节流转换为显示在浏览器上的字符。如果不知道如何构造一个页面的字符，浏览器自然也不能正确地渲染页面。绝大部分浏览器在开始执行任何JavaScript代码或者绘制页面之前都要缓冲一定数量的字节流，缓冲的同时它们也要查找相关的字符编码设定（一个值得注意的例外是IE6/7/8）。

不同浏览器需要缓冲的字节流数量不同，另外如果找不到编码设定，各浏览器默认的编码也不同。但是不管哪一种浏览器，如果在已经缓冲了足够的字节流、开始渲染页面之后才发现指定的编码设定与其默认值不同，都会导致重新解析文档并重绘页面。如果编码的变化影响到了外部资源（例如css\js\media），浏览器甚至会重新对资源进行请求。

为了避免这些延迟，对任何超过1k（精确地说是1024字节，这是我们测试过的所有浏览器的最大缓冲限制）的HTML文档，要尽早指定字符编码。

建议

通过HTTP头信息或meta标签指定编码

为HTML文档指定编码设定有几种方式：: 服务器端：通过web服务器的配置来指定编码参数，为所有text/html类型的文档指定带有正确编码信息的Content-Type头信息。例如 Content-Type: text/html;charset=UTF-8; 客户端：在HTML代码中包含http-equiv="content-type"的meta标签，并指定字符编码。例如。

如果可能的话，为你的web服务器做指定字符编码的HTTP头信息配置。某些浏览器（例如Firefox）在执行JavaScript之前会用（比其它浏览器）更短的延迟缓冲来检查头信息中是否指定字符编码。这意味着它们可以跳过对HTML标签的检查，缩短缓冲的字节数和延迟时间。

把meta标签放在head区域的最前面

如果你不能对web服务器配置进行修改，又需要通过meta标签指定编码，要确保你用于指定编码的meta标签是文档中head标签的第一个子元素。浏览器会在文档的前1024字节中寻找字符编码参数，因此为了避免性能损耗，编码参数在文档头部越早出现越好（译注：在IE6以下的版本中，特定情况下，如果该meta标签不是head的第一个子元素，则会被忽略。具体触发情况尚未进行仔细测试，初步估计是与web服务器配置的默认编码或浏览器默认编码有关）。

始终指定文档类型

在浏览器开始检查字符编码设定前，它们必须先检测将被处理的文档是什么类型。如果没有在头信息或meta标签中指定文档类型（content-type），浏览器就会通过很复杂的算法去“嗅探”文档的类型。这个过程会造成额外的延迟，而且还会带来安全漏洞。

务必指定正确的字符编码

你在HTTP头信息或meta标签中指定的字符编码设置一定要和编辑HTML文档时的实际字符编码一致，这非常重要。另外，如果同时通过HTTP头信息和Meta标签两种方式指定了字符编码，它们一定要保持一致。否则浏览器发现两者相互矛盾，会造成页面渲染错误或者为了重绘页面而造成额外的延迟。有关这一点，你可以阅读HTML 4.01规范（英文）中的5.2节：字符编码（英文）。

扩展阅读

如果需要进一步了解content-type以及字符编码设定存在/缺少的不同情况下浏览器行为的细节，可以参阅以下资料（英文）：

在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论述很多（推荐阅读《彻底理解css盒子模式》），我这里想从实用的角度来谈谈。

网上有两张著名的图片，分别以2D和3D的形式描述css盒模型：

通过这两张图，一般来说对于margin、border、background-color、background-image、padding以及width和height有较直观的了解了。

更为重要的是要了解以下几点：

对于所有以“块(block)”方式呈现的元素都具备这个模型的特性，而不只是div；
margin是以所指定元素的父级元素（常称为“容器”）为基准的；
一个元素（通常为块元素）在页面中所占的位置尺寸为：宽度= width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right；高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom；（部分浏览器有差异，以后再具体讨论）；
background-color将填满border内部的全部范围；background-image默认以图片左上角对齐border内部左上角点，然后完整显示整个图片（超出部分不予显示），如果图片尺寸不足铺满整个范围，图片默认重复自己直至铺满或超出范围；
background-image将叠加到background-color之上；通过指定图片的对齐方式，可以改变background-image的位置；

通过以上这些规则的组合，就能在有限的元素组合下，实现各种修饰性效果。一个简单的例子如下：

将一个15像素高，颜色为#c00的纯色图片放入一个高度为30像素，背景色为#f00的块元素，设定图片在Y轴方向不平铺，在x轴方向平铺。结果得到一个类似下图的效果：

这是简单的由背景色与背景图组合实现的效果。根据这样的原理，当我们的文档结构有两层时，例如：文字，我们可以通过由a元素的背景颜色图片和span元素的背景颜色图片组合，从而得到较为复杂的效果，例如：

这个按钮效果，用纯图片很容易实现，但是用图片实现就会面临一个问题：不通用。如果要通用，应该把文字和背景图片分离开来，同时，由于文字有多有少，因此按钮的宽度要是可变的，但是按钮并不是从左到右完全一致的背景，于是不能使用一张图片进行横向平铺，按照以前的做法，可能会使用一个一行三列的表格，第一个单元格放入左侧的图片，中间的单元格放文字和平铺的背景，右边的单元格放右侧的图片。这种思维传递到了“div+css”布局思维模式下，于是就出现了这样的结构：

<div class=”button”><div class=”left”>div><div class=”center”>div><div class=”right”>div>

这个结构的出现，就是为了实现自适应宽度的按钮，今天依然存在。实际上，使用上面的a+span的基本结构，就能实现这个效果。将中间平铺部分和左侧或右侧的边缘图片组合在一起，重复部分做得宽一些，作为a的背景图片，把另一侧的图片作为span的背景图片覆盖到a的背景图片上。组合起来看上去就成为一个整体。代码如下：

效果如下：

a {display:block;width:200px;height:36px;background:url(button.gif) no-repeat right bottom;}
a span {display:block;line-height:36px;background:url(button.gif) no-repeat left top;color:#fff;text-decoration:none;text-align:center;}

用到的背景图片如下：

这个例子很简单，但是需要对“背景组合”有足够的理解，能够想到应用。而要想到如此应用，首先是对于盒模型中的“background”足够的理解。否则，就只会想到三个div（或者其它元素组合方式），但是由于左右两个结构完全一样，为了区分它们，只好使用class或者id来标记。这就是我在上一篇中所提到的不必要的class和id。

除了利用display:block让行内元素改变为块元素从而使用盒模型特征外，在浮动的时候，也经常会用到盒模型的一些特征。再举个例子：

使用浮动布局的时候，并列呈现的浮动元素中的第一个如果设置与浮动方向相同的margin，则IE 6下会出现margin加倍的bug（这就是著名的IE6浮动边距加倍bug）。为了解决这个问题，很多人喜欢给一组浮动元素的第一个加上class=”first”，从而可以对这个元素单独应用样式。或者对这一组浮动元素加上display:inline的属性以解决这个bug。

上述两种方式都是没有使用hack选择符或者类似“_margin”这样的非标准属性的很好的hack方式。但是，如果不是非用margin不可，只要使用padding来代替margin，就能解决这个问题。或者采用与浮动方向相反的margin也可以。不需要任何额外的hack。这也是在充分理解盒模型的基础上，由于对这个bug的了解，从而在实现样式的时候直接避开，而不是出现了之后再用额外手段去hack。

对盒模型的理解，除了margin、border、padding、width、height五大属性以及两种背景的应用之外，还要了解父级元素与子元素之间的关系。比如父元素没有设置尺寸，而对子元素设置margin-top属性，在某些浏览器下，本来是想针对父元素的边缘设置margin，结果margin被设置到了父元素之外，造成父元素与外部元素的margin。这种情况，将子元素的margin改成父元素的padding，也可以在不改变表现的情况下实现相同的效果。

要想通过对盒模型特征的充分应用来减少css中的hack使用，或者以更简洁的代码实现更复杂的效果，需要对盒模型不断地尝试和总结。这是《css权威指南》之类的经典巨著也没法教给你的。

只有越理解盒模型，才能越好地利用浮动和定位来实现复杂、精确的布局。关于浮动的问题，下一次我们再一起来了解一下。

前台开发从头说起：谈谈CSS选择符

小李刀刀 — Wed, 16 Dec 2009 06:14:03 +0000

以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。

一般稍微接触过css的网页设计人员，都会很快地学会三种css选择符：

元素选择符（例如：body 、a 、li ）
ID选择符（例如：#head、#body、#foot）
类选择符（例如：.red、.item、.content）

更进一步之后，开始了解到一些进阶的选择符：

后代选择符（例如 #head .menu、#foot #copyright）
伪类选择符（例如 a:hover、a:link）

以及由这些选择符组合起来形成的综合选择符。实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种，其它的选择符在css中往往用来区别处理不同的浏览器，或者用在jQuery一类的框架中。本文就不提了。有兴趣的可以自己在网上查一下，像属性选择符（input[type=’password’]、input[type=’radio’]）、直接后代选择符（body > div、 #head > ul）等。

实际上，有了上面列出的五种主要的选择符，通过对它们的组合，已经能够满足我们绝大部分时候的要求了，这也就意味着，相同结构下的元素，父级元素或者祖先元素只要有一点点区别，我们就能够在不借助id或者class的情况下直接访问到。例如：

<ul>
  <li><a href="#">菜单1a>
    <ul>
      <li><a href="#">菜单1-1a>li>
      <li><a href="#">菜单1-2a>li>
      <li><a href="#">菜单1-3a>li>
    ul>
  li>
  <li><a href="#">菜单2a>
    <ul>
      <li><a href="#">菜单2-1a>li>
      <li><a href="#">菜单2-2a>li>
      <li><a href="#">菜单2-3a>li>
    ul>
  li>
ul>

这个结构是我在《来自微软的纯css下拉菜单》一文中用到的下拉菜单结构。在那个示例中，没有使用任何的class或者id，但是我们通过不同优先级的元素+后台选择符，对结构中的不同层次的ul、li、a实现了精确定位。如下面的代码：

ul {}
li {}
ul ul {}
ul ul li {}
li a {}
ul li a {}
ul li:hover ul {}

那么，在实际开发中，为什么很多网页设计人员还是离不开多如牛毛的ID和class呢（我要声明一下，我从来没有说完全抛弃id和class，我的观点是他们应该尽量少，并且由文档结构决定而不是由css需要决定）？我觉得有三方面的原因：

第一、xhtml文档结构不合理，通过元素不能体现文档的层次结构。满篇都是div。没有有效利用Hx系列标签和ul、ol、dl等不同含义的列表标签、没有有效利用p、quote、pre等标签。xhtml为我们提供了丰富的标签元素，但是如果我们只会用div，那还不如人家用table来布局的。至少他的table在一定程度上也是文档结构的体现，而满篇嵌套的div，文档结构完全没体现。

第二、css选择符掌握得不够，不善于借助文档结构层次上的细微区别，用不同的组合选择符来区别相似但其实不同的元素。例如上面的下拉菜单结构，有的人就非要用“menu”和“submenu”来区别。

第三、css选择符的优先级不清楚。css是支持继承和覆盖的，什么时候继承，什么时候覆盖。两条规则都对相同元素做出了样式规定而且样式规定重复的情况下，哪一条规则会被应用呢？这些问题不清楚，就没办法充分利用优先级实现规则的覆盖。于是只好每个要应用样式的元素都加上id或者class。关于css选择符的优先级，网上也有很多文章，我就不赘述了。

所以说，如果感觉离不了class，离不了id，那只能说明两个问题——xhtml结构不合理或者css掌握得还不够。我上一篇博文发了以后，有位朋友评论说我没做过前台开发。因为没有class和id，就不能实现css和javascript的分离。实际上，只要是长期深入学习css和javascript的朋友应该都清楚：在结构有差异的情况下，用css选择符就能精确定位某个元素；在结构完全相同的情况下，借助javascript和DOM，同样可以精确定位某个元素。

仍然以上面的下拉菜单列表为例。首先使用 ul a 对父级菜单的链接应用样式，然后用ul ul a就可以精确定位到次级菜单的链接，应用新的样式，对ul a的定义进行覆盖。那么，如果是要精确定位到第二级菜单的第二个元素呢？由于css3的选择符目前还没被广泛支持，而结构又没有差异，不借助javascript有困难了。但是借助于javascript，非常轻松，比如在jQuery中，我们可以用 $("ul ul:nth(2) li:nth(2)”) 或者 $("ul ul”).eq(1).find(“li”).eq(1) 都能得到第二个子菜单的第二个菜单元素。

css和javascript能够自己精确找到网页中的任何一个元素，那么网页自然就不用自己标识自己的每个元素。少了这层负担，我们在设计网页文档结构的时候，自然就可以抛弃一切后顾之忧，那么，xhtml中和结构无关的id和class，还有什么必要存在呢？

去除了不必要的表现元素和属性（font、center、align、height）之后，又去除了不必要的id、class、onclick、onmouseover之类的样式和行为属性，我们的网页源代码尺寸越来越小，抓一个页面下来，少量必要的结构元素之外，剩下的全是链接和内容，这样的网站，搜索引擎能不喜欢吗？

没有了后顾之忧，认清了努力方向，那么下一次我们就来谈谈css的盒模型。

前台开发从头说起：关于web标准化

小李刀刀 — Mon, 14 Dec 2009 17:00:43 +0000

虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

web标准化的精髓或者说本质到底是什么呢？其实很简单，就是“结构、表现、行为分离”。这句话看起来简单，但是真的实现起来，就不那么容易了。分离，分离到什么程度算是标准？分离的目的是什么？举例来说吧。

既然要分离，那么耦合度当然是越低越好。

以样式为例。我们可以把所有的样式都放到外部CSS文件中，那么，CSS规则如何影响你的页面元素呢？有时候用到ID，有时候用到class。如果你的页面充满了ID和class，那么实际上分离得就不怎么彻底，因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的，他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制，而在页面文档中加入大量，甚至过多的class。

再以行为为例。很多时候我们需要和用户交互，于是要给页面上的元素添加“onclick”，“onchange”，“onmouseover”等属性，这些属性编写在页面文档中，依赖于外部javascript。一旦外部的javascript被拿走，页面就出现执行脚本错误，甚至完全不能正常阅读。在这种情况下，javascript实际上和xhtml就没有能够解除耦合。

实际上，由于只有xhtml、css、javascript三者存在，我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么，我们所谓的彻底分离，其实从三者分离的最根本目的来说，就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript，xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢？依赖于xhtml是必然的。

如此一来，如何解除耦合呢？其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套，尽量去除class和事件属性。比如：

<ul>
    <li><a href="#">国内新闻a>li>
    <li><a href="#">国际新闻a>li>
    <li><a href="#">财经新闻a>li>
    <li><a href="#">体育新闻a>li>
ul>

这样一段源代码，从文档结构的角度来理解，它就是一组彼此关联，没有先后和主次之分的列表，可以理解为列表，也可以理解为目录。

但是在css的作用下，它可以变成菜单、导航条等各种形式，如果css和javascript相结合起来，它还可以变成滑动门、三态菜单等。在这种情况下，css负责表现，javascript负责行为，而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么，都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

随之而来的好处，那就是页面的兼容性，不管在什么样的浏览器里，这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover，搜索引擎想要的只不过是链接地址和链接文字。

那么，没有class，怎么实现样式呢？没有onmouseover或者onclick，怎么实现javascript事件呢？这就需要网页开发人员的css功力和javascript功力了。

所以，越是标准化，对css和javascript的技术要求越高。反过来，css的能力达不到，或者javascript的能力达不到，那就需要借助于class（id和文档结构有关，不算在这里，后面我们再谈）、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。

在博客园上，暴牙齿提出“独立于根”的想法。我个人认为从文档结构的角度，并没有“独立于根”的要求。但是如果能够达到“独立于根”的开发能力，那么实现起标准化来就绝对会非常得心应手。因为连“独立于根”都能实现自己的设计样式和行为的话，有了结构的文档就更不在话下了。

理解了标准化的本质和终极目标，如何通过css和javascript来达到这个目标呢？这个问题，留到本系列以后的文章再谈。

Whatever:hover – 无需javascript让IE支持丰富伪类

小李刀刀 — Mon, 22 Jun 2009 15:50:40 +0000

绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行()应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。

Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。

如果你已经对使用 whatever:hover 很熟练，现在只是想下载它，你可以直接跳转到获取最新版本。而对于其它想深入了解它的人，请继续阅读。

使用方法

你只需要将 whatever:hover 链接到 body 元素就可以了。注意这里的 behavior 属性中的 URL 是相对于 html 文件的，而不是像背景图片地址一样是相对于 css 文件的路径。

body { behavior: url("csshover3.htc"); }

工作原理

所有的浏览器都提供了一些方法，让你用 javascript 查询样式表中定义好的规则或者动态地插入新规则。正常情况下，IE 对所有它不支持的规则返回 “unknown”。例如：一条关于 “div p:first-child” 的规则将会被改成 "div p:unknown”，而一条关于 "p a[href]” 的规则将整体地作为 "unknown" 返回。幸运的是 IE 把 :hover 伪类认为是它支持的样式规则，并且会将它保持原样。

IE 还支持所谓的行为（behaviors），不仅包括预定义的功能比如动态加载内容或者持续数据存储，也包括你可以在一个后缀为 .htc 或者 .hta 为的文件中创建的自定义行为。这些行为通过 css 实现与 html 节点关联，并“增强”这些被指定行为中的样式选择器选中的节点。

综上所述，创建一个行为来查找样式表中 IE 不支持的元素，并以一些其它手段“欺骗”影响的到元素让它们应用样式表中关联的样式。这个复杂的操作中包含的步骤大致可以描述为：

在所有的样式表中搜索 IE 不支持的 :hover 伪类规则；
插入一条 IE 支持的，例如带 class 名称的新规则；
最后，设置脚本事件来切换目标元素的 class 名称。

通过这种方式，:hover、:active 和 :focus 就可以得到（IE 的）支持了。而作为开发人员，你除了包含这个行为以外不需要做任何事。所有的工作都将自动完成。

与第1版和第2版比较，第3版对动态加入的 html (ajax) 也同样支持。另外还有一个改动是原来第1版和第2版采用的是在页面加载事件中主动搜索影响到的元素，而在第3版中改为借助表达式（expressions）让节点自己回调。关于这部分你可以阅读带注释的版本获取更多细节。

示例：菜单效果

:hover 一个很常见的用途就是用列表创建菜单系统。用这个行为来创建一个两级的菜单系统是再容易不过的事情了。例如，如果你从 suckerfish dropdown （一个带有下拉菜单的网页，关于这个页面和效果的描述，参见 A List Apart article）上把 javascript 删除掉了，它仍然能正常工作。

但是多级的菜单需要做不同的处理。这是由于 IE 不支持子选择符 ‘>’，子选择符可以完美地显示下级子菜单，而不是连更深层的菜单一起显示出来。

li:hover > ul { /* 在 IE 下无效 */ }

有一种可供选择的方法可以只使用简单的子孙选择符来模拟这种行为（主要是针对 IE）。还有种不太成熟的方法是应用多个类定义，但是更简单的方法是利用 CSS 选择符的不同优先级(specificity).每一条 css 规则都有特定的重要等级，这个等级可以简单地根据一条规则中的不同元素来计算。以元素名称为基准值 “1″，类、伪类和属性选择符重要性（权重）为 “10″，然后元素 id 为 “100″。比如下面的例子。

ul ul { display:none; }
li:hover ul { display:block; }

这样做能够生效的原因，就是选择符的优先级不同。第一条规则只包含两个元素名称，这样它的权重值（优先级）就是2。第二条规则也包含两个元素名称，但是 :hover 伪类的权重值（优先级）是10，所以加起来的值就是12。由于第二条规则比第一条规则优先，因此被鼠标滑过的 li 元素内部的 ul 将被显示。

那么这个对于解决 > 子选择符的问题有什么帮助呢？是这样，如果一条权重值（优先级）为12的规则定义所有的子菜单都要显示，我们只需要创建一条权重值（优先级）大于12的规则来把下一级的菜单隐藏起来。然后，那个菜单又需要另一条优先级更高的规则来显示，一直循环下去。对于3级的导航来说，需要的 css 代码短得让人意外：

/* 2 和 13 */
ul ul, li:hover ul ul { display:none; }
/* 12 和 23*/
li:hover ul, li:hover li:hover ul { display:block; }

这种方式可以无需附加任何类样式实现无限级嵌套菜单（4级或更多级需要需要继续添加更多规则）。

脚本事件的性能优化

现在还剩下一件事需要考虑。.htc 文件在所有样式表文件中搜索 :hover 规则，并且按照 css 文件的定义对所有它认为需要用脚本处理停留效果的元素附加鼠标滑过和移出事件。为了找出这些(被影响的)元素，所有去掉 :hover 伪类选择到的元素以及被 :hover 伪类修饰的元素本身，都会被选择并且进行处理。一条类似这样的规则

#menu li:hover ul { ... }

…将会被调整成下面这样来查找所有可能需要响应鼠标滑过事件的元素：

#menu li  { ... }

很显然这会选中整个菜单中的每一个

元素，并对其中一大堆不需要鼠标事件（在当前情况下）的元素附加事件。这个问题可以很轻松地得到解决，我们可以对包含子菜单的列表元素添加一个类样式，比如 "folder"。这样一来，调整（去除:hover）之后的样式规则变成了

#menu li.folder { ... }

…可以高效地直接选中那些真正需要事件的元素。缺点是为了改善脚本的性能，你需要添加一个类样式（这个类样式的添加纯粹是为了视觉效果，而且放弃了 li:hover 方式实现菜单的通用性）。但是，从另一个角度考虑的话，也许你反正也要用一个类来把这些列表元素与普通元素区别开来，那就无所谓了。

为了直观地说明上述问题，请查看综合示例。希望你喜欢。

文件下载及更新说明：

文件下载:

v3.00.081222 (:hover, :active 和 :focus)

下载 (已压缩, 2.5K) | 下载 (源码, 9K) | 查看

v1.42.060206 (:hover 和 :active) 下载 | 查看

v2.02.060206 (:hover, :active 和 :focus) 下载 | 查看

说明:

说明1：如果在使用 whatever:hover 的过程中遇到问题，请让我知道! 由于第3版比较新，可能会存在一些无法预知的问题。

说明2：确保你的web服务器把 htc 文件按照 text/x-component 的 mime类型发送。关于这方面的更多信息，可以参阅 Aldo的个人博客。如果你的主机支持 .htaccess 文件，可以添加下面这行代码：

AddType text/x-component .htc

说明3：第三版支持在 IE6 以上版本中使用 :hover 和 :active，对 IE7 和 IE8 还支持 :focus。由于表达式（expression)在 IE8 标准模式下不支持，所以 whatever:hover 只在 IE8 的怪异模式(Quirks Mode) 下运行。实际上在 IE8 标准模式中也根本不需要这个脚本了。

说明4：如果使用这个脚本之后网页变慢，请尝试对更加具体的选择符运用 :hover 伪类，比如添加元素名称、使用元素id，或者类名称。例如："div#someId li.group:hover”, 而不要只用 ".group:hover”。这样能够很大程度上减少搜索和解析时间，并能减少需要应用的事件。请阅读性能优化获得更多信息。

说明5：第2版也支持 :focus 伪类，仅限于 A、INPUT、和 TEXTAREA元素。但是，由于类似 "input:focus" 这样的选择符被 IE 的样式表对象返回为 "input:unknown"，脚本将基于这些 "unkonwn" 规则来附加获得焦点和失去焦点事件，这个问题同样存在于其它浏览器无法识别的伪类。因此，使用2.0版本的时候，你无法在 IE 中对 A、INPUT和 TEXTAREA 元素应用浏览器无法识别的伪类，因为他们统统都会被处理成获得焦点样式。如果你确实需要这个功能，请使用1.4版或者3.0版。

在 Naar Voren （一个关于web开发的德语网站）上，有我用德语写的一篇关于用纯css 在菜单系统中使用 :hover 的更详细的文章（德语版）。对于不懂德语的网友，可以查看该文章的英文翻译版。

非常感谢 Arnoud Berendsen 和 Martin Reurings 提供的创意和支持，感谢 Robert Jan Verkade 和 Naar Voren 上的朋友们发表我的文章，还要感谢 Eric Meyer 对这个脚本给予支持和在他的书里提到我的这个网页（指《Eric Meyer谈CSS（卷2）》第六章》——译者注）。

——————————————————————————

作者：peter ned 原文：whatever:hover

译者：小李刀刀首发：Whatever:hover – 无需javascript让IE支持丰富伪类

转载请注明出处。

简单、通用的JQuery Tab实现

小李刀刀 — Mon, 13 Apr 2009 03:35:34 +0000

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

最早的滑动门的技术，一般都是结合 onclick 或者 onmouseover 事件传递一个参数给 JS 函数，根据传递的参数来决定显示哪一个标签。比如：

function showTabs(n) {
  var tabsNumber = 3;
  for (i = 0; i < tabsNumber; i++) {
      if (i == n) {
          document.getElementById("tabPanel-" + i).style.display = "block";
      } else {
          document.getElementById("tabPanel-" + i).style.display = "none";
      }
  }
}

加入有这样的一个函数，就可以在tab的标题按钮中设置 onclick = “showTabs(1)”来设置第二块内容显示，而其它块隐藏。

这种方式最大的缺点是：

HTML代码和JS代码混合；
可扩展性差；

尽管可以通过window.onload绑定事件等方式来是实现JS代码从HTML中分离，也可以把函数改得更复杂以实现通用性。但是总的来说，还是很难做到一处定义到处引用。

后来随着各种JS类库的出现，更强大的Tabs出现了，最出名的就是jQuery UI中的tabs插件。一旦加载了jQuery框架和jQuery UI插件，那么要在页面中实现Tabs，就变得简单了许多。首先我们的页面中的Tabs代码这样写：

<div class="tabs">
    <ul>
        <li><a href="#panel-1">标签一a>li>
        <li><a href="#panel-2">标签二a>li>
    ul>
    <div id="panel-1">区域一div>
    <div id="panel-2">区域二div>
div>

注意：这里的代码非常干净，不含任何的JS代码或者与文档结构无关的定义。然后，在head区域，或者在页面任何地方增加一段js代码：

$(function() {
    $(".tabs").tabs();
});

就实现了Tabs功能，这行JS代码执行后，上面的HTML代码就会变成：

<div class="tabs">
    <ul class="ui-tabs-nav" jquery1239647486215="2">
        <li class="ui-tabs-selected"><a href="#panel-1" jquery1239647486215="8">标签一a>li>
        <li><a href="#panel-2" jquery1239647486215="9">标签二a>li>
        >ul>
    <div id="panel-1" class="ui-tabs-panel" jquery1239647486215="4">
        区域一
    div>
    <div id="panel-2" class="ui-tabs-panel ui-tabs-hide" jquery1239647486215="5">
        区域二
    div>
div>

结合我们自己编写的css，或者jQuery UI 自带的CSS，就可以实现滑动门效果。并且，由于jQuery的强大，我们可以在页面中放置多组滑动门，然后一次性设定。

要说明的是，这个地方由于只启用了jQuery UI 中的 Tabs 插件，因此生成的代码还是比较干净的，只增加了 ui-tabs-xxxx 这几个相关的css类。如果你同时包含了jQuery UI的其它插件，那么即使不启用，也会添加一堆的css定义。而且，jQuery UI Tabs 还提供了非常强大的控制功能，你可以动态地添加 tab，可以随意更改激活事件，可以定义切换效果，还可以设置默认激活状态和禁用等。

但是我在实际应用中遇到了一些问题，除了 jQuery UI 自带的js脚本很大，css不符合实际应用需求外，还有一个最大的问题，你可能已经注意到了，在作为导航的标签定义中，每个标签对应哪一个区域是用链接目标来定义的。比如标签一和

区域一

对应，如果你的标签和区域没有对应起来，绑定tabs()就不起作用了。

而且，这种方式来带来另一个麻烦，就是当我们需要给标签加上链接的时候，没办法加。即使你将标签的激活事件设置为onmouseover而不是onclick，链接也不能实现，因为链接用于指定目标了。这种需求在我们的实际应用中并不是不存在的。比如：

这两个图片中的tabs标签，都要添加到对应的新闻类别或者论坛板块的链接。这时候 jQuery UI的默认绑定就带来了麻烦。

其实分析一下，我们在实现滑动门的时候，用以下HTML结构就可以满足需要：

<div class="tabs">
    <ul>
        <li>标签一li>
        <li>标签二li>
    ul>
    <div>区域一div>
    <div>区域二div>
div>

借助 jQuery 库，我们可以通过 $(“.tabs”)找到要实现的标签，然后 .find(“li”) 来找到要添加事件的元素，绑定事件的时候，我们可以通过该元素在$(“.tabs li”)集合中的索引值来明确是哪一个标签被激活，然后对应索引值的panel显示。代码类似这样：

<script type="text/javascript">
    $(function() {
        $(".tabs").find("li").onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().children("li");
                var panels = $(this).parent().parent().children("div");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

这段代码只使用了两个css类来处理，并且，自动判断tabs和panels的对应状态，假如你有4个tab，但是只有前三个启用了，那么你只需要写三个panel就可以，第四个panel不存在，则第四个tab自动不生效。

在实际使用中，会遇到一个问题，一般我们会给tab中的文字加链接，那么当鼠标滑过这个tab的时候，如果指到了文字，那么激发事件的对象有可能是a元素而不是li元素，则事件就不能正确激发。所以我们改进代码如下：

<script type="text/javascript">
    $(function() {
        $(".ui-tabs-nav > li > a")onmouseover(function(e) {
            if (e.target == this) {
                var tabs = $(this).parent().parent().children("li");
                var panels = $(this).parent().parent().parent().children(".ui-tabs-panel");
                var index = $.inArray(this, tabs);
                if (panels.eq(index)[0]) {
                    tabs.removeClass("ui-tabs-selected")
                        .eq(index).addClass("ui-tabs-selected");
                    panels.addClass("ui-tabs-hide")
                        .eq(index).removeClass("ui-tabs-hide");
                }
            }
        });
    });
script>

与此对应的HTML结构是：

<div>
    <ul class="ui-tabs-nav">
        <li class="ui-tabs-selected"><a href="/bbs">论坛新帖a>li>
        <li><a href="/blog">最新博文a>li>
    ul>
    <div class="ui-tabs-panel">
      
    div>
    <div class="ui-tabs-panel ui-tabs-hide">
      
    div>
div>

同时，我们有以下的css类定义：

.ui-tabs-nav
{
    /*导航容器定义*/
}
.ui-tabs-nav li
{
    /*默认标签样式*/
}
.ui-tabs-nav li.ui-tabs-selected
{
    /*激活的标签样式*/
}
.ui-tabs-panel
{
    /*默认的显示区域样式*/
}
.ui-tabs-hide
{
    display: none;
}

这样，就可以根据你的需要，结合自己的css，定制不同样式的滑动门了。把相应的js代码放到页面中，那么在页面里任何地方只要你按照HTML结构编写了一段html，这段html就会自动变成滑动门。而不用在每个页面里单独指定特定的selector来应用滑动门的tabs()方法。并且，根据需要给你的滑动门标签添加需要的链接，或者不要链接（href=”#” 或者 href=”javascript:void(0)”）。

这段滑动门代码只要具有jQuery core 就可以正常运行，不需要加载jQuery UI。非常简单，而且很通用，样式上喜欢怎么扩展都可以。

具体效果可以参见 http:/www.taihainet.com ，在台海网首页中，我一共应用了四个样式共九组滑动门，代码就只是上面给出的那一段。四个样式列举如下：

滑动门一：多个搜索表单，暂时只实现两个，后面三个由于没有对应的ui-tabs-panel，自动禁用，但是链接可以点击。

滑动门二：多块商务信息区域，其中第三个由于没有对应的ui-tabs-panel，自动禁用。

滑动门三：新闻栏目切换，标签中的文字链接到对应的新闻栏目。

滑动门四：论坛分板块帖子调用。标签中的文字链接到对应的论坛板块。

[翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用

小李刀刀 — Thu, 09 Apr 2009 15:08:09 +0000

在这个练习中你将学习如何在 Visual Studio 中创建一个 ASP.NET MVC 应用。并初步了解默认项目结构和一些开发约定。

ASP.NET MVC 框架分为 Model， View 和 Controller 三个部分。模型组件（Model）一般用于维护数据库中的持久数据层的状态。视图组件（View）由控制器挑选并渲染到适当的用户界面。默认状态下， ASP.NET MVC 框架用ASP.NET已有的 ASP.NET 页面（.aspx）、母版页（.master）以及用户控件（.ascx）等类型来作为浏览器呈现。控制器组件（Controller）组件将用户请求定位到适当的控制器（Controller）行为（Action）和方法（Method），从请求中获取用于行为方法运行的参数值，并处理行为和方法执行中可能产生的错误。然后控制器用该请求对应的视图进行渲染。默认状况下，每个组件存放在 MVC WEB 应用工程的一个独立目录下。

任务1 – 创建一个 ASP.NET MVC Web 应用工程

在这个任务中你将通过Visual Studio的MVC模板创建和配置一个空的 ASP.NET MVC 应用工程。

打开 Microsoft Visual Studio 2008：依次点击开始|所有程序|Microsoft Visual Studio 2008|Microsoft Visual Studio 2008.
点击文件菜单，指向新建，然后点击项目。
在 新建项目 对话框中，确保右上角选中的版本为 .NET Framework 3.5，在 项目类型 下选择 Visual C#，然后在 Visual Studio 已安装的模板 中选择 ASP.NET MVC Web Application 类型。你可以设置项目位置为 你的路径AspNetMvcEx01-CreatingMvcAppbegin 作为项目目录。
修改名称为 MvcSampleApp 然后点击确定。 图一：创建新项目对话框
在点击确定按钮之后，Visual Studio 会问你是否同时创建测试项目（would you like to create a test project）。选择 Yes，输入 MvcSampleApp.Test 作为项目名称（Name of the Project），然后点击确定（OK）。注：我安装的是Visual Studio 2008 SP1 简体中文版 + ASP.NET MVC 1.0，在我的系统上，创建测试项目的对话框为英文，因此这里加上英文对照。
提示：当你创建一个新的MVC Web应用时， Visual Studio 会为你提供同时创建两个项目的选择，第一个项目是Web项目用来实现你的应用，第二个项目是一个测试项目，你可以在其中为你的MVC组件编写单元测试。

图二：创建 MVC 单元测试项目
提示：测试项目对话框中的测试框架（Test Framework）下拉列表现在只有一个 Visual Studio Unit Test，这个列表是可扩展的，在你的机器上安装了其他测试框架的时候，它将会包含其他的测试框架供你选择。由此你可以容易地用你喜欢的单元测试框架来为你的 ASP.NET MVC 应用编写单元测试。
在Visual Studio 中配置站点使用端口 50000。这一步是为了和本动手实验中的后续联系保持一致所必须的。
1. 在 解决方案浏览器 中，右击 MvcSampleApp 项目，并在上下文菜单中选择属性。
2. 在属性页中，打开 Web 标签。
3. In the Servers section select Specific Port. 在 服务器 设置项下面，选择 使用Visual Studio开发服务器，并选中 特定端口 。
4. 设置端口号为 50000 。
5. 按下 Ctr + S 保存所做的改动。
图三：配置本地测试属性

使用Google AjaxLib API托管的js库

小李刀刀 — Sun, 05 Apr 2009 23:53:42 +0000

本文简要介绍Google AjaxLib API，并以jQuery为例说明如何在自己的网页中引入由Google提供个CDN托管的jQuery库。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

现在很多人都已经开始习惯于基于各种各样的JS库来编写自己的Javascript，其中尤其以jQuery最多。别的不说，有了jQuery，至少让我们控制页面元素更加方便快捷，让我们在编写js的时候不需要过多地考虑浏览器特性问题了。

但是jQuery功能越强大，它本身的文件也越大。虽然如今的互联网带宽是越来越宽，速度是越来越快。但是做网页的却一个个越来越在意自己的页面大小、图片大小、css大小、js大小。其实相对于服务器的运行效率、机房带宽和线路品质，通过优化js、css和图片文件能挤出来的几百k尺寸的下载量，在下载速度的提高上实在是太有限了。不过话说回来，做开发的做设计的，就是要有这样的精神，才不会让自己的作品像微软的操作系统一样，越来越庞大。从15张软盘到半张CD，到一张CD，直到两张CD，最后一张DVD……

在我们的js中，最大的一般还是js库，毕竟具体的功能实现只需要写一点点代码而已。但是js库里那么多用到的没用到的东西，还是有点份量的。我们又想用，又嫌它大。怎么办呢？拆成很多个吧，多一个js还多一个并发连接呢…… 幸好，google挺够意思，号称“永久提供”常见js库，google的服务器和线路品质那自然是不在话下的。即提高了下载速度又减少了自己服务器的并发连接数。不用就是傻子了。

用起来也很简单，直接在网页里引用google服务器上的相关js文件就可以了。不过，如果引用多个js，就要插入多段的script。现在像我这样代码能少一个字算一个字的人不少。google也提供了相应的办法，那就是google load。我们只需要在页面里引用一个js文件，就可以根据需要实时加载用到的js库了。首先在页头部分加入以下这行代码：

<script type="text/javascript" src="http://www.google.com/jsapi">script>

这就足够了，google提供了以下这些js框架/库的API：

而且google的API中包括这些js框架/库的所有正式发布版。你可以根据自己的需要来选择。以jQuery为例，我们可以这样使用：

<script type="text/javascript">
    //google.load("jquery", "1.3.2");
    //]]>
script>

这样我们就从google的最近的CDN镜像上加载了jQuery 1.3.2版的js库，接下来就可以正常写js代码了。不过，即使是google的CDN镜像，下载也毕竟是需要时间的，万一代码库还没有下载完而浏览器已经解释到了下面的代码了怎么办？我们可以设定在js库加载完以后才开始执行js：

<script type="text/javascript">
    //google.load("jquery", "1.3.2");
    //加载完成后执行代码
     google.setOnLoadCallback(function() {
        $("body").html("Hello World!");
    });
    //]]>
script>

更多有关google jsapi的相关介绍和文档，可以参考： google AJAX 库 API 。

动态实现指定图片半透明及鼠标事件

小李刀刀 — Tue, 04 Apr 2006 03:35:00 +0000

说明：在不改变HTML代码的前提下，通过CSS和JavaScript，对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。

具体实现：

1.假设我们要操作的图片放置在一个id="imgbox"的div容器中。如下面的代码：

2.首先，在css中增加两个类定义，为了避免影响到其它图片，最好是用选择限定符加以限定。如下代码：

#imgbox img.low{-moz-opacity:0.5;filter:alpha(opacity=50);cursor:hand;}
#imgbox img.high{-moz-opacity:1;filter:alpha(opacity=100);cursor:hand;}

3.然后在网页的区域增加JavaScript，JavaScript将在页面载入完成之后，为我们指定的图片添加半透明效果和鼠标事件：

补充说明：

在上面的JavaScript中，设置图片的class属性的时候，同时使用了两种方式：

imgNode.setAttribute("class","low");
imgNode.className = "low";

第一种方式是针对IE以外的浏览器，按理说设置class属性对所有的浏览器都是有效的。但是IE比较有个性，它通过元素的className来定义class属性。这是IE不符合规范的地方，但是我们不得不考虑到IE占据的广大市场。所以，同时使用两种方式，从而达到跨浏览器兼容的效果。

适合多图片调用的修改

当时做的时候是针对单张图片的情况做的。如果要用于调用的多图片，可以把JS代码做如下修改：

再做改进：改为当图片加载完毕就产生效果：

首先定义函数：

然后在图片调用代码的后面调用此函数（例如）：

裁纸刀下 » javascript

对《优化浏览器渲染》的补充【译】

概述

细节

建议

相关日志

最近的书单

相关日志

前台开发从头说起：理解css盒模型

相关日志

前台开发从头说起：谈谈CSS选择符

相关日志

前台开发从头说起：关于web标准化

相关日志

Whatever:hover – 无需javascript让IE支持丰富伪类

使用方法

工作原理

示例：菜单效果

脚本事件的性能优化

文件下载及更新说明：

相关日志

简单、通用的JQuery Tab实现

相关日志

[翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用

相关日志

使用Google AjaxLib API托管的js库

相关日志

动态实现指定图片半透明及鼠标事件

相关日志