Java工程师不知道的那些FE潜规则

      写了一个多月js，感觉如今可不比几年前只有ie6的年代，而且过去只是用js写个ajax或者是简单的表单验证，可如今写一个稍微复杂点的小应用，要兼容所有浏览器，才发现真是太难了，难怪fe是一个独立的工种，有别于我们这些java工程师了。
1 首先是最简单的select标签，就有诸多不兼容：
  a、 clonenode方法，对于非ie浏览器没有问题，对于ie浏览器，我遇到的问题包括：
  1）option selected的会clone不过去，然后会将第一个option作为selected值
  2）事件clone也会有问题
  b、readonly：对于ie6，可以通过以下方法将select设为readonly：
  obj.onbeforeactive=function(){return false}
  obj.onfocus=function(){obj.blur();}
  obj.onmouseover=function(){obj.setcapture();}
  obj.onmouseout=function(){obj.releasecapture();}
  对于其他浏览器，我采用的是元素替代法，动态创建一个input标签，把值赋给它，然后将select隐藏。
  c、select的z-index对于ie6无效，网上有很多关于这个讨论，jquery采用一个iframe搞定
  d、动态添加option的方法不同，这个网上一搜一大堆
  e、对于onclick和onchange的响应不同，在ff下可以在onclick select时动态读取option值然后构建option，然后选中一个值后执行onchange事件，但是ie下不能这样做。
2 css对offsetwidth之类的理解不同
  http://newleague.iteye.com/blog/765535
3 对于vertical-align baseline的理解不同：
  http://w3help.org/zh-cn/causes/rd1016
4 设置背景色
  element.style.backgroundcolor
  在firefox下想改变颜色，必须先设为null，再设为其他颜色才行，即先取消原来的颜色。
  在ie下，想取消颜色，必须设为''才行，而换其他颜色，无需先去掉之前的颜色。
5 不同浏览器去padding的理解不同
6 不同浏览器对强制换行和强制不换行的理解不同：
  http://www.cftea.com/c/2009/01/qpdzu40mnw8fyyg3.asp
  最恶心的是对于ie6，如果是<td><span>我是蚊子</span></td>，那么在td上写了word-break：keep-all依然无效，必须在span上也写。
7 获得head节点的方式不同
  在firefox下可以用window.head，而所有浏览器都兼容的方式是document.getelementsbytagname('head')[0]
8 往head上添加css code的方法不同，也就是动态添加<style>标签。
  ie下可以用var style=document.createstylesheet();style.csstext=csscode;
  而有文章说，在windows上的ie，用createstylesheet返回的是styleelement的stylesheet，而在mac上返回的是styleelement自己。
   在其他浏览器下需要document.createelement('style');
   然后还有区分是否具有stylesheet属性。
   这个很容易搜到。
9 对于onchange事件，firefox浏览器可以注册在table，div等组件上，然后通过冒泡，拦截input，select等发出的事件，而ie不行，必须绑定到相应的组件上
10 将input设为readonly=true，其依然会响应keypress，keyup，keydown，onblur事件
11 ie和非ie对于停止冒泡和取消默认行为的方法不同
12 大家都知道ie和非ie在动态添加事件时使用的方法不同，ie是attachevent，其他是addlistener，然后参数也不同。更重要的是如果一个控件绑定了多个function，他们绑定和执行的顺序是不同的，ie是跟绑定顺序相反，其他是跟绑定顺序相同
13 获得当前事件不同，一个是window.event一个是直接接受event
14 ff下执行offset系列非常慢，但是ie下比较快，而ie的改变css的执行非常慢。
   firefox6比firefox3.6速度快的多，相差好几百倍（针对一个400行*50列的表格的js处理）
15 如果大量动态改变css，那么使用document.createdocumentfragment，然后将需要修改样式的dom获取出来appendchild到这个临时的fragment上，修改完css后再append回去即可，这样性能能差好几百倍。
16 浏览器加载网页时，顺序读取html，遇到外部js链接会读进来，然后按顺序执行，边解释边执行，而对于外部css，图片等则是启动另外的线程连接服务器去获取。
   ie对于css引入有限制，我没试过，但有篇文章讨论：http://blog.csdn.net/ydshang/article/details/4158211
17 表格定位某一行，可以通过改变scrolltop来实现，当然如果出现了滚动条的话
18 ie的dom用完要记得释放，可以在unload方法中，否则会出现内存泄露
19 unload方法在各个浏览器里各不相同，我之前的文章里有介绍。http://sslaowan.iteye.com/blog/1128209
20 我知道了为什么fe最喜欢的浏览器是ff，最讨厌的是ie6，恨不得ie6去死，其他ie也不怎么样。但是chrome，opera也各有各的bug
21 ajax当使用同步模式时，如果访问的链接是错误的，那么ff会在控制台报错，而ie会直接弹出个对话框，然后就崩溃了。
22 ff支持document.getelementsbyclass等方法，ie不支持，可以自己写一个。
23 trim方法在ie和ff下不同，需要自己写一个，可以用正则表达式
24 动态设置元素的css class在ie和非ie浏览器下也不同
25 有时本地字体库会影响你的字体，大小等显示，但是有时甚至会影响你的布局
26 字符串也可以使用><等符号比较大小，但是是字符串比较，不要被骗了。
27 js中this问题非常让人困惑
28 判断浏览器可以有很多方法，主流是两大类，agent判断法和特性法，后者好像更推荐
29 js是面向对象语言，对象.属性=值 只影响当前对象，而对象.prototype.属性则影响整个类。非ie浏览器可以覆盖dom对象的类方法，但是ie不行。

   
    至于用不用var的区别，undefined和null的区别，ajax构建的不同方式，这些一般的java程序员都了解了。

    很多java程序员也会使用js框架，比如jquery，extjs和dojo，她们都帮我们屏蔽了很多兼容性问题。
    dojo提供了java一样的面向对象机制。

    抛砖引玉，你还遇到过什么陷阱，那些fe都知道，而我们java工程师不知道？