使用webbench做压力测试

元旦假期帮朋友折腾VPS,安装了centOS和lnmp,网站部好了,而且定时任务也加上了,觉得应该做个压力测试,之前用过apache自带的ab,不过今天使用的是webbench做压力测试。备份下安装测试过程。

首先我们先来安装webbench吧, 为了测试准确,请将 webbench 安装在别的linux服务器上, 因为webbench 做压力测试时,自身也会消耗CPU和内存资源, 否则, 很可能把自己服务器搞挂掉。于是我切换到了ubuntu系统做webbench测试

安装webbench

安装过程比较简单,如果你的机子之前安装过一些常用软件直接使用下面的命令就可以了:

wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz
tar zxvf webbench-1.5.tar.gz
cd webbench-1.5
make && make install

webbench安装报错

没有安装ctags

如果没有安装 ctags make 编译会报错:/bin/sh: ctags: command not found
这时当然是要安装ctags啦,于是:

apt-get install ctags

搞定

没有安装gcc

这时候可能会报错:

cc: Command not found

这时需要gcc:

apt-get install gcc

其他报错

如果出现下面的错误:

cannot create regular file /usr/local/man/man1': No such file or directory <!--more--> 这时需要创建/usr/local/man/man1`文件来解决:

mkdir -m 644 -p /usr/local/man/man1

使用webbench做压力测试

经过上面的折腾,webbench终于安装好了,下面要做的就是做个压力测试了,在shell里面输入下面的命令:

webbench -c 500 -t 30 http://127.0.0.1/test.jpg

参数说明:-c表示并发数,-t表示时间(秒)

最后就会出现详细的测试信息了:

Webbench - Simple Web Benchmark 1.5
Copyright (c) Radim Kolar 1997-2004, GPL Open Source Software.

Benchmarking: GET http://127.0.0.1/test.jpg
500 clients, running 30 sec.

Speed=3230 pages/min, 11614212 bytes/sec.
Requests: 1615 susceed, 0 failed.

非字母javascript

你尝试过写javascript不用字母和数字吗?最近准备个xss的分享,记起了之前看到过老外一篇文章,内容是关于non-alpha javascript的,拿到代码分析下。
先看这段猥琐的javascript代码:

_=+[];$=_++;__=(_<<_);___=(_<<_)+_;____=__+__;_____=__+___;$$=({}+"")[_____]+({}+"")[_]+({}[$]+"")[_]+(($!=$)+"")[___]+(($==$)+"")[$]+(($==$)+"")[_]+(($==$)+"")[__]+({}+"")[_____]+(($==$)+"")[$]+({}+"")[_]+(($==$)+"")[_];$$$=(($!=$)+"")[_]+(($!=$)+"")[__]+(($==$)+"")[___]+(($==$)+"")[_]+(($==$)+"")[$];$_$=({}+"")[_____]+({}+"")[_]+({}+"")[_]+(($!=$)+"")[__]+({}+"")[__+_____]+({}+"")[_____]+ ({}+"")[_]+({}[$]+"")[__]+(($==$)+"")[___]; ($)[$$][$$]($$$+"('"+$_$+"')")();

看到这里你肯定抓狂了,但是这段代码是可以运行的,运行的结果是 alert('cool code');

javascript分析

这段代码能够运行,原因是javascript是弱类型的脚本语言,而且语法相对松散。例如下面的javascript是正确的,而且是有出乎意料结果的:

javascript 位运算符

