第一个字节还是固定的，是0×81，意义和接受数据的意义一样，第二个字节也是，后七个位表示数据长度，由于没有mask，所以第一位是0；长度的表示方法和接受的标识方法一致，可能用7位表示，也可能用16位表示。

用NodeJS实现如下：

var socketWriter = {
    'draft10': function(socket, data){
        var frames,
            length = new Buffer(data, 'utf8').length;
        if(data.length > 0x7d){
            frames = new Buffer(4);
            frames[0] = 0x81;
            frames[1] = 0x7e;
            frames[2] = length >> 8;
            frames[3] = length & 0xFF; //1111 1111
        }
        else{
            frames = new Buffer(2);
            frames[0] = 0x81;
            frames[1] = length;
        }

        if (socket.writable) {
            socket.write(frames, 'binary');
            socket.write(data, 'utf8');
            return true;
        }
        return false;
    },
    'draft76': function(socket, data){
        var byteLen = Buffer.byteLength(data, 'utf8'),
            bytes = new Buffer(byteLen + 2);

        bytes[0] = 0x00;
        bytes.write(data, 1, 'utf8');
        bytes[byteLen + 1] = 0xFF;

        return socket.write(bytes);
    }
};

socketWriter['draft75'] = socketWriter['draft76'];

Related Posts:

• WebSocket草案10文本数据解析实现
• WebSocket草案10握手协议的实现

各个值的具体含义可以参考这个中文翻译：http://blog.csdn.net/fenglibing/article/details/6852497，英文原文在这里：http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10#section-4.2

简单概括一下就是：FIN一直为1，RSV1、RSV2、RSV3一直为0，当发送内容为文本时，opcode为1，MASK如果为1就使用掩码，需要获取四位掩码，依次轮流和数据做异或运算，第一个内容数据与第一个掩码异或，第二个内容数据与第二个掩码异或……第五个内容数据与第一个掩码异或……一直到结束，然后再对内容进行编码就可以了。

在Chrome/Firefox下面，FIN永远为1，如果只是文本消息，opcode一直是1，RSV1、RSV2、RSV3都为0，所以第一个数据是0×81；MASK为1，再跟上数据长度，所以第二个数据会大于0×80，由于数据长度不一样，其需要占用的字节数也不一样，因此掩码的位置也不一样。根据规范，换算下来是这样：数据总长度（包含FIN、RSV等等信息）小于0×84，则掩码为第三个数据到第六个数据；数据总长度（包含FIN、RSV等等信息）小于0xfe81，则掩码为第五个数据到第八个数据；其他掩码则为第十三个数据到第十六个数据。当数据长度超过一个包的长度时，后面的数据包不再包含RIN、RSV和MASK等信息，二是直接为内容数据，需要根据上一次取到的MASK来做异或运算。在客户端主动要求断开链接时，会没有内容数据，只有头信息和掩码，长度固定为6，为了避免混淆，Chrome会保证正常内容发送时不会出现6字节的数据，基本上可以把6字节当断开连接请求处理。区分客户端主动要求断开连接和正常的连续数据包要根据长度区分：如果是连续的数据包，则已解析的包的长度会小于首包头信息里的长度，否则则认为是客户端主动要求断开链接。主动断开连接时会发送的一个额外的数据包，此时第一个字节不会为正常的0×81，通常为0×88，NodeJS写出来大致是这样的：

module.exports = Parser;

var util = require('util'),
    events = require('events');

/**
* http.Server 数据解析类
* */
function Parser(version) {
     events.EventEmitter.call(this);

     this.version = version || 'draft10';
    this.length = 0;
    this.parsed = 0;
     this.maskData = [];
     this.frameData = [];
     this.order = 0;
     this.closing = false;
}

util.inherits(Parser, events.EventEmitter);

Parser.prototype.write = function(data) {
    console.log(data.length);
     dataParser[this.version](data, this);
};

