无线端开发和PC端开发，很大的不同，在于要考虑用户的网速以及流量开销。上传图片作为很普通的需求，在很多地方都用的到，但是在无线端，有很多不同之处。

• IOS不支持flash，使得无法使用成熟的桌面端的上传组件，比如基于flash的swfupload
• 图片上传需要压缩–基于流量原因
• 无线端可以不考虑低版本的IE浏览器，但是存在更多的兼容问题，更为细节。

需求设定

• 上传前可预览
• 上传时，如果图片体积太大，则进行压缩

准备工作

• 一个简单的html
• html里包含一个文本域 ，id 为 file
• 

读取文件，完成预览

• html5 提供了File API 和FileReader API ，允许js读取图片信息
• 
• 这里有一个兼容性修正，某些低版本的android浏览器中，读出来的base64缺少字节。
• 结果如下
• 

对图片进行压缩

• 压缩的方法是，讲图片用drawImage的方法写入canvas，然后再通过toDataURL 读出来
•  
• 对于移动端浏览器来说，toDataURL只能返回png图片数据，jpg是不被支持的
• w和h，是压缩后的大小，在不同的需求里，可以重写这部分，达到压缩不变形的目的。

ajax上传图片

• 使用base64上传图片
• 或者使用binary上传，但是由于移动端对formData的支持度不好，所以只能通过流上传
• 本次使用base64上传
• 
• 上传后，处理上传图片。

这段时间的经历，给我的感悟是，现在的移动端开发，对于web前端来说，是最好的时代，也是最坏的时代。

刚开始做移动端开发的时候，觉得真的很开心，终于再也不用为IE678不支持这个不支持那个发愁了,CSS3动画什么的，都可以high起来了。结果没做几天，发现移动端的坑真心不少啊。

第一个遇到的，就是android 2.3问题。 android2.3自带的浏览器，不支持overflow:scroll ，也就是说不支持div的滚动条。这是坑爹呢。这种东西都不支持。。。

然后，各种不好的东西出现了。

首先是，手机上的web网页的应用场景远比桌面浏览器复杂。大量的APP，读取网页webview，而且都有自己的特立独行的那一面。

更糟的是，手机浏览器基于系统的内核，但是种类太多，桌面也就是360浏览器，搜狗浏览器什么的，除了360浏览器其他用的都少，但是手机上，浏览器种类更多，UC,QQ，百度。。太多了。

然后，系统版本也特别多，从android2.3-android 4.4 ,从IOS4-IOS7，每种浏览器的特性也不同。

这真是最好的时代，也是最坏的时代。

说出{}+[]和[]+{}的结果是什么，并为什么。

其实关于+运算符是怎么工作的，已经引发了挺多次的讨论。

无怪乎： a+b的话

如果a和b都是数值，那么就把他们的数值相加，比如1+2=3

如果a和b都是字符串，那么，就把他们连接起来，比如”1″+”2″=”12″

如果一个是数值一个是字符串，则把其中一个转化为字符串，然后连接 比如1+”2″=”12″

如果以上情况都不属于，比如问题总的[]+{}，那么就对双方都执行ToPrimitive操作，并把结果按照数值方式或字符串方式+操作

那么，[]+{}的结果就很容易理解了，[]的ToPrimitive获取默认值，实际是toString，变为空字符串”",{}的toString，是”[object Object]”

他们的结果合并，就是”[object Object]”

按照这个理解，那么{}+[]的结果其实应该和[]+{}的结果是一样的，但是为什么{}+[]的结果是0呢？

其实在javasript解释代码文本的时候，字符{}有两种解释方式，一种是我们常认为的对象，例如{a:1}，另一种是代码块例如  function a(){}

