在淘宝里，他们总结的一些前端Tips

1.【约定】文件命名全部都用小写和下划线，样式命名全部使用小写和连接符，JS的钩子使用“J_HiTao”

2.【HTML】需要为html元素添加自定义属性的时候，首先要考虑下有没有默认的已有的合适标签去设置，如果没有，可以使用以”data-“为前缀来添加自定义属性，避免使用”data:”

3.【约定】文件要求编码必须为GBK、GB2312或者GB18030

4.【HTML】html代码要求所有的标签、属性都是用小写字母，属性值使用双引号括起来，使用js插入html代码的时候也要注意保持一致。

3.8 - 3.12

5.【JS】在书写代码时，应该尽量在函数开始地方统一进行变量声明，变量名注意语义化，一般使用名词来命名，不要在意名字的长度，压缩后会替换为简短的变量名的。

6.【JS】浮点数的计算过程是：先将浮点数转化为二进制，然后进行计算，再转化为十进制，这样子会有少许的误差，所以为了避免这种误差我们可先将浮点数乘以10的n次方，转化为整数计算，然后再转化为小数。

7.【Firefox】Firefox中将同一域名下不同端口的访问也视为跨域操作。

8.【Mobile】强制WEB App在iPhone中全屏模式运行 <meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=“apple-mobile-web-app-capable” content=“yes” /> <meta names=“apple-mobile-web-app-status-bar-style” content=“black-translucent” />（王卓）

9.【Mobile】移动设备上的CSS媒体查询应用： img {

margin:0 0 10px 10px;
float:right;

} @media all and (max-width: 480px) {

img {
  margin:10px auto;
  float:none;
  display:block;
}

} @media all and (max-width: 240px) {

img {
  display:none;
}

} 释义：浏览器中的图片在屏幕大于480px时会向右浮动，当屏幕小于480px时图片display:block并居中，屏幕小于240px非常小时，直接让图片消失掉 (Opera/Safari3 only) （王卓）

3.15-3.19

10.【JS】Date()作为普通函数被调用时，Date()将忽略传递给它的所有参数，返回当前日期和事件的字符串标识。

11.【HTML】在页面中写button的时候，一定要记得加上button的type类型，否则，某些浏览器会将其认为是submit类型。

12.【JS】在绑定表单的提交事件时，如果button的type类型为submit时，要通过绑定form的submit事件，避免使用button的click事件，因为如果表单可以通过回车提交的话，绑定在button上的click事件是不会触发的。

13.【HTML】img对象alt和title的解析： alt：当照片不存在或者load错误时的提示； title：照片的tip说明。 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在FF中，两者完全按照标准中的定义使用 结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用（涵宇）

14.【JS】在使用form[name]的方式去取同一name的多个表单元素时，需要注意一点，如果有多个的话，返回的是一个数组，如果仅有一个的话直接返回这个元素而不是一个数组，所以大家在循环之前要先做判断，以免报错。

3.22 - 3.26

15.【JS】关于Degrading Script Tags，这是一种脚本文件加载完成后执行一段脚本的方法，由jQuery的作者John提出，不了解的可以看下作者的博客：http://ejohn.org/blog/degrading-script-tags/

16.【JS】有些浏览器对 try-catch-finally 的处理并不高效，所以把 catch 语句放在关键循环中将极大影响性能。如果可能，应在脚本中不频繁被调用的地方进行异常处理，或通过检查某种动作是否被支持来避免使用。

17.【JS】尽量向 setTimeout() 和 setInterval()传送函数名，而不要传送字串。setTimeout() 和 setInterval() 方法近似于 eval。如果传进参数是字符串，则在一段时间之后，会和 eval一样执行字符串值，当然其低效率也和 eval 一样。但这些方法也可以接受函数作为第一个参数。在一段时间后将调用此函数，但此函数可在编译时被解释和优化，也就是说会有更好的性能。

18.【CSS】经典的垂直问题中，img 的父容器如果 float 了，那么其 display table-cell 将失效，table-cell 只能在 display static 的时候有效，因此解决方案是给 img 再加个包装容器，原来的父容器 float，包装器 table-cell……（法海）

19.【编辑器】编辑器下的bug,选中字体背景色时，除了对gecko浏览器要对backColor替换成hiliteColor,opera下也有问题。设置背景色时需用hiliteColor~（子涯）

3.29 - 3.31

20.【JS】如果页面里只有div和script标签没有body,head什么的,而且div里面只有空格没有字符的话,这时候用document.getElementById(“”)获取不到div的引用（孙信宇）

21.【JS】字符串合并是比较慢的。+ 运算符并不管是否将结果保存在变量中。它会创建新 string 对象，并将结果赋给此对象；也许新对象会被赋给某个变量。下面是一个常见的字符串合并语句： a += 'x' + 'y'; 此代码首先创建临时string对象保存合并后的'xy'值，然后和a变量合并，最后将结果赋给a。下面的代码使用两条分开的命令，但每次都直接赋值给a ，因此不需要创建临时string对象。结果在大部分浏览器中，后者比前者快20%，而且消耗更少的内存： a += 'x'; a += 'y';