前几天看到国外人在github总结的javascript的奇巧淫技(http://t.cn/herRcq),里面对位运算提到的很多,所以来科普一下javascript的位运算。于是找到了w3cschool的这篇教程,很好很强大啊,于是就忍不住转载了……

ECMAScript 整数有两种类型,即有符号整数(允许用正数和负数)和无符号整数(只允许用正数)。在 ECMAScript 中,所有整数字面量默认都是有符号整数,这意味着什么呢?

有符号整数使用 31 位表示整数的数值,用第 32 位表示整数的符号,0 表示正数,1 表示负数。数值范围从 -2147483648 到 2147483647。

可以以两种不同的方式存储二进制形式的有符号整数,一种用于存储正数,一种用于存储负数。正数是以真二进制形式存储的,前 31 位中的每一位都表示 2 的幂,从第 1 位(位 0)开始,表示 20,第 2 位(位 1)表示 21。没用到的位用 0 填充,即忽略不计。例如,下图展示的是数 18 的表示法。

32 位二进制表示的有符号整数

18 的二进制版本只用了前 5 位,它们是这个数字的有效位。把数字转换成二进制字符串,就能看到有效位:

var iNum = 18;
alert(iNum.toString(2));    //输出 "10010"

这段代码只输出 “10010”,而不是 18 的 32 位表示。其他的数位并不重要,因为仅使用前 5 位即可确定这个十进制数值。如下图所示:

5 位二进制表示的整数 18

负数也存储为二进制代码,不过采用的形式是二进制补码。计算数字二进制补码的步骤有三步:

  1. 确定该数字的非负版本的二进制表示(例如,要计算 -18的二进制补码,首先要确定 18 的二进制表示)
  2. 求得二进制反码,即要把 0 替换为 1,把 1 替换为 0
  3. 在二进制反码上加 1

要确定 -18 的二进制表示,首先必须得到 18 的二进制表示,如下所示:

0000 0000 0000 0000 0000 0000 0001 0010

接下来,计算二进制反码,如下所示:

1111 1111 1111 1111 1111 1111 1110 1101

最后,在二进制反码上加 1,如下所示:

1111 1111 1111 1111 1111 1111 1110 1101
                                      1
---------------------------------------
1111 1111 1111 1111 1111 1111 1110 1110

因此,-18 的二进制表示即 1111 1111 1111 1111 1111 1111 1110 1110。记住,在处理有符号整数时,开发者不能访问 31 位。

有趣的是,把负整数转换成二进制字符串后,ECMAScript 并不以二进制补码的形式显示,而是用数字绝对值的标准二进制代码前面加负号的形式输出。例如:

var iNum = -18;
alert(iNum.toString(2));    //输出 "-10010"

这段代码输出的是 “-10010”,而非二进制补码,这是为避免访问位 31。为了简便,ECMAScript 用一种简单的方式处理整数,使得开发者不必关心它们的用法。

另一方面,无符号整数把最后一位作为另一个数位处理。在这种模式中,第 32 位不表示数字的符号,而是值 231。由于这个额外的位,无符号整数的数值范围为 0 到 4294967295。对于小于 2147483647 的整数来说,无符号整数看来与有符号整数一样,而大于 2147483647 的整数则要使用位 31(在有符号整数中,这一位总是 0)。

把无符号整数转换成字符串后,只返回它们的有效位。

注意:所有整数字面量都默认存储为有符号整数。只有 ECMAScript 的位运算符才能创建无符号整数。

IE6中javascript文件开启Gzip出现代码不执行情况

今天处理IE6下的一个bug,经过调试才发现是javascript文件文件总是执行不了,

后来中午吃完饭回来才想起以前同事遇见的html中的javascript不可以执行的问题,怀疑是gzip的原因,此次的问题就是因为动态加载javascript文件导致代码不执行,

经过研究发现gzip压缩过的javascript文件,如果header里Cache-Control 数据有no-cache, no-store,就会出现IE6中js代码不执行的问题。下面是转发的文章内容:

IE6下面调用开启了gzip压缩Javascript的时候,时常会碰到无法执行的情况,有可能是src调用,有可能是ajax调用,其它的浏览器工作正常,唯独IE6不能正常工作。
出现这个BUG的状况如下:

  1. 用户使用IE6浏览器
  2. 服务器没有设置 被请求文件(javascript) expires, cache-control.
  3. 服务器端开启了chunked encoding模式
  4. 通过javascrip的src调用方式或者ajax请求javascript文件
  5. 有可能是通过php生成的javascript文件
  6. 服务器端开启了gzip压缩

解决这个问题,我们要在服务器的cache-control和expires 头信息上做点工作。
经过测试,header头信息如下的gzip压缩过的javascript调用可以正常工作。

Cache-Control:maxage=1
Connection:keep-alive
Content-Encoding:gzip
Content-Type:application/x-javascript;charset=GBK
Date:Wed, 01 Dec 2010 01:24:07 GMT
Expires:Wed, 01 Dec 2010 01:24:08 GMT
Pragma:public
Server:nginx
Transfer-Encoding:chunked

分析上面的头信息,我们可以注意到:

  1. cache-control必须要设置成maxage=time的格式,maxage是指定缓存生效时间,1为1秒
  2. Expires必须要设置,它的时间稍大于Date即可,Date是页面请求时间,Expires是过期时间
  3. Pragma设置为public

javascript的String.replace的妙用

作为前端开发人员,总会有点自己的奇技淫巧,毕竟前端开发不同于后端,代码全部暴漏给用户不说,代码冗余了少则影响带宽,多则效率降低。所以今天我也来爆个自己的奇技淫巧。

javascript的String.replace方法应该javascript前端开发工程师都了解,可是你掌握了吗?

replace有接受两个参数,第一个参数可以是字符串,也可以是正则表达式,第二个参数除支持字符串之外,还支持$1形式正则匹配的文本,除此之外还支持传入一个处理函数,这个函数的return值就是要替换成的内容。
了解更多javascript的String.replace用法,访问:http://www.w3school.com.cn/js/jsref_replace.asp

String.replace的妙用

在《javascript获取隐藏dom的宽高》中,我就使用了replace,使用replace做一些重复性的操作,减少不必要的代码。

其实这里说的重复性的工作就是循环!例如,我们要获取假如我要求id为div1和div2的两个元素的宽高,一部分人会一点一点的做,先算完div1的,然后做div2的,这样你是否觉得有部分是充分的操作呢,于是可以将取宽高的函数独立出来,这样多了一个函数,而且函数只用这两次,似乎有点浪费。

于是一部分人想到了使用split切分字符串,然后用Array.forEach做循环。例如下面的代码:

"div1 div2".split(' ').forEach(function(a,i){
    console.log(a);
    //do something
})

linux安装PHP加速器eAccelerator

感慨下:做前端开发不少日子了,在前公司也使用过一段时间linux系统,对apache配置比较熟悉,可是对nginx配置还是不熟悉,毕竟自己是做前端开发的,大后端的事情还是比较排斥,以后多练习。前些日子vps到期了,换了空间,没配置好eAccelerator,本来想要朋友全权处理,可是他最近比较忙,只好自己处理了,现在将安装eAccelerator过程记录下,以后留用。

vps是centOS系统,php为nginx+fastcgi,nginx安装目录/usr/local/nginx,php安装目录/usr/local/php,开始在linux安装PHP加速器eAccelerator吧!

预编译安装eAccelerator

安装前准备

安装之前使用需要安装make和phpize,如果安装过,跳过此步骤。运行下面的命令

yum install make php5-dev
#ubuntu下用apt-get

安装eAccelerator

然后开始下载eAccelerator,配置安装编译:

wget http://bart.eaccelerator.net/source/0.9.6.1/eaccelerator-0.9.6.1.tar.bz2
tar xjf eaccelerator-0.9.6.1.tar.bz2
cd eaccelerator-0.9.6.1
/usr/bin/phpize
./configure -enable-eaccelerator=shared -with-php-config=/usr/bin/php-config
make
make install

这时会将eaccelerator安装到php目录中,屏幕会显示eaccelerator.so所在路径,例如:

检查nginx配置,重载配置以及重启的方法

一直使用apache,新的vps使用的是nginx,于是开始折腾nginx了,今天查到了检查nginx配置是否正确和重启的方法,记录下,高手飘过。我的nginx安装在/usr/local/nginx,系统为ubuntu

几个常用的nginx命令

Nginx 安装后只有一个程序文件,本身并不提供各种管理程序,它是使用参数和系统信号机制对 Nginx 进程本身进行控制的。 Nginx 的参数包括有如下几个:

可以这样使用

/usr/local/nginx/sbin/nginx  -参数
  • -c <path_to_config>:使用指定的配置文件而不是 conf 目录下的 nginx.conf 。
  • -t:测试配置文件是否正确,在运行时需要重新加载配置的时候,此命令非常重要,用来检测所修改的配置文件是否有语法错误。
  • -s reload 重载
  • -s stop 停止

nginx启动/重启/停止

这个很简单,就是运行命令:

javascript作用域和作用域链

javascript的作用域是一个重要的知识点,javascript作用域(scope)是通过javascript的作用域链(scope chain)来实现的。

javascript作用域

javascript作用域(scope):简单的说,就是创建一个函数时在什么环境下创建的,它控制了javascript代码运行时变量和函数的访问范围。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,注意:全局变量是魔鬼!因为它效率低(后面讲到),污染全局环境!一般有一下三种方式获取全局作用域。

代码最外层定义的函数和变量拥有全局作用域

在代码的最外层,定义的函数、变量,都是拥有全局作用域的。

var a = 1;
function b(){
    var a = 2;
}
b();
alert(a);//1

函数内部不使用var定义的拥有全局作用域

在函数内部,不使用var定义的变量拥有全局作用域,这是个坑!要注意,很多前端开发工程师不习惯写var,其实这时候你已经污染了全局作用域!

var a = 1;
function b(){
    a = 2;
    c = 3;
}
b();
alert(a);//2
alert(c);//3

正确理解javascript的this关键字

javascript有this关键字,this跟javascript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下javascript的this关键字

this和对象的关系

首先来看下面的代码:

var person = {
    name:'Theo Wong',
    gender:'male',
    getName:function(){
        console.log(person.name);
    }
};
person.getName();

定义了一个person对象,对象中包含了name、gender属性,还包括了一个getName的方法,其作用是输出person对象的name。在这种情况下,我们可以使用this来在person对象中代替person对象本身,所以上面的代码跟下面的直接结果是一样的:

var person = {
    name:'Theo Wong',
    gender:'male',
    getName:function(){
        console.log(this.name);
    }
};
person.getName();

请记住一点:this永远指向的是函数对象的所有者!上面的例子中getName的所有者是person对象,所以this指代的是person。

this和全局对象

我们再来看看再全局对象中,this指代的是什么,我们知道javascript是脚本语言,所以javascript的执行需要有一个宿主环境,在浏览器中这个宿主环境就是window对象,所以在全局函数中,this指代的是window对象(除非使用new,call,apply方法来改变this的指代关系)。懂得了这个关键点,下面的代码就好理解了:

var a = 1;
console.log(a);//1
console.log(this.a);//1
console.log(window.a);//1

很多前端开发工程师经常使用在函数名字之前添加个window来调用函数,这是因为在浏览器中全局对象就是window,所有的函数变量都是在window对象之中,所以下面的代码中的this指代window对象就好理解了:

var a = 1;
function foo(){
    var b = 2;
    console.log(this.a+b);//3
}
foo();

所以说,只要记住:this永远指向的是函数对象的所有者,即this的值是由激活执行上下文代码的调用者决定的,就好理解this的指代关系了。

chrome扩展应用开发教程之调试和打包上线

今天的文章来说说chrome扩展开发的最后一步,代码调试和打包上线。

chrome应用代码调试

前端开发一样,chrome应用开发过程中也是需要代码调试的,用的调试工具自然是chrome的开发者工具,所以前端开发工程师应该很快就可以上手!

代码调试需要调出来chrome的扩展程序页面,有三种方式调出来chrome的扩展程序页面

  1. chrome右上角“扳手图标”→工具→扩展程序
  2. 新开个chrome选项卡,然后在地址栏输入:chrome://extensions/回车
  3. 右键点击某个扩展,选择管理扩展程序
    这样就会看到如下的扩展程序界面:
    chrome扩展程序界面

点击右上角的“开发者模式”,就会出现三个按钮,选择“载入正在开发中的扩展程序…”,在新开的窗口中找到自己开发的程序的路径,然后打开就可以导入开发中的chrome应用了。点击活动视窗,就可以打开chrome的开发中工具,前端开发工程师就可以进行调试了,跟调试前端页面一样哦。