测试页面点此传送

Opera中的letter-spacing和正常态文字的word-spacing一样，这是错误的表现。

博客域名已更改为 http://www.lizhenwen.com/

相应的feed也改为了 http://feed.lizhenwen.com/

：）

按农历算，本命年还有一月之久才会滚蛋，但我按捺不住内心的狂喜，提前写下此文。

首先要感谢郭嘉，楼市调控直接的结果就是很多平民百姓本来买得到房的又被咔嚓了，我就是这群P民中的一员，悲催的定金也被吃了。不过我有一个不稀罕房子的老婆，这是我的幸福之处。（你调控我，我不怕！）

另一个幸福，并着辛苦的幸福，是和我同本命年的硕儿，3人家庭正式开组成功，我就这么着成为了年轻的爸爸。

今年是悲催的一年，也是超越的一年。

这一年里我得到很多，损失很多，明白了很多；我开始懊悔我曾以为永不会懊悔的颓废的大学生涯，我开始不再热爱我曾以为永远都会热爱的电子游戏，我开始寻找曾经热爱的却被丢弃的事物，我的肩膀扛的箩筐一下子被填满——而我的身价也这样子被提升了，保险公司说的。

絮叨完了，数下去年的目标，似乎除了结婚完美之外其余都被搁置了。

那么，2011的wish list：

• 身体早日康复
• 给父母好的礼物
• 继续深造javascript，同时必须要学一门后端语言了
• 买一大摞技术书的同时也得买几本课外书翻翻
• 满足自己的各种贪婪

本命年真是多福气，结婚生子一气呵成，真可谓大红艳红、红的发紫呀！~
乖儿子于2010年11月05日诞生，取单名李硕，意为他今后能硕果累累，不枉来这个世界一遭。

刚出生3小时的模样：

半个月的模样：

PS.长得超像我，嘿嘿。

目录

1. 新的选择器
2. WEB本地存储（localStorage/sessionStorage）
3. Web 本地数据库
4. 离线应用（Offline Web applications）
5. 地理定位（Geolocation）

本文地址：http://www.lizhenwen.com/js/1141
请尊重版权，转载请注明来源！

一、新的选择器

1. 根据类名匹配元素（DOM API），返回匹配到的元素数组，无匹配则返回空的数组。
   javascript

   var els = document.getElementsByClassName('section');

   支持浏览器：IE9, FireFox 3.0+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

2. 根据css选择器匹配元素（Selectors API）：querySelector 和 querySelectorAll。

   querySelector返回匹配到的第一个元素，如果没有匹配则返回null

   javascript

   var els = document.querySelector("ul li:nth-child(odd)");
   var els = document.querySelector("table.test > tr > td");

   querySelectorAll返回所有匹配到的元素数组，如果没有匹配则返回空的数组

   javascript

   var els = document.querySelectorAll("ul li:nth-child(odd)");
   var els = document.querySelectorAll("table.test > tr > td");

   支持浏览器：IE 8+, FireFox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

选择器效率测试见：http://jsperf.com/queryselectorall2
Opera的Selectors API明显经过优化，其余浏览器的getElementById效率是最高的。
Selectors API遵循CSS选择器效率规则
(查看全文»)

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

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

原文：http://css-tricks.com/efficiently-rendering-css/
中文：http://www.lizhenwen.com/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最高效，复杂、包含选择器这类是低效的。

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

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

我：

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

客户：

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

我：

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

客户：

棒极了！就这样做。

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

(查看全文»)

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

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

按图中设置：

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

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

• 注①：包括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“