22.【JS】在设置元素样式时，应该尽量一次设定，避免多次设定，较少reflow，可以通过改变元素的class来达到目的。

 

【2010.4】

4.1 - 4.2

 

23.【JS】在遍历Dom结构时，应该尽量避免修改Dom，比如在遍历的时候不断的增加元素，可能会造成无限循环，每次修改都是实时更新的，如果有需要可以先建立一个静态列表进行遍历。

24.【CSS】在ie中如果设定了li元素的height,则项目列表中的序号不正常,而且list-style-position:inside;失效

4.6 - 4.9

25.【Mobile】GIF、PNG、TIFF最大尺寸上限是300万像素，也就是说，确保width * height ≤ 3 * 1024 * 1024。JPEG二次采样（颜色压缩）后的最大尺寸上限是3200万像素（王卓）

26.【JS】如果一个元素的 display 样式被设置为 none，即使其内容变化也不再需要重绘此元素，因为根本就不会显示此元素。可以利用这一点，当我们要显示某个盒子并且要修改其内容时，先修改后再显示，减少reflow。

27.【Mobile】canvas元素的最大尺寸上限是3百万像素，canvas对象的默认宽高是150 x 300像素。（王卓）

28.【JS】绝对不能为Object.prototype添加属性，所添加的任何属性和方法都可以通过for/in循环枚举，当一个对象被当做关联数组使用时将会带来很大的问题。

4.12 - 4.16

29.【Mobile】JavaScript执行时间限制在10秒之内，如果脚本执行时间超过10秒的话，Safari会在一个随机位置强制停止执行，可能会导致意想不到的后果。（王卓）

30.【CSS】针对所有IE浏览器的hack：/9，仅针对IE8的hack：/0。

31.【Mobile】单个资源文件必须小于10MB，适用于HTML、CSS、JavaScript、非流格式媒体。一次性打开最多的页面数量是8个（慎用Framesets）（王卓）

32.【CSS】如果一个盒子里只有图片，那么font-size的定义在现代浏览器下会影响到盒子的高度，设置line-height在现代浏览器下可以让图片垂直居中，而在ie6、7下则需要设置font-size来达到目的。

33.【JS】focus和blur事件不支持冒泡，但是它支持捕获，所以在事件代理中我们可以使用捕获，但是ie不支持捕获，ie可以通过focusin和focusout这两个专有事件来代替，它们是支持冒泡的。

4.19 - 4.23

34.【JS】需要做页面刷新的时候推荐使用location.replace和location.href两个方法，而不推荐使用location.reload和history.go(0)，因为这两个刷新相当于按F5刷新，有表单提交的页面很容易会给出是否重复提交表单的提示。

35.【CSS】关于ie的专有属性behavior，最近在cssbeauty上有一篇相关文档，大家可以看下，不推荐这种方式：http://fetchak.com/ie-css3/

36.【CSS】可以使用 @-moz-document url-prefix() {} 来单独为 Firefox 做样式定义。

37.【CSS】important! 的优先级高于任何其他样式定义。

38.【JS】使用Array.join在Internet Explorer中进行字符串连接操作是最快的; 而+= 或者 String.prototype.concat.apply(object, arguments) 在其他浏览器中表现得更好。详细测试数据参见： http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ （赵成阳）

4.26 - 4.30

39.【JS】String.fromCharCode是String函数的一个静态方法，所以每次使用的时候都要按照 String.fromCharCode(num1,num2,…)这样的方式去使用。（此方法是用来反解码charCodeAt()生成的数字的）（涵宇）

40.【HTML】页面在载入图像的时候并不知道图像的尺寸，所以刚开始仅显示混杂在一起的问题，图片完全在载入后才会显示图片，这样在网速极慢的情况下就会造成页面的跳动，如果确定图片的大小尺寸的话，应该在img标签上设置宽高，这样的话可以在页面载入时会预先留好位置，避免发生类似问题。

41.【JS】关于Preload的一篇文章：http://www.phpied.com/preload-cssjavascript-without-execution/

42.【CSS】对于input框，在定义高度后在ie下会出现各种很怪异的问题，所以我们一般不定义input框的高度，通过padding值来控制。

43.【JS】toFixed 方法返回一个以定点表示法表示的数字的字符串形式，但是有一点需要注意的是，各浏览器下返回的值会稍有不同，有些会进行四舍五入，而有些是进行直接截取，解决的方法一是重写这个方法，二十在进行相应操作时先乘以10的n次方，然后再转化为小数。

 

【2010.5】

 

5.4 - 5.7

44.【JS】element.onclick不管是在前还是在后，都会优于YAHOO.util.Event.on(element,'click',..)解析。（addEventListener/attachEvent，长天）

45.【JS】Firefox 对已存在的事件监听程序（通过传统事件模式注册的）采取的是替换（replace）操作，而非Firefox浏览器采取的是重写（overwrites）操作。（长天）

