CSS fixed 定位( FF / IE6 )

fixed 定位主要是以 window 物件區塊做定位依據，所以不會隨頁面捲動而變動定位。

以往要達成這種模式的定位都要利用 JavaScript 的 onscroll 事件去達成，是蠻吃重的一種方法，而且流暢度也不好，會有閃爍的現象。

利用 fixed 定位可以簡化 JavaScript 的開發和負擔，而且又穩定且簡單設定。

body{
    height:1200px;
    /* prevent screen flash in IE6(解決 IE6 不正常閃爍) */
    background:url(nothing.txt) white fixed;
}
div{
    background:#FF0066;
    border:4px solid #FF9999;
}
/* 水平置中 */
.fixed-center{
    width:100px;
    height:100px;
    position:fixed;
    top:50%;
    left:50%;

    /* 上邊界計算 */
    /* -(border-top-width + padding-top + (height/2) ) */
    /* 或者是整體高除以二(offsetHeight/2) */
    margin-top:-52px;
    /* 左邊界計算 */
    /* -(border-left-width + padding-left + (width/2) ) */
    /* 或者是整體寬除以二(offsetWidth/2) */
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _margin-top:0;
    /* clientHeight:不包含邊匡的區塊高度( padding + height ) */
    /* offsetHeight:包含邊匡的區塊高度( border + padding + height ) */
    _top:expression(documentElement.scrollTop + ( documentElement.clientHeight-this.offsetHeight )/2
    );
}
.fixed-top-center{
    width:100px;
    height:100px;
    position:fixed;
    top:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression(documentElement.scrollTop);
}
.fixed-bottom-center{
    width:100px;
    height:100px;
    position:fixed;

    bottom:0;
    left:50%;
    margin-left:-52px;

    /* position fixed for IE6 */
    _position: absolute;
    _top:expression( documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight );
}

展示頁面(Demo Page)

Come from: http://jax-work-archive.blogspot.com/2008/10/css-fixed-ff-ie6.html

如何优化JavaScript脚本的性能

随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。

语言层次方面

循环

循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本（平时使用时）等价。

而事实上，如何使用这两个循环，则有很大讲究。我在测试中有些很有意思的情况，见附录。最后得出的结论是：

• 如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或--操作符。

• 如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。

举例，假设arr是一个数组，最佳的遍历元素方式为：

for(var i=0, len = arr.length;i<len;i++){...}

或者，如果无所谓顺序的话：

for(var i=arr.length;i>0;i--){...}

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。

不使用Eval

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）

减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var
len=a.length，则就少了一次查询。

字符串连接

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要连接多个字符串，应该少使用+=，如

s+=a;
s+=b;
s+=c;

应该写成

s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下

var buf = new Array();
for(var i = 0; i < 100; i++){
 buf.push(i.toString());
}
var all = buf.join("");

类型转换

类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。

1.
把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" + ) > String() > .toString() > new String()

这条其实和下面的“直接量”有点类似，尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。

2.
浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

另外，和第二节的对象查找中的问题不一样，Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

3.
对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

使用直接量

其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]来直接表达一个数组，以往我们都使用new Array(param,param,...)，使用前者是引擎直接解释的，后者要调用一个Array内部构造器，所以要略微快一点点。

同样，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作

对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。

高级对象

自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询

使用[""]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点，其实这样做

1. 无法保证代码的有效性

2. 字符串操作效率低

所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他

脚本引擎

据我测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多，无论是执行速度还是内存管理上，因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。

总结

本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则：

1. 直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。

2. 尽可能少地减少执行次数，比如先缓存需要多次查询的。

3. 尽可能使用语言内置的功能，比如串链接。

4. 尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

参考

• http://www.umsu.de/jsperf/ 各种浏览器的测试对比

• http://home.earthlink.net/~kendrasg/info/js_opt/

附录1

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

var print;

if(typeof document != "undefined" ){
    print = function(){
  document.write(arguments[0]);
 }
}else if(typeof WScript != "undefined" ){
    print = function(){
        WScript.Echo(arguments[0],arguments[1],arguments[2]);
    }
}

function empty(){
}

function benchmark(f){
    var i = 0;
    var start = (new Date()).getTime();

    while(i < pressure){
        f(i++);
    }
    var end = (new Date()).getTime();
    WScript.Echo(end-start);
}

/*
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = [i,i,i,i,i,i,i,i,i,i];
    i++;
}
end = (new Date()).getTime();
WScript.Echo(end-start);
i=0
start = (new Date()).getTime();
while(i < 60000){
    c = new Array(i,i,i,i,i,i,i,i,i,i);
    i++;
}
var end = (new Date()).getTime();
WScript.Echo(end-start);
*/

function internCast(i){
    return "" + i;
}

function StringCast(i){
    return String(i)
}
function newStringCast(i){
    return new String(i)
}
function toStringCast(i){
    return i.toString();
}
function ParseInt(){
    return parseInt(j);
}
function MathFloor(){
    return Math.floor(j);
}
function Floor(){
    return floor(j);
}
var pressure = 50000;
var a  = "";
var floor = Math.floor;
j = 123.123;
print("-------------\nString Conversion Test");
print("The empty:", benchmark(empty));
print("intern:", benchmark(internCast));
print("String:");
benchmark(StringCast);
print("new String:");
benchmark(newStringCast);
print("toString:");
benchmark(toStringCast);
print("-------------\nFloat to Int Conversion Test");
print("parseInt");
benchmark(ParseInt);
print("Math.floor");
benchmark(MathFloor);
print("floor")
benchmark(Floor);

