请在此地址随时关注我要发布的前端工具.

第一个工具是html结构转换成用+相连的js换行字符串工具

作用就是把输进去的html结构变成js中可用的字符串形式,同时保留格式.

第二个工具是css属性排序工具

作用是把输入的css样式的属性按照首字母排序,生成的css可能会方便查询.

但是我还是想当设计师，哈哈！

设计师的悲哀

设计师很威风，不要被骗，其实他们很可怜的……

遇到搞设计的人就嫁了吧~

这样的设计师，你们伤害不起~

搞设计的人，会在阳光下，站成一棵树~

原谅我就是这样的设计师~

请别爱上搞设计的人

每个搞设计的上辈子都是折翼的天使……

http://www.html-js.com/wp-content/uploads/2010/08/firefox-input-bug.html

如果用的是其他浏览器,ie所有版本,chrome, opera,  那么你看到的大致都是相同的景象,那就是六个输入框.

如果你用其他版本的firefox,你看到的应该也是六个输入框,这个我没有测试,但是如果你的firefox是3.5.11版本的,你看到的就不是六个输入框了,而是很多输入框,他们有大有小,各式各样,让人很摸不着头脑,下面就做个分析.

之所以出现这个问题,是因为firefox(下面的firefox都是指3.5.11版本的,至于这个bug维持到哪个版本,我也不清楚,但是3.5.11的确是这样的)在解释type=”hidden”的input的时候,如果设置了特定的css属性,type=”hidden”的input会显示出来,如果设置的属性不同,显示的样式也会千奇百怪.具体代码可以看刚才的demo的源代码,下面看一个分析图:

从上面的分析来看,这种现象真是摸不着头绪,但是如何让hidden的input显示出来还是比较明显的,那就是设置display:inline或者display:block,同时设置border,这时候type=”hidden”的input就会显示出来,至于让它显示成什么样子,可以参照上图.

所以在平常设置css的时候一定要注意,不要统一给input设置各种属性,要针对某个input单独设置,如果不小心给所有input都设置了border和display,firefox就会把hidden的input也显示出来,造成样式混乱,虽然听起来挺平常的,但是这个bug的确被我们遇到了.就应该多注意一下.

哎,如果世界上只有chrome一个浏览器多好啊.

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 作为主选择符，就被归入此类.

例如:

• button.toolbarButton { } /* 基于 class 的规则 */
• .fancyText { } /* 基于 class 的规则 */
• menuitem > .menu-left[checked="true"] { } /* 基于 class 的规则 */

Tag 规则

如果主选择符不是 ID 或者 class，那么下一个类很可能就是 tag 分类。如果一条规则指定 tag 为主选择符，就被归入此类。

例如：

• td { } /* 基于 tag 的规则 */
• treeitem > treerow { } /* 基于 tag 的规则 */
• input[type="checkbox"] { } /* 基于 tag 的规则 */

全局规则(universal)

除以上分类之外都归入此类。

例如：

• [hidden="true"] { } /* 全局规则 */
• *{} /* 全局规则 */
• tree > [collapsed="true"] { } /* 全局规则 */

按照上面四种规则总结的最佳实践:

1.不要给 ID 分类规则指定标签名或者 class

ID选择符是匹配最快的规则,ID选择符通常都是唯一的,在一个页面里出现多个重复的id是不合逻辑的,加上标签名或者class只会拖慢匹配速度.

这里讨论到id选择符,因为它的速度最快,所以改用id的时候还是要用的,但是并不是说用的越多越好,这个需要衡量,特别是id选择符的优先级非常高,应该权衡使用.

– button#backButton { }

– .menu-left#newMenuIcon { }

– #backButton { }

– #newMenuIcon { }

2.不要给 class 分类规则指定标签名

class用来表示一类标签,一类的标签就应该有一样的行为,除非你给他们再细分子类,但是如果在类前面添加标签,这就把类的概念混淆了,对于清晰地css来说,这样做是不合逻辑的,当然也会增加匹配的消耗.

– treecell.indented { }

– .treecell-indented { }

– .hierarchy-deep { }

3.尽量把规则应用到最明确的类上。

对于css,其实我们每个人有自己的一套写法,例如,一个小模块,很多人喜欢给模块里的class命名都很简单普通,然后通过css中的后代选择器来给他们设置样式,例如:

这样写可以让html显得更精简,可以节省流量,但是根据这里说的匹配问题,应该避免这样写,而是应该这样写:

根据上面的两条渲染原则,这样写的确可以增加匹配速度,但是如何来衡量匹配速度和html大小之间的平衡的问题上就要自己做决定了.