46.【CSS】如果有需要可以通过设置br { display:none} 来隐藏换行效果，最好的办法是建议在html中移除。（文河）

47.【HTML】在各浏览器下对于HTTP1.1标准的请求支持（同一个域名）的并行下载数为：ie6/7（2）、Firefox3、IE8（6）、Opera10/Chrome3/Safari4（4）（http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/）。（圆心）

5.10 - 5.14

48.【CSS】float 元素如果不指定宽度，在 ie6 下一般会有问题，如果出现此问题，可以尝试在 hack ie6，单独为 ie6 指定宽度。

49.【JS】相比其它语言来说，JavaScript 中位运算符的计算效率并不一定比其它计算方法高，有时候还会非常的低，而且不支持浮点数，一般不推荐使用。

50.【JS】link() method：创建一个链接可以通过str.link(“http://www.taobao.com”))来创建。（涵宇）

51.【JS】var?m?=?n?=?0;???相当于?var?m?=?0;?n?=?0;?实际上?n?被声明为了全局变量，造成了名称空间污染。（小马)

5.15 - 5.19

52 【CSS】IE7中，如果在父级元素和子级元素之间（div > p）有一个HTML注释，子选择器将不会工作。（Google）

53 【CSS】如果text-decoration属性指定给一个块级元素，它会影响该元素的所有行间级后代。如果它指定给（或影响）一个行内元素，它会影响该元素产生的所有框。text-decoration的underline、overline及line-through仅作用于文本。如果该元素没有内容或没有文本内容（例如HTML中的IMG元素），UA必须忽略该属性。IE与Opera在两种文档模式下均不会将text-decoration作用于IMG元素上，而Firefox、Chrome和Safari在混杂模式下与IE中一致，但是在标准模式下却打破W3C的规范在IMG元素上可以应用该样式。（Google）

54 【CSS】当定位元素的z-index未设置时（默认为auto），IE6/7/8下将会创建一个新的局部层叠上下文，其内的定位元素将受到父级元素的影响，即使子元素z-index设置高于与父元素平级的定位元素，也不会呈现在其上，而其它浏览器则不会。解决的方法就是明确定位元素的z-index。

55 【CSS】E6/7/8中width或height任意一个或两个都设为0都可以隐藏iframe，但是其它浏览器均隐藏不了，因为iframe的默认样式问题，还需设置border等样式，所以最快捷的方法就是通过visibility和display来进行设置。

5.20 - 5.31

56 【TMS】TMS不允许发布内容为空的页面，举例：

场景：如果有一个条件式的输出，在true的情况下输出一个片段，在false的情况下不输出任何内容。

结果：在true的情况下，是OK的；但是当false的情况时，发现发布始终无法成功。

原因：TMS开发设定的这个规则……没有为什么，就是不让发布内容为空的页面，实在整不动的话，你放个相应的注释来绕过这个规则

57.【CSS】在使用百分比定义宽高的时候，需要注意小数值的问题，取值都是四舍五入，IE6、IE7、Chrome、Safari的所有模式以及IE8的怪异模式下，百分比计算是基于其包含块的实际使用值来计算的，而Firefox的所有模式以及IE8的标准模式下百分比的计算是根据其包含块的计算值来计算的，也就是说，加入父级使用了百分比80%，子元素使用了百分比60%，那么前者的计算应该是父级取得实际使用值后再乘以60%再四舍五入得到子元素的实际使用值，而后者是80%*60%，最后四舍五入取的子元素的实际使用值。（Google）

58.【CSS】在IE6对A使用hover伪类之后，如果产生一些莫名其妙的问题，比如背景不显示，抑或是hover离开之后A标签的状态没有恢复。这时候可以在伪类规则中添加:border:none;|zoom:1;或在A元素上添加background来解决问题（IE7 的其它类型hover也可能产生同类问题，解决方法类似）（熊松松）。

59.【HTML】IE6 条件注释引起 IE8 下载阻塞：http://www.phpied.com/conditional-comments-block-downloads/

60.【CSS】IE6、7下button和type为submit的input的默认padding无法去掉，需要加overflow:visible才能消除。（鸣人）

61.【JS】对于小于 1e-6 的数值来说，ToString 时会自动转换为科学计数法，比如 （玉伯：http://lifesinger.org/blog/2010/05/the-trap-of-parseint/） ，此种情况下使用 parseInt 得到的值可能就不是自己想要的，所以在参数类型不确定的时候，最好封装一层。

62.【CSS】IE6/7/8 最多支持32个CSS文件引入。（测试地址：http://john.albin.net/ie-css-limits/link-test.html）

63.【CSS】为长页面添加上 body {overflow-y: scroll}，可以减少一次reflow。（云谦）

 

【2010.6】

 

6.1 - 6.4

64.【JS】IE下操作innerHTML，向里面插入的内容包含有<style>标签的，style标签不会被解析，可以通过内联或者外联样式去解决。（龙刚）

