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

3.2 - 3.5

 

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中全屏模式运行 （王卓）

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，向里面插入的内容包含有