– treeitem[mailfolder="true"] > treerow > treecell { }

– .treecell-mailfolder { }

4.避免使用通配符

通配符是一个很耗费时间的规则,特别是在和其他规则混用的时候.

例如这样一个全局通配:

*{font-size:12px;}

且不说这样的性能如何,如果你想给某个匹配结果的所有子元素都加样式,也就是这样写:

.mod .hd *{font-size:14px;}

根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd,然后匹配.mod,这样的性能耗费可想而知.

* { font-size : 12px; }

5.避免后代选择符

后代选择符的耗费是很大的,应当尽量避免使用,虽然平常我们经常大量使用后代选择符,大概是因为使用后代选择符,我们需要考虑的东西会少一点,我们不用管它是不是子元素,反正是后代元素就是了.但是我们应该改变自己的这种习惯,多用子选择器.至于为什么后代选择器耗费大,因为不管是从左至右解析还是从右至左解析,子元素匹配符的确定概率总是比后代选择符的概率大得多.

– treehead treerow treecell { }

– treehead > treerow > treecell { }

6.Tag 类规则中最好不要包含后代选择符

避免使用具有 tag 类规则的后代选择符。这会明显地增加匹配时间（尤其是这些规则会被多次匹配时）.这一条我也没想明白,但是相对于直接使用class一步到位来说,不管是后代选择还是子选择的耗费都要高的多.

– treehead > treerow > treecell { }

– .treecell-header { }

7.倚赖继承,了解继承

了解那些可以被继承的属性,避免重复设置可以被继承的属性,从而增加解析负担和匹配负担.

– #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }

– #bookmarkMenuItem { list-style-image: url(blah); }
这个例子里,因为很多人不知道list-style-image可以被继承,所以多写了匹配规则.

关于哪些元素可以被继承,那些元素不能被继承,这里就不讨论了,因为css的属性实在太多了,要靠平时来积累.

其他细节问题:

• border:none;与border:0;的区别

border:o会给浏览器保留border-style,border-color等空间,所以性能上有些许差别.

• 尽可能提供详尽的css属性
• 不宜过小的背景图片平铺

过小的图片要平铺出效果来需要大量的平铺计算,是种严重的消耗.

• 尽量不要用ie的滤镜

如果实在需要在ie6中使用透明滤镜,请指定只有ie6使用此滤镜.

• 不要用通配符解决浏览器渲染差异

类似:*{ margin:0; padding:0;}这样的重置首先对于匹配来说是需要消耗性能的,然后就是只应该给需要这个功能的事物赋予功能,而且在重置浏览器样式的时候要注意,有些样式不要随便重置,例如:不要为了定位方便,将所有的元素设置成position:relative;要知道在ie6下relative会引起一些不常见的问题.

对于css3和其他

现在浏览器的效率对于目前的应用来说已经足够强,在考虑给你的网站加上新效果和渲染效率之间衡量的时候,多考虑一下css3带来的好处和效果,不要纠结于渲染效率的问题,现代浏览器都在一直改进自己的渲染效率.

最佳实践?尽信书不如无书,在写代码或者没写代码的时候多考虑一下,也没必要非要按照上面说的做.渲染问题难以从根本来测试,也许某一条理论并不是正确的,谁知道呢.

速度和流量等问题需要衡量考虑,速度并不是每个网站都需要追求的极致.

其他实践

• 将css代码分组,不要每次都将代码往后塞,它应该出现在什么位置,就让他出现在什么位置,否则以后要改版,只能一直往后塞代码,如果按照dom顺序,将样式代码排序,也许查找起来会更方便.
• 书写注释,将css同样当做模块对待,每个模块用注释分割,描述一下他们是做什么的,是谁写的代码,什么时候做过什么修改
• 在注释中使用特殊的字符串表示锚点,例如:每个模块的开始都用一个特定的特殊字符做标记,下次你要挨个查看模块,按下”ctrl+f”,寻找这个特殊字符,然后就可以看到一个个的模块了,让文档变得容易维护,就是这么简单.
• 命名规范,不要用数字区分同类命名,例如:可恶的div1，div2.
• 心中指定一套自己的衡量方式,以便在遇到需求的时候快速决策.其实解决一个问题并不难,难的是你能在短时间内决定用何种方式来解决这个问题.

本文地址: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示意图

abtest的最终目的是为了统计两个版本的转化率,有效链接点击次数,访问量,点击位置等信息.这些信息可以有不同的用途,例如:通过打点图(统计点击位置)可以看到用户更关注页面里的哪些地方,有的时候,很多用户的行为我们凭空想很难预料到,而通过打点图,我们可以清楚地看到用户的点击行为,下面是个打点图的例子:

图 2 热点图(之所以间隙那里点击率最高,是因为鼠标浮在手机通讯上的时候会出来一个弹出层,也可以看到用户对电器和手机比较关注)

这个工具是免费的,对流量的支持应该也比较大,但是统计的数据比较少,而且我刚才试了一下,没有成功搭建.不知道什么情况

阿里巴巴的这套系统,主要是提供了一个清晰而且强大的界面和数据呈现方式.让分析人员可以直观看到各种数据.鉴于此平台属于内部使用,所以暂时不能在此透露地址和具体形式等内容.

四.测试哪些东西.

都哪些场景可能要用到abtest呢?下面是一些应用场景:

• 行动按钮的措辞，大小，颜色和位置，有的时候，改变一个重要按钮的颜色，就可以让成交率剧增。

• 标题或产品说明，有的时候，产品说明或许是对用户的干扰，有的时候，它却是必须的。

• 表单的数量和字段类型，表单过多会让用户放弃注册，但是有时候也会带来一种信任感。

• 网站的布局和风格，网站的改版是否成功呢。

• 产品定价和促销活动，何种产品定价对用户的吸引力更高呢。

• 着陆和产品页面上的图片，图片是造成了干扰还是必要的描述。

• 页面上文字的长度（少Vs多）。

五.开始搭建.

下面就开始搭建一个abtest测试系统,就以我和阿里巴巴同事的问答形式来说明搭建一个系统需要哪些工作.

1。准备工作.

abtest首先需要准备两个页面,这个是毋庸置疑的.本次我们的处理对象是电器城首页,本次商城首页改版的时候,用研团队对是否保留商品图片下方的商品简介文字产生了争议,如下图所示:

图 5 两种分流方式

• back-end AB test的分流是由后台控制的,利用后台给不同的用户输出不同的页面,然后再页面里统计点击位置和数量.
• 而Front-end AB test的分流则是由前台控制的.

接下来,我们需要开始了解abtest系统的工作机制了,事实上,机制很简单.

接下来,就是实现收集点击位置,然后传送数据的具体实现了,代码太长,就不贴出了,可以去电器城首页,看源代码的实现:http://3c.taobao.com/

这段代码做了如下的事情:

• 手动定义要测试的区块(也就是一个div),和它的偏移位置和大小,
• 确定当前的版本是a还是b,收集必要信息,例如浏览器类型,用户标识
• 给区块绑定点击事件,当鼠标点击的时候,统计鼠标位置,时间信息,并判断是否点在了链接上,这里注意,有的图片外面套链接的情况需要一起考虑到.
• 点击事件里采集完数据后,就发送一个请求,这样后台就会多出一条记录.

关于前端的实现方法,大家可以参考现在的电器城首页,如果测试完了,可能代码就被撤下了来了,这时候可以看我的demo页面的源代码:http://demo.ued.taobao.net/$tianqi/abtest/dianqicheng-a.html

谢谢大家.

七.一些其他的零碎的问题

• 有效点击的打点图中大部分都是打在了链接上,但是有的没有打在链接上,事实上这并不是程序错误,而是因为用户浏览器差异,所以造成部分统计偏差.

]]> http://www.html-js.com/?feed=rss2&p=626 6 http://www.html-js.com/?p=625 http://www.html-js.com/?p=625#comments Mon, 12 Jul 2010 09:44:56 +0000 admin http://www.html-js.com/?p=625 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 def load_data(filename) obj = nil File.open(filename, "rb") {|f| obj = Marshal.load(f)} return obj end def save_data(obj, filename) File.open(filename, "wb") {|f| Marshal.dump(obj, f)} end def get_range_name(row, col) return "ERR" if (col < 1) || (row < 1) || (col > 26 * 27) || (row > 65536) c2 = col % 26 c2 = 26 if c2 == 0 c1 = (col - c2) / 26 return $col_map[c2] + row.to_s if c1 == 0 return $col_map[c1] + $col_map[c2] + row.to_s end def read_excel(e_name, s_name) $excel.WorkBooks.Open(e_name) $excel.WorkSheets(s_name).Activate $excel_info = Excel_Info.new(e_name) rows = $max_rows cols = $max_cols rows = $excel.WorkSheets(s_name).UsedRange.Rows.Count if rows == 0 for row in 1..rows for col in 1..cols $excel_info.range[get_range_name(row, col)] = $excel.Cells(row, col).value.to_s end end $excel.WorkBooks.Close() end $MY_LOCATION = Dir.getwd $excel = WIN32OLE.new("excel.application") $excel.Visible = false $max_cols = 9 $max_rows =43 read_excel("C:\\Documents and Settings\\tianqi.sxy\\My Documents\\NetBeansProjects\\excel\\lib\\cookie.xls","可以移到服务器端且不影响交易的cookie") save_data($excel_info, "excel_info.obj") info = load_data("excel_info.obj") range="ACDEGHI" #在此指明要提取哪几列 startindex=4 #在此指明从第几行开始提取 headindex=3 #在此指明用第几行做表头 resultstr="<table class=\"cookie\">" resultstr+="<tr>" for colsss in 0..$max_cols-3 resultstr+="<th>"+info.range[range[colsss,1]+headindex.to_s].to_s+"</th>" end resultstr+="</tr>" for rowss in startindex..$max_rows resultstr+="<tr>" for colss in 0..$max_cols-3 resultstr=resultstr+"<td>"+info.range[range[colss,1]+rowss.to_s].to_s+"</td>" end resultstr+="</tr>" end resultstr+="</table>" #puts resultstr $excel.Quit() #写入文件 f = open("C:\\Documents and Settings\\tianqi.sxy\\My Documents\\NetBeansProjects\\excel\\lib\\index.js","a") f.puts resultstr

