vfresh

备忘：页面内容加载优化

vicZen — Mon, 31 May 2010 17:01:09 +0800

根据Browserscope提供的资料，整理了一下各浏览器的区别，以作备忘：

连接数：ie6,ie7单个域名只能同时下载2个资源，CDN对此会有很大的帮助
js阻碍：ie6,ie7的script会阻碍js,css,图片的加载；而ie8只会阻碍图片的加载；所有浏览器的script都会阻碍iframe的加载；
data:URLs：ie6,ie7不支持data:URLs
异步加载js：只有firefox3.6支持HTML5的异步加载js方式（ie和ff3.5支持defer属性）
内联脚本：样式表后面紧接一个内联脚本块，样式会阻碍后面的资源加载（仅firefox3.6解决）
重定向：仅firefox和chrome 支持重定向缓存
预加载：firefox支持Link Prefetch

[译]高效地呈现CSS

vicZen — Tue, 25 May 2010 15:25:24 +0800

原文：http://css-tricks.com/efficiently-rendering-css/
中文：http://www.vfresh.org/w3c/1034

只做重点翻译.

从右到左的解析

浏览器解析CSS的时候是从右至左，例如：ul > li a[title="home"]这个选择器中，浏览器首先解析是a[title="home"]，这部分也被称为“选择器主键”，即最终将选择的元素。

ID选择符最高效，通配选择符最低效

从高效到低效，有四种选择符：ID、类、标签、通配符。

#main-navigation {   }      /* ID (最快的) */
body.home #page-wrap {   }  /* ID */
.main-navigation {   }      /* 类 */
ul li a.current {   }       /* 类 *
ul {   }                    /* 标签 */
ul li a {  }                /* 标签 */
* {   }                     /* 通配符(最慢的) */
#content [title='home']     /* 通配符 */

结合上面说的“浏览器从右至左解析”，下面的这个选择器就不是那么高效了：

#main-nav > li {   }  /* 低于预计的效率 */

这让人非常的疑惑，我们原以为浏览器会先匹配最高效的ID，然后再去找那该死的子元素li。但事实是更该死的浏览器会先去找低效的li。

不要使用标签筛选

绝对不要这么用：

ul#main-navigation {  }

ID是唯一的，所以没必要再用个标签，脱裤子放屁的事咱ITer不能做。
同样的，对于类(class)也应该尽量避免，除非你想实现同一类名根据标签来做不同的表现。

包含选择器是最烂的

David Hyatt曾说过：

CSS中最耗资源的就是包含选择器(Descendant Selectors)，特别是这些选择器是标签或通配符时，资源开销会大的恐怖。

也就是说，这个选择器是相当的低效：

html body ul li a {  }

墙内音：fuuuuuuck ie6

一个失败的选择器比一个成功的选择器更高效

我不确定这一条的实用性，因为在你的css里面出现着一堆一堆的无效的选择器，好像呃，非常的诡异。但我们还是得明白：当浏览器从右至左解析选择器的时候，一旦无法匹配就会立即停止解析。

写选择器的时候思考一下为什么

例如这个选择器：

#main-navigation li a { font-family: Georgia, Serif; }

上面这段代码只是用来申明字体类型(font-family)，不必指定如此详细(复杂)的选择器（除非你是想覆盖<重设>font-family）
可以通过继承的方式使之更高效：

#main-navigation { font-family: Georgia, Serif; }

全文主要内容译完
作者还提醒大家：

不要为了优化css选择器效率而损失css的可维护性、语义化，这样就得不偿失了。本文只是希望你能认识到，css可以写的更好更漂亮。

另外，css选择器在一些JavaScript库中同样有用到，这些概念也同样适用；ID最高效，复杂、包含选择器这类是低效的。

[译]如何在目前这个浏览器群雄割据的时期用上HTML5

vicZen — Sat, 03 Apr 2010 18:06:04 +0800

