影の域

现在

影之迷惑 — Thu, 29 Apr 2010 06:43:15 +0000

疲惫、累、烦。

IE6+和FF的CSS Hack

影之迷惑 — Thu, 22 Apr 2010 16:59:21 +0000

一、CSS HACK
以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

二、万能 float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上即可,屡试不爽.

三、其他兼容技巧(再次啰嗦)

1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释.

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;

5 IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：

p对象中的内容

CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

JavaScript的valueOf和toString

影之迷惑 — Thu, 22 Apr 2010 16:01:25 +0000

JavaScript中valueOf函数方法是返回指定对象的原始值。

对象返回值
Array 数组的元素被转换为字符串，这些字符串由逗号分隔，连接在一起。其操作与 Array.toString 和 Array.join 方法相同。
Boolean Boolean 值。
Date 存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function 函数本身。
Number 数字值。
Object 对象本身。这是默认情况。
String 字符串值。

JavaScript中toString函数方法是返回对象的字符串表示
对象操作
Array 将 Array 的元素转换为字符串。结果字符串由逗号分隔，且连接起来。
Boolean 如果 Boolean 值是 true，则返回 “true”。否则，返回 “false”。
Date 返回日期的文字表示法。
Error 返回一个包含相关错误消息的字符串。
Function 返回如下格式的字符串，其中 functionname 是被调用 toString 方法函数的名称： function functionname( ) { [native code] }
Number 返回数字的文字表示。
String 返回 String 对象的值。
默认返回 “[object objectname]”，其中 objectname 是对象类型的名称。

假设在古代，一两黄金换20两白银，一两白银换25枚铜钱，构建描述货币的类:

function Money(gold, silver, coin)
{
 this.gold = gold;
 this.silver = silver;
 this.coin = coin;
}

Money.parse = function(value)
{
 var coin = parseInt(value % 25);
 var silver = parseInt(value / 25 % 20);
 var gold = parseInt(value / 500);
 return new Money(gold, silver, coin);
}

Money.prototype.valueOf = function()
{
 return ((this.gold * 20) + this.silver) * 25 + this.coin;
}

Money.prototype.toString = function()
{
 return this.gold + "两黄金，" + this.silver + "两白银，" + this.coin + "文钱";
}

var money1 = new Money(5, 6, 1);
var money2 = new Money(2, 4, 6);

var money3 = Money.parse(money1 + money2);
alert(money3);

这里隐式调用了valueOf跟toString，二者并存的情况下，在数值运算中，优先调用了valueOf，字符串运算中，优先调用了toString。比如
money1 + money2，调用的就是两者valueOf之后的值相加，而alert的时候，把money3先toString了一下。

这个例子其实是模仿js内置对象Date的，Date基本上也是这样处理问题的。

function Money(n)
{
this.n = n;
}
Money.prototype.valueOf = function()
{
 return this.n * 2
}
Money.prototype.toString = function()
{
 return this.n * 3
}
var m1 = new Money(1);
var m2 = new Money(2);
m = m1 + m2
alert(m1);
alert(m2);
alert(m);

Data URI 和 MHTML

影之迷惑 — Sat, 10 Apr 2010 03:32:45 +0000

Data URI

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中：

data:[][;base64],

MIME-type：指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter，比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息，更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
base64：声明后面的数据的编码是base64的，否则数据必须要用百分号编码（即对内容进行urlencode）。

在上个世纪HTML4.01引入了Data URI方案，到今天为止除了IE6和IE7之外，所有主流浏览器都支持，但IE8对Data URI的支持还是有限制的，只支持object（仅是图片时）、img、input type=image、link和CSS中的URL，且数据量不能大于32K。

优点：

减少HTTP请求数，没有了TCP连接消耗和同一域名下浏览器的并发数限制。
对于小文件会降低带宽。虽然编码后数据量会增加，但是却减少了http头，当http头的数据量大于文件编码的增量，那么就会降低带宽。
对于HTTPS站点，HTTPS和HTTP混用会有安全提示，而HTTPS相对于HTTP来讲开销要大更多，所以Data URI在这方面的优势更明显。
可以把整个多媒体页面保存为一个文件。

缺点：

无法被重复利用，同一个文档应用多次同一个内容，则需要重复多次，数据量大量增加，增加了下载时间。
无法被独自缓存，所以其包含文档重新加载时，它也要重新加载。
客户端需要重新解码和显示，增加了点消耗。
不支持数据压缩，base64编码会增加1/3大小，而urlencode后数据量会增加更多。
不利于安全软件的过滤，同时也存在一定的安全隐患。

MHTML

MHTML是MIME HTML (Multipurpose Internet Mail Extension HTML)的缩写，是由RFC 2557定义的把一个多媒体的页面所有内容都保存到同一个文档解决方案。这个方案是由微软提出从IE5.0开始支持，另外Opera9.0也开始支持，Safari可以把文件保存为.mht（MHTML文件的后缀）格式，但不支持显示它。

MHTML和Data URI还比较类似，有更强大的功能和更复杂的语法，并且没有Data URI中“无法被重复利用”的缺点，但MHTML使用起来不够灵活方便，比如对资源引用的URL在mht文件中可以是相对地址，否则必须是绝对地址。hedger在《Cross Browser Base64 Encoded Images Embedded in HTML》针对IE的解决方案使用的是相对路径就是因为声明了Content-type:message/rfc822使IE按照MHTML来解析，如果不修改Content-type则需要使用MHTML协议，这个时候必须使用绝对路径，如《MHTML – when you need data: URIs in IE7 and under》。

应用

Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器，它们由于无法被缓存和重复利用的缺陷，所以并不适合直接在页面中使用，但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性：

大大减少请求数，现在大型网站的CSS引用了大量的图片资源。
CSS和JavaScript都可以被缓存，间接的实现了数据的缓存。
利用CSS可以解决Data URI的重复利用问题
告别CSS Sprites，CSS Sprites的出现是为了减少请求数，但它除了带来在不确定情况下的异常外，CSS Sprites还需要人为的图片合并，即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间，并带来维护的困难。当你遵循一定的设计原则后，你就可以完全抛弃CSS Sprites来编写CSS，最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML，如《利用data-uri合并样式表和图片》中用python实现的工具，这可以节约大量的时间。
base64编码把图片文件增加了1/3，Data URI和MHTML同时使用相当于增加了2/3，但CSS和JavaScript可以使用gzip压缩，其可以节省2/3的数据量，所以使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9，所以最终流量是减少的。

为了方便在CSS中实现Data URI和MHTML，我写了一个Data URI & MHTML 生成器，你可以看利用其生成Data URI & MHTML应用实例。

其他DEMO： demo1 demo2

挑战 hax.tor.hu 申请带ssh的免费php+mysql空间

影之迷惑 — Fri, 19 Mar 2010 02:39:25 +0000

hax.tor.hu 是一家提供带ssh的免费php+mysql虚拟主机的空间服务商，而且它的SSH隧道是开通的,但是想获得这一免费午餐，却让我大伤脑筋，因为它要求通过它的五道变态难题才行。

打开 http://hax.tor.hu/warmup1/ 开始猜解密码

1.这道题是用javascript设置的，提示“Password is in source.”说明密码就在网页之中，打开源码找到JS部分：

2.提示输入 www.fbi.gov 的SSH标记，有几个了解这些的连接，然而，这些连接只是扰乱视听。SSH一般使用
22 端口，所以使用 PUTTY 或者是 telnet 尝试。

telnet www.fbi.gov 22 之后，出现的字符 SSH-1.99-Server-VII 便是答案

3.提交 “Bacon” 的变量名称。
这个简单，源码中的 select name=”chosen”> 说明 name=”chosen” ，所以在当前的浏览器中输入 http://hax.tor.hu/warmup3/?chosen=Bacon 回车就到第四关。

4.提示密码又在源码中，打开源码并没有找到任何密码，密码一定在网页的报头中，Telnet 看看

telnet hax.tor.hu 80

回车输入

GET /pwfor4/ HTTP/1.1

Host: hax.tor.hu

看到返回信息了。

HTTP/1.1 200 OK
Transfer-Encoding: chunked 22 The password is: stickpick DOS窗口自动关闭。密码提示为 stickdeath

5.最后的一道难题。提示是下面的字符串是被加密后的密码，意思是解密给出的数值就是密码68 228 94 125 67 210 82 19

胡乱输入一个字符回车后，晕倒：Hash ！！！也就说给出的那些数字是密码的哈希值，而哈希算法从来有名

尝试了几次之后，发现这也不是什么哈希目前是 site

破解方法：两个数字的组合，代表一个字母，三个数字的组合标记位数，所以不用理睬三个数字的组合，也不用管最后两个数字的组合。

对应表单

a 77
b 78
c 79
d 72
e 73
f 74
g 75
h 68
i 69
j 70
k 71
l 64
m 65
n 66
o 67
p 92
r 94
s 95
t 88
u 89
w 91
z 86

比如：68 228 94 125 67 210 82 19 就是 site

(由于官方的这个对应表会随机的变化，所以实际情况请自行测试出对应表填写即可)

===============================================
过了这五道难关，就可以申请账号了。输入账号，Email 后就去收邮件，收到邮件就登陆。

https://hax.tor.hu/login 刚一登陆，就面对的是 Challenges Level 1，就是输入一个符合其要求的URL（其实很简单，也是混乱视听的）。

不过别担心，不用理睬Challenges Level，点左栏的 [ Shell ]，申请 shell 账号，账号密码会邮件给你。

下来开始配置 VHOST ,
配置空间大小，选 2000M 后点 “Update quota”,点 Web Setup 添加域名，在三个框中按照提示输入：

你的账号.shell.tor.hu www.你的账号.shell.tor.hu /home/你的账号/www（记得登陆空间后自行创建）

点 “Add vhost” 完成。

也可以输入自己的域名，但需要做CNAME 或者是 A 记录。这里是说明文件 http://shell.tor.hu/doc/web.txt

终于完成了申请，开始传文件。

现在打开 http://你的账号.shell.tor.hu 就能访问你的主页了。

5 个简单实用的 CSS 属性

影之迷惑 — Tue, 09 Mar 2010 01:57:06 +0000

这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉，但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性，我指的是旧的 CSS2 中的属性，如：clip，min-height，white-space，curosr 和 display 等一些被所有浏览器广泛支持的属性。因此，千万不要错过这篇文章，因为你可能发现它们竟有如此之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的 top，right，bottom，left 值。

图片剪辑实例（演示）

以下示例演示了如何使用 clip 属性掩盖一张图片。首先，指定

元素为 position:relative，然后指定元素为 position:absolute，并且根据实际需要设定 rect 值。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调整尺寸和剪辑（演示）

在这个示例中，我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的，我想将其削减至 50％的尺寸，用来创建一个正方形格式的缩略图。因此，我用宽度和高度属性来调整图像，并使用 clip 剪辑属性予以掩盖。然后用 left 属性将图片移开左侧 15px 的距离。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2、Min-height （演示）

min-height 属性允许你指定元素的最小高度，适用于需要平衡布局的情况。我将它用于 Job 面板上，以确保内容区域高于侧边栏。

.with_minheight {
  min-height: 550px;
}

IE6 的 Min-height hack

注：神奇的 IE6 原生不支持 min-height 属性，不过幸好有一个 min-height hack。

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3、White-space（演示）

white-space 属性指定了元素中空白的处理方式。比如，指定 white-space:nowrap 会阻止文本自动换行。

em {
  white-space: nowrap;
}

4、Cursor（演示）

如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor 属性在开发 Web 应用程序时相当有用。

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5、Display inline / block（演示）

如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。

，

和

标签都是块级元素，，， 都是行内元素。通过 display:inline 或 block 的方式，你可以重设这些元素的 display 样式。

.block em { display: block; } .inline h4, .inline p { display: inline; }

英文原稿：5 Simple, But Useful CSS Properties | WebDesignWall 翻译整理：5 个简单实用的 CSS 属性 | 芒果

本文链接：http://www.blueidea.com/tech/web/2010/7410.asp

PureMVC Standard for JavaScript

影之迷惑 — Mon, 08 Mar 2010 03:55:06 +0000

PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern. This is the specific implementation for the JavaScript language.

Home

http://trac.puremvc.org/PureMVC_JS/

Note

Unlike the prior version which used Objs, the current version uses MooTools for simulation of class relationships.

Platforms

JavaScript 1.5

Mootools core

License

Your reuse is governed by the Creative Commons Attribution 3.0 license.

This implementation, like all other official PureMVC implementations, demos and utilities, is open-source and free to use in personal or commercial applications. If you include the source of PureMVC (modified or not), in another work (open-source or not), you must simply leave in the existing attribution and license information in the included source code.

Current Version

2.0

Subversion Repository

Location: http://svn.puremvc.org/PureMVC_JS

Latest Release: tags/2.0

Downloads

PureMVC Framework for JavaScript (.zip archive)

contains vs compareDocumentPosition

影之迷惑 — Sun, 07 Mar 2010 11:04:34 +0000

    一个很棒的 blog 文章，是 PPK 两年前写的，文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。从那起，我已经对这些方法做了大量的研究，并且已经在很多场合使用他们。在很多任务中，他们被证明是非常有用的（特别关于结构的抽象 DOM 选择器）。

    1、DOMElement.contains(DOMNode)

    这个方法起先用在 IE ，用来确定 DOM Node 是否包含在另一个 DOM Element 中。

    当尝试优化 CSS 选择器遍历（像：“#id1 #id2”），这个方法很有用。你可以通过 getElementById 得到元素，然后使用 .contains() 确定 #id1 实际上是否包含 #id2。

    注意点：如果 DOM Node 和 DOM Element 相一致，.contains() 将返回 true ，虽然，一个元素不能包含自己。

    这里有一个简单的执行包装，可以运行在：Internet Explorer, Firefox, Opera, and Safari。