function newObject(){
    return new Object();
}

function internObject(){
    return {};
}
print("------------\nliteral Test");
print("runtime new object", benchmark(newObject));
print("literal object", benchmark(internObject));

附录2

代码1：

    for(var i=0;i<100;i++){
        arr[i]=0;
    }

代码2：

    var i = 0;
    while(i < 100){
        arr[i++]=0;
    }

代码3：

    var i = 0;
    while(i < 100){
        arr[i]=0;
        i++;
    }

在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过；而在IE
6.0下，测试压力较大的时候（如测试10000次以上）代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小（如5000次），则代码2>代码3>代码1。

代码4：

    var i = 0;
    var a;
    while(i < 100){
        a = 0;
        i++;
    }

代码5：

    var a;
    for(var i=0;i<100;i++){
        a = 0;
    }

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

    var a;
    var i=0;
    while(i<100){
        a=i;
        i++;
    }

代码7：

    var a;
    var i=0;
    while(i<100){
        a=i++;
    }

代码8：

    var a;
    for(var i=0;i<100;i++){
        a = i;
    }

代码9：

    var a;
    for(var i=0;i<100;){
        a = i++;
    }

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6,
8 < 7, 9；

最后我们来看一下空循环

代码10：

    for(var i=0;i<100;i++){   }

代码11：

    var i;
    while(i<100){        i++;    }

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。

Come from: http://shiningray.cn/improve-javascript-performance.html

JavaScript 效率優化

最近開始重視 JavaScript 的效率問題，原因在於感到自己寫的網頁越來越不流暢，其中大量的計算跟無法避免的迴圈愈來愈多，加上 UI 介面跟動態效果的需要，使得瀏覽器的負荷過大，所以這是個需要重視的問題，這直接的影響網站名聲的好壞。

要如何作效率優化呢？因為 JavaScript 是直譯語言，無法透過編譯器加以優化，所以只能從撰寫方式下手。

下面有一個效率很差的例子：

for (var i=0; i<data.length; i++) {
   document.getElementById("link").innerHTML+=data[i];
   document.getElementById("link").hreh+="&"+data[i];
   document.getElementById("link").title+=data[i]+",";
   document.getElementById("link").className+=data[i]+" ";
   document.getElementById("link").name+=data[i]+"_";
}

當中有幾個影響效率的問題：

1. 過渡的使用 getElementById 搜尋 DOM 物件，尤其是在 for 迴圈中
2. 大量的存取 length、innerHTML 等成員變數
3. 多次的存取 data[i]，這跟上一個差不多

這些問題的修改方法：

/*利用暫存變數作處理*/
var temp1='',temp2='',temp3='',temp4='',temp5='';
/*利用 l 紀錄 length 的值，以避免多次存取成員變數*/
for (var i=0,l=data.length; i<l; i++) {
   /*利用 d 紀錄 data[i] 的值，以避免多次存取成員變數*/
   d=data[i];
   temp1+=d;
   temp2+="&"+d;
   temp3+=d+",";
   temp4+=d+" ";
   temp5+=d+"_";
}
/*利用暫存變數紀錄 DOM 物件*/
var link=document.getElementById("link");
link.innerHTML+=temp1;
link.hreh+=temp2;
link.title+=temp3;
link.className+=temp4;
link.name+=temp5;

實驗 1000 筆資料的結果：
第 1 個耗時：5625(msec)
第 2 個耗時：47(msec)
展示(demo)

參考來源：
JavaScript loop performance
随時innerHTMLに書き込んだ場合と一括して書き込んだ場合
innerHTMLとinnerText/textContentの速度比較
getElementByID、変数、withによる参照速度比較
シリアルサーチと正規表現の速度比較

Come from: http://jax-work-archive.blogspot.com/2008/05/javascript.html

前端开发规范

文档作者技术部前台开发组
2008年02月第二次修改

目录
更新日志： 3
第一部分 文档需求、说明及参与人员 4
第二部分 静态页面规范 5
一 静态页面基本规范 5
二 XHTML标准 5
三 图片规范 7
第三部分 CSS样式书写规范 9
一 样式命名规范 9
二 id命名规范 9
三 字体样式的命名 10
四 样式文件结构（样式表构成管理） 10
五 样式书写技巧 10
六 样式书写格式统一 14
七 过长的内容 14
第四部分 注释规范 15
一 HTML注释 15
二 CSS样式注释 15
第五部分 JavaScript脚本语言，Ajax等代码书写规范 16
一 命名规范 16
二 关于变量 16
三 注意事项 16
第六部分 其他重要说明 17
一 前台页面开发本地测试 17
第七部分 静态页面源文件备份规范 18
一项目开发源文件备份规范 18
二项目维护源文件备份规范 18
第八部分 附件 19
附件2：XHTML标准 19



更新日志：
。。。。

第一部分 文档需求、说明及参与人员

文档目的：为规范前台页面开发，便于前台开发成员页面维护，产出高质量的页面。

文档说明：本规范文档一经确认，前台开发所有人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经前台开发人员讨论后决定可以更改此文档。
特别说明：如有不能或不合适按本文档开发的项目或页面，请向主管人员做出说明；

参与人员： 王曼香，蒋楚，胡佳音，周锡波
版本说明：2008年2月版



第二部分 静态页面规范