原文：How to use HTML5 in your client work right now
中文：如何在目前这个浏览器群雄割据的时期用上HTML5
请尊重版权，转载请注明来源！

“可否用HTML5来做这个站？”两周前一个客户这样问我，我当然很乐意这么做。当时的情况是这样的：

我：

如果你们没有问题的话，我们将使用HTML5重构整个站点。但我想问下：你们站点有多少IE用户是没有开启javascript的？占多少比率?

客户：

嗯，我真的不清楚。但我不想损失这部分用户，所以我想还是不要用HTML5了。

我：

哇！别这么早下决定，我们可以只用HTML5来搭建个别之处，而非全部，这样如何？

客户：

棒极了！就这样做。

目前我们可以用到HTML5的哪些东东？

Rich:绝大部分都可以用上，这里有一个兼容(包括IE)的简要列表：

修改文档申明；
html
```
<!DOCTYPE html>
```
简化编码设置；
html
```
<meta charset="utf-8" />
```

简化<script>和<style>标签；

<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>

使用块级链接；

<article>
<a href="story1.html">
<h3>Bruce Lawson voted sexiest man on Earth</h3>
<p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p>
<p>Read more</p>
</a>
</article>

在HTML4中使用语义化的类名来替代HTML5的新标签，可以参考@boblet’s cheat sheet
使用新的form属性以及input type属性，以便优雅降级：
新的input type：
tel,search,url,email,datetime,date,month,week,time,datetime-local,number,range,color
使用诸如<time>这类新的标签来增强语义，这些可以被标准浏览器所解析；
使用<video>和<audio>标签，然后使之优雅降级（可参考audio和Video for Everybody）；
对一些缺陷修复可使用诸如Modernizr的方式

你可以在Molly Holzschlag and Alex Deveria那里查到兼容性的资料。

今日至此，明日再做修整~

翻译参考资料

HTML5 differences from HTML4

JSLint for EditPlus 检验js语法

vicZen — Fri, 19 Mar 2010 16:43:52 +0800

下载EditPlus.JSLint后解压到任意目录。

在EditPlus中依次点击[工具]->[配置用户工具]->[添加]->[应用程序]

按图中设置：

参数："$(FilePath)"
命令：WScript.exe "D:\editPlus\app\JSLint\JSLint.wsf"
注意将JSLint.wsf路径替换成你自己的
输出模式中的正则表达式栏：
^.+ >>>in \[(.+)\] \[line\: ([0-9]+)\,character\: ([0-9]+)\]

然后设定一个快捷键~
JSLint检查完后双击错误信息，就会自动将光标定位到出错行。

历史版本

EditPlus.JSLint v0.1

各浏览器中cookie限制

vicZen — Fri, 19 Mar 2010 11:28:14 +0800

	Firefox(3.6)	Opera(10.x)	chrome(5.x)	IE6	IE7/IE8
最多key个数	50个	30个	53个	20个	50个
key个数超出时	随机删除旧的	先进先出方式删除旧的
单key字节数_①	4097	4051	4051	4096	5072
单key字节超出时	不进行写入操作
总字节数限制_②	204850	4997	server端控制（见注2）	4096	10239
总字节超出后	不写入新的		400 Bad Request	cookie无法读写

注①：包括key及value，以及分号、等号
注②：总字节数也受HTTP Server的设置影响；
Apache用这2个参数调整：
LimitRequestFieldSize 限制客户端发送的请求头的字节数【默认 8190】
LimitRequestLine 限制接受客户端发送的HTTP请求行的字节数【默认 8190】
当cookie超出Server的设置大小后会出现400 Bad Request

结论：我们应该保证cookie key数量<=20，单key字节<=4000b，总字节数<=4000b
但我们应尽量减少cookie的大小，以获得最优页面加载速度。见"When the Cookie Crumbles“

zencoding(HTML) for EditPlus v1.1

vicZen — Wed, 24 Feb 2010 10:47:18 +0800

zencoding介绍可以参见前端观察的译文

下载：EditPlus.Zen.HTML v1.1