65.【CSS】对于类似 .a.b {} 这样的样式，ie6仅能识别.b，会忽略掉前边的 .a，使用这种方式就会带来一些问题，而且在重置时也比较费劲，一般不推荐过多的使用此类形式来定义样式。

66.【CSS】在作input与后边文字元素垂直居中的时候，一般做法是：input⇒vertical-align:middle;在IE浏览器中均可实现垂直居中对齐，但是在火狐下不是太灵活，可以使用vertical-align:-num（num:代表合适的数值），来调整差距。（涵宇）

67.【浏览器】浏览器对于样式表的处理可分成两类。FF和Opera会先渲染，之后如果样式被改则刷新渲染；Chrome、IE和Safari等到样式表全好了后才渲染。(通常他们只延时渲染样式表之后的内容，但IE在某种情况下会延时渲染全部)（涵宇）

6.7 - 6.13

68.【CSS】IE6/7及IE8怪异模式中，text-align:center可以使块级元素也居中对齐。其他浏览器中，textalign: center仅作用于行内内容上。IE怪异模式中，给块级元素设置margin-left:auto;margin-right:auto无法使其相对于其父容器居 中对齐。其他浏览器中则不存在此现象。（Google）

69.【JS】有时候需要获取到flash对象，因此给object添加了id，给embed添加了name，两者的值刚好相同。此时如果使用window[name]来获取flash对象，各浏览器的表现就不一致了：在Opera/Safar/Chrome获取到的是一个集合HTMLCollection，弹出其length是2，在Opera/Safari/chrome中分别取出第1,2个元素分别是object，embed元素。准确的获取flash对象可以通过以下方式：

function getFlashObj(name){   
     return document[name] || window[name];   
} 

（来源：http://www.javaeye.com/topic/684672）

70.【CSS】当A标签缺失href属性后，它相当于普通的标签，在IE6下，普通标签是不支持“:hover”伪类的。因此，对缺失href属性的A标签设置“:hover”伪类是无效的。（Google）

71.【CSS】w3c css21规范中指出：A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover内定义的相同规则。同理，A:active应在A:hover之后，否则A:active中的相同规则将被隐藏（L-V-H-A）。在IE7(S)/IE8(S)/Firefox(S)(Q)/Chrome(S)(Q)/Safari(S)(Q)下，A标签的伪类遵循w3c css21规范中的L-V-H-A顺序标准。而在IE6(S)(Q)/IE7(Q)/IE8(Q)下则不遵循。（注：Q：怪异模式，S：标准模式）（Google）

72.【JS】正则表达式中，g表示全局配，如果正则表达式中带有g，每次匹配后lastindex会更新一次，比如：var s = 'abac',re = /a/g; 初始值lastIndex为0，第一次匹配后，lastIndex变为1，第二次匹配后lastIndex变为3，第三次匹配没有匹配到，lastIndex则变为0，可以通过以下代码进行测试：

var s = 'abac',re = /a/g; console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex);

另外，建议在使用test检测的时候不要带上全局配。（龙刚、空帷）

73.【CSS】在一些切图的活动页面，如果出现图片裂缝问题，就在全局样式里加一个 img { vertical-align:middle;}，即可解决。（龙刚）

74.【CSS】在IE8中，-ms-filter是filter的别名，两者的区别是前者的属性值必须被单引号或双引号包围，而后者则不是必须的，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。（http://www.ued163.com/?p=818）

6.17,6.21 - 6.25

75.【CSS】尽量不要在浮动元素上使用 clear 特性，避免发生一些奇怪的兼容性问题，比如：在IE6(S)(Q)/IE7(S)(Q)/IE8(Q)中，如果clear特性被设置在一个浮动的元素上时，该浮动元素可能会与其前边的浮动元素放置在同一行。。。等等~（Google）

76.【CSS】”Layout”是IE/Win的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。”Layout”可以被某些CSS特性(property)不可逆的触发，而某些HTML元素本身就具有layout。（Google）

77.【CSS】在使用CSS来写一个三角形的时候，需要注意一点，当边框设置为transparent时ie6下会显示出一个灰底，所以，ie6下要设置成背景的颜色，但是对于渐变背景的话此方法就不再适用了，建议使用图片代替。

78.【JS】一篇关于计时器的文章：http://www.sitepoint.com/blogs/2010/06/23/creating-accurate-timers-in-javascript/

79.【HTML】IE中IFRAME元素有一个专有的allowtransparency属性，参见：http://msdn.microsoft.com/zhcn/library/ms533072(en-us,VS.85).aspx。当其值为“true”时，IFRAME元素可以透明。当没有allowtransparency属性或者allowtransparency属性值不为“true”时，IFRAME元素的背景色始终为“#FFFFFF”，并且设置其背景色也无效。当allowtransparency属性为“true”后，IFRAME元素的背景色随 即变为“transparent”，然后我们可以随意设置其背景色。（Google）

80.【CSS】IE6及IE(Q)中BODY元素的背景色不是CSS规定的transparent，而是#FFFFFF。这个#FFFFFF是由 padding: 0px;">6.28 - 6.30