// 数据解析工具
var dataParser = {
     'draft10': function(data, parser){
        var pkt, i =0, len = 0, start = 0;

        // 如果不包含包头，而且数据已经解析完成
        // 则认为这个包为结束包，首字节通常为0x88
        if(data[0] != 0x81 && parser.length == 0){
            parser.emit('close');
            parser.closing = false;
            return;
        }

        // 草案10
        // 首包会包含掩码信息
        if(data[0] == 0x81){
            // 使用了掩码
            if(data[1] >= 0x80){
                // 数据长度不一样，掩码位置不一样
                if(data.length < 0x84){
                    // firefox下，超过一个包长度的数据会被拆分为多个包
                    // 其中首包只包含头信息，第二个字节为0xfe
                    if(data[1] == 0xfe){
                        len = data.length;
                        // firefox
                        parser.maskData = [data[len - 4], data[len - 3], data[len - 2], data[len - 1]];
                        parser.length = data[len - 5];
                        for(i = len - 6; i > 1; i--){
                            parser.length += data[i] * (len - 5 - i) * 256;
                        }
                        console.log('firefox multi packages, length: ', parser.length);
                        start = data.length;
                    }
                    else{
                        // chrome
                        parser.length = data[1] - 0x80;
                        console.log('7bit, length: ', parser.length);
                        parser.maskData = [data[2], data[3], data[4], data[5]];
                        start = 6;
                    }
                }
                else if(data.length < 0xfe80){                     parser.length = data[2] * 256 + data[3];                     console.log('7 + 16bit, length: ', parser.length);                     parser.maskData = [data[4], data[5], data[6], data[7]];                     start = 8;                 }                 else{                     dparser.length = data[11];                     for(i = 10; i > 3; i--){
                        parser.length += data[i] * (11 - i) * 256;
                    }
                    console.log('7 + 64bit, length: ', parser.length);
                    parser.maskData = [data[12], data[13], data[14], data[15]];
                    start = 16;
                }

                for(i = start, len = data.length; i < len; i++){
                    parser.frameData.push(parser.maskData[(i - start) % 4] ^ data[i]);
                }
            }
            else{
                if(data.length < 0x80){
                    start = 2;
                }
                else if(data.length < 0xfe81){
                    start = 4;
                }
                else{
                    start = 12;
                }
                // find contents
                parser.frameData = data.splice(start);
            }
            console.log('1st packge frame length: ', parser.frameData.length);
            if(parser.frameData.length == parser.length){
                pkt = new Buffer(parser.frameData);
                // console.log(pkt.toString('utf8', 0, pkt.length));
                parser.emit('message', pkt.toString('utf8', 0, pkt.length));
                // 数据包结束，重置长度信息
                parser.frameData = [];
                parser.length = 0;
            }
            return;
        }

        // 连续的数据包
        if(parser.maskData.length){
            // continue to parse data
            for(i = 0, l = data.length; i < l; i++){
                parser.frameData.push(parser.maskData[i % 4] ^ data[i]);
            }
            console.log('frame length: ', parser.frameData.length);
            if(parser.frameData.length == parser.length){
                pkt = new Buffer(parser.frameData);
                // console.log(pkt.toString('utf8', 0, pkt.length));
                parser.emit('message', pkt.toString('utf8', 0, pkt.length));
                // 数据包结束，重置长度信息
                parser.frameData = [];
                parser.length = 0;
            }
            return;
        }
     }
};

Related Posts:

• WebSocket草案10握手协议的实现
• WebSocket Draft 10向客户端写文本数据的实现
• Merpressor —— 在线自动合并、压缩JS文件
• 不安全的js写法
• 全新极速CSS选择器引擎whiz

握手协议还是非常简单的，Chrome发过来的header大概是这样的：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 8

要答复的头大概是这样的：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

实际上这里要处理的就是算出这个Sec-WebSocket-Accept的值。这个非常简单，首先拿到Sec-WebSocket-Key，也就是dGhlIHNhbXBsZSBub25jZQ==，把它和字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼在一起：

var key = request.headers['sec-websocket-key'] + '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';

然后对这个key做一个SHA-1的加密，对加密后的字符串再base64就可以了，用nodejs写出来就是这样的：

var sha1 = Crypto.createHash('sha1');
key = sha1.update(key).digest('base64');

这个里面的key值就是最终要返回给客户端的值了，这样就算完成握手了。

Related Posts:

• WebSocket草案10文本数据解析实现
• WebSocket Draft 10向客户端写文本数据的实现
• Merpressor —— 在线自动合并、压缩JS文件
• 不安全的js写法
• 全新极速CSS选择器引擎whiz

令人欣慰的是，作者公开了此软件的源代码，索性直接拿来改了下，重新发布一个新版本。专门针对以上两点做了修改，基于安全因素（相对安全）考虑，给保存的密码用DES进行了加密，key是一个随机的字符串，非公开的。

打包后的文件只在Lion（10.7.x）下进行了测试，要求系统的最低版本是10.5.x，但未进行测试。

安装包下载地址：http://vdisk.weibo.com/s/IAQS(新浪微盘)

下载地址：http://115.com/file/bevneg0p#Secret-Socks.zip

Related Posts:

• No Related Posts

if(1){
    f(1);
    function f(a){
        alert(a);
    }
}

通常情况下，都认为javascript中function会被预解析，所以这里应该会弹出一个对话框，显示字符“1”。没错，在IE6-IE9，Chrome，Safari，Opera等待浏览器下也都是这个结果。但是偏偏Firefox有点特立独行，会提示“引用错误，f未定义”。

我们再试试，把if去掉，只留两个花括号看看：

{
    f(1);
    function f(a){
        alert(a);
    }
}

还是一样！现在我们在试试几种情况：

if(1){
    function f(a){
        alert(a);
    }
    f(1);
}

这个没有问题，正常显示1，再试试这个：

if(1){
    function f(a){
        alert(a);
    }
}
f(1);

也没有问题，再试试这个：

if(0){
    function f(a){
        alert(a);
    }
}
f(1);

这个果然不正常了，提示f未定义！看来是Firefox对花括号里面的函数声明做了特殊处理，并没有对花括号内部的函数声明做预解析，而只是等到要执行的时候才去解析，也许是为了性能优化？或者这本身就是一个bug？

Related Posts:

• Firefox下和IE下的单击和双击事件差异
• 也谈JavaScript代码性能优化
• Merpressor —— 在线自动合并、压缩JS文件
• 在弹出窗口用POST提交数据
• 不安全的js写法

菜单->设置->首选项->高级->安全性->信任的网站->安全的内部主机->添加，输入你内网服务器的IP即可。

Related Posts:

• No Related Posts

1.尽量使用源生方法（Native Method）

js是解释性语言，相比编译性语言执行速度要慢。如果浏览器已经实现了该方法，就不要再用js再去实现一遍了。另外，绝大部分情况下，浏览器已经实现的方法已经在算法方面做了很多优化，再重复实现一遍只是浪费时间和精力还有带宽。当然，如果你只是为了练习算法，那另当别论。

2.尽可能减少循环次数

代码的瓶颈大多在循环，少一层循环，就能数倍地提高性能。如果要对一个数组的每个元素进行多次操作，尽可能使用一次循环，多次操作，而不是多次循环，每次循环执行一次操作。尤其是在进行多个正则匹配的时候，尽可能合并正则表达式，在一次遍历中尽可能找到相应的匹配。

3.循环的另外一种写法

通常循环的写法：

var objs = [obj1, obj2, obj3], i = 0; len = objs.length;
for(i = 0; i < len; i++){
    dosth(obj);
}

当循环遍历的对象是object时，可以采用下面的方式来写：

var objs = [obj1, obj2, obj3], obj, i = 0;
while(obj = objs[i++]){
    dosth(obj);
}

特别注意，如果你的数组里面有可能出现0, false, null等等在条件判断为false的值，这种写法是不正确的。

4.某些情况下switch的另外一种写法

通常的switch写法：

function fun_a(){}
function fun_b(){}
function fun_c(){}
switch(con){
    case 'a':
        fun_a();
        break;
    case 'b':
        fun_b();
        break;
    case 'c':
        fun_c();
        break;
}

另外一种写法：

function fun_a(){}
function fun_b(){}
function fun_c(){}
var funs = {
        'a': fun_a,
        'b': fun_b,
        'c': fun_c
    };
funs[con]();

取值或者函数调用都可以用类似的方式来做。

5.条件判断的另外一种写法

通常情况下：

if(a){
  dosth();
}