v1.1改成了弹窗输入代码方式，相对v1.0较为便捷
还在想更好的实现方式，editplus的接口太少了~

安装

在EditPlus中依次点击[工具(T)]->[配置用户工具(C)]->[添加(D)]->[应用程序]
设置如下：

(请将命令修改为你的zencoding插件路径)
然后设置一个自己喜欢的快捷键吧。

English:

Unzip EditPlus.Zen.HTML v1.1.zip to a sensible location.
In EditPlus open the “Tools” menu and select “Configure User Tools”
add a new program
Assign a Hotkey (eg. CTRL+,) to this tool

使用

输入前按下之前设置的快捷键，然后在弹窗里输入快捷代码。

注：如果喜欢v1.0的选取片段方式，可以修改设置：

更新历史

v1.1
改变输入方式为弹窗输入，相对便捷
v1.0
简单功能实现

jQuery源码查看器

vicZen — Fri, 05 Feb 2010 13:00:39 +0800

传送门：http://james.padolsey.com/jquery/

css3 简单交互应用“:target”

vicZen — Thu, 28 Jan 2010 11:28:52 +0800

先看示例：例一（请用firefox3.x、chrome4等支持css3的浏览器查看）

关键的css是这一句：

.post:target {
  display:block;
  position:fixed;
  top:50%;
  left:50%;
  margin:-80px 0 0 -260px;
}

例一向大家展示了css3中:target的神奇应用，但不足的是当有纵向滚动条时，会有页面跳转的动作；当然了，也必须有跳转动作:target才会运作。
如果需要取消页面跳转，那得用上JavaScript了。

但是我们可以换一种简单的交互方式：查看例二

这就是css3的魅力，通过css就能实现不错的用户交互体验，当然配合JavaScript会更出色！
在此抛砖引玉~

display:inline-block 另解

vicZen — Thu, 21 Jan 2010 13:35:46 +0800

inline-block是个好东西，谁用都知道。
但兼容是个问题（仅Opera、Safari、chrome、firefox3.x能完美呈现）

~~IE下可以通过触发hasLayout来模拟inline-block~~

纠正我一直以来的认知错误“ie不支持inline-block”：
IE5.5就已经支持inline-block了，可参考display Property的Remarks部分；但IE7及以下版本下给block元素设定inline-block需要使用*display:inline;*zoom:1;来修正。

麻烦的是firefox2.x
虽然有-moz-inline-block和-moz-inline-stack来模拟，但都或多或少有些问题

firefox2.x中使用-moz-inline-stack使用可能遇到的问题：（垂直居中）

可以使用-moz-box-align -moz-box-pack这2个firefox私类来稍作修正，但始终无法完美模拟。

在一次偶然中，我发现firefox还提供有另一个私有属性display:-moz-box;，它会根据-moz-box-orient的值来水平或垂直显示其子元素。
因此给-moz-inline-block元素的父级定义display:-moz-box;就可完美模拟inline-block了！（-moz-box-orient默认值为水平显示）
但因为-moz-box的定义，这个方法不适合有其他类型子元素的容器使用。

可点此查看示例

主要样式：

.link-ib,.link-ib span {
	display:inline-block;
	height:40px;
	line-height:40px;
	background:#FFCB06 url(btn.png) no-repeat;
	*display:inline;	/** 修正ie 无法给block元素设定inline-block **/
	*zoom:1;	/** 触发ie中inline元素的hasLayout **/
}
.link-ib {display:-moz-box;} /** for firefox2.x **/
.link-ib span {display:-moz-inline-block;} /** for firefox2.x **/
	.link-ib {
		padding-left:20px;
		color:#654005;
		font-size:16px;
		text-decoration:none;
		background-position:0 0;
	}
	.link-ib span {
		cursor:pointer;	/** 修正IE **/
		padding-right:20px;
		background-position:100% 0;
	}
	.link-ib:hover {
		color:#000;
		background-position:0 -40px;
	}
	.link-ib:hover span {
		background-position:100% -40px;
	}