81.【JS】replace函数的第二个参数可以为字符串或者函数，当为函数的时候，它有 n+3 个参数，其中 n 为 () 的个数，第一个参数是匹配模式的字符串，中间的 n 个参数分别对应匹配到的各个 () ，第 n+2 个参数声明了匹配在 string 中出现的位置，最后一个参数是 string 自身。

82.【JS】通常情况下，当一个页面出现滚动条的时候，获取scrollTop方法在各个浏览器下有些差异。Chrome、Opera、Safari可以通过doc.body.scrollTop方式来获取，而IE、FF下得到的值是0，但可以通过doc.getElementsByTagName('html')[0].scrollTop来获取。简便的解决办法： var s1=document.body.scrollTop,s2=document.getElementsByTagName('html')[0].scrollTop;,返回非0，即真实有效的值 return Math.max(s1,s2);（熊松松）

83.【JS】如果一个对象并存valueOf和toString方法，那么在数值运算中，优先调用valueOf，字符串运算中，优先调用toString。（涵宇，龙刚）

 

【2010.7】

 

7.1 - 7.2

84.【CSS】绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性，使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。（https://developer.mozilla.org/en/CSS/pointer-events）

83.【JS】Number,Boolean,String,Undefined这几种基本类型混合比较时，会将其转换成数字再进行比较；基本类型与复合对象进行比较时，会先将复合对象转换成基本类型（依次调用valueOf与toString方法）再进行比较；undefined被当成基本类型，undefined转换成数字是NaN，因此undefined与除null之外的其它类型值进行比较时始终返回false(注意NaN==NaN返回false)；null被当成复合对象，由于null没有valueOf与toString方法，因此和除了undefined之外的其它类型值进行比较时始终返回false。（http://www.javaeye.com/topic/696802）

7.5 - 7.9

84.【CSS】IE6及IE7/8怪异模式下，绝度定位元素当指定了left及right，而width或者height为默认值auto，此时浏览器无法正确地计算出width或者height的值，应该尽量避免此种情况设定固定的宽高，如不能避免，可以通过js获取宽高进行设置。（Google）

85.【JS】在插入文档后，IE下input.type属性为只读，如果需要修改可以通过新建另一个input控制显隐来达到目的。

86.【HTML】media type(媒体类型)是css 2中的一个非常有用的属性，通过media type我们可以对不同的设备指定特定的样式，从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强，是CSS 3的重要内容之一。（详情：http://www.qianduan.net/media-type-and-media-query.html）

87.【HTML】关于 Canvas 和 SVG 探讨的一篇文章：http://www.sitepoint.com/blogs/2010/07/06/canvas-vs-svg-how-to-choose/

88.【JS】”==” 比较两个对象会自动进行类型转换，例如比较 '12' == 12将返回 true；而 ”===” 不进行任何转换必须完全相等 '12' === 12 将返回 false。

7.12 - 7.16

89.【JS】想在IE6,IE7中创建一个父页面元素，那么你必须使创建元素属于父页面。var dummy = parent.document.createElement(“div”); 在Firefox,IE8中，它允许在一个文档中创建要追加到另一个文档的元素。所以在Firefox,IE8中，可以使用parent.document也可以使用document。（张军）

90.【JS】e.preventDefault()仅仅是阻止默认事件，而 return false; 同时阻止了事件冒泡，详情参阅：http://css-tricks.com/return-false-and-prevent-default/

91.【JS】在webkit排版引擎浏览器中，用脚本动态设置style后，即使removeAttribute('style');,也可以访问到style中的css属性值，而FF、IE、Opera下均不可获取。 例子： obj.style.width='500px'; obj.removeAttribute('style'); console.log(obj.style.width);webkit排版引擎下可以获取到值（熊松松）

92.【HTML】关于 Firefox 在怪异模式下的一些特性：http://www.javaeye.com/topic/709316

93.【CSS】在 IE6/7/8 怪异模式中，当使用一对引号将所有的字体家族名连同分割的逗号全部包含，浏览器会修复此定义错误，多余的引号会被忽略。比如：body{font-family: “Arial, Tahoma”}，IE6/7/8 怪异模式会修复此定义错误，而解析为：body{font-family: Arial, Tahoma}，所以默认的字体为 Arial，而其它浏览器或者标准模式下则会以之为错误而不解析，最终使用浏览器默认字体。（Google）

7.19 - 7.23

94.【JS】Array.prototype.sort的兼容以及相关知识：http://www.javaeye.com/topic/714688

95.【HTML】仅在Firefox中，table元素宽度属性百分比大于100%时，Firefox会按100%处理；如果是style中的CSS特性，则不会这么处理。建议给TABLE元素设置宽度的时候，不要使用width属性，而是使用CSS中的width特性。（Google）

96.【PHP】$_GET 和 $_POST 等用户提供的数据如果使用不当，如验证、过滤不全面，就很容易造成安全问题。通常情况下，我们会编写“一坨”正则来验证数据格式是否合法。详情请参阅：http://www.gracecode.com/archives/3029/ （明城）