function contains(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}

    2、NodeA.compareDocumentPosition(NodeB)

    这个方法是 DOM Level 3 specification 的一部分，允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。

    使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码（Bit，比特，亦称二进制位）。

    对于那些，人们知之甚少。比特码是将多重数据存储为一个简单的数字（译者注：0 或 1）。你最终打开 / 关闭个别数目（译者注：打开/关闭对应 0 /1），将给你一个最终的结果。

    这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果，包含你可以得到的信息。

Bits          Number        Meaning
000000         0              元素一致
000001         1              节点在不同的文档（或者一个在文档之外）
000010         2              节点 B 在节点 A 之前
000100         4              节点 A 在节点 B 之前
001000         8              节点 B 包含节点 A
010000         16             节点 A 包含节点 B
100000         32             浏览器的私有使用

    现在，这意味着一个可能的结果类似于：

    一旦一个节点 A 包含另一个节点 B，包含 B（+16）且在 B 之前（+4），则最后的结果是数字 20 。如果你查看比特发生的变化，将增加你的理解。

000100 (4) + 010000 (16) = 010100 (20)

    这个，毫无疑问，有助于理解单个最混乱的 DOM API 方法。当然，他的价值当之无愧的。

    现在，DOMNode.compareDocumentPosition 在 Firefox 和 Opera 中是可用的。然而，有一些技巧，我们可以用来在 IE 中执行他。

// Compare Position – MIT Licensed, John Resig
function comparePosition(a, b){
return a.compareDocumentPosition ?
a.compareDocumentPosition(b) :
a.contains ?
( a != b && a.contains(b) && 16 ) +
( a != b && b.contains(a) && 8 ) +
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
   (a.sourceIndex < b.sourceIndex && 4 ) +
   (a.sourceIndex > b.sourceIndex && 2 ) :
   1 ) :
0;
}

    IE 提供给我们一些可以使用的方法和属性。开始，使用 .contains() 方法（如我们前面所讨论的），以便给我们包含（+16）或者被包含（+8）的结果。IE 还有一个 .sourceIndex 属性在所有的 DOM Element 对应着元素在文档中的位置，例如：document.documentElement.sourceIndex == 0。因为我们有这个信息，我们可以完成两个 compareDocumentPosition 难题：在前面（+2）和在后面（+4）。另外，如果一个元素不在当前的文档，.sourceIndex 将等于 -1，这个给我们另外一个回答（+1）。最后，通过这个过程的推断，我们可以确定如果一个元素等于他本身，返回一个空的比特码（+0）。

    这个函数可以在 Internet Explorer、Firefox 和 Opera 中运行。但在 Safari 中却有残缺功能（因为他只有 contains() 方法，而没有 .sourceIndex 属性。我们只能得到包含（+16），被包含（+8），其他的所有结果都将返回（+1）代表一个断开）。

    PPK 提供了一个关于通过创建一个 getElementsByTagNames 方法使新功能可以被使用的很棒的例子。让我们改编他到我们的新方法中：

// Original by PPK quirksmode.org
function getElementsByTagNames(list, elem) {
        elem = elem || document;                 var tagNames = list.split(’,’), results = [];

        for ( var i = 0; i < tagNames.length; i++ ) {
                var tags = elem.getElementsByTagName( tagNames[i] );
                for ( var j = 0; j < tags.length; j++ )
                        results.push( tags[j] );
        }

        return results.sort(function(a, b){
                return 3 – (comparePosition(a, b) & 6);
        });
}

    我们现在可以使用他来按次序构建一个站点的目录：

getElementsByTagNames(“h1, h2, h3″);

    虽然 Firefox 和 Opera 都采取了一些主动落实这一方法。我依然期待看到更多的浏览器进入，以帮助向前推动

JS闭包之词法作用域

影之迷惑 — Fri, 05 Mar 2010 05:34:43 +0000

var classA = function(){ this.prop1 = 1; } classA.prototype.func1 = function(){ var that = this, var1 = 2; function a(){ return function(){ alert(var1); alert(this.prop1); }.apply(that); }; a(); } var objA = new ClassA(); objA.func1();

大家应该写过上面类似的代码吧，其实这里我想要表达的是有时候一个方法定义的地方和使用的地方会相隔十万八千里，那方法执行时，它能访问哪些变量，不能访问哪些变量，这个怎么判断呢？这个就是我们这次需要分析的问题—词法作用域

词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）。

下面通过几个小小的案例，开始深入的了解对理解词法作用域和闭包必不可少的，JS执行时底层的一些概念和理论知识。

经典案列重现

1、经典案例一

/*全局（window）域下的一段代码*/ function a(i) { var i; alert(i); }; a(10);

疑问：上面的代码会输出什么呢？
答案：没错，就是弹出10。具体执行过程应该是这样的

a 函数有一个形参 i，调用 a 函数时传入实参 10，形参 i=10

接着定义一个同名的局部变量 i，未赋值

alert 输出 10

思考：局部变量 i 和形参 i 是同一个存储空间吗？

2、经典案例二