jQuery 1.4 更新概述

vicZen — Fri, 15 Jan 2010 13:32:12 +0800

今天jquery发布了1.4版本，看了下1.4的更新文档，主要是强化了部分原有的方法（批量/支持function参数等），新增了一些实用的方法以及性能优化。
大致如下：

修改内容：

.add() 支持 .add( selector, context ) 方式
以下增加支持处理function方式：.addClass() .after() .before() .append() .css() .html() .prepend() .removeAttr() .removeClass() .replaceWith() .text() .toggleClass() .val() .wrap() .wrapAll() .wrapInner()
.bind() 支持批量绑定事件
.closest()支持第二个参数(筛选元素的容器)，优化效率。用法：.closest( selector, [ context ] )
.data() 支持批量设值 $('body').data({one: 1, two: 2});
.index() 如果无参数，则返回在它兄弟级元素集合中的索引值；并支持使用选择器(selector)过滤
jQuery() 如果无参数，会返回一个空的数组（旧版本返回document）
用 jQuery() 创建DOM时，可以使用第二个参数来设置属性值、绑定事件查看示例
.offset() 新增功能可以直接设置元素相对于document的坐标，并支持function参数
jQuery.param() 第二个参数(布尔值)，可以设定是否进行URI编码

新增内容：

.clearQueue() 清除.queue()生成的队列，如无参数将清除fx中的队列；类似于.stop(true)

jQuery.contains() 检测是元素否包含目标

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

.delay() 延迟执行队列

<!DOCTYPE html>
<html>
<head>
  <style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
 
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
 
<script>
    $("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });
</script>
</body>
</html>

.detach() 返回从元素数组中移除的匹配元素。
.focusin() 是.bind(‘focusin’, handler)的简写方式。
.focusout() 是.bind(‘focusout’, handler)的简写方式。

.has() 筛选出包含有指定元素的集合

	<div id="a"><strong>这个会被选中</strong></div>
	<div id="b">这个选不中</div>
	<script type="text/javascript">
	$('div').has('strong').css('color','red');
	</script>

jQuery.isEmptyObject() 检测对象是否为空值

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

jQuery.isPlainObject( object ) 检测是否为pain object

	jQuery.isPlainObject({});	//true
	jQuery.isPlainObject('{}');	//false

.nextUntil([ selector ]) 查找当前元素之后到selector(参数)之间的同辈元素

<div id="a1">3232323</div>
<div id="a"><strong>这个会被选中</strong></div>
<div id="b">这个选不中</div>
<div id="c">ccc</div>
<div id="d">ccc</div>
<script type="text/javascript">
$('#a').nextUntil('#d');	//取得[#b,#c]
</script>

.prevUntil([ selector ]) 查找当前元素之前到selector(参数)之间的同辈元素
.parentsUntil( [ selector ] ) 取得一个包含着所有匹配元素的祖先元素（直到找到selector截止）的元素集合
jQuery.noop 空函数，当想定义一个空函数时可以用这个。
.toArray() 取得所有匹配的 DOM 元素集合，有点类似于.get()
.unwrap() 移除匹配元素的父级

vfresh

备忘：页面内容加载优化

[译]高效地呈现CSS

从右到左的解析

ID选择符最高效，通配选择符最低效

不要使用标签筛选

包含选择器是最烂的

一个失败的选择器比一个成功的选择器更高效

写选择器的时候思考一下为什么

[译]如何在目前这个浏览器群雄割据的时期用上HTML5

目前我们可以用到HTML5的哪些东东？

翻译参考资料

JSLint for EditPlus 检验js语法

历史版本

相关阅读

各浏览器中cookie限制

zencoding(HTML) for EditPlus v1.1

安装

使用

更新历史

相关阅读

jQuery源码查看器

css3 简单交互应用“:target”

display:inline-block 另解

相关阅读

jQuery 1.4 更新概述

修改内容：

新增内容：