可以这样写：

a && dosth();

6.创建对象的另外一个办法，不使用new

很多时候，我们要连续创建一些简单的object对象，并且拥有默认的属性，很多人会这么写：

function Klass(){
    this.prop_a = '';
    this.prop_b = [];
    this.prop_c = 0;
}
var objs = [], i = 0, obj;
while(i<100){
    obj = new Klass();
    obj.prop_c = i;
    objs.push(obj);
}

换种写法看看：

function create(){
    return {
        prop_a : '',
        prop_b : [],
        prop_c : 0
    };
}
var objs = [], i = 0, obj;
while(i<100){
    obj = create();
    obj.prop_c = i;
    objs.push(obj);
}

当然还有直接声明的方式，但是复用性会差一些。

7.用来做标记的变量尽可能使用布尔类型

直接用true和false做标记，不要使用数字或者字符串的1和0来做标记，直接也高效。

其他的优化方法已经有很多分享了，大家可以Google一下，另外《javascript高级程序设计》一书中也对JavaScript性能优化做了较为详细的阐述。

Related Posts:

• JavaScript类型转换太变态，慎用
• 让Javascript的智能提示和C#一样强悍
• 网页自适应不同分辨率显示
• js中函数预解析在Firefox下的异常表现
• 解决ubuntu下ibus没有输入窗口的问题

这个是在第19期WEB标准交流会上的分享PPT，分享的内容很简单，主要是大家讨论，都很诚恳地提出了各种想法和意见。在前端这一块，平常的交流太多都在于各种技术交流，而太少关注调试、测试和发布环境。

大的互联网公司可能都有各自的调试、测试和发布流程，但是在这方面的资料实在是不多。Bobby（曾在yahoo台湾，现在盛大创新院） 讲到yahoo内部其实也有这么一套，我的和他们的很类似，遗憾的是内部使用的，也无迹可寻。Hax（盛大创新院）也提到一些想法，比如自动解决依赖关系，部分更新等，都是不错的想法。

Related Posts:

• Merpressor —— 在线自动合并、压缩JS文件
• 网页即时聊天

Google了N下发现有很多人和我碰到一样的问题，但似乎都没有解决办法。折腾了几天之后，终于找到一个办法，就是修改gtk配置文件。首先进入这个目录：/usr/lib/gtk-2.0/2.10.0（gtk版本可能略有区别），里面有个gtk.immodules文件，用vim或者gedit等文本编辑器打开它，找到这两行：

"/usr/lib/gtk-2.0/2.10.0/immodules/im-xim.so"
"xim" "X Input Method" "gtk20" "/usr/share/locale" "ko:ja:th:zh"

把其中的xim换成ibus，然后重启一下电脑，世界就太平了：

"/usr/lib/gtk-2.0/2.10.0/immodules/im-ibus.so"
"ibus" "X Input Method" "gtk20" "/usr/share/locale" "ko:ja:th:zh"

重启后正常的截图：

Related Posts:

• 其实这几天在折腾Ubuntu
• JavaScript类型转换太变态，慎用
• 让Javascript的智能提示和C#一样强悍
• [转]技巧：让你的Firefox极速狂飙
• 用CSS轻松实现圆角

实在是很久不写blog了，很多次想写点什么，发现自己也已经受不了原来自己写的博客程序了，终于狠下新来研究WP的数据库，然后开始写转换程序。幸运的是这个过程没有想像的那么复杂，那么难。制作皮肤花的时间比写转换程序花的时间多太多了，新手上路总是有那么多问题的。

在blog程序转换的过程中，也顺便捣腾了一下个人页面，纯粹是无聊的小练习，用了一些简单的HTML5和CSS3，博客的皮肤也是基于此构建的，非常匆忙，甚至在IE6和IE7下都没测试过，还不知道到底如何。

先这样，边用边修改吧！如果大家有好的参考资料或者优秀的插件推荐，那就多谢了！

Related Posts:

• 博客已搬家，即日起改用新域名Fdream.net
• 冬天，很冷，很忙，很懒
• 冬天了，给BLOG换了个皮
• 修复了BLOG导航中的标签“死链”
• 换了个BLOG程序，给自己点动力