css的匹配性能
关于CSS的匹配性能的思考!(部分内容来自网络,大部分内容自己整理)
网上关于css匹配性能的文章很多,也有很多注意事项需要大家注意.这里就整理一下,顺便解释下为什么这样做可以增加匹配性能.
其实网上关于浏览器如何匹配css的原理也只是源于一篇MDC上的Mozilla的ui渲染原理的文章,原文地址:https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS (英文版的,中文版可以去google搜索).
文中有一段话:
样式系统从最右边的选择符开始向左侧移动来匹配一条规则。样式系统会一直向左匹配选择符直到规则匹配完毕或者由于出错停止匹配.
还有一段话:
样式系统把规则分为四大类。理解这些类是很重要的，因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素，而不是它的祖先元素).
关于浏览器的css匹配的要旨,基本就在这两句话里面了(至少Firefox里是这样的).不过匹配的时候从右到左的顺序,也许和很多人预想的是不一样的,例如我这种人,在我的理解中,匹配是从左至右的,可能是用yui用多了,yui里面获取class的时候,先是获取父节点,然后再再里面筛选class,从左至右,所以我理解中浏览器的匹配也会是从左至右的.可是事实却是从右至左的,如果你的理解也是从左至右的,那么就要好好考虑清楚为什么浏览器会从右至左匹配,只有搞清楚了这个,以后写css的时候才会容易考虑清楚如何写才会节省性能,否则可能会按照自己的习惯想法来理所当然写css,最后在匹配性能上出问题.
其实从右至左的顺序也是可以很容易理解的,不论是从左至右还是从右至左都是在逐步筛选元素,之所以选用从右至左也许有其他原因,但是既然以最后一个选择符作为主选择符,那么从主选择符开始匹配就在情理之中了.
因为上面这两句话的原因,可以总结出下面这些css的性能提升点,我对每个提升点都做了详细的解释,理解了他们,以后就会觉得自然而然,在写css的时候自然可以写出高性能的css来.
首先介绍css中四种匹配规则:(注意他们的特性,这对于后面的理解很重要)
ID规则
ID 选择符作为主选择符的规则.
例如:#backButton { }
CLASS规则
如果一条规则有一个指定的 class 作为主选择符，就被归入此类.
(全文…)
本文地址:http://www.html-js.com/?p=653转载请注明出处,不要删除此信息
ABtest 前端搭建方法总结
一.前言.
入职第一天,我就接到了一个从来没有听说过的任务.这个任务就是做一个abtest,使用的是阿里巴巴的一个abtest系统,而且之前好像淘宝这边貌似没有人用过这个系统,所以我把这次测试的搭建和实现过程整理成文档,这样大家以后也好有个参考,很多问题也不必重复请教阿里巴巴的同事了。我觉得我已经够烦他们了，不过幸好他们很有耐心，让我在短时间内就成功搭建成功了这次测试。
二.abtest.
何为”abtest”?
顾名思义,就是ab 然后test,ab就是指两个不同的版本,我们通常称为a版本和b版本.a版本一般是指原来的版本,b版本指改版后的版本,这样约定可以在写代码的时候不至于弄混淆.这种情景通常出现在网站需要改版的时候,我们不能确定新版的网站是否会造成用户的抵制,这个时候,我们就需要做一个test来统计一下b版本的网页的改版是否是必要的和成功的.通常,abtest需要采集大量的数据,如果网站流量太小,这种测试结果没有任何意义,因为取样率不足以用统计学来解释test中出现的差异,有时候个体行为对结果干扰过大,所以在做abtest的时候一定要保证样本数量,同时还有一个要注意的就是分配方法.因为测试中涉及到ab两个版本,我们需要让ab两个版本随机显示给用户,但是又要做到比例对半分,也就是如果有10万个人来请求此页面,那么就要基本上是5万5万对半分.
abtest的示意图如下:
图 1 ABtest示意图
require 'win32ole' $col_map =["","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"] class Excel_Info attr_accessor :file_name attr_accessor :range def initialize(file_name) @file_name = file_name @range = {} end end (全文...)
No tags
这次活动是我们淘宝网校园招聘百年大学培训第五期的全班同学共同发起的公益活动，我们在贫困地区为贫困儿童建立了一座图书馆，然后我们组织淘宝网卖家和社会的力量来为贫困儿童捐书，公益，其实每个人都可以付出自己的一份力量，对你来说只是几本书，但是对那些孩子来说，他们得到的是希望和未来。
具体可以联系我，留言给我，也可以联系下面的人的联系方式，谢谢，请帮忙转载和分享。
1个乡村图书馆
1个乡村的梦想
实现它需要
1个人捐5000本书
10个人每人捐500本书
100个人每人捐50本书
1000个人每人捐5本书
还犹豫什么，让我们成为这1000分之一
所需书籍： 适合青少年，山村教师，村民阅读的书籍
书籍去向：四川省合江县茅山小学茅山乡村图书馆
邮寄地址：四川省泸州市纳溪区东门口西南化工研究院34幢802室 熊启华收
邮编：646300 手机：13937510823
No tags
中国8亿的手机用户最想做什么事？
2010年淘宝8341计划中，一个最为神秘的部门你知道是哪个部门？
马总认为在中国唯一有机会在电子商务领域超越淘宝的机会，你知道在哪里？
来看这里吧！答案马上揭晓！
(全文…)
在两瓶可乐中，我结束了百淘校招四期的旅程。然后回到西湖国际开始敲我的代码。代码对我来说是生活的很重要的部分，以前我每天把除了睡觉之外的所有时间都贡献给它。但是我现在想法有些不同了。
百淘是个什么东西？很多人说它是一个用来洗脑的工具。还是那句话：如果洗脑可以让你认识到自己的价值和提升你的人生观，洗一下又何乐而不为呢？
人生总是变化的，难道我们面对着这些变化不应该想到要做一些改变么？
我很喜欢淘宝的文化，喜欢百淘的文化。有些人抱怨说淘宝会加班。好吧，如果你认为不加班可以实现自己的价值，没有人逼你加班，人年轻的时候总共才多长的日子，拼了去搏一把又会如何呢？
——————————————————————————————
其实我真的曾经是个诗人，只是是意识流的，所以到现在我写的东西还是读着很别扭
——————————————————————————————
其实对于价值观，我不敢说我理解了哪个，只是通过百淘，我真的觉得自己改变了很多，我现在很想参加公司的各种活动，很想在内部组会上做分享，虽然我分享的东西都是又啰嗦又讲不清楚，但是我明白，敢于分享才是最重要的，分享的多了，思路自然会清晰起来。
在百淘的前几天，我很沉默。这是我的一贯作风，我认为百淘最多就是个小班级，不必出风头，也没有什么值得我去尖叫或者关注的。可是很快我就意识到我错了，慢慢地，我发现百淘是我有生以来呆过的最让人难以忘怀的地方，是一段最让我难以自控的时间。难以自控，用这个词来形容不知道合不合适。我无法控制自己了，我要爆发，哦，应该就是这种感觉。
No tags
本文地址:http://www.html-js.com/?p=594转载请注明出处,不要删除此信息
今天在看JavaScript中的分号处理的时候，发现一个现象，以前没有注意过。
主要是ECMASCRIPT规范中的一句话引起的：
当程序解析器从左至右解析程序的时候，如果遇到了输入文档流的结尾，而解析器无法正常解析文档流的时候，一个分号会被自动插入到输入流的结尾。
这句话看起来道理很简单，但是由于之前对JavaScript的错误没有仔细想过，所以看过之后不得要领，随后仔细想了想，试了试，算是有点小心得了。
下面是我的片面之词，希望有不对的地方大家提出自己的看法。
首先从一个小例子开始：
<script>
alert("第一次弹窗");
(function(){
return ee
})()
alert("第二次弹窗")
</script>
上面这段代码放在html里运行后的结果是什么呢？
结果只会弹出一次窗口，因为在执行闭包里的return ee的时候发现变量ee是没有定义的，程序将停止执行。
然后，我们换一段代码：
<script>
alert("第一次弹窗");
function(){
return ee}
}
alert("第二次弹窗")
</script>
这次的结果是什么呢？
第二段代码不会有任何反应，因为这是另一种错误。
这两段代码正是说明了两种js错误类型，第一种是运行时错误，第二种是解析期错误。
解析时错误是由于语法错误引起的，而运行时错误则是程序员在书写的时候逻辑错误引起的。
通过上面的例子来看，解析时错误比运行时错误更致命，因为它会直接导致程序不运行，任何语句都不会执行。而运行时错误只有发生后才会导致程序中断。
解析时错误是很容易避免的，根据上面的特点，在调试程序错误的时候，我们可以先查看是否程序的语法有错误。在文档头部书写一个alert语句，如果此语句无法运行就说明程序的语法有错误，这种错误基本都很容易发现，而且这两种错误在浏览器调试工具中显示的地方不同，运行时错误通常通过动态捕捉，例如：firebug和chrome的script选项卡里的错误捕捉功能，而解析时错误则显示在控制台中，chrome里的console选项卡里。
上面说到的情况只是脚本直接嵌入在页面里的时候的情况。还有种情况是主页面引用了多个js文档，在这些文档里发生了上述错误会引起什么现象呢？
看例子：
<script src="a1.js"></script> <script src="a2.js"></script>
a1.js中的代码如下：
alert("第一次弹窗");
(function(){
return ee}
})()
alert("第二次弹窗")
a2.js中的代码如下：
alert("dd")
大家想想这次的结果是什么呢？
上面的代码会弹出一个“dd”的对话框。也就是说a1中的语法错误并没有影响a2的解析。可见对多个文档的解析是分离的，a1中的语法错误只会阻断a1这个文档的解析，而不会影响a2的解析和执行，如果a1解析错误，解析器跳过这个文档。
这也是为什么文章开头我提到那句话的原因，本来料想如果解析到文档流末尾的时候发现本文档无法解析应该跳出解析，而文档却在此说明这种情况仍然需要加一个分号，然后继续往下解析下一个文档流。也就是说某个文档解析错误的时候并不影响接下来的文档的解析。
之后，我们来看看这种情况下a1.js中如果发生的是运行时错误会怎么样？
将a1.js的代码改为如下：
alert("第一次弹窗");
(function(){
return ee
})()
alert("第二次弹窗")
希望如你所想，结果是首先弹出“第一次弹窗”，然后弹出“dd”。
可见运行时的错误也不会阻断其他文档流的执行，而只是阻断当前文档的执行。
总之，这两种错误还是有些区别的，了解清楚这些区别对于程序的调试还是有一定好处的。
No tags
我是按照我买他们的时间来安排列表的，从这里你也可以看到我是怎么开始学编程的，顺便把我的一些经历说说。
所有的书都是外国人写的，对这点我深感遗憾，国人写的不如我法眼。。。（这话说的）
1.首先是从高中带过来的两本：
一本是《时间简史简装版》一本是《薛定谔的猫》，这两本是我高二时候买的。其实还有一本《时间简史精装版》的，可惜后来被我搞丢了。
这两本都是讲理论物理的，很有意思，而且讲得不深入。。。特别是《薛定谔的猫》我老喜欢了，书籍资料跳转看：
《薛定谔的猫》 http://book.douban.com/subject/1089271/
略。
这个有兴趣的拿去吧，我现在对理论物理无爱了，因为我直到现在这门课还没过。
2.c#
大二之前我不知道啥是编程。。。大二有门课叫做c++，后来我那个暑假想借本书看看啥是c++，然后去了图书馆，我看到好多c啊，c，c++，c#。我不知道他们有啥区别，于是我随便找了一本，后来发现拿的是c#。然后之后就开始我的编程生涯了，从c#开始。
首先是一本重量级的书 《c#2005&.net3.0高级编程》（第5版） ，现在我只有下半本，上半本被人偷了。原价158.00元，现在10块钱处理。这本书很经典哦，主要是很厚，从新街口书店拿到学校，差点没压死我。。。
然后是一本《beginning c# objects–从概念到代码》，这是一本思想重于概念的书，和上面这本书结合起来看最好不过，算是进阶版吧。这本是完整的，18块钱，卡卡
其实我买了很多本c#的书，不过都被我搞丢了。。。
3.php
学了一些c#后，一直没突破，也就给院里做个小软件啥的，都幼稚的要命。后来偶然我不记得啥时候我开始了php旅程，之后php一直跟着我接近一年。。。
php我看过N本书，不过我买的书就可怜的少了，只有一本《php函数参考手册》。php程序员必备，哇咔咔。原价：69.我出 18元。
4.工程方法
学了编程，难免接触点方法学和工程学的东西，毕竟这些东西才是真正的修养，要不一辈子都是一个代码工人而已。
最经典的一本：《代码之美》，如果你不知道这本书有多牛逼，那你真的out了，不多说。原价：99.我出30元。
第二本：《编程之美》，微软那波人写的，很牛逼很好玩，原价：40元，我出20.因为是本好书。
第二本：《系统分析与设计方法》，这本书也很有用。但是我看的很少，我一个学长推荐我看的，我看不懂。。。原价：69，我出20
第三本：《设计模式初学者指南》，这本比较通俗易懂，也是很出名的书。原价：49，我出：15.
第四本：《uml用户指南》，买了没看过，uml太复杂，还是画脑图划得来。原价：49，我出：12.
第五本：《数据结构与算法-java语言版》第二版，我对算法不感冒，看到树那里就看不懂了。罪过啊。原价：59，我出18.
5.电
《无线电合订本 2007 下》，很经典的电子学杂志，里面很多可爱的例子和教程，5元抛了。
6.flash
大三暑假的时候，有个公司说要要我，但是要会flash，于是我花了三个月学flash。之间买了很多书，不过很多都没了，不知道去哪了。
第一本：《flash ActionScript3.0动画教程》很经典的一本书，看了保准不后悔。原价：59，我出 22.
第二本：《游戏关卡设计》，我无爱。5块钱
第三本：《advanced ActionScript3.0 animation》，这是英文版的，装订比书店那种好多了，之所以是英文版是因为没有中文版。我出 18元。
第一个来买的送程序员杂志一本。。。
No tags
首先说明下这里说的遮罩不是大家平常所谓的遮罩层\lightbox之类的效果,而是跟flash中的遮罩层类似的效果,也就是在一个层上覆盖一个遮罩层,只有这个遮罩层有内容的地方,下面那个层的内容才会显示出来,而且透明度也会起作用,感觉上说来有种反相的感觉,遮罩层上显示的地方下面的层就显示,遮罩层没有内容的地方下面的层就不显示,而不是被遮罩层盖住.
我们利用webkit中新增的一个css属性可以来实现这个效果:
-webkit-mask
这个属性可以在某个层上显示一个遮罩,关于此属性的具体文档,请跳转:
下面举个简单的例子来说明:
下面有两个图,左边是实例图,右边的图则将作为一个遮罩层附加到左边的图上,点击后就可以看到效果(务必使用最新版chrome或者safari4.0以上浏览器)
看了这个例子应该就可以理解什么是遮罩了.
我们发现这种遮罩实现的时候必须要一个图片才行,是不是觉得很麻烦呢,如果在程序中要多次改变遮罩形状,岂不是麻烦死了,于是我们就用canvas来实现一个动态设置的遮罩,当然不要对这个效果的期望太高,因为遮罩的渲染是不连续的,不要梦想用这个实现动画的遮罩,只是这种方法可以免去图片的烦恼,也可以自定义一些形状.只要你把这些形状画在canvas里就可以.
原理并不神奇,canvas元素有一个好用的方法,那就是:
toDataURL()
这个方法会把当前canvas里的图形转换成DATAurl格式的图片编码,然后…
我们把这串编码赋给css里的url()里就可以了…是不是很简单…
下面是个例子,在页面上点击,canvas就会重新绘制一个图形,然后作为遮罩,注意中间会闪一下,这就是瓶颈…
希望有人可以用的着这个效果…
dsssssssssssssssssssssssssssssssssssssssssssssssssssssssss
dsssssssssssssssssssssssssssssssssssssssssssssssssssssssss
sdssssssssssssssssssssssssssssssssss
关于target=”_blank”去留的问题在网上已经被反复争议很多次了。有的说要留，有的说要去掉。主张留的一方主要是考虑到target=”_blank”的属性目前来讲还没有一个好的方式来解决，而主张去的一方则拿出了rel与JS的解决方案。target=”_blank”是否的存在是否有必要我想目前还有很多正处在一种盲区。我查阅了相关的文献，发现其实情况并非是我们所想的那样，事实上target=”_blank”并非是不符合标准的，而用rel与JS的解决方案也是没有必要的，因为这是个误区，只要我们了解了rel与target的真正含义我们就清楚了其实这里本不应存在争议。下面我将我通过查阅文献所得到的知识与大家分享，我们先来了解一下target与rel的含义：
target ，允许指定在什么位置显示已经选择的超链接内容。也就是说链接的内容将在什么样的窗口被显示。target 的属性值有四个保留的名称，分别是：_blank,_self,_parent,_top。其中_blank的意思是浏览器总在一个新打开的、未命名的窗口中载入target＝”_blank”链接的文档。这里大家也许会很不理解“未命名”是什么意思。事实上target 是可以给新打开的窗口赋一个ID，例如：target=”name” 这就表明通过target=”name”链接载入的文档将会在一个叫”name”的窗口显示。如果没有ID为”name”的窗口，那么浏览器就会新建一个名为”name”的窗口来显示链接文档。如果当前窗口的ID就是”name”那么这个链接文档就会在当前的窗口中替换原有的内容显示出来。而_self的意思其实就是当前文档，<a>的默认目标就是_self，这个属性值一般来说是用不到的。_parent是使链接文档在父级窗口显示，这个属性值只在框架结构中使用，如果身本就是顶级框架，那么其作用与_self相同。_top同样是应用在框架中的，但是他的效果是清除框架来显示目标文档。这对于从框架结构转向无框架结构是很有作用的。
现在我们知道了，target 是一目标显示的属性与浏览器密切相关的。那么rel又是什么呢， 为什么很多人把他当作是target 的替代属性呢？下面我们就来认识一下rel。其实不只有一个rel还有一个与之对应的属性叫rev，这两个属性的意思分别是：从源文档到目标文档的关系；从目标文档到源文档的关系。这里的源文档可以理解为链接所处在的当前文档，而目标文档也就是这个链接将要打开的文档。这下我们应该清楚了，其实rel与rev是一种文档之前的链接关系，而并非是与浏览器相关的如何显示目标文档的属性。
那么rel与rev有哪些关系呢？下面将一一列取并解释其中的含义：
next，链接到下一个文档；
prev，链接到前一个文档；
head，链接到集合中的顶级文档；
toc，链接到集合的目录；
parent，链接到源上面的文档；
Child，链接到源下面的文档；
index，链接到此文档的索引；
glossary，链接到此文档的术语表；
其中next与prev是一组。表明了当前文档与目标文档之前的关系是同级的关系，可以写成这样<a href=”movie_002.htm” rel=next rev=prev>。head与toc可以形成一个组合，表示者是由目录链接到最终的文档，或是由文档链接到目录。parent与child是一组，表示着由当前的文档链接到父级文档或是子级文档。而index与glossary可以与head分别组合，形成由文档到索引，或是由索引到文档；文档到术语表或是术语表到文档。
也许这样讲可能还是不很清楚，下面举个例子：我这里整理了一个电影文档资源，那么我需要对这些资源进行分类，我把电影分成：武侠片、战争片、爱情片、恐怖片、纪录片。那么我在电影根目录需要链接到下面的子类的时候那么链接的关系应该是：rel=child rev=parent ，而如果当前是武侠片的频道页，我需要转爱情片频道或是其它频道时，那么链接关系就应该是：rel=next rev=prev，当我们由一个武侠片链接到“卧虎藏龙”这部电影的文档时链接的关系应该是：rel=head rev=toc，当由“卧虎藏龙”链接到索引的时候链接关系又变成了：rel=index rev=head。
由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善。
然后来看看今天我开始怀疑哪个权威哦家伙了。。。
自从开始学编程，自从接触到数组这个东西，我就一直在不同的地点和不同的时间不断看到有人提醒：在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦，而不要用for(var i=0;i>arr.length;i++)的方式哦，因为用脑子想想也知道，第二种方法的第二部分会一直去计算数组的length，所以自然效率比较低。
哦？我们这里不说其他程序语言，而只讨论js，因为不同的语言，实现可能不同，其他语言是什么情况还要靠大家去探索喽。 其实上面说到的所谓的“动脑子想想就知道”也许只是因为大家只是用脑子想了想，而不是仔细想了想或者亲自去试了试。所以现在我们仔细想想，第一种写法真的会比第二种写法快么？arr.length会耗费很多cpu么？不会啊，为什么要耗费cpu呢？arr.length并不是调用了一个方法，而只是读取了一下数组的length属性啊，你认为读取原生属性和读取定义的变量，哪个会快呢？ 我认为读取length会更快，所以我写了个测试来测试自己的想法： 我用了一个我自己的小测试框架，
var arr=[],arr2=[],i=0
while(i<100000){
arr.push(i)
arr2.push(i)
i++
}
M.TA.begin("0000");
for(var i=0;i<arr.length;i++){
arr[i]=arr[i]*arr[i]*arr[i]
}
M.TA.end("0000","for(var i=0;i<arr.length;i++)")
M.TA.begin("0001");
for(var i=0,n=arr2.length;i<n;i++){
arr2[i]=arr2[i]*arr2[i]*arr2[i]
}
M.TA.end("0001"," for(var i=0,n=arr2.length;i<n;i++)")
M.TA.showResult()
当然，这段代码是很变态的，占用了300多兆的内存。 结果如下：
总结：？
其实做这个测试不是为了强调for(var i=0;i<arr.length;i++)的写法快多少，因为测试也是有些许误差的，只是为了说明这种写法并不会慢到哪里去，而且这种写法有一定的灵活性，书写也简单，代码量又少，那我们为什么不用它呢？ 如果是第一种写法，在循环的时候数组长度发生变化呢？这种情况就处理不了了吧
其实我还是尊敬权威的，所以写到这里的时候我心里仍然提心吊胆，难道是我哪里搞错了么？如果是，大家就当一笑而过吧，如果不是，那我总算写了篇人模狗样的博文了。。。
（hello,JavaScript）
补充1：有人提出对于NODELIST缓存length会有明显速度提升，我做了个测试，结果没有成功，因为对于nodelist的操作，上万级的操作浏览器就受不了了，所以测试没成功，但是我看着貌似也差不多。速度提升有限。。。
补充2：本文不是为了讨论哪种方法更快，而是讨论两种写法都差不多，何必用复杂的方法呢。。。