没有说明,就是这么用….自己琢磨吧

具体可以联系我，留言给我，也可以联系下面的人的联系方式，谢谢，请帮忙转载和分享。

1个乡村图书馆

1个乡村的梦想

实现它需要

1个人捐5000本书

10个人每人捐500本书

100个人每人捐50本书

1000个人每人捐5本书

还犹豫什么，让我们成为这1000分之一

所需书籍： 适合青少年，山村教师，村民阅读的书籍

书籍去向：四川省合江县茅山小学茅山乡村图书馆

邮寄地址：四川省泸州市纳溪区东门口西南化工研究院34幢802室 熊启华收

邮编：646300 手机：13937510823

详情咨询： 旺旺：luoxirocy QQ：84614374

捐助地介绍

茅山小学位于四川南部合江县凤鸣镇，距凤鸣镇政府10公里，现有小学教学班9个，幼儿学前班3个，有学生近500人。处于浅表性滑坡地带，2003年利用“逸夫基金”进行新迁建，因为资金严重不足，就只建设了学校最简单的教学设施。

学生全部来自农村， 50%的学生家距学校有5公里以上的路程，崎岖的山路上终年有孩子们起早贪黑，打着电筒上学和回家的身影。山村孩子除教科书外基本无书可读，精神食粮极其缺乏，非常渴望能得到社会各界的帮助。

大山中的学校—–茅山小学

在土的跑道上进行的运动会

破旧的教师公寓

捐一本书，成就一群孩子的梦想

邮寄地址：四川省泸州市纳溪区东门口西南化工研究院34幢802室 熊启华收

邮编：646300 手机：13937510823

详情咨询：旺旺luoxirocy  QQ 84614374

这是最终效果,右击可以查看源代码

下面是一个用flash实现的同样的时钟：

有意者email我:xinyu198736@gmail.com

还有其他各种职位,包括:运营,pd,客服,产品,设计师,各种开发工程师(前端,java,c++,算法,c)架构师.技术支持,等等职位.

即将大四的同学可以投简历来参加实习,来大公司实习是一笔难得的财富.而且基本都可以留在这里.有经验的同学请在邮件中注明:有经验.

本次重点强调 淘宝无线事业部的招聘,急招,无线事业部是淘宝将来会重点发展的部门,主要从事手机移动方面的研发营销等工作.

淘宝无线部门诚聘以下  职位：
资深J2EE工程师/J2EE工程师/手机客户端架构师/手机客户端工程师/Hadoop开发工程师/类目运营专员/活动策划/产品经理/服装、数码、图书、饰品、运动行业网站编辑

热烈期待更多优秀人才加入淘宝，和淘宝一起成长
我们的职位主要包括：JAVA、测试、PHP、搜索、C/C++方面的技术人才，以及各类产品、运营人才，还有财务、法务、内审、客户服务专员、消费者维权专员等职能类人才；

其他部门也可投简历,投简历请直接投给我,我会内部推荐,机会大大的有.

我的邮箱:xinyu198736@gmail.com

qq:676588498

关于淘宝的文化,可以qq我,我给你讲,也可以看我的相册,淘宝是个非常自由的国度,是梦想的舞台,是个开放的平台.