97.【JS】focus() 方法可滚动文档以使 Anchor 对象或者表单元素的位置变为可见，因此在定位表单或者锚点时不需改变 hash 而通过 focus() 方法来实现。

98.【CSS】IE6及IE7/8怪异模式仅支持A元素的:hover及:active，IE7标准模式支持所有元素的:hover，但:active仍仅支持A元素，除IE8标准模式以外的IE均不支持:focus。（Google）

7.26 - 7.30

99.【JS】设置option元素中的文本时需要注意：用doc.createElement('option')创建的节点，IE是无法直接设置text来改变文本的。必须通过 option.appendChild(doc.createTextNode(txt));来实现。但是，一旦节点被插入到页面DOM后，就可以直接设置option.text了。（熊松松）

100.【JS】delete 操作符用来删除对象的属性或者数组元素，对于使用 var 来声明的变量，是不能删除的，这一点在所有浏览器里表现一致（注意：在 firebug 中可以删除），直接全局声明（未带 var）的变量可以删除，这一点在 IE 9 preview 中除外。详情可参阅：https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator; http://www.javaeye.com/topic/720816;

101.【HTML】样式的解析规则是从右到左，比如 div p {},浏览器解析是先匹配到 p，再匹配到 div。（圆心）

102.【Flash】SWF 嵌入到网页中默认 wmode 为 window，意味着是在页面中以新窗口模式播放flash，不受HTML影响,永远在页面最顶端。（龙藏）

103.【CSS】IE6 下没有“干净”的空 div，必须显式地设置 line-height 为 0 方可。（法海）

 

【2010.8】

 

8.2 - 8.6

104.【JS】获取当前时间的毫秒数可通过以下方法：new Date().getTime(), new Date().valueOf(), +new Date(), new Date() * 1, Date.parse(Date()) … 等等，前四种方法括号内可以带时间的参数，可以返回相应的时间的毫秒数，而最后一个会忽略掉任何参数。推荐看下：http://www.gracecode.com/archives/3004/ （剑翎，乔福）

105.【Flash】页面中的swf配置参数中wmode一般 为 window。即独立窗口模式播放，不与当前HTML产生交互。（龙藏）

106.【Mobile】兼容iPhone/Android的屏幕旋转事件： var supportsOrientationChange = “onorientationchange” in window, orientationEvent = supportsOrientationChange ? “orientationchange” : “resize”; window.addEventListener(orientationEvent, function() {

 switch(window.orientation){
    case 0:
       //do sth;
       break;
    case 90:
       //do sth;
       break;
 }

}, false); （王卓）

107.【JS】+ 的字符串连接在传统的 IE 浏览器下性能低下，可考虑使用数组索引（或push，索引略快）添加、join最终拼接的方式（但：Safari、Opera、Chrome和IE8浏览器都已优化了+的字符串连接性能，优于数组的方法）。（圆心）

108.【JS】!!可以便捷的强制把其他类型转换为布尔类型，比如 !!1。

8.9 - 8.13

109.【CSS】应该特别关注的引起 reflow 的几个原因：计算 offsetWidth 和 offsetHeight 属性、改变字体。 详细可阅读：http://www.planabc.net/2009/04/13/reflow/ （圆心）

110.【Mobile】获取当前地理位置的方法：navigator.geolocation.getCurrentPosition(showMap/*回调函数*/)，坐标变量：latitude = position.coords.latitude; longitude = position.coords.longitude;（王卓）

111.【Flash】在页面中应用swf对象的，如果对显示没有特殊要求，请不要将wmode 强制写为 opaque 或 transparent，这会影响其性能。（龙藏）

112.【JS】在使用 parseInt 函数转换数字的时候，尽量带上第二个参数，强制转换为某一进制类型的数字，否则，如 parseInt('080') 可能不能获得你想要的结果，推荐使用 parseInt('080', 10)

113.【JS】在 IE 中当重新设置新的 href 属性值时，如果链接文字含有 “http://;” 或 “@” ，则其 innerHTML 将显示不正确，显示成设置的 href 属性。解决方法是在修改href时，赋值前面加一个空格。（圆心）

8.16 - 8.20

114.【JS】在做数组或者其它依赖 length 属性的循环时，建议先对 length 赋值，这样可以避免每次循环都去计算 length（特殊情况除外），例如：

var myString = "Hello";
for ( var i = 0, len = myString.length; i < len; i++ ) {
 	alert( myString.charAt( i ) );
}

115.【Mobile】Android 2.2 webkit新APIs：navigator.connection.type可以判断当前网络连接的类型；navigator.onLine检测设备是否联网；navigator.isApplicationInstalled检测是否安装某一个本地应用（王卓）

116.【JS】当脚本将 img 元素 innerHTML 给其他创建的元素，未添加到 DOM 树，则除 Opera 外，其他浏览器都会立即请求图片。（圆心）

117.【Flash】对于swf的内容，优雅降级的最佳事件是给出可替换内容“alternative content”. 这部分内容仅在<object>中被直接支持。这就是为什么推荐一般采用 <object> 进行swf嵌入的原因。（龙藏）