/*全局（window）域下的一段代码*/ function a(i) { alert(i); alert(arguments[0]); //arguments[0]应该就是形参 i var i = 2; alert(i); alert(arguments[0]); }; a(10);

疑问：上面的代码又会输出什么呢？（（ 10,10,2,10 || 10,10,2,2 ））
答案：在FireBug中的运行结果是第二个10,10,2,2，猜对了… ，下面简单说一下具体执行过程

a 函数有一个形参i，调用 a 函数时传入实参 10，形参 i=10

第一个 alert 把形参 i 的值 10 输出

第二个 alert 把 arguments[0] 输出，应该也是 i

接着定义个局部变量 i 并赋值为2，这时候局部变量 i=2

第三个 alert 就把局部变量 i 的值 2 输出

第四个alert再次把 arguments[0] 输出

思考：这里能说明局部变量 i 和形参 i 的值相同吗？

3、经典案例三

/*全局（window）域下的一段代码*/ function a(i) { alert(i); alert(arguments[0]); //arguments[0]应该就是形参 i var i = 2; alert(i); alert(arguments[0]); }; a(10);

疑问：上面的代码又又会输出什么呢？（（ undefined || 10 ））
答案：在FireBug中的运行结果是 10，下面简单说一下具体执行过程

第一句声明一个与形参 i 同名的局部变量 i，根据结果我们知道，后一个 i 是指向了

形参 i，所以这里就等于把形参 i 的值 10 赋了局部变量 i

第二个 alert 当然就输出 10

思考：结合案列二，这里基本能说明局部变量 i 和形参 i 指向了同一个存储地址！

4、经典案例四

/*全局（window）域下的一段代码*/ var i=10; function a() { alert(i); var i = 2; alert(i); }; a();

疑问：上面的代码又会输出什么呢？（小子，看这回整不死你！哇哈哈，就不给你选项）
答案：在FireBug中的运行结果是 undefined, 2，下面简单说一下具体执行过程

第一个alert输出undefined

第二个alert输出 2

思考：到底怎么回事儿？

5、经典案例五…………..N

看到上面的几个例子，你可能会想，怎么可能，我写了几年的 js 了，怎么这么简单例子也会犹豫，结果可能还答错了。其实可能原因是：我们能很快的写出一个方法，但到底方法内部是怎么执行的呢？执行的细节又是怎么样的呢？你可能没有进行过深入的学习和了解。要了解这些细节，那就需要了解 JS 引擎的工作方式，所以下面我们就把 JS 引擎对一个方法的解析过程进行一个稍微深入一些的介绍

解析过程

1、执行顺序

编译型语言，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成。

解释型语言，通过词法分析和语法分析得到语法分析树后，就可以开始解释执行了。这里是一个简单原始的关于解析过程的原理，仅作为参考，详细的解析过程（各种JS引擎还有不同）还需要更深一步的研究

JavaScript执行过程，如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：

步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）

步骤2. 做词法分析和语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5

步骤3. 对【var】变量和【function】定义做“预解析“（永远不会报错的，因为只解析正确的声明）

步骤4. 执行代码段，有错则报错（比如变量未定义）

步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2

步骤6. 结束

2、特殊说明
全局域（window）域下所有JS代码可以被看成是一个“匿名方法“，它会被自动执行，而此“匿名方法“内的其它方法则是在被显示调用的时候才被执行
3、关键步骤
上面的过程，我们主要是分成两个阶段

解析：就是通过语法分析和预解析构造合法的语法分析树。

执行：执行具体的某个function，JS引擎在执行每个函数实例时，都会创建一个执行环境（ExecutionContext）和活动对象（activeObject）（它们属于宿主对象，与函数实例的生命周期保持一致）

3、关键概念
到这里，我们再更强调以下一些概念，这些概念都会在下面用一个一个的实体来表示，便于大家理解

语法分析树（SyntaxTree）可以直观地表示出这段代码的相关信息,具体的实现就是JS引擎创建了一些表，用来记录每个方法内的变量集（variables），方法集（functions）和作用域（scope）等

执行环境（ExecutionContext）可理解为一个记录当前执行的方法【外部描述信息】的对象,记录所执行方法的类型，名称，参数和活动对象（activeObject）

活动对象（activeObject）可理解为一个记录当前执行的方法【内部执行信息】的对象,记录内部变量集（variables）、内嵌函数集（functions）、实参（arguments）、作用域链（scopeChain）等执行所需信息，其中内部变量集（variables）、内嵌函数集（functions）是直接从第一步建立的语法分析树复制过来的

词法作用域：变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，通过静态分析就能确定，因此词法作用域也叫做静态作用域。 with和eval除外，所以只能说JS的作用域机制非常接近词法作用域（Lexical scope）

作用域链：词法作用域的实现机制就是作用域链（scopeChain）。作用域链是一套按名称查找（Name Lookup）的机制，首先在当前执行环境的 ActiveObject 中寻找，没找到，则顺着作用域链到父 ActiveObject 中寻找，一直找到全局调用对象（Global Object）

4、实体表示

解析模拟

估计，看到这儿，大家还是很朦胧吧，什么是语法分析树，语法分析树到底长什么样子，作用域链又怎么实现的，活动对象又有什么内容等等，还是不是太清晰，下面我们就通过一段实际的代码来模拟整个解析过程，我们就把语法分析树，活动对象实实在在的创建出来，理解作用域，作用域链的到底是怎么实现的
1、模拟代码

/*全局（window）域下的一段代码*/ var i = 1,j = 2,k = 3; function a(o,p,x,q){ var x = 4; alert(i); function b(r,s) { var i = 11,y = 5; alert(i); function c(t){ var z = 6; alert(i); }; //函数表达式 var d = function(){ alert(y); }; c(60); d(); }; b(40,50); } a(10,20,30);

2、语法分析树
上面的代码很简单，就是先定义了一些全局变量和全局方法，接着在方法内再定义局部变量和局部方法，现在JS解释器读入这段代码开始解析，前面提到 JS 引擎会先通过语法分析和预解析得到语法分析树，至于语法分析树长什么样儿，都有些什么信息，下面我们以一种简单的结构：一个 JS 对象(为了清晰表示个各种对象间的引用关系，这里的只是伪对象表示，可能无法运行)来描述语法分析树（这是我们比较熟悉的，实际结构我们不去深究，肯定复杂得多，这里是为了帮助理解解析过程而特意简化）

/** * 模拟建立一棵语法分析树，存储function内的变量和方法 */ var SyntaxTree = { // 全局对象在语法分析树中的表示 window: { variables:{ i:{ value:1}, j:{ value:2}, k:{ value:3} }, functions:{ a: this.a } }, a:{ variables:{ x:'undefined' }, functions:{ b: this.b }, scope: this.window }, b:{ variables:{ y:'undefined' }, functions:{ c: this.c, d: this.d }, scope: this.a }, c:{ variables:{ z:'undefined' }, functions:{}, scope: this.b }, d:{ variables:{}, functions:{}, scope: { myname:d, scope: this.b } } };

上面就是关于语法分析树的一个简单表示，正如我们前面分析的，语法分析树主要记录了每个 function 中的变量集（variables），方法集（functions）和作用域（scope）
语法分析树关键点

1变量集（variables）中，只有变量定义，没有变量值，这时候的变量值全部为“undefined”

2作用域（scope），根据词法作用域的特点，这个时候每个变量的作用域就已经明确了，而不会随执行时的环境而改变。【什么意思呢？就是我们经常将一个方法 return 回去，然后在另外一个方法中去执行，执行时，方法中变量的作用域是按照方法定义时的作用域走。其实这里想表达的意思就是不管你在多么复杂，多么远的地方执行该方法，最终判断方法中变量能否被访问还是得回到方法定义时的地方查证】

3作用域（scope）建立规则

a对于函数声明和匿名函数表达式来说，[scope]就是它创建时的作用域

b对于有名字的函数表达式，[scope]顶端是一个新的JS对象（也就是继承了Object.prototype），这个对象有两个属性，第一个是自身的名称，第二个是定义的作用域，第一个函数名称是为了确保函数内部的代码可以无误地访问自己的函数名进行递归。

3、执行环境与活动对象
语法分析完成，开始执行代码。我们调用每一个方法的时候，JS 引擎都会自动为其建立一个执行环境和一个活动对象，它们和方法实例的生命周期保持一致，为方法执行提供必要的执行支持，针对上面的几个方法，我们这里统一为其建立了活动对象（按道理是在执行方法的时候才会生成活动对象，为了便于演示，这里一下子定义了所有方法的活动对象），具体如下：
执行环境

/** * 执行环境:函数执行时创建的执行环境 */ var ExecutionContext = { window: { type: 'global', name: 'global', body: ActiveObject.window }, a:{ type: 'function', name: 'a', body: ActiveObject.a, scopeChain: this.window.body }, b:{ type: 'function', name: 'b', body: ActiveObject.b, scopeChain: this.a.body }, c:{ type: 'function', name: 'c', body: ActiveObject.c, scopeChain: this.b.body }, d:{ type: 'function', name: 'd', body: ActiveObject.d, scopeChain: this.b.body } }

上面每一个方法的执行环境都存储了相应方法的类型（function）、方法名称（funcName）、活动对象（ActiveObject）、作用域链（scopeChain）等信息,其关键点如下：

body属性，直接指向当前方法的活动对象

scopeChain属性，作用域链，它是一个链表结构，根据语法分析树中当前方法对应的scope属性，它指向scope对应的方法的活动对象（ActivceObject），变量查找就是跟着这条链条查找的

活动对象

/** * 活动对象：函数执行时创建的活动对象列表 */ var ActiveObject = { window: { variables:{ i: { value:1}, j: { value:2}, k: { value:3} }, functions:{ a: this.a } }, a:{ variables:{ x: {value:4} }, functions:{ b: SyntaxTree.b }, parameters:{ o: {value: 10}, p: {value: 20}, x: this.variables.x, q: 'undefined' }, arguments:[this.parameters.o,this.parameters.p,this.parameters.x] }, b:{ variables:{ y:{ value:5} }, functions:{ c: SyntaxTree.c, d: SyntaxTree.d }, parameters:{ r:{value:40}, s:{value:50} }, arguments:[this.parameters.r,this.parameters.s] }, c:{ variables:{ z:{ value:6} }, functions:{}, parameters:{ u:{value:70} }, arguments:[this.parameters.u] }, d:{ variables:{}, functions:{}, parameters:{}, arguments:[] } }

上面每一个活动对象都存储了相应方法的内部变量集（variables）、内嵌函数集（functions）、形参（parameters）、实参（arguments）等执行所需信息，活动对象关键点

创建活动对象，从语法分析树复制方法的内部变量集（variables）和内嵌函数集（functions）

方法开始执行，活动对象里的内部变量集全部被重置为 undefined

创建形参（parameters）和实参（arguments）对象，同名的实参，形参和变量之间是【引用】关系

执行方法内的赋值语句，这才会对变量集中的变量进行赋值处理

变量查找规则是首先在当前执行环境的 ActiveObject 中寻找，没找到，则顺着执行环境中属性 ScopeChain 指向的 ActiveObject 中寻找，一直到 Global Object（window）

方法执行完成后，内部变量值不会被重置，至于变量什么时候被销毁，请参考下面一条

方法内变量的生存周期取决于方法实例是否存在活动引用，如没有就销毁活动对象

6和7 是使闭包能访问到外部变量的根本原因

重释经典案例

案列一二三

根据【在一个方法中，同名的实参，形参和变量之间是引用关系，也就是JS引擎的处理是同名变量和形参都引用同一个内存地址】，所以才会有二中的修改arguments会影响到局部变量的情况出现

案例四

根据【JS引擎变量查找规则，首先在当前执行环境的 ActiveObject 中寻找，没找到，则顺着执行环境中属性 ScopeChain 指向的 ActiveObject 中寻找，一直到 Global Object（window）】，所以在四中，因为在当前的ActiveObject中找到了有变量 i 的定义，只是值为 “undefined”，所以直接输出 “undefined” 了

总结

以上是我在学习和使用了JS一段时间后,为了更深入的了解它, 也为了更好的把握对它的应用, 从而在对闭包的学习过程中,自己对于词法作用域的一些理解和总结,中间可能有一些地方和真实的JS解释引擎有差异,因为我只是站在一个刚入门的前端开发人员而不是系统设计者的角度上去分析这个问题，希望能对JS开发者理解此法作用域带来一些帮助！

原文链接： http://ued.sohu.com/article/204

Comet—“服务器推”技术

影之迷惑 — Wed, 03 Mar 2010 06:02:46 +0000

一、名称解释：

Comet最早是由Alex Russell（Dojo Toolkit 项目主管和Dojo Foundation主席）在自己的博客中提出的术语，他是这样说的：”New services like Jot Live and Meebo are built with a style of data transmission that is neither traditional nor Ajax. Their brand of low-latency data transfer to the browser is unique, and it is becoming ever-more common. Lacking a better term, I’ve taken to calling this style of event-driven, server-push data streaming “Comet”.” “They all use long-lived HTTP connections to reduce the latency with which messages are passed to the server. In essence, they do not poll the server occasionally. Instead the server has an open line of communication with which it can push data to the client.”

Comet指的是一种Web应用程序架构。可以直接说，它不是一种技术，而是一种思想，只是这种思想采用了已有的技术去实现。在这种思想里，客户端（Client）不需要显式地向服务器端（Server）发出请求，Server会在其数据发生变化的时候主动将数据异步发送给Client，从而使Client能够及时更新数据并呈现给用户。它不同于传统的Web，也不同于当前流行的Ajax，这种思想非常架构思想非常适合event-driven(事件驱动)式的Web应用和对交互性及实时性要求很强的应用，比如股票交易，聊天室，Web IM，网游等。

二、成功案例：

GMail’s GTalk integration

Jot Live

Renkoo

Meebo

三、实现方式：

Comet使用Client和Server之前的HTTP长链接最为数据传输的通道。

实现Comet，最常见的有下面两种方式：

Ajax的长轮询（long-polling）：Javascript在处理完服务器返回的信息后再次发出请求，重新建立连接。不同于一般的Ajax，Javascript请求Server，无数据时Server不中断请求，still loading，在一定时间内，获取到数据后，返回请求，又Javascript获取数据后再次发出请求，由此轮询。需要注意的是请求的间隔时间以及每次请求的最长Loading时间。
优点：异步请求；无需浏览器任何插件支持；采用Ajax技术，兼容性强；
缺点：会产生大量的通信量，只能通过增加轮询的时间间隔来减轻Server的压力；

Iframe结合Htmlfile流（streaming）：通过在页面上嵌入一个隐藏的Iframe，设置其src属性为一个长连接的请求，Server采用flush方式将数据作为前端Javascript函数的参数传递；
优点：不会有很大的通信量，而且数据接收非常及时，并且无中断；
缺点：会产生进度条的Loading状态并一直穿着，用户使用体验很不好，在Google Talk中，通过Htmlfile Active解决了IE下的进度条显示问题；保持长期链接也非常耗服务器资源；

四、临时采用方案：

目前，白社会(bai.sohu.com)采用了第一种方式来实现实时消息的推送，这种方式还存在一个问题就是，在多个tab页下，如何保证没有相同域的长连接请求（IE在同域下只能同时支持两个长链接），于是采用了子域形式来区分多个域，以保证每个tab页下访问的地址都不在一个域名下，此时问题又出来了，出现了Ajax跨域名请求，不过这个问题比较常见，解决方案也很多，我们采用的是Iframe形式；由此，为了实现Comet，我们走了很长一条路，虽然路的确走完了，但是走得很长很艰难，这也是为什么称它为“临时解决方案”，因为它并不是一个完美的方案，但我也相信，以后会更加完美。

五、现有可参考框架

Cometd：官方地址：www.cometd.org
可以参考http://www.blogjava.net/xmatthew/archive/2008/11/20/208911.html

Pushlet：官方地址：www.pushlets.com
pushlet 提供了基于 AJAX 的 JavaScript 库文件用于实现长轮询方式的”服务器推”；还提供了基于 iframe 的 JavaScript 库文件用于实现流方式的”服务器推”。
可以参考http://www.javaeye.com/topic/89158

六、文章参考

Comet：基于 HTTP 长连接的”服务器推”技术

实战 Comet 应用程序开发

Comet on wikipedia

最后，本人对Comet也未进行深入的研究，只是希望通过此文能给大家起一个抛砖引玉的作用，希望大家能够在客户端实时技术上能够起点帮助作用，能够越来越丰富我们前端技术。

原文地址： http://ued.sohu.com/article/118

Javascript的变量与delete操作符

影之迷惑 — Mon, 01 Mar 2010 05:19:40 +0000

原文链接

虽然是一个小小的delete操作符，其行为却异常复杂。

Javascript的变量

delete操作符删除的对象

对变量执行delete的情况

能删除的属性和不能删除的属性

能删除的变量和不能删除的变量

delete的返回值

Javascript的变量

实际上Javascript中，变量 = 对象属性，这是因为 Javascript 在执行脚本之前会创建一个Global对象，所有的全局变量都是这个Global对象的属性，执行函数时也会创建一个Activation对象，所有的局部变量都是这个Activation对象的属性。如下例：

var global = 42; this.global; // 42, 可以通过this来访问Global对象 this.global2 = 12; global2; // 12 function foo() { var local = 36; // 不过无法直接访问Activation， // 因此无法通过 foo.local 的方式来访问local变量 }

delete操作符删除的对象

C++中也有delete操作符，它删除的是指针所指向的对象。例如：

// C++ class Object { public: Object *x; } Object o; o.x = new Object(); delete o.x; // 上一行new的Object对象将被释放

但Javascript的delete与C++不同，它不会删除o.x指向的对象，而是删除o.x属性本身。

// Javascript var o = {}; o.x = new Object(); delete o.x; // 上一行new的Object对象依然存在 o.x; // undefined，o的名为x的属性被删除了

在实际的Javascript中，delete o.x之后，Object对象会由于失去了引用而被垃圾回收，所以delete o.x也就“相当于”删除了o.x所指向的对象，但这个动作并不是ECMAScript标准，也就是说，即使某个实现完全不删除Object对象，也不算是违反ECMAScript标准。

“删除属性而不是删除对象”这一点，可以通过以下的代码来确认。

var o = {}; var a = { x: 10 }; o.a = a; delete o.a; // o.a属性被删除 o.a; // undefined a.x; // 10, 因为{ x: 10 } 对象依然被 a 引用，所以不会被回收

另外，delete o.x 也可以写作 delete o["x"]，两者效果相同。

对变量执行delete的情况

由于变量也是 Global 或者是 Activation 对象的属性，所以对变量的delete操作也是同样的结果。

var global = 42; delete global; // 删除Global.global function foo() { var local = 36; delete local; // 删除Activation.local }

能删除的属性和不能删除的属性

并不是所有的属性都能被delete。例如，prototype中声明的属性就无法被delete：

function C() { this.x = 42; } C.prototype.x = 12; var o = new C(); o.x; // 42, 构造函数中定义的o.x delete o.x; o.x; // 12, prototype中定义的o.x，即使再次执行delete o.x也不会被删除

对象的预定义属性也无法删除。可以认为这类属性带有DontDelete的特性。

var re = /abc/i; delete re.ignoreCase; re.ignoreCase; // true, ignoreCase无法删除

能删除的变量和不能删除的变量

通过var声明的变量和通过function声明的函数拥有DontDelete特性，无法被删除。

var x = 36; delete x; x; // 36, x没有被删除 y = 12; delete y; y; // undefined function foo() { return 42; } delete foo; foo(); // 42

但是有一点例外，就是通过 eval 执行的代码中，通过var声明的变量虽然与正常的var声明变量同属于Global对象，但它们不具有DontDelete特性，能被删除。

eval("var x = 36;"); x; // 42 delete x; x; // undefined

但是这也有一点例外，eval的代码中的函数内通过var定义的变量具有DontDelete，不能被删除。

eval("(function() { var x = 42; delete x; return x; })();"); // 返回 42

delete的返回值

delete是普通运算符，会返回true或false。规则为：当被delete的对象的属性存在并且拥有DontDelete时返回false，否则返回true。这里的一个特点就是，对象属性不存在时也返回true，所以返回值并非完全等同于删除成功与否。

function C() { this.x = 42; } C.prototype.y = 12; var o = new C(); delete o.x; // true o.x; // undefined "x" in o; // false // o.x存在并且没有DontDelete，返回true delete o.y; // true o.y; // 12 // o自身没有o.y属性，所以返回true // 从这里也可以看到prototype链的存在，对象自身属性和prototype属性是不同的 delete o; // false // Global.o拥有DontDelete特性所以返回false delete undefinedProperty; // true // Global没有名为undefinedProperty的属性因此返回true delete 42; // true // 42不是属性所以返回true。有的实现会抛出异常（违反ECMAScript标准） var x = 24; delete x++; // true x; // 25 // 被删除的是x++的返回值(24)，不是属性，所以返回true

Understanding and Solving Internet Explorer Leak Patterns

影之迷惑 — Sun, 28 Feb 2010 06:01:57 +0000

Understanding and Solving Internet Explorer Leak Patterns

Justin Rogers
Microsoft Corporation

June 2005

The Evolution of the Web Developer

In the past, memory leaks haven’t posed huge problems for Web developers. Pages were kept relatively simple and navigation between different locations within a site was a great way to clean up any loose memory. If there was a leak, it was most likely small enough to go unnoticed.

New Web applications live up to higher standards. A page might run for hours without being navigated and retrieve updated information dynamically through Web services. Language features are pushed to the breaking point by combining complex event schemes, object-oriented JScript, and closures to produce entire applications. With these and other changes, certain memory leak patterns are becoming more prominent, especially those previously hidden by navigation.

The good news is that memory leak patterns can be easily spotted if you know what to look for. Most of the troublesome patterns you might face have known workarounds requiring only a small amount of extra work on your behalf. While some pages might still fall prey to small memory leaks, the most noticeable ones can be easily removed.

Leak Patterns

The following sections will discuss patterns of memory leaks and point out some common examples of each pattern. One great example of a pattern is the closure feature of JScript, while another example is the use of closures in hooking events. If you’re familiar with the event hooking example, you might be able to find and fix many of your memory leaks, but other closure-related issues might go unnoticed.

Now, let’s look at the following patterns:

Circular References—When mutual references are counted between Internet Explorer’s COM infrastructure and any scripting engine, objects can leak memory. This is the broadest pattern.

Closures—Closures are a specific form of circular reference that pose the largest pattern to existing Web application architectures. Closures are easy to spot because they rely on a specific language keyword and can be searched for generically.

Cross-Page Leaks—Cross-page leaks are often very small leaks of internal book-keeping objects as you move from site to site. We’ll examine the DOM Insertion Order issue, along with a workaround that shows how small changes to your code can prevent the creation of these book-keeping objects.

Pseudo-Leaks—These aren’t really leaks, but can be extremely annoying if you don’t understand where your memory is going. We’ll examine the script element rewriting and how it appears to leak quite a bit of memory, when it is really performing as required.

Circular References

Circular references are the root of nearly every leak. Normally, script engines handle circular references through their garbage collectors, but certain unknowns can prevent their heuristics from working properly. The unknown in the case of IE would be the status of any DOM elements that a portion of script has access to. The basic principle would be as follows:

Figure 1. Basic Circular Reference Pattern

The cause of the leak in this pattern is based on COM reference counting. The script engine objects will hold a reference to the DOM element and will be waiting for any outstanding references to be removed before cleaning up and releasing the DOM element pointer. In our case we have two references on the script engine object: the script engine scope, and the DOM element expando property. While terminating the script engine will release the first reference, the DOM element reference will never be released because it is waiting on the script engine object to release it! You might think it would be easy to detect this scenario and fix the problem, but in practice the basic case presented is only the tip of the iceberg. You could have circular references at the end of a 30 object chain and those would be much harder to detect.

If you are wondering what this pattern looks like in HTML, you can cause a leak by using a global script engine variable and a DOM element as shown.

To break the leak pattern you can make use of explicit null assignments. By assigning null before the document unloads you are telling the script engine there is no longer an association between the element and the object inside the engine. It can now properly clean up references and will release the DOM element. In this case, you as the Web developer know more about the relationships between your objects than the script engine does.

While that is the basic pattern, it can be difficult to spot more complex scenarios. A common usage of object-oriented JScript is to extend DOM elements by encapsulating them inside of a JScript object. During the construction process, you generally pass in the DOM element you want to attach to and then store a reference to the DOM element on the newly constructed object while at the same time storing an instance of the newly constructed object on the DOM element. That way your application model always has access to everything it needs. The problem is this is a very explicit circular reference, but because it uses different language aspects it might go unnoticed. Breaking up this kind of pattern can become more complex, and you can use the same simple methods discussed earlier.

More complex solutions to this problem involve registration schemes to note which elements/properties need to be unhooked, having the peer element hook events so that it can clean up before the document unloads, but often you can run into additional leak patterns without actually fixing the problem.

Closures

Closures are very often responsible for leaks because they create circular references without the programmer being fully aware. It isn’t immediately obvious that parent function parameters and local variables will be frozen in time, referenced, and held until the closure itself is released. In fact this has become such a common programming tactic, and users have run into issues so often, there are quite a few resources already available. Because they detail some of the history behind closures as well as some of the specific instances of closure leaks we’ll check those out after applying the closure model to our circular reference diagram and figuring out where these extra references are coming from.

Figure 2. Circular References with Closures

With normal circular references there were two solid objects holding references to each other, but closures are different. Rather than make the references directly, they are made instead by importing information from their parent function’s scope. Normally, a function’s local variables and the parameters used when calling a function only exist for the lifetime of the function itself. With closures, these variables and parameters continue to have an outstanding reference as long as the closure is alive, and since closures can live beyond the lifetime of their parent function so can any of the locals and parameters in that function. In the example, Parameter 1 would normally be released as soon as the function call was over. Because we’ve added a closure, a second reference is made, and that second reference won’t be released until the closure is also released. If you happened to attach the closure to an event, then you would have to detach it from that event. If you happened to attach the closure to an expando then you would need to null that expando.

Closures are also created per call, so calling this function twice will create two individual closures, each holding references to the parameters passed in each time. Because of this transparent nature it is really easy to leak closures. The following example provides the most basic of leaks using closures:

If you are wondering how to break this leak, it won’t be as easy as a normal circular reference. The “closure” can be viewed as a temporary object that exists in the function scope. Once the function exits, you lose reference to the closure itself, so what would you end up calling detachEvent with? One of the most interesting approaches to this problem was demonstrated on MSN spaces thanks to Scott Isaacs. The approach uses a second closure to additionally hook the window’s onUnload event, and because this closure has the same “scoped” objects it is able to detach the event, detach itself, and finish the clean up process. To make everything easily fit with our model we can also store the closure on an expando, detach it, and then null the expando, as in the following example.

In a Knowledge Base article, we actually recommend that you try not to use closures unless they are necessary. In the example, I’ve given we don’t need to use a closure as the event handler, instead we can move the closure to a global scope. When the closure becomes a function, it no longer inherits the parameters or local variables from its parent function so we don’t have to worry about closure-based circular references at all. Most code can be fixed by creating an architecture that doesn’t rely on closures where they aren’t necessary.

Finally, Eric Lippert, one of the developers of the scripting engines, has a great post on closures in general. His final recommendations are also along the lines of only using closures when truly necessary. While his article doesn’t mention any of the workarounds for the closure pattern, hopefully we’ve covered enough examples here to get you started.

Cross-Page Leaks

Leaks that are based on order of insertion are almost always caused by the creation of intermediate objects that don’t get cleaned up properly. That is exactly the case when creating dynamic elements and then attaching them to the DOM. The basic pattern is attaching two dynamically created objects together temporarily which creates a scope from the child to the parent element. Later, when you attach this two-element tree to the primary tree, they both inherit the scope of the document and a temporary object is leaked. The following diagram shows two methods for attaching dynamically created elements to the tree. In the first model, attach each child element to its parent, and finally attach the entire subtree to the primary tree. This method can cause leaks through temporary objects if other conditions are met. In the second model, we attach elements into the primary tree working our way from top-level dynamically created element down through all of the children. Because each attachment inherits the scope of the primary document we never generate temporary scopes. This method is much better at avoiding potential memory leaks.

Figure 3. DOM Insertion Order Leak Model

Next, we are going to cover an example of a leak that is transparent to most leak-detection algorithms. Because we don’t leak any publicly visible elements and the objects we leak are very small you might never notice this problem. For our example to work, the dynamically created elements will have to contain a script pointer in the form of an inline function. This will allow us to leak an internal script object that is created temporarily as we attach elements together. Because the leak is small, we’ll have to run thousands of samples. In fact, the objects leaked are only a few bytes. By running the sample and navigating to an empty page, you can see the difference in memory consumption between the two versions. When we use the first DOM model of attaching child to parent, then parent to the primary tree, our memory usage goes up a bit. This is a cross-navigation leak and the memory isn’t reclaimed until you restart the IE process. If you run the sample a few more times, using the second DOM model of attaching the parent to the primary tree and then the child to the parent, your memory won’t continue to climb and you’ll find that you’ve fixed the cross-page navigation leak.

This leak deserves clarification, because our workaround goes against some best practices in IE. The key points to understand about the leak are that DOM elements are being created with scripts already attached. This is actually crucial to the leak, because if we create DOM elements that don’t contain any script and attach them together in the same manner we don’t have a leak problem. This gives rise to a second workaround that might be even better for larger subtrees (in the example we only have two elements, so building the tree off the primary DOM isn’t a performance hit). The second workaround would be to create your elements with no scripts attached initially so that you can safely build your subtree. After you’ve attached your subtree to the primary DOM, go back and wire up any script events at that point. Remember to follow the principles for circular references and closures so you don’t cause a different leak in your code as you hook up your events.

I really wanted to point out this issue because it shows that not all memory leaks are easy to find. It could take thousands of iterations of a smaller pattern to become visible, and it might be something slight, like the order of insertion of DOM elements that causes the problem to arise. If you tend to program using only best practices, then you think you are safe, but this leak shows that even best practices can exhibit leaks. Our solution here was to improve upon the best practice or even introduce a new best practice in order to remove the leaking condition.

Pseudo-Leaks

Often times the actual behavior and expected behavior of some APIs can lead you to misdiagnose memory leaks. Pseudo-leaks almost always appear on the same page during dynamic scripting operations and should rarely be visible after navigation away from the page to a blank page. That is how you can eliminate the issue as a cross-page leak and then start to work on whether the memory consumption is expected. We’ll use script text rewriting as our example of a pseudo-leak.

Like the DOM Insertion Order issue, this issue also relies on the creation of temporary objects in order to “leak” memory. By rewriting the script text inside of a script element over and over again, slowly you’ll begin to leak various script engine objects that were attached to the previous contents. In particular, objects related to debugging script are left behind as are fully formed code elements.

If you run the above code and use the Task Manager trick again, while navigating between the “leaking” page and a blank page, you won’t notice a script leak. This script leak is entirely within a page and when you navigate away then you get your memory back. The reason this one is bad is due to expected behavior. You expect that after rewriting some script that the original script won’t stay around. But it really has to, because it might have been used already for event attachments and there might be outstanding reference counts. As you can see, this is a pseudo-leak. On the surface the amount of memory consumption looks really bad, but there is a completely valid reason.

Conclusion

Every Web developer builds a personal list of code examples that they know leak and learns to work around those leaks when they see them in code. This is extremely handy and is the reason the Web is relatively leak-free today. Thinking about the leaks in terms of patterns instead of individual code examples, you can start to develop even better strategies for dealing with them. The idea is to take them into account during the design phase and make sure you have plans for any potential leaks. Use defensive coding practices and assume that you’ll need to clean up all your own memory. While this is an overstatement of the problem, you very rarely need to clean up your own memory; it becomes obvious which variables and expando properties have the potential for leaking.

In the interest of patterns and design I highly recommend Scott’s short blog entry because it demonstrates a general purpose example of removing all closure-based leaks. It does require a bit more code, but the practice is sound and the improved pattern is easy to spot in code and to debug. Similar registration schemes can be used for expando-based circular references as long as care is taken that the registration method itself isn’t riddled with leaks (especially where closures are used)!

About the author

Justin Rogers recently joined the Internet Explorer team as an Object Model developer working on extensibility and previously worked on such notable projects as the .NET QuickStart Tutorials, .NET Terrarium, and SQL Reporting Services Management Studio in SQL Server 2005.

结婚了

影之迷惑 — Tue, 23 Feb 2010 10:20:04 +0000

结婚了，有情人终是要成眷属的。

好累

影之迷惑 — Sat, 30 Jan 2010 07:57:52 +0000

太久了，

没安稳的睡过，烦躁、犹豫、无奈、恐惧。

凌乱的压力压的我透不过气，咬牙。

不求可怜、不求同情、也不求理解。

只相信，

最终，

做到想做的、得到想要的、给予能给的、看到想看的……

好累。

Windows 下 Nginx + PHP5 的安装与配置

影之迷惑 — Thu, 28 Jan 2010 15:26:33 +0000

Nginx 是一个轻量级的高性能 Http WebServer，以事件驱动方式编写，因此相比 Apache 而言，Nginx 更加稳定、性能更好，而且配置简单，资源占用较低。以下是在 Windows 7 安装中 Nginx 和 PHP5.3 的步骤。

安装 PHP5
首先，从 http://www.php.net/downloads.php 下载最新的 PHP 5.3 Windows 版本，解压至 C:\php5，把压缩包中的 php.ini-recommended，更名为 php.ini，然后打开修改几个选项：

error_reporting = E_ALL
display_errors = On
extension_dir = “C:\php5\ext”

; 动态扩展，可以根据需要去掉 extension 前面的注释 ;
; 如加载 PDO, MySQL
extension=php_pdo.dll
extension=php_pdo_mysql.dll

; CGI 设置
cgi.fix_pathinfo = 1

PHP 加载扩展需要注意依赖性，比如 php_exif.dll 需要 php_mbstring.dll，你必须要把 php_mbstring.dll 放在 php_exif.dll 前面才能加载成功。有些扩展依赖额外的 dll 文件，如 PHP 5.0+ ，php_mysqli.dll 依赖 libmysql.dll，而 php_oci8.dll，你则需要安装 Oracle 8 的客户端。如果你对这些依赖性不是太了解，可以参考一下安装包中的 install.txt 文件。

依赖文件的搜索顺序：首先是 php.exe 所在的目录，如果是 ISAPI 模式，那么会搜索 Web Server 的启动位置，比如 Apache 的 bin 目录；其次是 Windows PATH 环境变量中的目录。这里不要复制任何文件到 Windows 目录中，有必要的话，可以把 C:\php5 加到 PATH 中，便于以后 PHP 的升级。

安装 Nginx
从 v0.7.52 开始，Nginx 开始发布 Windows 版本的 Nginx，你可以在其官方网站上面下载：

http://nginx.net

如果需要老版本的 Nginx for Windows，可以在 Kevin Worthington 的网站上面找找。

我使用的是 0.8.29，下载好以后，解压释放文件到 C:\nginx。

那么如何配置 Nginx，使其可以和 PHP 协同工作？

配置 PHP FastCGI
Nginx 需要和 FastCGI Server 配合才能处理请求，有两种方式运行 PHP FastCGI Server，一种就是使用 PHP 内置的 FastCGI 管理器：

C:/php5/php-cgi.exe -b 127.0.0.1:9000 -c C:/php5/php.ini

另外一种方式是使用第三方工具，比如 PHP-FPM 、cgi-fcgi 等。显然！要在 Windows 中使用这些工具是件极其痛苦的事情，你可能需要 Cygwin 之类的东西才行，的确有人这么做了，虽然我觉得那是自寻烦恼。

下一步，修改 Nginx ，将 php 请求转发至 PHP FastCGI Server：

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
location ~ ^(.+\.php)(.*)$ {
root D:/public_html;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include php.conf;
}

root 也就是 $document_root 指的是你的 php scripts 根目录，设置为你的网站根目录。在 Windows 下，需要注意的是 root 的路径，最好使用 “/” 作为路径分隔符，而不是 Windows 默认的 “\”，否则容易出问题，比如，这个路径：D:\public_html\test，就不会起作用，Nginx 会抛出 500 错误，原因是 \test 中 \t 被解析为制表符。当然再加上一个反斜杠转义也是可以的，如：D:\\public_html\\test。

php.conf 配置文件：

# 连接到本机 9000 端口，这里的端口是指 PHP FastCGI Server 开启的端口，
# 请与 php-cgi.exe 开启的端口保持一致
# 当 Nginx 收到 php 文件的请求时，会自动转发到 PHP FastCGI Server
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;

# Nginx 默认是不支持 CGI PATH_INFO，SCRIPT_NAME 的值也不标准（糅合了 PATH_INFO）
# 下面的两行指令，可以从 SCRIPT_NAME 中剥离出 PATH_INFO
fastcgi_split_path_info ^(.+\.php)(.*)$;
fastcgi_param PATH_INFO $fastcgi_path_info;

include fastcgi_params;

创建一个独立的 php.conf 保存配置，纯粹是为了精简 nginx.conf，个人习惯而已，也可以全部写在主配置文件中。

修改 php.ini，设置 cgi.fix_pathinfo = 1，这非常重要，PHP 会修正 SCRIPT_FILENAME 为真实的文件地址，否则 PHP 将无法找到需要处理的 php 文件。

一些其他的设置，主服务器：

# 默认开启的进程数
worker_processes 1;

error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;

events {
# 一个进程所处理的最大连接数上限，
# 本地开发，不需要默认的 1024，这里改为 64
worker_connections 64;
}

当某个目录下面不存在默认 index.php index.html 等首页文件时，Nginx 会抛出 403 ERROR，如果你需要罗列此目录，则可以在 http {… } 中加入如下命令：

autoindex on;
autoindex_exact_size on;
autoindex_localtime on;

OK，整合到一起
创建 start_nginx.bat，用于同时启动 PHP FastCGI 和 Nginx：

@echo off
REM Windows 下无效
REM set PHP_FCGI_CHILDREN=5

REM 每个进程处理的最大请求数，或设置为 Windows 环境变量
set PHP_FCGI_MAX_REQUESTS=1000

echo Starting PHP FastCGI…
RunHiddenConsole C:/php5/php-cgi.exe -b 127.0.0.1:9000 -c C:/php5/php.ini

echo Starting nginx…
C:/nginx/nginx.exe

RunHiddenConsole.exe 是一个用来隐藏 DOS 窗口的小程序，可以在这里下载。
start_nginx.bat 开启后，也会有 DOS 窗口，但是可以安全的关掉，并不会关闭 Nginx 和 php-cgi.exe。

同样 stop_nginx.bat，用来关闭：

@echo off
echo Stopping nginx…
taskkill /F /IM nginx.exe > nul
echo Stopping PHP FastCGI…
taskkill /F /IM php-cgi.exe > nul
exit

到这里基本配置完毕了。

Nginx 0.8.x + PHP 5.2.10（FastCGI）搭建胜过Apache十倍的Web服务器（第5版）

影之迷惑 — Wed, 27 Jan 2010 16:40:35 +0000

[文章作者：张宴本文版本：v5.5 最后修改：2009.09.18 原文链接：http://blog.s135.com/nginx_php_v5/]

前言：本文是我撰写的关于搭建“Nginx + PHP（FastCGI）”Web服务器的第5篇文章。本系列文章作为国内最早详细介绍 Nginx + PHP 安装、配置、使用的资料之一，为推动 Nginx 在国内的发展产生了积极的作用。这是一篇关于Nginx 0.7.x系列版本的文章，安装、配置方式与第4篇文章相差不大，但增加了MySQL安装配置的信息、PHP 5.2.10 的 php-fpm 补丁。Nginx 0.7.x系列版本虽然为开发版，但在很多大型网站的生产环境中已经使用。

链接：《2007年9月的第1版》、《2007年12月的第2版》、《2008年6月的第3版》、《2008年8月的第4版》

Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，它已经在该站点运行超过两年半了。Igor 将源代码以类BSD许可证的形式发布。

Nginx 超越 Apache 的高性能和稳定性，使得国内使用 Nginx 作为 Web 服务器的网站也越来越多，其中包括新浪博客、新浪播客、网易新闻等门户网站频道，六间房、56.com等视频分享网站，Discuz!官方论坛、水木社区等知名论坛，豆瓣、YUPOO相册、海内SNS、迅雷在线等新兴Web 2.0网站。

Nginx 的官方中文维基：http://wiki.nginx.org/NginxChs

在高并发连接的情况下，Nginx是Apache服务器不错的替代品。Nginx同时也可以作为7层负载均衡服务器来使用。根据我的测试结果，Nginx 0.8.15 + PHP 5.2.10 (FastCGI) 可以承受3万以上的并发连接数，相当于同等环境下Apache的10倍。

根据我的经验，4GB内存的服务器+Apache（prefork模式）一般只能处理3000个并发连接，因为它们将占用3GB以上的内存，还得为系统预留1GB的内存。我曾经就有两台Apache服务器，因为在配置文件中设置的MaxClients为4000，当Apache并发连接数达到3800时，导致服务器内存和Swap空间用满而崩溃。

而这台 Nginx 0.8.15 + PHP 5.2.10 (FastCGI) 服务器在3万并发连接下，开启的10个Nginx进程消耗150M内存（15M*10=150M），开启的64个php-cgi进程消耗1280M内存（20M*64=1280M），加上系统自身消耗的内存，总共消耗不到2GB内存。如果服务器内存较小，完全可以只开启25个php-cgi进程，这样php-cgi消耗的总内存数才500M。

在3万并发连接下，访问Nginx 0.8.15 + PHP 5.2.10 (FastCGI) 服务器的PHP程序，仍然速度飞快。下图为Nginx的状态监控页面，显示的活动连接数为28457（关于Nginx的监控页配置，会在本文接下来所给出的Nginx配置文件中写明）：

我生产环境下的两台Nginx + PHP5（FastCGI）服务器，跑多个一般复杂的纯PHP动态程序，单台Nginx + PHP5（FastCGI）服务器跑PHP动态程序的处理能力已经超过“700次请求/秒”，相当于每天可以承受6000万（700*60*60*24=60480000）的访问量（更多信息见此），而服务器的系统负载也不高：

2009年9月3日下午2：30，金山游戏《剑侠情缘网络版叁》临时维护1小时（http://kefu.xoyo.com/gonggao/jx3/2009-09-03/750438.shtml），大量玩家上官网，论坛、评论、客服等动态应用Nginx服务器集群，每台服务器的Nginx活动连接数达到2.8万，这是笔者遇到的Nginx生产环境最高并发值。

下面是用100个并发连接分别去压生产环境中同一负载均衡器VIP下、提供相同服务的两台服务器，一台为Nginx，另一台为Apache，Nginx每秒处理的请求数是Apache的两倍多，Nginx服务器的系统负载、CPU使用率远低于Apache：

你可以将连接数开到10000～30000，去压Nginx和Apache上的phpinfo.php，这是用浏览器访问Nginx上的phpinfo.php一切正常，而访问Apache服务器的phpinfo.php，则是该页无法显示。4G内存的服务器，即使再优化，Apache也很难在“webbench -c 30000 -t 60 http://xxx.xxx.xxx.xxx/phpinfo.php”的压力情况下正常访问，而调整参数优化后的Nginx可以。

webbench 下载地址：http://blog.s135.com/post/288/

注意：webbench 做压力测试时，该软件自身也会消耗CPU和内存资源，为了测试准确，请将 webbench 安装在别的服务器上。

测试结果：##### Nginx + PHP #####

[root@localhost webbench-1.5]# webbench -c 100 -t 30 http://192.168.1.21/phpinfo.php
Webbench – Simple Web Benchmark 1.5
Copyright (c) Radim Kolar 1997-2004, GPL Open Source Software.

Benchmarking: GET http://192.168.1.21/phpinfo.php
100 clients, running 30 sec.

Speed=102450 pages/min, 16490596 bytes/sec.
Requests: 51225 susceed, 0 failed.

top – 14:06:13 up 27 days,  2:25,  2 users,  load average: 14.57, 9.89, 6.51
Tasks: 287 total,   4 running, 283 sleeping,   0 stopped,   0 zombie
Cpu(s): 49.9% us,  6.7% sy,  0.0% ni, 41.4% id,  1.1% wa,  0.1% hi,  0.8% si
Mem:   6230016k total,  2959468k used,  3270548k free,   635992k buffers
Swap:  2031608k total,     3696k used,  2027912k free,  1231444k cached

测试结果：#####  Apache + PHP #####

[root@localhost webbench-1.5]# webbench -c 100 -t 30 http://192.168.1.27/phpinfo.php
Webbench – Simple Web Benchmark 1.5
Copyright (c) Radim Kolar 1997-2004, GPL Open Source Software.

Benchmarking: GET http://192.168.1.27/phpinfo.php
100 clients, running 30 sec.

Speed=42184 pages/min, 31512914 bytes/sec.
Requests: 21092 susceed, 0 failed.

top – 14:06:20 up 27 days,  2:13,  2 users,  load average: 62.15, 26.36, 13.42
Tasks: 318 total,   7 running, 310 sleeping,   0 stopped,   1 zombie
Cpu(s): 80.4% us, 10.6% sy,  0.0% ni,  7.9% id,  0.1% wa,  0.1% hi,  0.9% si
Mem:   6230016k total,  3075948k used,  3154068k free,   379896k buffers
Swap:  2031608k total,    12592k used,  2019016k free,  1117868k cached

为什么Nginx的性能要比Apache高得多？这得益于Nginx使用了最新的epoll（Linux 2.6内核）和kqueue（freebsd）网络I/O模型，而Apache则使用的是传统的select模型。目前Linux下能够承受高并发访问的Squid、Memcached都采用的是epoll网络I/O模型。

处理大量的连接的读写，Apache所采用的select网络I/O模型非常低效。下面用一个比喻来解析Apache采用的select模型和Nginx采用的epoll模型进行之间的区别：

假设你在大学读书，住的宿舍楼有很多间房间，你的朋友要来找你。select版宿管大妈就会带着你的朋友挨个房间去找，直到找到你为止。而epoll版宿管大妈会先记下每位同学的房间号，你的朋友来时，只需告诉你的朋友你住在哪个房间即可，不用亲自带着你的朋友满大楼找人。如果来了10000个人，都要找自己住这栋楼的同学时，select版和epoll版宿管大妈，谁的效率更高，不言自明。同理，在高并发服务器中，轮询I/O是最耗时间的操作之一，select和epoll的性能谁的性能更高，同样十分明了。

安装步骤：
（系统要求：Linux 2.6+ 内核，本文中的Linux操作系统为CentOS 5.3，另在RedHat AS4上也安装成功）
一、获取相关开源程序：
1、【适用CentOS操作系统】利用CentOS Linux系统自带的yum命令安装、升级所需的程序库（RedHat等其他Linux发行版可从安装光盘中找到这些程序库的RPM包，进行安装）：

sudo -s
LANG=C
yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2 bzip2-devel ncurses ncurses-devel curl curl-devel e2fsprogs e2fsprogs-devel krb5 krb5-devel libidn libidn-devel openssl openssl-devel openldap openldap-devel nss_ldap openldap-clients openldap-servers

2、【适用RedHat操作系统】RedHat等其他Linux发行版可从安装光盘中找到这些程序库的RPM包（事先可通过类似“rpm -qa | grep libjpeg”的命令查看所需的RPM包是否存在，通常是“xxx-devel”不存在，需要安装）。RedHat可以直接利用CentOS的RPM包安装，以下是RPM包下载网址：
①、RedHat AS4 & CentOS 4
http://mirrors.163.com/centos/4/os/i386/CentOS/RPMS/
http://mirrors.163.com/centos/4/os/x86_64/CentOS/RPMS/

②、RedHat AS5 & CentOS 5
http://mirrors.163.com/centos/5/os/i386/CentOS/
http://mirrors.163.com/centos/5/os/x86_64/CentOS/

③、RPM包搜索网站
http://rpm.pbone.net/
http://www.rpmfind.net/

④、RedHat AS4 系统环境，通常情况下缺少的支持包安装：
Ⅰ、i386 系统

wget http://blog.s135.com/soft/linux/nginx_php/rpm/i386/libjpeg-devel-6b-33.i386.rpm
rpm -ivh libjpeg-devel-6b-33.i386.rpm
wget http://blog.s135.com/soft/linux/nginx_php/rpm/i386/freetype-devel-2.1.9-1.i386.rpm
rpm -ivh freetype-devel-2.1.9-1.i386.rpm
wget http://blog.s135.com/soft/linux/nginx_php/rpm/i386/libpng-devel-1.2.7-1.i386.rpm
rpm -ivh libpng-devel-1.2.7-1.i386.rpm

Ⅱ、x86_64 系统

wget http://blog.s135.com/soft/linux/nginx_php/rpm/x86_64/libjpeg-devel-6b-33.x86_64.rpm
rpm -ivh libjpeg-devel-6b-33.x86_64.rpm
wget http://blog.s135.com/soft/linux/nginx_php/rpm/x86_64/freetype-devel-2.1.9-1.x86_64.rpm
rpm -ivh freetype-devel-2.1.9-1.x86_64.rpm
wget http://blog.s135.com/soft/linux/nginx_php/rpm/x86_64/libpng-devel-1.2.7-1.x86_64.rpm
rpm -ivh libpng-devel-1.2.7-1.x86_64.rpm

3、【适用CentOS、RedHat及其它Linux操作系统】下载程序源码包：
本文中提到的所有开源软件为截止到2009年09月18日的最新稳定版。
①、从软件的官方网站下载：

mkdir -p /data0/software
cd /data0/software
wget http://sysoev.ru/nginx/nginx-0.8.15.tar.gz
wget http://www.php.net/get/php-5.2.10.tar.gz/from/this/mirror
wget http://blog.s135.com/soft/linux/nginx_php/phpfpm/php-5.2.10-fpm-0.5.11.diff.gz
wget http://dev.mysql.com/get/Downloads/MySQL-5.1/mysql-5.1.38.tar.gz/from/http://mysql.he.net/
wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.tar.gz
wget http://downloads.sourceforge.net/mcrypt/libmcrypt-2.5.8.tar.gz?modtime=1171868460&big_mirror=0
wget http://downloads.sourceforge.net/mcrypt/mcrypt-2.6.8.tar.gz?modtime=1194463373&big_mirror=0
wget http://pecl.php.net/get/memcache-2.2.5.tgz
wget http://downloads.sourceforge.net/mhash/mhash-0.9.9.9.tar.gz?modtime=1175740843&big_mirror=0
wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-7.9.tar.gz
wget http://bart.eaccelerator.net/source/0.9.5.3/eaccelerator-0.9.5.3.tar.bz2
wget http://pecl.php.net/get/PDO_MYSQL-1.0.2.tgz
wget http://blog.s135.com/soft/linux/nginx_php/imagick/ImageMagick.tar.gz
wget http://pecl.php.net/get/imagick-2.2.2.tgz

②、从blog.s135.com下载（比较稳定，只允许在本站，或者在Linux/Unix下通过Wget、Curl等命令下载以下软件）：

mkdir -p /data0/software
cd /data0/software
wget http://blog.s135.com/soft/linux/nginx_php/nginx/nginx-0.8.15.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/php/php-5.2.10.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/phpfpm/php-5.2.10-fpm-0.5.11.diff.gz
wget http://blog.s135.com/soft/linux/nginx_php/mysql/mysql-5.1.38.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/libiconv/libiconv-1.13.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/mcrypt/libmcrypt-2.5.8.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/mcrypt/mcrypt-2.6.8.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/memcache/memcache-2.2.5.tgz
wget http://blog.s135.com/soft/linux/nginx_php/mhash/mhash-0.9.9.9.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/pcre/pcre-7.9.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/eaccelerator/eaccelerator-0.9.5.3.tar.bz2
wget http://blog.s135.com/soft/linux/nginx_php/pdo/PDO_MYSQL-1.0.2.tgz
wget http://blog.s135.com/soft/linux/nginx_php/imagick/ImageMagick.tar.gz
wget http://blog.s135.com/soft/linux/nginx_php/imagick/imagick-2.2.2.tgz

二、安装PHP 5.2.10（FastCGI模式）
1、编译安装PHP 5.2.10所需的支持库：

tar zxvf libiconv-1.13.tar.gz
cd libiconv-1.13/
./configure –prefix=/usr/local
make
make install
cd ../

tar zxvf libmcrypt-2.5.8.tar.gz
cd libmcrypt-2.5.8/
./configure
make
make install
/sbin/ldconfig
cd libltdl/
./configure –enable-ltdl-install
make
make install
cd ../../

tar zxvf mhash-0.9.9.9.tar.gz
cd mhash-0.9.9.9/
./configure
make
make install
cd ../

ln -s /usr/local/lib/libmcrypt.la /usr/lib/libmcrypt.la
ln -s /usr/local/lib/libmcrypt.so /usr/lib/libmcrypt.so
ln -s /usr/local/lib/libmcrypt.so.4 /usr/lib/libmcrypt.so.4
ln -s /usr/local/lib/libmcrypt.so.4.4.8 /usr/lib/libmcrypt.so.4.4.8
ln -s /usr/local/lib/libmhash.a /usr/lib/libmhash.a
ln -s /usr/local/lib/libmhash.la /usr/lib/libmhash.la
ln -s /usr/local/lib/libmhash.so /usr/lib/libmhash.so
ln -s /usr/local/lib/libmhash.so.2 /usr/lib/libmhash.so.2
ln -s /usr/local/lib/libmhash.so.2.0.1 /usr/lib/libmhash.so.2.0.1

tar zxvf mcrypt-2.6.8.tar.gz
cd mcrypt-2.6.8/
/sbin/ldconfig
./configure
make
make install
cd ../

2、编译安装MySQL 5.1.38

/usr/sbin/groupadd mysql
/usr/sbin/useradd -g mysql mysql
tar zxvf mysql-5.1.38.tar.gz
cd mysql-5.1.38/
./configure –prefix=/usr/local/webserver/mysql/ –enable-assembler –with-extra-charsets=complex –enable-thread-safe-client –with-big-tables –with-readline –with-ssl –with-embedded-server –enable-local-infile –with-plugins=innobase
make && make install
chmod +w /usr/local/webserver/mysql
chown -R mysql:mysql /usr/local/webserver/mysql
cd ../

附：以下为附加步骤，如果你想在这台服务器上运行MySQL数据库，则执行以下两步。如果你只是希望让PHP支持MySQL扩展库，能够连接其他服务器上的MySQL数据库，那么，以下两步无需执行。

①、创建MySQL数据库存放目录

mkdir -p /data0/mysql/3306/data/
chown -R mysql:mysql /data0/mysql/

②、以mysql用户帐号的身份建立数据表：

/usr/local/webserver/mysql/bin/mysql_install_db –basedir=/usr/local/webserver/mysql –datadir=/data0/mysql/3306/data –user=mysql

③、创建my.cnf配置文件：

vi /data0/mysql/3306/my.cnf

输入以下内容：

[client]
default-character-set = utf8
port    = 3306
socket  = /tmp/mysql.sock

[mysql]
prompt=”(\u:blog.s135.com:)[\d]> ”
no-auto-rehash

[mysqld]
#default-character-set = utf8
user    = mysql
port    = 3306
socket  = /tmp/mysql.sock
basedir = /usr/local/webserver/mysql
datadir = /data0/mysql/3306/data
open_files_limit    = 10240
back_log = 600
max_connections = 3000
max_connect_errors = 6000
table_cache = 614
external-locking = FALSE
max_allowed_packet = 32M
sort_buffer_size = 2M
join_buffer_size = 2M
thread_cache_size = 300
thread_concurrency = 8
query_cache_size = 32M
query_cache_limit = 2M
query_cache_min_res_unit = 2k
default-storage-engine = MyISAM
default_table_type = MyISAM
thread_stack = 192K
transaction_isolation = READ-COMMITTED
tmp_table_size = 246M
max_heap_table_size = 246M
long_query_time = 1
log_long_format
log-bin = /data0/mysql/3306/binlog
binlog_cache_size = 4M
binlog_format = MIXED
max_binlog_cache_size = 8M
max_binlog_size = 512M
expire_logs_days = 7
key_buffer_size = 256M
read_buffer_size = 1M
read_rnd_buffer_size = 16M
bulk_insert_buffer_size = 64M
myisam_sort_buffer_size = 128M
myisam_max_sort_file_size = 10G
myisam_max_extra_sort_file_size = 10G
myisam_repair_threads = 1
myisam_recover

skip-name-resolve
master-connect-retry = 10
slave-skip-errors = 1032,1062,126,1114,1146,1048,1396

server-id = 1

innodb_additional_mem_pool_size = 16M
innodb_buffer_pool_size = 2048M
innodb_data_file_path = ibdata1:1024M:autoextend
innodb_file_io_threads = 4
innodb_thread_concurrency = 8
innodb_flush_log_at_trx_commit = 2
innodb_log_buffer_size = 16M
innodb_log_file_size = 128M
innodb_log_files_in_group = 3
innodb_max_dirty_pages_pct = 90
innodb_lock_wait_timeout = 120
innodb_file_per_table = 0
[mysqldump]
quick
max_allowed_packet = 32M

④、创建管理MySQL数据库的shell脚本：

vi /data0/mysql/3306/mysql

输入以下内容（这里的用户名admin和密码12345678接下来的步骤会创建）：

#!/bin/sh

mysql_port=3306
mysql_username=”admin”
mysql_password=”12345678″

function_start_mysql()
{
printf “Starting MySQL…\n”
/bin/sh /usr/local/webserver/mysql/bin/mysqld_safe –defaults-file=/data0/mysql/${mysql_port}/my.cnf 2>&1 > /dev/null &
}

function_stop_mysql()
{
printf “Stoping MySQL…\n”
/usr/local/webserver/mysql/bin/mysqladmin -u ${mysql_username} -p${mysql_password} -S /tmp/mysql.sock shutdown
}

function_restart_mysql()
{
printf “Restarting MySQL…\n”
function_stop_mysql
sleep 5
function_start_mysql
}

function_kill_mysql()
{
kill -9 $(ps -ef | grep ‘bin/mysqld_safe’ | grep ${mysql_port} | awk ‘{printf $2}’)
kill -9 $(ps -ef | grep ‘libexec/mysqld’ | grep ${mysql_port} | awk ‘{printf $2}’)
}

if [ "$1" = "start" ]; then
function_start_mysql
elif [ "$1" = "stop" ]; then
function_stop_mysql
elif [ "$1" = "restart" ]; then
function_restart_mysql
elif [ "$1" = "kill" ]; then
function_kill_mysql
else
printf “Usage: /data0/mysql/${mysql_port}/mysql {start|stop|restart|kill}\n”
fi

⑤、赋予shell脚本可执行权限：

chmod +x /data0/mysql/3306/mysql

⑥、启动MySQL：

/data0/mysql/3306/mysql start

⑦、通过命令行登录管理MySQL服务器（提示输入密码时直接回车）：

/usr/local/webserver/mysql/bin/mysql -u root -p -S /tmp/mysql.sock

⑧、输入以下SQL语句，创建一个具有root权限的用户（admin）和密码（12345678）：

GRANT ALL PRIVILEGES ON *.* TO ‘admin’@'localhost’ IDENTIFIED BY ‘12345678′;
GRANT ALL PRIVILEGES ON *.* TO ‘admin’@'127.0.0.1′ IDENTIFIED BY ‘12345678′;

⑨、（可选）停止MySQL：

/data0/mysql/3306/mysql stop

3、编译安装PHP（FastCGI模式）

tar zxvf php-5.2.10.tar.gz
gzip -cd php-5.2.10-fpm-0.5.11.diff.gz | patch -d php-5.2.10 -p1
cd php-5.2.10/
./configure –prefix=/usr/local/webserver/php –with-config-file-path=/usr/local/webserver/php/etc –with-mysql=/usr/local/webserver/mysql –with-mysqli=/usr/local/webserver/mysql/bin/mysql_config –with-iconv-dir=/usr/local –with-freetype-dir –with-jpeg-dir –with-png-dir –with-zlib –with-libxml-dir=/usr –enable-xml –disable-rpath –enable-discard-path –enable-safe-mode –enable-bcmath –enable-shmop –enable-sysvsem –enable-inline-optimization –with-curl –with-curlwrappers –enable-mbregex –enable-fastcgi –enable-fpm –enable-force-cgi-redirect –enable-mbstring –with-mcrypt –with-gd –enable-gd-native-ttf –with-openssl –with-mhash –enable-pcntl –enable-sockets –with-ldap –with-ldap-sasl –with-xmlrpc –enable-zip –enable-soap –without-pear
make ZEND_EXTRA_LIBS=’-liconv’
make install
cp php.ini-dist /usr/local/webserver/php/etc/php.ini
cd ../
curl http://pear.php.net/go-pear | /usr/local/webserver/php/bin/php

4、编译安装PHP5扩展模块

tar zxvf memcache-2.2.5.tgz
cd memcache-2.2.5/
/usr/local/webserver/php/bin/phpize
./configure –with-php-config=/usr/local/webserver/php/bin/php-config
make
make install
cd ../

tar jxvf eaccelerator-0.9.5.3.tar.bz2
cd eaccelerator-0.9.5.3/
/usr/local/webserver/php/bin/phpize
./configure –enable-eaccelerator=shared –with-php-config=/usr/local/webserver/php/bin/php-config
make
make install
cd ../

tar zxvf PDO_MYSQL-1.0.2.tgz
cd PDO_MYSQL-1.0.2/
/usr/local/webserver/php/bin/phpize
./configure –with-php-config=/usr/local/webserver/php/bin/php-config –with-pdo-mysql=/usr/local/webserver/mysql
make
make install
cd ../

tar zxvf ImageMagick.tar.gz
cd ImageMagick-6.5.1-2/
./configure
make
make install
cd ../

tar zxvf imagick-2.2.2.tgz
cd imagick-2.2.2/
/usr/local/webserver/php/bin/phpize
./configure –with-php-config=/usr/local/webserver/php/bin/php-config
make
make install
cd ../

5、修改php.ini文件
手工修改：查找/usr/local/webserver/php/etc/php.ini中的extension_dir = “./”
修改为extension_dir = “/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20060613/”
并在此行后增加以下几行，然后保存：
extension = “memcache.so”
extension = “pdo_mysql.so”
extension = “imagick.so”

再查找output_buffering = Off
修改为output_buffering = On

自动修改：若嫌手工修改麻烦，可执行以下shell命令，自动完成对php.ini文件的修改：

sed -i ’s#extension_dir = “./”#extension_dir = “/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20060613/”\nextension = “memcache.so”\nextension = “pdo_mysql.so”\nextension = “imagick.so”\n#’ /usr/local/webserver/php/etc/php.ini
sed -i ’s#output_buffering = Off#output_buffering = On#’ /usr/local/webserver/php/etc/php.ini
sed -i “s#; always_populate_raw_post_data = On#always_populate_raw_post_data = On#g” /usr/local/webserver/php/etc/php.ini

6、配置eAccelerator加速PHP：

mkdir -p /usr/local/webserver/eaccelerator_cache
vi /usr/local/webserver/php/etc/php.ini

按shift+g键跳到配置文件的最末尾，加上以下配置信息：

[eaccelerator]
zend_extension=”/usr/local/webserver/php/lib/php/extensions/no-debug-non-zts-20060613/eaccelerator.so”
eaccelerator.shm_size=”64″
eaccelerator.cache_dir=”/usr/local/webserver/eaccelerator_cache”
eaccelerator.enable=”1″
eaccelerator.optimizer=”1″
eaccelerator.check_mtime=”1″
eaccelerator.debug=”0″
eaccelerator.filter=”"
eaccelerator.shm_max=”0″
eaccelerator.shm_ttl=”3600″
eaccelerator.shm_prune_period=”3600″
eaccelerator.shm_only=”0″
eaccelerator.compress=”1″
eaccelerator.compress_level=”9″

7、创建www用户和组，以及供blog.s135.com和www.s135.com两个虚拟主机使用的目录：

/usr/sbin/groupadd www
/usr/sbin/useradd -g www www
mkdir -p /data0/htdocs/blog
chmod +w /data0/htdocs/blog
chown -R www:www /data0/htdocs/blog
mkdir -p /data0/htdocs/www
chmod +w /data0/htdocs/www
chown -R www:www /data0/htdocs/www

8、创建php-fpm配置文件（php-fpm是为PHP打的一个FastCGI管理补丁，可以平滑变更php.ini配置而无需重启php-cgi）：
在/usr/local/webserver/php/etc/目录中创建php-fpm.conf文件：

rm -f /usr/local/webserver/php/etc/php-fpm.conf
vi /usr/local/webserver/php/etc/php-fpm.conf

输入以下内容（如果您安装 Nginx + PHP 用于程序调试，请将以下的0改为1，以便显示PHP错误信息，否则，Nginx 会报状态为500的空白错误页）：

All relative paths in this config are relative to php’s install prefix

Pid file
/usr/local/webserver/php/logs/php-fpm.pid

Error log file
/usr/local/webserver/php/logs/php-fpm.log

Log level
notice

When this amount of php processes exited with SIGSEGV or SIGBUS …
10

… in a less than this interval of time, a graceful restart will be initiated.
Useful to work around accidental curruptions in accelerator’s shared memory.
1m

Time limit on waiting child’s reaction on signals from master
5s

Set to ‘no’ to debug fpm
yes

Name of pool. Used in logs and stats.
default

Address to accept fastcgi requests on.
Valid syntax is ‘ip.ad.re.ss:port’ or just ‘port’ or ‘/path/to/unix/socket’
127.0.0.1:9000

Set listen(2) backlog
-1

Set permissions for unix socket, if one used.
In Linux read/write permissions must be set in order to allow connections from web server.
Many BSD-derrived systems allow connections regardless of permissions.

0666

Additional php.ini defines, specific to this pool of workers.

/usr/sbin/sendmail -t -i
1

Unix user of processes
www

Unix group of processes
www

Process manager settings

Sets style of controling worker process count.
Valid values are ’static’ and ‘apache-like’
static

Sets the limit on the number of simultaneous requests that will be served.
Equivalent to Apache MaxClients directive.
Equivalent to PHP_FCGI_CHILDREN environment in original php.fcgi
Used with any pm_style.
128

Settings group for ‘apache-like’ pm style

Sets the number of server processes created on startup.
Used only when ‘apache-like’ pm_style is selected
20

Sets the desired minimum number of idle server processes.
Used only when ‘apache-like’ pm_style is selected
5

Sets the desired maximum number of idle server processes.
Used only when ‘apache-like’ pm_style is selected
35

The timeout (in seconds) for serving a single request after which the worker process will be terminated
Should be used when ‘max_execution_time’ ini option does not stop script execution for some reason
‘0s’ means ‘off’
0s

The timeout (in seconds) for serving of single request after which a php backtrace will be dumped to slow.log file
‘0s’ means ‘off’
0s

The log file for slow requests
logs/slow.log

Set open file desc rlimit
65535

Set max core size rlimit
0

Chroot to this directory at the start, absolute path

Chdir to this directory at the start, absolute path

Redirect workers’ stdout and stderr into main error log.
If not set, they will be redirected to /dev/null, according to FastCGI specs
yes

How much requests each process should execute before respawn.
Useful to work around memory leaks in 3rd party libraries.
For endless request processing please specify 0
Equivalent to PHP_FCGI_MAX_REQUESTS
102400

Comma separated list of ipv4 addresses of FastCGI clients that allowed to connect.
Equivalent to FCGI_WEB_SERVER_ADDRS environment in original php.fcgi (5.2.2+)
Makes sense only with AF_INET listening socket.
127.0.0.1

Pass environment variables like LD_LIBRARY_PATH
All $VARIABLEs are taken from current environment

$HOSTNAME
/usr/local/bin:/usr/bin:/bin
/tmp
/tmp
/tmp
$OSTYPE
$MACHTYPE
2

9、启动php-cgi进程，监听127.0.0.1的9000端口，进程数为200（如果服务器内存小于3GB，可以只开启64个进程），用户为www：

ulimit -SHn 65535
/usr/local/webserver/php/sbin/php-fpm start

注：/usr/local/webserver/php/sbin/php-fpm还有其他参数，包括：start|stop|quit|restart|reload|logrotate，修改php.ini后不重启php-cgi，重新加载配置文件使用reload。

三、安装Nginx 0.8.15
1、安装Nginx所需的pcre库：

tar zxvf pcre-7.9.tar.gz
cd pcre-7.9/
./configure
make && make install
cd ../

2、安装Nginx

tar zxvf nginx-0.8.15.tar.gz
cd nginx-0.8.15/
./configure –user=www –group=www –prefix=/usr/local/webserver/nginx –with-http_stub_status_module –with-http_ssl_module
make && make install
cd ../

3、创建Nginx日志目录

mkdir -p /data1/logs
chmod +w /data1/logs
chown -R www:www /data1/logs

4、创建Nginx配置文件
①、在/usr/local/webserver/nginx/conf/目录中创建nginx.conf文件：

rm -f /usr/local/webserver/nginx/conf/nginx.conf
vi /usr/local/webserver/nginx/conf/nginx.conf

输入以下内容：

user  www www;
worker_processes 8;
error_log  /data1/logs/nginx_error.log  crit;
pid        /usr/local/webserver/nginx/nginx.pid;

#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;

events
{
use epoll;
worker_connections 65535;
}

http
{
include       mime.types;
default_type  application/octet-stream;

#charset  gb2312;

server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 8m;

sendfile on;
tcp_nopush     on;

keepalive_timeout 60;

tcp_nodelay on;

fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;

gzip on;
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types       text/plain application/x-javascript text/css application/xml;
gzip_vary on;

#limit_zone  crawler  $binary_remote_addr  10m;

server
{
listen       80;
server_name  blog.s135.com;
index index.html index.htm index.php;
root  /data0/htdocs/blog;

#limit_conn   crawler  20;

location ~ .*\.(php|php5)?$
{
#fastcgi_pass  unix:/tmp/php-cgi.sock;
fastcgi_pass  127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires      30d;
}

location ~ .*\.(js|css)?$
{
expires      1h;
}

log_format  access  ’$remote_addr – $remote_user [$time_local] “$request” ‘
‘$status $body_bytes_sent “$http_referer” ‘
‘”$http_user_agent” $http_x_forwarded_for’;
access_log  /data1/logs/access.log  access;
}

server
{
listen       80;
server_name  www.s135.com;
index index.html index.htm index.php;
root  /data0/htdocs/www;

location ~ .*\.(php|php5)?$
{
#fastcgi_pass  unix:/tmp/php-cgi.sock;
fastcgi_pass  127.0.0.1:9000;
fastcgi_index index.php;
include fcgi.conf;
}

log_format  wwwlogs  ’$remote_addr – $remote_user [$time_local] “$request” ‘
‘$status $body_bytes_sent “$http_referer” ‘
‘”$http_user_agent” $http_x_forwarded_for’;
access_log  /data1/logs/wwwlogs.log  wwwlogs;
}

server
{
listen  80;
server_name  status.blog.s135.com;

location / {
stub_status on;
access_log   off;
}
}
}

②、在/usr/local/webserver/nginx/conf/目录中创建fcgi.conf文件：

vi /usr/local/webserver/nginx/conf/fcgi.conf

输入以下内容：

fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
fastcgi_param  SERVER_SOFTWARE    nginx;

fastcgi_param  QUERY_STRING       $query_string;
fastcgi_param  REQUEST_METHOD     $request_method;
fastcgi_param  CONTENT_TYPE       $content_type;
fastcgi_param  CONTENT_LENGTH     $content_length;

fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
fastcgi_param  REQUEST_URI        $request_uri;
fastcgi_param  DOCUMENT_URI       $document_uri;
fastcgi_param  DOCUMENT_ROOT      $document_root;
fastcgi_param  SERVER_PROTOCOL    $server_protocol;

fastcgi_param  REMOTE_ADDR        $remote_addr;
fastcgi_param  REMOTE_PORT        $remote_port;
fastcgi_param  SERVER_ADDR        $server_addr;
fastcgi_param  SERVER_PORT        $server_port;
fastcgi_param  SERVER_NAME        $server_name;

# PHP only, required if PHP was built with –enable-force-cgi-redirect
fastcgi_param  REDIRECT_STATUS    200;

5、启动Nginx

ulimit -SHn 65535
/usr/local/webserver/nginx/sbin/nginx

四、配置开机自动启动Nginx + PHP

vi /etc/rc.local

在末尾增加以下内容：

ulimit -SHn 65535
/usr/local/webserver/php/sbin/php-fpm start
/usr/local/webserver/nginx/sbin/nginx

五、优化Linux内核参数

vi /etc/sysctl.conf

在末尾增加以下内容：

# Add
net.ipv4.tcp_max_syn_backlog = 65536
net.core.netdev_max_backlog =  32768
net.core.somaxconn = 32768

net.core.wmem_default = 8388608
net.core.rmem_default = 8388608
net.core.rmem_max = 16777216
net.core.wmem_max = 16777216

net.ipv4.tcp_timestamps = 0
net.ipv4.tcp_synack_retries = 2
net.ipv4.tcp_syn_retries = 2

net.ipv4.tcp_tw_recycle = 1
#net.ipv4.tcp_tw_len = 1
net.ipv4.tcp_tw_reuse = 1

net.ipv4.tcp_mem = 94500000 915000000 927000000
net.ipv4.tcp_max_orphans = 3276800

#net.ipv4.tcp_fin_timeout = 30
#net.ipv4.tcp_keepalive_time = 120
net.ipv4.ip_local_port_range = 1024  65535

使配置立即生效：

/sbin/sysctl -p

六、在不停止Nginx服务的情况下平滑变更Nginx配置
1、修改/usr/local/webserver/nginx/conf/nginx.conf配置文件后，请执行以下命令检查配置文件是否正确：

/usr/local/webserver/nginx/sbin/nginx -t

如果屏幕显示以下两行信息，说明配置文件正确：
the configuration file /usr/local/webserver/nginx/conf/nginx.conf syntax is ok
the configuration file /usr/local/webserver/nginx/conf/nginx.conf was tested successfully

2、这时，输入以下命令查看Nginx主进程号：

ps -ef | grep “nginx: master process” | grep -v “grep” | awk -F ‘ ‘ ‘{print $2}’

屏幕显示的即为Nginx主进程号，例如：
6302
这时，执行以下命令即可使修改过的Nginx配置文件生效：

kill -HUP 6302

或者无需这么麻烦，找到Nginx的Pid文件：

kill -HUP `cat /usr/local/webserver/nginx/nginx.pid`

七、编写每天定时切割Nginx日志的脚本
1、创建脚本/usr/local/webserver/nginx/sbin/cut_nginx_log.sh

vi /usr/local/webserver/nginx/sbin/cut_nginx_log.sh

输入以下内容：

#!/bin/bash
# This script run at 00:00

# The Nginx logs path
logs_path=”/usr/local/webserver/nginx/logs/”

mkdir -p ${logs_path}$(date -d “yesterday” +”%Y”)/$(date -d “yesterday” +”%m”)/
mv ${logs_path}access.log ${logs_path}$(date -d “yesterday” +”%Y”)/$(date -d “yesterday” +”%m”)/access_$(date -d “yesterday” +”%Y%m%d”).log
kill -USR1 `cat /usr/local/webserver/nginx/nginx.pid`

2、设置crontab，每天凌晨00:00切割nginx访问日志

crontab -e

输入以下内容：

00 00 * * * /bin/bash  /usr/local/webserver/nginx/sbin/cut_nginx_log.sh

附：文章修改历史

● [2009年05月06日] [Version 5.0] 在4.14版本的基础上重新撰写本文，支持PHP 5.2.9，增加MySQL配置过程

● [2009年05月10日] [Version 5.1] 增加压力测试方法。

● [2009年05月20日] [Version 5.2] Nginx升级到0.7.58版本；PHP编译选项增加：–with-xmlrpc –enable-zip。

● [2009年06月10日] [Version 5.3] Nginx升级到0.7.59版本；MySQL升级到5.1.35版本。

● [2009年06月26日] [Version 5.4] Nginx升级到0.7.61版本；PHP升级到5.2.10版本；PCRE升级到7.9版本；PHP增加soap扩展；关闭了PHP的PEAR；优化sysctl配置。

● [2009年09月18日] [Version 5.5] Nginx升级到0.8.15版本；PCRE升级到7.9版本；解决PHP 5.2.10 的PEAR问题。

房贷：等额本息和等额本金有什么区别？

影之迷惑 — Mon, 25 Jan 2010 14:39:42 +0000

等额本息：本金逐月递增，利息逐月递减，月还款数不变。

等额本金：本金保持相同，利息逐月递减，月还款数递减。适合于有计划提前还贷。

利息少的是等额本金方式的还款。

目前，银行的个人住房货款的还款方式主要有等额本息和等额本金两种方式。等额本息还贷方式每月按相同金额还贷款本息，月还款中利息逐月递减，本金逐月递增；等额本金还贷方式还款金额递减，月还款中本金保持相同金额，利息逐月递减。

二者的主要区别在于，前者每期还款金额相同，即每月本金加利息总额相同，客户还贷压力均衡，但利息负担相对较多；后者又叫‘递减还款法’,每月本金相同,利息不同,前期还款压力大,但以后的还款金额逐渐递减,利息总负担较少。

现在知道这两种方式的人们几乎都认为选择等额本金划算,因为选择等额本息多支付了本息,而等额本金则少支付利息,而且认为一旦提前还贷时，会发现等额本息的还款，原来自己前期还的钱绝大部分是利息，而不是本金，由此会觉得吃亏很多。

总体来看，“等额本息”是会比“递减还款”多付一些利息。以1万元20年期贷款为标准，前者会比后者多支付800多元的利息。40万20年期的贷款，则要多支付800×40=32000元的利息。看似银行多收了利息，但实际上，等额本金还款法随着本金的递减，银行可以加速还款，尽快回笼资金，降低经营风险在这一点上是有利于防范风险的。
在实际操作中,等额本息更利于客户的掌握,方便客户还款.事实上有很多客户在进行比较后,还是愿意选择了“等额还款方式”，因为这钟方式月还款额固定，便于客户记忆，还款压力均衡，实际与等额本金差别不大。因为这些客户也同样看到了因为时间使资金的使用价值产生了不同，简单说就是等额本息还款法由于自己占用银行的本金时间长，自然就要多付些利息；等额本金还款法随着本金的递减，自己占用银行的本金时间短，利息也自然减少，并不存在自己吃亏，而银行赚取更多利息的问题。

实质上，两种贷款方式是一致的，没有优劣之分。只有在需求的不同时，才有不同的选择。

因为等额本息还款法还款压力均衡但需多付些利息，所以适合有一定积蓄，但收入可能持平或下降、生活负担日益加重、并且没有打算提前还款的人群。
而等额本金还款法，由于贷款人本金归还得快，利息就可以少付，但前期还款额度大，因此适合当前收入较高者、或预计不久将来收入大幅增长，.准备提前还款人群，.则较为有利。

CSS圆角—透明圆角化背景图片

影之迷惑 — Thu, 21 Jan 2010 03:11:53 +0000

作者：by0001　来自：蓝色理想
原文：http://www.blueidea.com/tech/web/2010/7353.asp

序言：第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。

在上面的案例中，我只给出最为原始的圆角框模型，它还是存在一些不足之处。比如不能将图片应用到圆角框内。而在本例中，我会在上面的基础上作出一些创新。就是将背景图片也圆角化，好像目前在网络上还没有这样的功能应用，我只见过用js方式来实现的，可以参看我的《超圆滑圆角框的半完美解决方案》一文中后面几种JS方案。但是纯CSS方式的实现可是我独家所创，如有雷同，只能说英雄所见略同。呵呵！

还是先看看最终的效果图，让大家有一个大概的印象。

图一

像这种小面积布局在网页设计中应用得很普遍，但目前网络流行的作法都是采用图片的方式来实现的，将图片按上中下切成三块内容，然后使用三个同级的DIV或SPAN容器各自填充一张图，但是这种方法有一个最大的毛病：不能自动适应宽度的变化，一般做法都是采用固定宽度的方式，这是由于图片的宽度决定的。

当然对于一些比较有经验的人员来说，可以采用九宫格布局（可参看我的另一篇文章《九宫格基本布局》）方式或者滑动门方式来做到自适应宽度的变化，九宫格一般都需要用到八张图片，而滑动门虽然只用一张图片，但为了适应宽度的变化，这张图片一般都做得很大。
而我现在独创的这种方法可以完全做到适应不同宽度的需要，并且全部兼容所有的浏览器，而所需要的仅仅是一张很小的水平平辅的背景图片而已。

基本原理：

我们都知道图片是方方正正的，不可能做出圆角效果，那么我们如何来做外圆透明的图片呢？其实道理说明了也就是一件很简单的事情，你看过下面的放大示意图后可能就会“哦”地一声，原来不过如此……

图二

是的，看到这个效果图你会一目了然，可是要想到这个方法，我却浪费了不少脑细胞。呵呵！

实现这种方法原理很简单：在每个b标签中各加载一次同样的图片，并结合背景定位background-position方式来达到效果。我们知道，同一张图片加载多少次对于性能的影响并不大，因为这张图片已经被电脑缓存到本地，和用css sprites合并图片一样的道理。

但是需要注意的是：每个B标签加载图片的定位是不一样的。

背景图片定位原理：　　

b1标签位于第一位，它主要用来描绘上边框线，所以它不需要加载背景图片。

b2标签位于第二位，它是第一个需要加载背景图片的，但是不需要图片负偏移，所以直接居左居顶定位就可以了。

.b2{background-position:left top;}

b3标签位于第三位，它需要加载背景图片，让它的背景图片向上负偏移b2的高度值就可以，也就是1px。

.b3{background-position:left -1px;}

b4位于第四位，所以它向上负偏移b2+b3高度值的和，为2px.。

.b4{background-position:left -2px;}

H3标签位于第五位，所以它的背景图片需要向上负偏移b2+b3+b4高度值的各，也就是4px；

h3{background-position:left -4px;}

这样，b2、b3、b4、h3的图片叠加起来和原始图片上下渐变的效果完全重合，如同一张图片，这样就达到模拟圆角图片的效果。
怎么样，原理够简单明了吧！

原理清楚后，要实现起来也就是一件水到渠成的事！

HTML结构层：

如同我们在第一章中模型所见，保持结构不变。

CSS样式层：（只写关键代码）

将上面的几句代码进行合并，如下所示：

.sharp b.b2{background-position:left top;} .sharp b.b3{background-position:left -1px;} .sharp b.b4{background-position:left -2px;} .sharp .content h3{background-position:left -4px;}

和第一章中同样的道理，我们肯定要在各个不同的块框中有不同的背景图片的变化，也就是说，我们也要实现不同的换肤方案，当一个页面要多次调用同一个圆角框时，也可以让它们有些丰富的变化。实现不同的风格。OK，没问题，你只需要简单的将下面的样式中的背景图片的路径改变一下就可以了。

.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}

你可以实现不同的颜色方案，就看你的设计师给你多少张不同图片了。

一种风格的定制也是一件简单的事情：

*颜色方案一,绿色风格----------------------------------------*/ /*边框色*/ .color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6, .color1 .b7,.color1 .content{border-color:#A0C044;} .color1 .b1,.color1 .b8{background:#A0C044;} .color1 h3{border-bottom:1px #679800 solid;} /*图片路径*/ .color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;} /*文字内容背景色*/ .color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}

你只需要复制上面的代码，简单修改一下边框色，背景色，图片路径就变成你想要的风格了，是不是很简单呢？然后在你想应用样式的容器上定义这个color1类名即可。

在我的演示模型中，我定义了9种风格的变化，看看有没有适合你需要，直接复制就可以使用了，祝您用得开心！

为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

压缩包下载

CSS圆角—基本圆角框

影之迷惑 — Thu, 21 Jan 2010 02:50:03 +0000

作者：by0001　来自：蓝色理想

原文：http://www.blueidea.com/tech/web/2010/7347.asp

序言：在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。

纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？

实现原理：

纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

图一

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

1、Html结构层：


文字内容



b1~b4构成上面的左右两个圆角结构体，而b5~b8则构建了下面左右两个圆角结构体。而content则是内容主体，将这些全部放在一个大的容器中，并给它的一个类名sharp，用来设置通用的样式。再给它叠加了一个color1类名，这个类名用来区别不同的颜色方案，因为可能会有不同颜色的圆角框。

2、CSS样式：

.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;} .b1,.b8{margin:0 5px;} .b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;} .b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;} .b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}

将每个b标签都设置为块状结构，并定义其高度为1像素，超出部分溢出隐藏。从上面样式中我们已经看到margin值的设置，是从大到小减少的。而b1和b8的设置是一样，已经将它们合并在一起了，同样的原理，b2和b7、b3和b6、b4和b5都是一样的设置。这是因为上面两个圆和下面的两个圆是一样，只是顺序是相对的，所以将它合并设置在一起。有利于减少CSS样式代码的字符大小。后面三句和第二句有点不同的地方是多设置了左右边框的样式，但是在这儿并没有设置边框的颜色，这是为什么呢，因为这个边框颜色是我们需要适时变化，所以将它们分离出来，在下面的代码中单独定义。

接下我们设置内容区的样式：

.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只设置左右边框线，但是不设置颜色值，它和上面八个b标签一起构成圆角框的外边框轮廓。

往往在一个页面中存在多个圆角框，而每个圆角框有可能其边框颜色各不相同，有没有可能针对不同的设计制作不同的换肤方案呢，答案是有的。在我的这个应用中，可以换不同的皮肤颜色，并且设置颜色方案也并不是一件很难的事情。下面看看我是如何将它们应用到不同的颜色的。

在上面的样式设计中，我已经给颜色方案留下了可以扩展的空间。我将所有的涉及到边框色的类名全部集中在一起，用群选择符给它们设置一个边框的颜色就可以了。如下所示：

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6, .color1 .b7,.color1 .content{}{border-color:#96C2F1;} .color1 .b1,.color1 .b8{background:#96C2F1;}

注意：需要将这两句的颜色值设置为一样的，第二句中虽说是设置的background背景色，但它同样是上下边框线的颜色，这一点一定要记住。因为b1和b8并没有设置border，但它的高度值为1px，所以用它的背景色就达到了模拟上下边框的颜色了。
现在已经将一个圆角框描述出来了，但是有一个问题要注意，就是内容区的背景色，因为这儿是存载文字主体的地方。所以还需要加入下面这句话，也是群集选择符来设置圆角内的所有背景色。

.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5, .color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}

这儿除了b1和b8外，其它的标签都包含进来了，并且包括content容器，将它们的背景色全部设置一个颜色，这样除了线框外的所有地方都成为一种颜色了。在这儿我也用到包含选择符，给它们都加了一个color1，这是颜色方案1的类名，依照这个原理可以设置不同的换肤方案。

好了，我们将上面的所有代码集中起来，就完成一个纯CSS圆角框的实例模型，在源码中，我设置了六套颜色方案，其它的颜色方案就看你的了。

下面是源码演示后的截图：

图二

为了演示效果，本模型的宽度值全部采用百分比实现的，你可以随意伸缩宽度，看看它能否适应弹性的变化。

本模型在以下浏览器中完美通过：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。

压缩包下载

MyEclipse 8.0 GA 下载合集

影之迷惑 — Wed, 20 Jan 2010 05:14:20 +0000

MyEclipse官方放出了最新版本的MyEclipse 8.0 GA 系列下载(国内无法访问MyEclipse站点需代理）。直接复制下载链接地址到下载工具中。下载后请使用MD5校验工具校验下文件的有效性。

MyEclipse 8.0 GA Windows 版本下载，支持 window 7/Vista/XP/NT/2000/98

download

MyEclipse 8.0 GA Windows 版文件大小：782.47 MB

MyEclipse 8.0 GA Windows 版MD5 : 3ace64b656a7ca57f1628633d87d167b

MyEclipse 8.0 GA Linux 版本下载(支持32位Linux版本)

download

MyEclipse 8.0 GA Linux 版（32位）文件大小：818.18 MB

MyEclipse 8.0 GA Linux 版（32位）MD5 : 32Bit:8c2404849a638a139855e4c2a12bd719

MyEclipse 8.0 GA Linux 版本下载(支持64位Linux版本)

download

MyEclipse 8.0 GA Linux 版（64位）文件大小：818.18 MB

MyEclipse 8.0 GA Linux 版（64位）MD5 : 64Bit:79fd08a2c57d30aa4d58b27d61675bb0

MyEclipse 8.0 GA Mac OS/X版本下载

download

MyEclipse 8.0 GA Mac OS/X版文件大小：722.15 MB

MyEclipse 8.0 GA Mac OS/X版 MD5 : 9a119fc2219eebbc2bd28d66919e577f

MyEclipse 8.0 GA 归档升级版本下载

download

MyEclipse 8.0 GA 归档升级版本文件大小：661.67 MB

MyEclipse 8.0 GA 归档升级版本 MD5 : 50a87f85f63179aad44299518d9bb441