一 静态页面基本规范
1．静态页面命名应根据项目文档中程序页面文件命名；例如程序页面文件名为index.aspx则静态页面的文件名应为index.html或index.shtml；
2．静态页面XHTML代码应采用自动缩进的形式编写，这样代码层次结构清晰；
3．根据项目文档选择页面编码格式，一般为UTF-8；非项目页面着统一采用UTF-8，特殊项目或有特定需求的按需求确定编码格式；
4．非特殊情况下必须把CSS外部链接放到页面的顶部（<head>… </ head>标签之间）；
5．非特殊情况下必须把JS代码或外部链接放到页面的底部（</ body>标签之前）；
6．书写链接地址时，必须避免重定向，例如：href="http://www.5fad.com/" ,即须在URL地址后面加上“/”；
7．在页面中尽量避免使用XHTML标签的样式属性,即style="…"；
8．尽量减少页面的HTTP请求:
8．1．合并压缩的多个JS到一个文件中；
8．2．合并压缩的多个CSS到一个文件中, 能写成样式背景的图片，必须写在样式中；
9．尽量减少DIV的嵌套层数；
10．统一域名下的项目页面链接使用相对路径（例如：../top100/songtop.aspx），而不是绝对路径(例如：http://www.5fad.com/top100/songtop.aspx)；
11. 给区块代码和套程序的循环的第一条数据加上注释（详见“注释”章节）；

二 XHTML标准
1. 每个页面必须宣告使用哪一种DTD，目前非特殊情况下我们采用XHTML 1.0 Transitional DTD (一般为：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">)，即DreamWeaver 8和cs3版本默认的DTD；
2．所有XHTML代码必须全部小写；
3. XHTML标签的属性值必须用双引号（””）括起来,并且一定要有值,不能简写缩写；
4. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”,例如：<br />等，并且有正确的层次；
5.非特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font等；
6.id属性，同一页面不要重复使用同一id；
7.给重要图片加上alt属性；给重要的元素和截断的元素加上title；
8.所有标签必须进行合理的嵌套，体现文档的结构，并有利于搜索引擎的查询；
9.使用正确的注释方法（详见“注释”章节）；
10. 原则上，我们禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当 网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片 的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。、
11.行距建议用百分比来定义，常用的两个行距的值是line-height: 150%.
12.表格：在排布表格之前，认真思考一个最佳的方案，表格的嵌套尽量控制在三层以内，禁止使用 <colspan> <rowspan>标记，也就是横纵合并单元格，这两个标记会带来许多麻烦。
※ 表格嵌套必须条理清晰一目了然，各区块独立性强，便于修改。主要框架使用绝对像素，以免产生变形。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套 在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲 入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请分段加入<tbody>标记，以便能够使这个大表格分 块显示。
13. flash的嵌入方法错误。<embed>最早是Netscape的私有标签，即使后来为IE所支持，但始终没有被W3C承认，在 XHTML1.0没有<embed>这个标签。W3C主张的是采用<object>标签。为了解决不同浏览器的兼容，有一个变通 的解决方法是2个标签都采用。完整的示例代码如下(flash背景为透明)： <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
关于flash是否符合标准，是一个存在争议的问题。更多说明：参考http://www.blueidea.com/tech/site/2004/1920.asp
14.在页面中碰到有单选框、复选框的时候要给单选框、复选框加上<lable></lable>标签；

15．XHTML标准标签和不赞成使用的标签，参见下表：
XHTML标准标签（如表）：
标签类型 标签
结构 html,head,body,div,span
Meta信息 DOCTYPE,title,link,meta,style
文本 p,h1,h2,h3,h4,h5,h6,strong,em,abbr,acronym,address,bdo,blockquote,
cite,q,code,ins,del,dfn,kbd,pre,samp,var,br
链接 a,base
图片和对象 img,area,map,object,param
列表 ul,ol,li,dl,dt,dd
表格 table,tr,td,th,tbody,thead,tfoot,col,colgroup,caption
表单 form,input,textarea,select,option,optgroup,button,label,fieldset,legend
脚本 script,noscript
表现 b,i,tt,sub,sup,big,small,hr
其他 一般属性
… … … …

◎ XHTML的语法规范可参考附件2：《XHTML标准》

三 图片规范
1.图片统一放在images文件夹下面；
2.图片格式：图片只允许采用gif(256 128 64 32...)jpg(小于80比)压缩格式，要平衡图片质量与文件大小,不过分损失质量情况下尽量减小页面下载数据量。
一般的规律颜色层次变化少的图用gif，反之jpg. 图片切割严格按照像素内容边缘动刀。
3. 图片命名规范
3.1.名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录名应以英文、拼音为主。尽量用一些大家都能看懂的词汇。使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义。
3.2.名称分为头尾两部分，用下划线隔开。
3.3.样例说明见下表：
图片分类 命名
广告、装饰图案等长方形的图片 ad_
标志性的图片 log_
在页面上位置不固定并且带有链接的小图片（按钮） btn_
导航图片 nav_
菜单图片 men_
装饰用的照片取名 pic_
不带链接表示标题的图片取名 tit_
小图标 ico_
背景图片 bg_
… … … …
依照此原则类推，名字要让旁人搞得懂。
尾部分用来表示图片的具体含义。
样例，大家应该能够一眼看明白图片的意义：
ad_sohu.gif、 ad_sina.gif、men_aboutus.gif、men_job.gif、tit_news.gif、log_police.gif、 log_national.gif、pic_people.jpg、pic_hill.jpg、ico_arrow.gif
注：
1.在开发页面的时候我们通常会遇到一些数据图片，比如：MV的缩略图，个性化头像等，这些图片统一使用001.gif，002.jpg，003.gif…依次命名，这些图片在项目正式上线后，应在服务器上删除，备份文件中仍需保留；
2.目前尽量不使用带透明度的PNG格式的图片；

第三部分 CSS样式书写规范

一 样式命名规范
1.class 命名采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；。例如：.tit(标题)，.com_u(评论人)，.l01(某一块的左边)等，
2.样式名称以数字开头无效
3.部分命名解释约定（后期不断更新，以“附件1. 命名解释约定”的形式）：
解释含义 命名
左边(右边) .l（.r）或.l... (.r...)
标题 .tit_...
按钮 .btn_...
文本框 .inp_...
下拉框 .sel_...
文本区域 .tex_...
数据图片 .pic_...
小图标 .ico_...
背景图片 .bg_...
… … … …
注：书写样式并不一定遵循本约定。

二 id命名规范
1.id命名采用英文单词、组合命名，字母应全部小写，多个单词应采用下划线分割。例如：#title(标题)，#comment_user(评论人)等，杜绝使用拼音命名样式；
要求命名：
1.1.直观命名：用位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
#top-panel，#horizontal-nav，#left-side ，#center-column，#right-col
1.2.结构化命名（结构，功能，内容）：用页面区块名称的词汇来对其命名。这种方法使得类以及id的名称如下面所示:
#branding ，#main-nav ，#subnav ，#main-content ，#sidebar
1.3. 惯例:最常用类/id名称的示例列表:
header ,content ,nav ,sidebar ,footer
2.尽量不缩写，除非一看就明白的单词；
3.注意id名称以数字开头无效；

三 字体样式的命名
1.静态文字命名格式：f_颜色数值_字号（字体状态）
例如：.f_f30_12 (#ff3300颜色的12号静态文字)
.f_fd3360_12b (#fd3360颜色的12号粗体静态文字)
2.链接命名格式：l_颜色名称_字号（字体状态）_链接样式或者f_颜色数值_字号（字体状态）_链接样式
例如：.l_ff3300_12 (#ff3300颜色的12号无下划线链接文字)
.l_ff3300_12b(#ff3300颜色的12号粗体无下划线链接文字)
.l_ff3300_12b_u(#ff3300颜色的12号粗体有下划线链接文字)

四 样式文件结构（样式表构成管理）
1.首页一个样式（index.css）包括字体样式等；
2.头部底部样式（top.css）；
3.内页样式
内页样式根据具体的项目、页面布局设计可以考虑一个或多个内页样式，一般考虑如下：
3.1.如果所有内页布局相近可考虑一个内页样式并且加上相应的注释（详见“注释”章节）；
3.2.如果有几个内页布局相近可考虑这几个内页一个样式并且加上相应的注释（详见“注释”章节）；
4.详细页一个样式（detail.css）；

五 样式书写技巧
样式书写技巧主要优点是提高书写效率，节省样式代码，提高网页浏览速度。
1.CSS的缩写
Web 网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的 Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。

为 了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于 CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一 些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。
1.1.CSS属性值的缩写：是一些专用的性质名，用来代替多个相关性质的集合。
通常可以缩写的属性margin，padding，border，font，color，background等等…
CSS 的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间 隙（padding-left）的缩写。

使用速写性质让你能够把多个性质／属性对（property/attribute pair）压缩进CSS样式表的一行代码里。例如，想一想下面的代码：
.sample1 {margin-top: 15px;margin-right: 20px;margin-bottom: 12px;margin-left: 24px;padding-top: 5px;padding-right: 10px;padding-bottom: 4px;padding-left: 8px;border-top-width: thin;border-top-style: solid;border-top-color: #000000;}
将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {margin: 15px 20px 12px 24px;padding: 5px 10px 4px 8px;border-top: thin solid #000000;}
要注意，缩写性质还有多个属性，每一个（属性）都对应一个被组合进入缩写性质的常规性质。属性由空白隔开。
当属性是类似的值的时候，例如用于边框空白性质（margin property）的线性测量的时候，接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部（顶部的边框空白）开始，然后围绕格子（box）按顺时针次序继续。
如果缩写性质的所有属性都是相同的，那么你可以简单地列出单个属性，然后在前面将它复制四遍。因此，下面的两个性质是相等的：
margin: 5px 5px 5px 5px;
margin: 5px;
类似的，你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部／底部和右侧／左侧属性对。
margin: 5px 10px 5px 10px;
margin: 5px 10px;
属性的顺序在它们是不相似的值的时候是不重要的。因此，边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质（outline property）之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。
下面是CSS缩写性质的列表以及它们所表示的常规性质。
background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
border（边框）：边框颜色、边框风格、边框宽度
border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
cue（声音提示）：前提示、后提示
font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
outline（大纲）：大纲颜色、大纲样式、大纲宽度
padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
pause（暂停）：后暂停、前暂停

2.减少空格：减少CSS样式表大小的另一种方法是从文档里删掉大多数无用的空白。换句话说，将每条规则打破放进一行代码里，即把原来插入到代码里用来把每个性质／属性分割到不同行的换行符和缩进符删掉。
例如，下面的代码示例在内容上相同，但是第二个要精炼得多：
h1 {font-size: x-large;
font-weight: bold;
color: #FF0000;}

h1 {font-size: x-large; font-weight: bold; color: #F00}

3.合并具有相同属性和属性值的样式：就是把具有相同属性和属性值的样式的样式名称（样式选择符）写在一起，用逗号隔开(英文状态)；再在后面写样式属性。
例如，下面的代码示例在内容上相同，但是第二个要精炼得多：
.nav1 {font-size:14px; font-weight: 700; color: #F00}
.nav2 {font-size:14px; font-weight: 700; color: #F00}
.nav3 {font-size:14px; font-weight: 700; color: #F00}
等同于：
.nav1, .nav2, .nav3 {font-size:14px; font-weight: 700; color: #F00}
4． 同名样式继承（本部分内容不做强行要求）：就是一个页面调用一个或多个样式表时，在这个或者这些样式表中出现两个（或两个以上）样式名一样的样式。这时这 个样式的属性等于两个（或两个以上）同名样式的属性加起来。如果两个（或两个以上）样式同名样式的属性有重叠，则页面将以就近原则解析样式属性。
例如：
.ls1 {font-size: 9pt;text-align: left;width: 300px;}
.ls1{border: 5px solid #ffcc00}
.ls1{line-height：20px}
等同于：
.ls1 {font-size: 9pt;text-align: left;width: 300px; border: 5px solid #ffcc00; line-height r: 20px }

5.样式重用（本部分内容不做强行要求）：就是再页面中，一个div容器同时调用两个（或两个以上）不同样式，那么这个div容器的样式属性等于两个（或两个以上）样式的属性加起来
例如：
Css：
.ls0{font-size: 9px;text-align: left;width: 300px;}
.ls1{border: 1px solid #ffcc00}
.ls2{border: 1px solid #ff3300}

Div:
<div class=”ls0 ls1”></div>
<div class=”ls0 ls2”></div>


6.样式的解析
6.1.例如以下样式：主要解决样式重名，区分同名样式在不同属性，使样式层次结构更加分明；
写法：
样式名+空格+样式名{…}
例如：
Css：
.top .left { font-size: 12px;text-align: left;width: 300px;}
Div:
<div class=”top”>
<div class=”left”>这里是left被解析为font-size: 9pt;text-align: left;width: 300px</div>
</div>
<div class=”bottom”>
<div class=”left”>这里是left不被解析</div>
</div>

这里left样式表示在且仅在top样式容器下被解析。

7.为了保证不同浏览器上字号保持一致，字号建议用像素px来定义，
8.字体要求：宋体（汉字）或Arial（字母，数字）
六 样式书写格式统一
每条样式写成一行；

七 过长的内容
经常会碰到一些歌曲名，歌手名内容过长，字打不下的情况，这时我们要写样式来限定字符长度；




第四部分 注释规范
发布版本应删除所有的注释：
一 HTML注释
正确的注释规范：<!--这里是注释-->感叹号后面2个横线，结束时2个横线；
不要在注释内容中使“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是错误的:
<!--这里是注释-----------这里是注释-->
<!-----------这里是注释-----------这里是注释----------->
用等号或者空格替换内部的虚线,这样是正确的：
<!--这里是注释============这里是注释-->

二 CSS样式注释

由于CSS+DIV制作页面，样式代码多，布局比较复杂，更便于页面后期的维护，更改，所以有必要在样式上加上注释。注释规法如下：
1.注释规范
/*这里是注释*/
例如：. news {…}/* 这里是高度自动撑 */


第五部分 JavaScript脚本语言，Ajax等代码书写规范

一 命名规范
1.变量命名必须为 小写英文字母；
另外常用临时变量不用这么复杂。如下表
变量类型 变量命名 备注
数字 Number i, j; l, m, n; p, q; x, y 主要用于循环变量和坐标，而且喜欢成对出现
字符串 String s
单个字符 Character c 虽然本质上还是字符串
对象 Object o
错误 Error e 常用于catch

2.类的命名使用骆驼命名规则，就是每个单词的第一个字母要大写，间隔字符为空，即没有间隔；
例如： Account, EventHandler；
3.简写单词不能使用大写名称作为变量名，例如：
getInnerHtml(),getXml(),XmlDocument；
4.方法的命令必须为动词或者是动词短语： obj.getSomeValue()；

二 关于变量
1.变量必须在声明、初始化以后才能使用，即便是 NULL 类型；
2.变量不能产生歧义；
3.相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中；
4.变量应该尽量保持最小的生存周期（即可以用局部变量的地方不要用全局变量）；

三 注意事项
1.每行代码结束必须叫分号（;）；
2.if…else…必须有完整的语法结构，即if(…){…}else{…}；

注：其他JS的规范可参加《JavaScript脚本语言规范》
第六部分 其他重要说明

一 前台页面开发本地测试
在 前台页面开发过程中及开发结束需经过多浏览器测试；目前必须测试的浏览器为：Internet Explorer 6、Internet Explorer 7、Mozilla Firefox 2、Opera 9、Safari；建议测试的浏览器Internet Explorer 5.5。
1. 固定内容测试
测试在多浏览器下显示的页面是否一致，是否在多浏览器下和设计稿保持一致；要求精确到一个像素；
2.脚本测试
测试在多浏览器下脚本代码功能的一致性；
3.不确定内容测试
比如网友留言，网友消息，主页日志等，就是版块内容由网友发布，没有固定的格式，宽高和元素等。这时我们就必须模拟各种网友发布的内容，并测试高度自动撑开，宽度扯开，等等。
4.宽屏或高分辨率显示器测试
最后一项测试是宽屏或高分辨率（目前认为横向1280px分辨率）显示器下测试，测试页面是否错位，位移，等等

第七部分 静态页面源文件备份规范
静态页面源文件中的JS和CSS分为开发版本和发布版本；
一项目开发源文件备份规范
备份人员在项目上线，备份静态页面时，需对静态页面文件夹html重命名，格式为：html_备份时间（时间格式yy-mm-dd ），例如再2007年09月01日对静态页面文件夹html的备份应命名为：html_07-09-01；
其中HTML目录下JS和CSS文件夹中的文件分别为开发版本的JS和CSS文件；HTML目录下JS_Release和CSS_Release目录下分别为发布版本的JS和CSS压缩文件
二项目维护源文件备份规范
◎在项目修改维护期间，备份前台页面源文件的等存放文件夹命名为：html_项目修改日期；例如：前台页面源文件07年9月22日修改，则命名为:html_07_09_22；，以确保新设计稿源文件备份不会覆盖上一版本的设计稿源文件；
◎将vss上的上一版本的静态页面备份目录放入old文件夹；
◎ 前台页面源文件最新的备份文件应与线上的页面保持一致；



第八部分 附件

附件2：XHTML标准
--------------------------------------------------------------------------------------
你可以通过开始书写严格的HTML代码来为你的XHML之路做准备

How To Get Ready For XHTML
如何开始XHTML呢？
XHTML is the next generation of HTML, but it will of course take some time before browsers and other software products are ready for it.
XHTML是HTML的下一代语言，当然，在新的浏览器和其他的相关软件产品出现之前，它将延迟一段时间才能普及。
In the meantime there are some important things you can do to prepare yourself for it. As you will learn from this tutorial, XHTML is not very different from HTML 4.01, so bringing your code up to 4.01 standards is a very good start. Our complete HTML 4.01 reference can help you with that.
其间，有一些重要的事情你能够去做来为它的学习做准备。就像你可以从这篇指南学到的东西一样，XHTML不是与HTML4.01有很多不同的，所以把你的代码改写程4.01标准是一种非常好的开始，我们完整的HTML4.01参考可以帮助你解决这个问题。
In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER make the bad habit of skipping end tags like the </p>.
另外，现在你应该开始用小写字母来书写你的HTML代码了，并且永远不要再像以前那样有跳过像</p>这样的结尾标记的坏习惯了。
Happy coding!
陶醉于编码之中吧！

The Most Important Differences:
两者最主要的不同：
XHTML elements must be properly nested
XHTML documents must be well-formed
Tag names must be in lowercase
All XHTML elements must be closed
XHTML元素必须正确的嵌套
XHTML文档必须有良好的格式
标记的名字必须用小写字母
左右的XHTML元素都必须有关闭符

Elements Must Be Properly Nested
元素（标记）必须被正确的嵌套

In HTML some elements can be improperly nested within each other like this:
在HTML中，有些标记能够非正确的相互嵌套，就像这样:

<b><i>This text is bold and italic</b></i>

In XHTML all elements must be properly nested within each other like this:
在XHTML中所有的标记必须被正确的嵌套，像这样：
<b><i>This text is bold and italic</i></b>

Note: A common mistake in nested lists, is to forget that the inside list must be within an li element, like this:
注意：在列表嵌套的时候大家经常会犯一个错误，那就是忘记了插入的新的列表必须在一个<li>标记中,像这样
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

This is correct:
正确的写法
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.
在这段正确的代码示例中，注意到我们在</ul>之后加了一个</li>标记吗？

Documents Must Be Well-formed
文档必须格式良好
All XHTML elements must be nested within the <html> root element. All other elements can have sub (children) elements. Sub elements must be in pairs and correctly nested within their parent element. The basic document structure is:
所有的XHTML标记必须被嵌套使用在<html>根标记之中。所有其他的标记能有自己的子标记。位于父标记之内的子标记也必须成对的而且正确的嵌套使用。一个网页的基本结构是这样：

<html>
<head> ... </head>
<body> ... </body>
</html>

Tag Names Must Be In Lower Case
标记的名字必须用小写字母
This is because XHTML documents are XML applications. XML is case-sensitive. Tags like <br> and <BR> are interpreted as different tags.
这是因为XHTML文档是XML的应用程序，XML是大小写敏感的，像<br>和<BR>是会被认为为两种不共的标记的。
This is wrong:
错误的：
<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:
正确的

<body>
<p>This is a paragraph</p>
</body>

All XHTML Elements Must Be Closed
所有的XHTML标记都必须有关闭符
Non-empty elements must have an end tag.
非空的标记必须有一个关闭符。
This is wrong:
这是错误的：

<p>This is a paragraph
<p>This is another paragraph

This is correct:
这才是正确的

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed
空标记也必须有关闭符
Empty elements must either have an end tag or the start tag must end with />.
空标记必须有关闭符或以开始符加上 />来结束
This is wrong:
错误的代码

This is a break<br>
Here comes a horizontal rule:<hr>
Here's an image <img src="happy.gif" alt="Happy face">

This is correct:
正确的:

This is a break<br />
Here comes a horizontal rule:<hr />
Here's an image <img src="happy.gif" alt="Happy face" />

IMPORTANT Compatibility Note:
关于兼容性的重要的注释:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol like this: <br />, and this: <hr />.
为了使你的XHTML能够兼容现在的浏览器，你必须在/符号之前加一个特殊的空格,就像这样:<br /><hr />

Come from: http://www.cnblogs.com/yuzhongwusan/archive/2008/08/18/1270450.html

前端工程师应该关注什么

前端开发大众手册(包括工具、网址、经验等)

一直觉得前端开发缺个手册，这是个体力活。不过总得有人来干。

今天闲来无事，把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点，肯定会有很多地方没列到，包括类目的分法也可能考虑不周，所以还请大家积极补充指正，可以直接留言，也可以发邮件给我(sorrycc#gmail.com)。之所以加上“大众”两字，因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句，工具是死的，好不好用得看你会不会用。比如Firefox、Fiddler等，除了显而易见的功能以外，都有一些小的技巧，掌握了可以让你事半功倍。

更新记录：

• [20081025] 第一版

快捷导航：

• 在线工具集
• 常用Firefox插件
• IE下的调试工具
• 参考手册
• 批处理工具
• IDE及其他工具
• Bookmarklet
• 前端开发者社区及权威网站
• 推荐订阅的博客和网站

另外还搞了个Firefox插件《前端开发工具集》，把资源整合到一个菜单下，方便查询。数据放在线上(Google AppEngine)，速度应该会有保证，更新也会比较方便哈，见图。

在线工具集

• 书籍类：
  • Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便
  • Book Go!
  • 原版图书免费下载链接收集站
  • 51CNNET.NET
• JavaScript类：
  • Beautify JavaScript —— JavaScript格式化工具，效果很理想
  • AJAX Libraries API
  • Regex Tester
  • Compressor Packer —— 以前一直用这个压JS，自从有了TBCompressor，就放弃他了
• CSS类：
  • CSS选择器性能测试
  • CSSTidy —— CSS格式化工具
  • CSS Compressor  —— CSS压缩
• 其他：
  • GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用
  • W3Counter
  • WebWait - Benchmark Your Website

常用Firefox插件

• 支付宝安全控件 和 旺旺协议 —— 网购专用，Firefox+浦发网银，无敌了
• Firebug —— 这个不用介绍了吧，附空帏的外部编辑器乱码修正版
  • Firecooike —— 支持Cookie的查看和编辑
  • Jiffy —— 调试性能的，用起来比较麻烦，没试过
  • YSlow —— Why Slow? YUI出品
  • Pixel Perfect —— 把设计稿直接拖到Firefox里进行对比
  • Rainbow for Firebug —— JS高亮，性能不是很理想
• Fiddler 开关 —— 简化在Firefox里切换Fiddler的操作，感谢Taobao UED的空帏同学
• Web Developer
• DevBoi —— 把Html, Dom, JavaScript等手册放在侧栏里，可以自定义增加，快捷键Ctrl+F9。可以在这里找到更多的Package。
• RefControl —— 针对每个站点发送想要的HTTP Referer
• GreaseMonkey —— 看某个网站不爽，写个小脚本来优化下还是不错的
• HttpFox —— 查看当前Http链接状态，类似IE下的HttpWatch
• User Agent Switcher —— 切换User-Agent，同时开发iphone和web版本的时候很方便
• FoxyProxy —— 穿墙工具，配合专业代理公布器使用很和谐

IE下的调试工具

• Fiddle2 —— 非常强悍的一款http流查看工具，默认支持IE，其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述"Fiddler 开关"进行快速切换。支持插件。
• IE Developer Toolbar —— 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能，IE8自带了一个加强版的。
• Microsoft Script Debugger + Companion.JS —— 调试JS用，虽然报错还是有误差，但是我已经满足了。安装顺序是：Microsoft Script Debugger，Companion.JS，在"IE选项-高级"里取消禁用脚本调试。
• 多版本IE共存两种方案：
  • IE7/8 + IE Tester —— 大众型配置，可以基本满足日常需要。
  • IE6 + Internet Explorer Collection —— 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代，我还是推荐这种方案，因为只有神奇的原装IE 6，才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话，建议再装个IE 8 + IE Tester，因为IE 8下的Developer Toolbar还是有很大改进的，调试起来会方便一些。
• 以下三个软件相对不重要些：
  • HttpWatch —— http流查看
  • Instant Source —— 可查看JS生成的源码
  • NetLimiterPro —— 网速限制

参考手册

• XHTML、CSS & DOM W3C 手册 —— 玉伯整理的版本，包含了W3C手册以及其他有用的资料。
  
• 苏昱的CSS中文手册和Dom中文手册
• JScript语言参考
• XML指南
• XMLHTTP参考手册
• jQuery 1.2.6 API和jQuery and jQuery UI Reference 1.2
• Apache 2.2 中文版参考手册在线版
• MySQL 5.1 参考手册 (在线版)
• PHP手册
• YUI Cheatsheet
• Cheat Sheet Roundup - Over 30 Cheatsheets for developers
• 23个Cheatsheet打包下载

批处理工具

• TBCompressor —— 淘宝UED的JS/CSS压缩工具，详见玉伯的介绍
• pngOptimizer —— png优化工具
• jpegTran —— jpeg去冗余meta工具

IDE及其他工具

• Editplus v301 汉化版
• Tortoise SVN
• 移动版本的 Apache + PHP —— 灰常灰常好用，灰常灰常移动，见明城的说明
• …

Bookmarklet(右键另存)

• Firebug Lite —— 官方介绍
• Xray —— 官方介绍
• MRI —— 官方介绍

开发者社区及权威网站

• Mozilla Developer Center (MDC)
• YAHOO! Developer Network (YDN)
• Dev.Opera
• Apple Developer Connection
• MSDN
• IBM Developers中国 (Web 前端开发技术专题)
• WebKit
• AOL Developer Network
• SlideShare - Share PPT —— 在线PPT分享，资源丰富
• Google Doctype —— Web开发人员的百科全书
• W3C (香港，中国)
• Position Is Everything
• HTML Dog
• 维基百科

推荐订阅的博客和网站(排名不分先后)

• 国外
  • 内容聚合：A List Apart，Ajaxian，Smashing Magazine，456 berea street，Script & Style，CSS Globe，CSS-Tricks，SitePoint
  • 团队Blog：Yahoo! User Interface Library (YUI)，IEBlog
  • 个人Blog：John Resig，PPK: QuirksMode，Douglas Crockford，Dean Edwards，Nate Koechley，Julien Lecomte，Eric A. Meyer，Andy Budd，Steven Levithan，HedgerWow
• 国内
  • 内容聚合：Blueidea，无忧脚本，网页设计师(W3CN)，JavaScript教程网
  • 团队Blog：淘宝，口碑，阿里巴巴国际站，阿里巴巴中文站，阿里巴巴中文站前端开发团队(方凳)，阿里妈妈，支付宝，阿里软件，19楼，九天音乐，金蝶与友商网
  • 个人Blog，这里列出的是原创并更新相对频繁的博客，如有遗漏，请告之(sorrycc#gmail.com)：怿飞，手气不错，Realazy，old9(需穿墙术)，沙滩凉鞋(空帏)，射雕(玉伯)，Aether，振之，嗷嗷，JunChen，爆牙齿，秦歌，克军，5key，小志，Rage(正淳)，麦鸡，云烈，老冒，番茄红了，Joyqi，卢力，CSS森林(Ghost)，Twinsen，Gulu77，Rlog，Dlog，子鼠，西风坊 …

Come from: http://www.chencheng.org/blog/2008/10/25/f2e-manual/

前端开发常用工具之开发工具篇

由于近年来RIA相关技术的兴起，WEB前端相关职位已经开始出现在越来越多的互联网公司中，而且越来越受到人们的重视。

现在做前端与前些年（PS设计出效果图，dreamweaver拉出界面，就可以交由后台程序员来套程序了）已经完全不同。由于浏览器运行环境以及RIA项目需求的特殊性，WEB前端所涉及的东西也越来越多，web标准、多浏览器兼容、程序性能、JS内存泄露、js/Ajax的调试...很多很多的问题摆到了WEB前端开发人员身上，因此如果能有一些相关的小工具来辅助我们，相信对于我们的项目开发效率和开发难度上都会有所改善。

尽管本人在前端开发方面还有太多太多的未知，但是在实际开发中也积累了不少各类各样的前端开发用的小工具，有些工具对于我们的项目来说甚至是事半功倍的。

废话不多说，我就分类来分享一下本人所用到一些工具，一来自己做个总结，二来希望能对其它做开发的朋友有所帮助。

这篇文章主要介绍关于开发方面的相关的工具。

1、Aptana

说到Aptana，我想每一位做前端技术的朋友都应该已经知道它的大名了。Aptana是一个基于Eclipse的致力于前端开发（JavaScript）的工具，其功能非常强大，而且是开源项目（Profession版收费）。

它具有以下特点：

1、JavaScript,HTML,CSS代码提示
2、代码结构（大纲）：显示JavaScript,HTML和CSS的代码结构。 
3、代码语法错误提示。 
4、支持Aptana UI自定义和扩展。 
5、支持跨平台。 
6、支持流行AJAX框架的Code Assist功能：AFLAX，Dojo，JQuery，MochiKit，Prototype，Rico，script.aculo.us，Yahoo UI。 
7、JS代码在IE/FF下的断点调试。
8、插件丰富，如AIR、PHP、Ruby、Python等语言的开发插件。
9、内置其自行开发的Ajax应用服务器Aptana Jaxer。

对于纯前端的开发来讲，特别是js的开发来讲，aptana真的是不可多的的好工具。

2、Spket

Spket也是一个基于Eclipse构建起来的开源JS开发工具。可单独使用，也可作为eclipse插件使用。具有强大的JS、Ajax框架代码提示功能。特别是开发Jquery/ExtJS时，使用这个插件可以为开发带来极大的方便，免去记忆和查找大量复杂API之苦。特别推荐使用EXT的开发人员使用，这个工具应该是当前开发extjs的首推工具了，网上甚至有人称其为“Ext开发人员的紫色匕首”。

3、TopStyle

这个工具真是太有名了，我想每位做前端的人可能都要比我还要熟悉它，它是一款功能专注于CSS设计的辅助工具，功能十分丰富，包括：可以选取特定的浏览器或CSS阶层、内建的样式表检查器、内部的预览能力、以颜色标示的编辑器，以及样式预览等，具体可以到这里看介绍：[URL=]http://baike.baidu.com/view/662735.htm[/URL]。

4、JSA 优秀的JS代码压缩混淆工具

这个本来应该不算开发工具，但是不知归到哪里比较好，而且觉得这个对于最终代码发布来说还是一个很有用的工具，因此这里就推荐一下。JSA是用基于JAVA开发的js脚本压缩工具，文件后缀是jar格式的，因此需要你的电脑首先安装了JRE运行环境。该压缩工具采用的压缩算法，可以使你的JS代码达到最小，从而加速页面的加载速度。

5、PlayColor/飞鱼网页尺/SWFDecompiler

这里推荐的三款工具主要使用于界面和美工设计。

PlayColor是一块小巧的取色工具，在网页设计中，特别是参考一些设计资源的配色时，这个工具能为我们带来很大的方便。

飞鱼网页尺是一个用来测量屏幕中两点之间距离的小工具，这个在前端页面的设计制作中也用的比较多，当然可取代的工具也不少，有兴趣的大家可以网上找找。

SWFDecompiler：大名顶顶的Flash反编译工具，有时候我们再网上看到很多有用的Flash，但是由于没有源码，即没办法应用到我们的项目中，又不能学习研究其源码，有了这个工具，你的想法基本就可以实现了。

这几个工具这里就不给出下载地址了，baidu/google一下，N多可以下载的。