118.【CSS】IE bug Table： http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/ （龙刚）

8.22 - 8.26

119.【JS】IE为setInterval提供的延时时间不能为0。当setInterval的延时时间为0时，它会转变成 setTimeout（仅执行一次回调函数），可以通过为其提供1ms的延迟来解决这个问题。（圆心）

120.【Flash】swf在不绑定或动态加载字体的情况下，一般仅支持 _sans (类似 Helvetica 或 Arial)、_serif (类似 Times Roman) 和_typewriter (类似 Courier) 三类字体。（龙藏）

121.【Mobile】iPhone上使用Gestures API来实现缩放和旋转：

var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){
 var node = e.target;
 // 缩放和旋转都是相对值，
 // 所以要等手势结束时再更改我们的变量
 node.style.width = (width * e.scale) + "px";
 node.style.height = (height * e.scale) + "px";
 node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
}

node.ongestureend = function(e){
 // 更新这些变量，以备后用
 width *= e.scale;
 height *= e.scale;
 rotation = (rotation + e.rotation) % 360;
}

（王卓）

122.【JS】对于select中的值，用JS选中它，除了用xxx.options[指定的index]以外，如果已经预先知道需要选中的那项的值，还可以直接用select.value=指定的值来快速搞定。（龙刚）

123.【JS】条件判断时，比如 if ( myNum == 3 )，建议书写为 if ( 3 == myNum )，因为后者在你误写 == 为 = 或者其它失误时，错误发生后你可以很容易的发行问题，浏览器的报错提示也会有更友好的提示。

8.30 - 8.31

124.【Flash】给swf传递参数或者以flashvars方式传递。可以支持内容编码过的JSON和 XML。如对 JSON的所有 value 进行 encodeURIComponent。（龙藏）

125.【JS】在使用 setTimeout 或者 setInterval 函数时，需要注意，如果第一个参数传入的是字符串，那么将在全局作用域里寻找此函数，而不会在当前作用域中寻找，所以建议第一个参数传入函数，比如：setTimeout( function() { loop(counter); }, 1000 );。

 

【2010.9】

 

9.1 - 9.3

126.【Mobile】iPhone/Android 如何去掉超链接点击高亮的边框? dom.ontouchstart = function(){ return false; } 即可去除（王卓）

127.【JS】计时器在OS上，浏览器的最小延时时间为10ms，在windows上为15ms。我们可以通过为计时器提供0（或任何10ms以下的任何数值）作为延时时间得到这个值。（圆心）

128.【JS】setTimeout可以改变调用栈的顺序：

alert(1); setTimeout(function (){

 alert(2)

},0); alert(3); alert(4); 执行顺序 1 → 3 → 4 → 2

相关延伸阅读: http://ejohn.org/blog/how-javascript-timers-work/ （龙刚）

9.6 - 9.10

129.【JS】在创建img时，src不要设置为空或者#，否则会对页面再次发生请求，建议设置为about:blank;。

130.【JS】typeof 某一个 string 可能出来 object 或是 string，视其创建方式。（法海）

131.【JS】几种国产浏览器的 UA 信息：https://spreadsheets.google.com/ccc?key=0AjjyN0rjIwrydGx1b2QyVkdlNjBfY2VEckFhTXJmTXc&hl=zh_CN#gid=0 （子涯）

132.【JS】逻辑运算符&&和||的“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。在js中有意思的是它们的返回值： 例：var attr = true && 4 && “aaa”;那么运行的结果attr就不是简单的true或这false，而是”aaa” 。 例：var Yahoo = Yahoo || {};经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值。 那么，可以这样优化代码： if(a >=5){alert(“你好”);} 可以写成： a >= 5 && alert(“你好”); 注：js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。需要我们自己来权衡了！（涵宇）

133.【JS】字面量 string 不以对象实现，作为 16 位无符号整数存储，当局称这么做的目的是为了“简单高效”。（法海）

9.13 - 9.17

134.【JS】var x = “this is string…”; var y = [“this”,”is”,”string”]; x与y不同之处在于类型，javascript的解析器把字符串直接赋值（其实就是copy）给x（直接量），却把数组的指针赋给y（引用量）。（涵宇）