但是如果{字符出现在一段的开头，那么，肯定被当作代码块执行的。

所以{}+[]的{}被当作代码块处理，没有了结果，最后就是+[]了，空数组被转化为数值，就是0了

真是一个有趣的问题！

我的浏览器环境是Chrome 23,Firefox 17,IE9

我的作法，在body中创建1000个p标签

      for(var i=0;i<10000;i++){
           var p=document.createElement("p");
           p.innerHTML="1";
           document.body.appendChild(p);
      }
      var p=document.getElementsByTagName("p");

测试一

测试innerHTML的写法是

for(var i=0;i<10000;i++){
        var p=document.createElement("p");
        p.innerHTML="1";
        document.body.appendChild(p);
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<10000;k++){
        p[k].innerHTML="";
    }
    console.log(new Date()-d);

与之对应的removeChild作法是

for(var i=0;i<10000;i++){
        var p=document.createElement("p");
        p.innerHTML="1";
        document.body.appendChild(p);
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<10000;k++){
        p[k].removeChild(p[k].firstChild);
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果向这一万个P中清空唯一的子元素，那么，所有的浏览器，removeChild都要略快一些。Firefox的效率真是出人意料！

测试二，直接清空body

测试innerHTML的写法是

for(var i=0;i<10000;i++){
        var p=document.createElement("p");
        p.innerHTML="1";
        document.body.appendChild(p);
    }
    
    var d=new Date();
    document.body.innerHTML="";
    console.log(new Date()-d);

与之对应的removeChild作法是

for(var i=0;i<10000;i++){
        var p=document.createElement("p");
        p.innerHTML="1";
        document.body.appendChild(p);
    }
    var p=[].slice.call(document.getElementsByTagName("p"));

    var d=new Date();
    for(var i=0;i<10000;i++){
        document.body.removeChild(p[i]);
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果直接清空body，firefox和chrome下，removeChild都要稍微慢一些，不过IE却快很多

总结，在IE下，removeChild比innerHTML=""有效，chrome和firefox下，效率差不多

当时的代码，是这样的。

向body中插入1000个li，

var str="";

for(var i=0;i<1000;i++){
str+="<li></li>"}
document.body.innerHTML=str;

appendChild

for(var i=0;i<1000;i++){
var li=document.createElement("li");
document.body.appendChild(li);

}

不过已经过了2年了，现在的浏览器，也不是当年的浏览器了，字符串相加也比数组join来的快了，所以我一直有个想法，测试一下现代浏览器。

我的浏览器环境是Chrome 23,Firefox 17,IE9

我的作法，在body中创建1000个p标签

      for(var i=0;i<1000;i++){
           document.body.appendChild(document.createElement("p"));
      }
      var p=document.getElementsByTagName("p");

测试一

测试innerHTML的写法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
   var d=new Date();
   for(var k=0;k<1000;k++){
      p[k].innerHTML="1";
   }
    console.log(new Date()-d);

与之对应的appendChild作法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<1000;k++){
        p[k].appendChild(document.createTextNode("1"));
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果向这一千个P中插入一个字符“1”，那么，显然chrome中，appendChild要比innerHTML快很多，Firefox中也要快一些，IE则相当

测试二

测试innerHTML的写法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
   var d=new Date();
   for(var k=0;k<1000;k++){
      p[k].innerHTML="13";
   }
    console.log(new Date()-d);

与之对应的appendChild作法是

for(var i=0;i<1000;i++){
        document.body.appendChild(document.createElement("p"));
    }
    var p=document.getElementsByTagName("p");
    var d=new Date();
    for(var k=0;k<1000;k++){
        var span=document.createElement("span");
        span.appendChild(document.createTextNode("13"));
        p[k].appendChild(span);
    }
    console.log(new Date()-d);

好了，开始测试！

从测试结果看，如果向这一千个P中插入一个“span”，chrome中，appendChild依然要比innerHTML快很多，Firefox中也会快一些，IE中appendChild就比innerHTML慢多了。

总结，在现代浏览器中，IE9的DOM操作依然比innerHTML慢一些，需要特别对待。

对于webkit浏览器，图片本身就无法被改变大小，所以，不用解决

firefox，有个特殊的command—-enableObjectResizing，于是

if(H.browser.getBrowser()==”ff”){
_.iDoc.execCommand(‘enableObjectResizing’, false, ‘false’);
}

对于IE，就比较复杂，IE有一个onresizestart事件，可以通过

img.onresizestart=function(){

return false;

}

来解决，但是这个有个问题，就是图片依然可以被选中。看着那几个方块，那叫一个难受。想了很久，想到个办法，就是禁止图片被选中不就好了，

OK

img.onmousedown=function(){

window.event.returnValue=false;

return false;

}

于是，完美解决！

<div style=”width:30px; height:30px; position:relative” id=”outer”>

<div style=”position:absolute; width:30px; height:30px; left:20px; top:20px;”></div>

</div>

<script>

console.log(document.getElementById(“outer”).scrollWidth);

</script>

chrome 16.0    结果是50

firefox 10.0     结果30

IE 9.0                结果50

IE 8.0                结果50

IE 7.0               结果30

IE 6.0              结果30

神奇的世界！

如果outer加一个overflow:hidden

则各浏览器，都为50

通过www.a.com向abc.a.com发送请求，然后神奇的事发生了，在firebug中，提示该次请求状态是200，但是实际上，status是0，这好像是firebug的一个bug吧。

发现设置document.domain=”a.com”，需要一个iframe作为代理来发送ajax，大不爽！选其他的。

蝈总作为一名PHP人士，喜欢JSONP，最后解决了问题，但是我更喜欢用flash做代理。

JSONP的优点：原生JS， 缺点，需要服务器端写特别的接口

FLASH的优点：一次设置，所以的连接都有用  缺点：需要一个控件，虽然基本每个浏览器都有

好吧，热烈的讨论持续了很久，最后我败了。。

2.每次提交，都要encodeURIComponent