135.【JS】对一个字符串使用replace方法的时候，用正则模式可以替换掉字符串里面的全部子字符串，用字符串模式则只做一次匹配,只替换第一个匹配， var aa = ”{}{}{}”; Var cc = aa.replace(”{”,”LEFTQUOTE”);只做一次匹配 console.log(cc); var bb = ”{}{}{}”; Cc = bb.replace(/{/g,”LEFTQUOTE”);可做全部的替换 console.log(cc); （乔福）

136.

137.【JS】“+”运算符的所谓“重载”，其实只是同一个算法内部的不同分支。（法海）

138.【CSS】p是block_level元素,没有其他的块级元素可以牵入到p里,因为在P元素中遇到块级元素后会立即闭合P元素；如：<p><div></div></p>会被解析成<p></p><div></div><p></p>。（涵宇）

9.19 - 9.21

139.【JS】“+”运算符进入“串连接”操作的分支后，调用左运算元（转换成 String 对象后）的 Concatenate 方法，这意味着返回的是对象（运算元均为数字时，将调用另外的方法，不返回对象）。（法海）

140.【JS】JavaScript不支持重载，在JavaScript中，脚本在执行时不会顾及函数定义时的参数，而是直接使用在作用域链中最后定义的那个函数。这意味着，相同名称的函数永远只存在一个实例。（涵宇）

141.【CSS】在 IE6/7 中，hr 默认有上下 14px 的 margin，同时不能消除。使用 float 清除上边距，负边距清除下边距。（法海）

9.25 - 9.30

142.【HTML】创建复杂的HTML标签或是多层的嵌套标签时，可以选择使用DocumentFragment机制，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，能减少浏览器很多的负担，明显的提高页面渲染速度。（涵宇）

143.【HTML】关于 HTML5 表单验证的文章：http://www.alistapart.com/articles/forward-thinking-form-validation/

144.【JS】将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递（硬编码）。例如，setTimeout(”someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)。（涵宇）

145.【JS】对于简单的任务，最好使用基本操作方式来实现，而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);，类似的，myArr.push(newEle);慢于myArr[myArr.length] = newEle;（涵宇）

146.【JS】ie下非表单链接元素在触发click事件的时候，focus事件也会被触发，非ie不会触发。（龙藏）

147.【浏览器】当发出的请求未收到response时，刷新页面，firefox和chrome会自动中断请求，而IE不会，所以在模拟长连接时多次刷新页面就会因为积累太多请求而遇到IE并发请求数的瓶颈，需要在触发beforeunload事件时手动abort请求来解决。（鸣人）

 

【2010.10】

 

10.8 - 10.9

148.【JS】关于鼠标在页面中坐标显示的种种：http://www.javaeye.com/topic/775445

149.【CSS】CSS3 Text 草案修改：http://www.css3.info/w3c-releases-updated-working-draft-of-css3-text/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+css3+%28css3.info%29&utm_content=Youdao+Reader

10.11 - 10.15

150.【JS】IE下对Select标签设置innerHTML无效，替代方法是使用一个div对象封装SELECT元素和然后设置div对象的innerHTML属性或者创建 option 对象然后置入。（鸣人）

151.【JS】用 if 判定时，if(variable) 这样的和 if(variable == true) 的比较是不同的，后者由于牵涉到“==”运算符，会先将 true 转换成数字，即 1 然后比较，也就是当表达式中有一个为布尔值时，会转化为数字然后进行比较。（法海）

152.【JS】在IE中，弹出文件选择对话框时会触发blur事件。（剑翎）

153.【Mobile】<link rel=“apple-touch-icon” href=“apple-touch-icon.png”/>，第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个，放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标。（乔福）

154.【JS】编写高质量 JavaScript 代码概要：http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/

10.18 - 10.22

155.【CSS】在IE6，7，8中（经测试，IE9 beta2下无此问题），如果link载入了一个html文档（通常发生在目标资源不存在时，服务器端重定向到了404页面），那么文档中的内联样式，可能会作用于父页面中的相应元素。详情请看 http://www.mytcer.com/773 。（长天）

156.【CSS】“font: 14px / 28px Georgia, “Times New Roman”, Times, sans-serif;”，IE6/7 下得不到 28px 这个 line-height，原因是 14px / 28px 斜杠前后有空格的关系，IE67 下将 28px 解析为 font-family 的一部分了。（法海）

157.【JS】关于连续赋值的两篇文字：http://www.javaeye.com/topic/785445 ， http://lifesinger.org/blog/2010/10/a-x-a/

158.【JS】webkit中，input =[search]的表单元素中 ，先获取input焦点输入内容按删除，再离开input焦点后设置内容再获得焦点再删除，最后页面所有连接和事件绑定都失效了。（子涯）

159.【JS】firefox中返回函数时不包含注释，ie,chrome,opera,safari均支持,此处开用作特性判断。再扩展,如何利用注释写脚本：

//ie,chrome,opera,safari
function ziya() {
  var caller = arguments.callee.caller;   
  isFireFox(function(){/* moon */}) && eval(caller.toString().match(/ziya/(///*(([/n/r]|.)+)/*///)/m)[1]);
}
function isFireFox(o) {
  return o && o.toString().match(/moon/gi);
}
~function test(){
  ziya(/*
     window.k = "shiran:卖小蚂蚁的MM真好看";
  */);
}()
alert(window.k || "firefox不支持");

10.25 - 10.29

160.【JS】使用frameElement.contentWindow（chrome不支持）可以返回当前对象或者frame，或者iframe所在frame的window对象，并且这个属性是只读的。参考：http://msdn.microsoft.com/en-us/library/ms533692(VS.85).aspx 。frameElement.contentDocument（IE67不支持）可以返回当前frame、iframe的document对象。