• YUIcompressor ^{GUI TBcompressor}
• ESC(ECMAScript cruncher)
• JSmin ^GUI:JsMinGUI
• Dojo ShrinkSafe
• 在线Js压缩
• Google Closure compiler ^{Closure Tools}
• 打包下载地址

Yuicompressor的用法

java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar 
--charset UTF-8 D:\my.js -o D:\my-min.js
	
java -jar D:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar 
--charset UTF-8 D:\my.css -o D:\my-min.css 

具体语法和其他参数参考：julienlecomte Yuicompressor。 也可以写一个批处理文件具体格式，同时处理多个文件，例如:将D盘中的WEBsite文件夹下的所有.CSS , .JS文件进行压缩

@echo off
::设置YUI Compressor启动目录
SET YUIFOLDER=D:\yuicompressor-2.4.2\build
::设置你的JS和CSS根目录，脚本会自动按树层次查找和压缩所有的JS和CSS
SET JSFOLDER=D:\WEBsite
echo look for JavaScript, CSS ...
chdir /d %JSFOLDER%
for /r . %%a in (*.js *.css) do (
@echo It's compressing  %%~a ...
@java -jar %YUIFOLDER%\yuicompressor-2.4.2.jar --charset UTF-8 %%~fa -o %%~fa
 )
@echo OK!
pause & exit

ESC(ECMAScript cruncher)

这个工具只能在Windows下使用,ESC.wsf提供5种压缩级别，从0到4：
Level 0 :: No compression 不对JS文件进行压缩
Level 1 :: Comment removal 移除JS文件中的注释
Level 2 :: Whitespace removal 移除JS文件中的注释及空行（默认，一般选择此级别就足够了）
Level 3 :: Newline removal 移除JS文件中的注释，将所有代码合并为一行
Level 4 :: Variable substitution 提供最新的压缩率，移除JS文件中的注释，将所有代码合并为一行，并且修改JS文件中的变量名。例如：将"big.js"按照压缩级别2来压缩（ESC.wsf默认压缩级别为2）为"min.js"

cscript ESC.wsf -ow min.js big.js 

Google Closure Tools 包含三大块

1. Closure Compiler：这是个JavaScript优化器，可以将JavaScript编译成压缩的、高性能代码。它除了能移除无效代码，重写代码使其最小化且运行更快，还能检查语法、变量引用和类型，并对一些常见JavaScript错误提出警告。同时，它还提供了Closure Inspector（一个Firefox插件）用于调试编译后的代码。FireFox插件
2. Closure Library：这是个广泛的、经过良好测试、模块化且跨浏览器的JavaScript库。在例子中可以看到，Google Docs就是用这个库写的。
3. Closure Templates：这是一个为Java和JavaScript实现的模板系统，可在服务器和客户端使用相同的模板。值得一提的是，JavaScript模板会进行预编译处理，以提高其性能。此外，Gmail和Google Docs也是使用该模板系统。

HTML5 最主要的特性就是加入了更加具有语义的标签比如：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档，和页面元素，比如 header, section, footer, figure等。更详细的介绍可以看下面几篇文章的介绍:
A Preview of HTML 5
Yes, You Can Use HTML 5 Today!
W3C HTML5

但IE不支持HTML5这些有用的标签，HTML5,有两种方法让IE支持HTML5.

1.用 Google Chrome Frame插件

这中方法没什么好说的，参见Google Chrome Frame的说明。

2.用JS将HTML5增加的标签创建出来

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
</script>

查看演示

对于块级元素,宽度默认会继承父级的宽度也就是100%（内联元素没有宽度，即使定义了也无效），而最外层元素HTML的宽度一般是随窗口的改变而改变的(改变窗口大小再点击下面代码)

alert(document.body.offsetWidth + "px")

YAHOO的做法是为满屏的元素（顶部提示条）加上min-width ,IE6不支持此属性不知道是YAHOO是怎么解决的，但是让IE6支持min-width实现方法可以用执行表达式 Expression:

width:expression((documentElement.clientWidth < 400) ? "400px" : "auto" )

另一种方法是用border-width来模拟

* html .minwidth { 
	border-left:600px solid #fff; float:left
}
* html .container { 
	margin-left:-600px; float:left;	 position:relative;
}

查看演示

上图左边是代理对页面的理解，右边是人的理解，代理可读的和人类可读的数据之间的关联是相当少的，结果就是现在的浏览器在解析和处理web数据上的能力很差，因为浏览器更多的功能是负责展示这些信息。因此为了耦合人类和机器的理解可以通过为一些可视化的数据提供一系列的XHML属性而使得这些数据可以被机器所理解，让页面更有语意RDFa就是一种解决办法,（还有微格式-Microformats）

RDFa “Resource Description Framework in attributes” 即资源描述框架，其应用格式可以参见W3C。例如为了表明h2代表页面的标题而h3代表作者可以用RDFa这样描述：

<div xmlns:dc="http://purl.org/dc/elements/1.1/">
   <h2 property="dc:title">Marking up content with RDFa</h2>
   <h3 property="dc:creator">Lefter</h3>
</div>

为什么要用dc:creator和dc:title而不简单地用creator和title呢？这是因为XHTML并没有为这两个概念保留关键词；而xmlns:dc="http://purl.org/dc/elements/1.1/ 个人理解有点类似XML的命名空间,RDFa还提供了@property 来自定义属性因此也可以简写为：

<h2 property="title">RDFa: Now everyone can have an API</h2>
<h3 property="creator">Lefter</h3>

• 增强的搜索功能
• 用户自定义，可扩展性
• 数据再利用性
• 自我控制
• 模块化架构
• 更具可访问性

• W3C RDFa in XHTML
• W3C xhtml rdfa primer
• RDFa for HTML Authors
• alistapart introduction tordfa
• XML introduction tordfa
• Google About RDFa
• wikipedia

XBLeXtensible Bindings Language也即是可扩展绑定语言,有点类似IE的HTC,HTC在CSS中的引用格式为：

p{behavior:url(test.htc)}

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

然后就可以通过Firefox的私有属性-moz-binding 将一个元素关联到一个XBL文件中的指定项上:

p {
    -moz-binding:(url('lefter.net/demo/wordwrap.xml.xml#wordwrap');
}

1. FireFox私有属性
2. Firefox XBL
3. Emulating CSS word-wrap for Mozilla/Firefox
4. Cross Browser Word Breaker
5. 连续字体换行的解决方案

1.用CSS执行表达式

*{margin:0;padding:0;}
* html,* html body{ 
	background-image:url(about:blank);
 	background-attachment:fixed;
}
* html .fixed{
    position:absolute;
    bottom:auto;
    top:expression(eval(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.offsetHeight-
    (parseInt(this.currentStyle.marginTop,10)||0)-
    (parseInt(this.currentStyle.marginBottom,10)||0)));
}      
.fixed{
    position:fixed;
    bottom:0px;
    top:auto;
}   

2.让body保持其原有高度，让html只有一个窗口那么高

*{margin:0;padding:0}
*html{overflow:hidden;}
*html body{height:100%;overflow:auto;}        
.fixed{
    position:fixed; _position:absolute;
    left:0;
    bottom:0;
}

推荐阅读
http://tagsoup.com/cookbook/css/fixed/
http://subtlegradient.com/

微格式（Microformat）

是在标准 XHTML 代码中嵌入结构化数据的一种新方法。理念非常简单。获得一个包含某些事件信息的页面,开始时间、结束时间、位置、主题、Web 页面，等等。过去的方法是将这些信息放置在页面的超文本标记语言（HTML）中，微格式摒弃了这种做法，而是添加一些标准化 HTML 标记和层叠样式表（CSS）类名。

语义 Web

富含语义的 HTML 是一种 Web 应用开发的实践，它强调从文档所需要表达的语义出发，使用 HTML 语法中表示文档结构和富含语义的元素来编写 HTML 文档，从而使得 Web 应用的结构与展示分离，降低各部分之间的耦合度

<DIV class="vcard">
	<A rel="me" class="url fn" href="http://lefter.net/">Lefter </A>
	<ADDRESS title="UESTC" class="adr hidden">
		<SPAN class="locality">SiChuan Chengdu </SPAN>
		<SPAN class="country-name">China </SPAN>  
	</ADDRESS>
</DIV>

上面就是定义了一个Hcard，描述个人信息包括联系方式，地址之类的一种微格式，然后用FF下一个插件Tails Export就能从页面上导出相应的信息，还可以导出后缀名为.vcf的实体文件。 除了Vcard还有很多常见的有:

People and Organizations

hCard, XFN

Calendars and Events

hCalendar

Opinions, Ratings and Reviews

VoteLinks, hReview

Licenses:

rel-license

Tags, Keywords, Categories

rel-tag

Lists and Outlines

XOXO

More…

See the list of all microformats

通过userAgent来判断

通过查找userAgent返回的字符串中一些特定的字符来判断浏览器类型,可以通过indexOf()，返回值是所查找的字符串在整个字符串中首次出现的位置，没有找到要查的字符串其返回值是-1；indexOf()对大小写敏感，而userAgent方法返回值一般为大写混合，以下是常见浏览器的userAgent值

IE7:mozilla/4.0 (compatible; msie 7.0; windows nt 5.1; 
.net clr 2.0.50727; .net clr 3.0.04506.648; .net clr 3.5.21022; ciba)
IE6:mozilla/4.0 (compatible; msie 6.0; windows nt 5.1; 
.net clr 2.0.50727; .net clr 3.0.04506.648; .net clr 3.5.21022; ciba) 
FF:mozilla/5.0 (windows; u; windows nt 5.1; zh-cn; rv:1.9.0.10) 
gecko/2009042316 firefox/3.0.10 
Opera:opera/9.64 (windows nt 5.1; u; edition ibis; zh-cn) presto/2.1.1
Safari:mozilla/5.0 (windows; u; windows nt 5.1; zh-cn) 
applewebkit/528.16 (khtml, like gecko) version/4.0 safari/528.16
Chrome:mozilla/5.0 (windows; u; windows nt 5.1; en-us) applewebkit/531.3 
(khtml, like gecko) chrome/3.0.193.0 safari/531.3

对比上面返回值的差异可以用下面的方法对浏览器进行检查

var ua = navigator.userAgent.toLowerCase();
var _isOpera = ua.indexOf('opera') != -1,
_isChrome = ua.indexOf('chrome') != -1,
_isSafari = !_isChrome && ua.indexOf('safari') != -1,
_isGecko = !_isChrome && !_isSafari && ua.indexOf('gecko') != -1,
_isIE = !_isOpera &&ua.indexOf('msie') != -1, 
_isIE6 = ua.indexOf('msie 6') != -1,
_isIE7 = ua.indexOf('msie 7') != -1;		

点击查看示例

通过浏览器的私有属性来判断

• IE支持创建ActiveX控件，因此ActiveXObject函数也是IE独有的
• Opera提供了专门的浏览器标志，就是window.opera属性
• Safari有一个私有的openDatabase属性
• Chrome和Firefox有一个MessageEvent函数，但没有Firefox的getBoxObjectFor
• Firefox有一个getBoxObjectFor函数用来获取DOM的位置和大小,类似IE的getBoundingClientRect

因此可以大概用一下代码

var ua = navigator.userAgent.toLowerCase();
var _isOpera = window.opera,
_isChrome = window.MessageEvent && !document.getBoxObjectFor,
_isSafari = window.openDatabase,
_isGecko = document.getBoxObjectFor,
_isIE = window.ActiveXObject;
if(_isIE ) alert("ie");
if(_isGecko ) alert("isGecko ");
if(_isChrome ) alert("isChrome ");
if(_isOpera ) alert("isOpera ");
if(_isSafari ) alert("isSafari ");

1. 作为普通逻辑代码容器
2. 作为对象方法
3. 作为构造函数

函数逻辑代码容器

function Add(x,y){
    return x+y
}
alert(Add(2,8));

1. 函数声明function foo(){}
2. 函数表达式 var foo=function(){}
3. Function对象 var foo=new Function

函数表达式：var example = function(){
return 1;
}
example();//1

var example = function(){
return 2;
}
example();//2

函数声明：function example(){
return 1;
}
example();//1

function example(){
return 2;
}
example();//2

在采用函数声明创建同名函数时，后创建的函数会覆盖先创建的函数。这种差别是由于JavaScript解释引擎的工作机制所导致的。JavaScript解释引擎在执行任何函数调用之前，首先会在全局作用域中注册以函数声明创建的函数，然后再依次执行函数调用。由于注册函数时，后定义的函数重写了先定义的函数，因此无论调用语句位于何处，执行的都是后定义的函数。
相反，对于函数表达式创建的函数，JavaScript解释引擎会像对待任何声明的变量一样，等到执行调用该变量的代码时才会对变量求值。由于JavaScript代码是从上到下顺序执行的，因此当执行第一个example()调用时，example函数的代码就是首先定义代码；而当执行第二个example()调用时，example函数的代码又变成了后来定义的代码。

作为对象方法

JavaScript在解析代码时，会为声明或定义的函数指定调用对象。所谓调用对象，就是函数的执行环境。如果函数体内有以关键字this声明的变量，则this引用的就是调用对象。事实上，在普通的函数中，也存在调用对象，只不过这个调用对象是默认的全局window对象而已。例如上面的例子相当于：

var Add= window.Add(26,26); // Add= 52

这说明，默认情况下，在全局作用域中定义或声明的函数的调用对象就是window。 在面向对象编程中，通常将作为对象成员的函数称为方法。

var people={}
people.name="lefter";
people.age="24 years old"
people.intro=function(){
    alert(this.name+" is "+this.age)
}
people.intro();//lefter is 24years old

var animal ={}
animal .name='huahua'
animal .age='1years old';
animal .wangwang=people.intro;//对象可以借用其他对象的方法
animal .wangwang();//huahua is 1years

使用函数对象的call和apply方法，还可以动态指定函数或方法的调用对象
call 方法:调用一个对象的一个方法，以另一个对象替换当前对象(其实就是更改对象的内部指针，即改变对象的this指向的内容)
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法apply方法的第一个参数也是要传入给当前对象的对象，即函数内部的this。后面的参数都是传递给当前对象的参数。
对于apply和call两者在作用上是相同的，但两者在参数上有区别的。对于第一个参数意义都一样，但对第二个参数：apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
如 func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1, [var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

animal.wangwang.call(people);
或者：animal.wangwang.apply(people); 

作为构造函数

function Man(name,age){
this.name= name;
this.age = age;
}
//然后可以new一个实例
var lefter=new Man("lefter",24);

创建lefter的对象的过程如下：首先，new运算符创建一个空对象({})，然后以这个空对象为调用对象调用函数Man，为这个空对象添加两个属性name和age，接着，再将这个空对象的默认constructor属性修改为构造函数的名称（即Man；空对象创建时默认的constructor属性值是Object），并且将空对象的__proto__属性设置为指向Man.prototype——这就是所谓的对象初始化。最后，返回初始化完毕的对象。这里将返回的新对象赋值给了变量lefter,除了new外还可以用这样的方式来创建。

var lefter = {};
Man.call(lefter,"lefter",24);

区别是后者新创建的lefter对象失去了通过Man.prototype属性继承其他对象的能力。只要与前面采用new运算符调用构造函数创建对象的过程对比一下，就会发现，new运算符在初始化新对象期间，除了为新对象添加显式声明的属性外，还会对新对象进行了一番“暗箱操作”——即将新对象的constructor属性重写为Man，将新对象的__proto__属性设置为指向Man.prototype。虽然手工“初始化对象”也可以将dog.constructor重写为Man，但根据ECMA262规范，对象的__proto__属性对开发人员是只读的，对它的设置只能在通过new运算符创建对象时由JavaScript解释引擎替我们完成。
JavaScript是基于原型继承的，如果不能正确设置对象的__proto__属性，那么就意味着默认的继承机制会失效：

Man.prototype.say="hellow";
lefter.say;//undefine

(function  () {
    alert(arguments[0] + arguments[1];)
})('left','er');
// returns 'lefter'

function concatenate () {
    var result = '' ";
    for(var i=0; i <arguments.length; ++i){
        result += arguments[i];
    }
    return result;
}
concatenate('lefter', 'crockford', 'has', 'a', 'posse');
// returns 'leftercrocfordhasaposse'

function concatenate () {
    return Array.prototype.slice.call(arguments).join('');
}
concatenate('douglas', 'crockford', 'has', 'a', 'posse');
// returns 'douglascrocfordhasaposse'

function concatenate (separator) {
    return Array.prototype.slice.call(arguments, 1).join(separator);
}
concatenate(' ', 'lefter', 'crockford', 'has', 'a', 'posse');
// returns 'lefter crockford has a posse'

#Far Future Expires Header
<FilesMatch "\.(gif|png|jpg|js|css|swf)$">
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
</FilesMatch>

Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component’s filename, for example, yahoo_2.0.6.js.

第一步，建立一些可规则重写的存储模块，一边存储文件的版本号，因此还是在.htaccess的文件中加入下面的代码

#Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)\.(.+)\.(js|css)$ $1/$2.$4 [L]

然后写一个PHP函数来检查文件的最后修改日期，然后将服务器的修改时间作为版本号

<?php 
function autoVer($url){$path = pathinfo($url); 
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']); } 
?> 

include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php'); 
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>" 
type="text/css" /> 
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script> :include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php'); 
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>"
type="text/css" />
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script> 

<script type="text/javascript" src="/prototype.197993206.js"></script> 

什么是自定义字段呢？一般来讲wordpress提供了博客文章的作者，分类，标签，时间等，然后你可以根据你的需要自定义出一系列的其他信息，比如图片的拍摄器材，相册的缩略图，发表文章时候的心情等。

一个自定义字段有两个显而易见的变量 — 键 ( key ) 和值 ( value )

<?php if ( get_post_meta($post->ID, 'index_image', true) ) { ?>
<a href="" title="">
<img src="ID, "index_image", $single = true) ?>" title="" />
</a>
<?php } else {?>
<a href="" title="" >
<img src="/images/fix.jpg" alt="" title=""/>
</a>
<?php } ? >

get_post_meta($post_id, $key, $single = true)。这个函数能够能让你按自己所需列出自定义字段;。上面代码的解释就是查找自定义字段“index_image”属性，如果能找到该属性，就显示该属性对应的值（这里是一个图片地址）,如果没有找到该属性，则为一个固定的图片 fix.jpg来代替。

参考资料

• Using_Custom_Fields
• One Way To Use Custom Fields
• Using WordPress as a CSS gallery

BTW : 用IE私有属性能控制滚动条的样比如：scrollbar-3dlight-color,scrollbar-highlight-color，scrollbar-face-color，scrollbar-arrow-color，scrollbar-shadow-color，scrollbar-darkshadow-color，scrollbar-base-color，scrollbar-track-color

在此对常用的META标签的属性进行一些总结，

HTTP-EQUIV

HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显

Refresh (刷新)

让网页多长时间（秒）刷新自己，或在多长时间后让网页自动跳转到其它网页<Meta http-equiv="Refresh" Content="5; Url=http://lefter.net"/>

Expires (期限)

指定网页在缓存中的过期时间，一旦网页过期，必须重发请求到服务器获取更新<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"/>

Pragma (cach模式)

禁止浏览器从本地机的缓存中调阅页面内容<Meta http-equiv="Pragma " Content="No-cach"/>

X-UA-Compatible

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=”IE=7″在无论页面是否包含指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content=”IE=EmulateIE7″模式遵循指令。对于多数网站来说，它是首选的兼容性模式。<Meta http-equiv="X-UA-Compatible " Content="IE=7"/>

NAME变量

name是描述网页的，对应于Content网页内容，以便于搜索引擎机器人查找、分类，目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。name的value值name=”"；指定所提供信息的类型。有些值是已经定义好的。

例如description，keyword，Author，Copyright等，这些常见的就不特地说明了

name=”Robots” (搜索引擎向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。index针对，页面文件本身，而Follow针对页面的链接，搜索引擎顺着连接往下抓取

后来才注意到Firefox里面也是不正常的，因为下面多出了一行空白，因为他给链接用的白色的字体，背景也是白色的所以就不能看见；但是FIREFOX为什么不报错呢，我想是因为我们新闻网的前端架构采用XSL解析XML的方式,而XSL也是一种XML,XML相对html要规范的多,很多标签如CENTER，FONT等都被取消了,还有所有的标签必须关闭,而他用的< a >< font color="#FFFFFF" >turkler< /a >这两点都不满足，而Firefox渲染的时候是把XML直接转换为HTML(在IE，和firefox下分别查看源文件就可以知道)，因此不报错！但是能解析出来，只是此人用了白色的字体，而背景也是白色的，所以看不出来罢了，全选的时候就能看出来了

我滴神啦，被改掉的DEFAULT文件，还不知道有没有其他的文件被改掉

还好此人没有多少恶意，只是加上他的链接在上面，可能是想赚取PR，也给我们敲了个警钟。现在应该找出我们的服务器的漏洞出在哪里，大家不要在上面安装其他的软件

1. 函数关键字(function)语句：

   function add(a,b){alert(a+b);}

2. 函数字面量(Function Literals)：

   var add= function(a,b){alert(a+b);}

3. Function()构造函数：

   var add= new Function('a','b','alert(a+b);')

一个匿名函数就是一个没有名字的函数。你可以认为他们是一次性函数。当你只需要用一次某个函数式，他们就特别有用。通过使用匿名函数，没有必要把函数一直放在内存中，所以使用匿名函数更加有效率。

Code patterns for anonymous function（代码模式）

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

错误模式：其无法工作，浏览器会报语法错。

1. 函数字面量：首先声明一个函数对象，然后执行它。

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

2. 优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。如果你写了括号，那么在括号中的代码就会被先计算。在计算之后，括号所在的地方就会有一个值。

   ( function(){
     alert(2);
   } ( ) );

3. Void操作符：用void操作符去执行一个没有用圆括号包围的一个单独操作数。

   void function(){
     alert(3);
   }()

4. !操作符：用！操作符去执行一个没有用圆括号包围的一个单独操作数。

   !function(){
     alert(4);
   }()

var a = 1;
function foo(a) {
     alert(a);
      var a = 2;
}
foo(3);

var a = "right";
(function() {
    alert(a);
    var a = "wrong";
})();

来自《编译原理》：对于传统编译型语言来说，编译步骤分为：词法分析、语法分析、语义检查、代码优化和字节生成。
但对于解释型语言来说，通过词法分析和语法分析得到语法树后，就可以开始解释执行了。

第二个函数输出结果是undefined, 这种现象被称成“预解析”：JavaScript引擎会优先解析var变量和function定义。在预解析完成后，才会执行代码。如果一个文档流中包含多个script代码段运行顺序是：
step1. 读入第一个代码段
step2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5
step3.对var变量和function定义做“预解析”（永远不会报错的，因为只解析正确的声明,在step2的语法分析阶段完成，并存储在语法树中。当执行到函数实例时，会将varDelcs和funcDecls从语法树中复制到执行环境的scriptObject上）
step4. 执行代码段，有错则报错（比如变量未定义,未定义变量意味着在scriptObject的变量表中找不到，JS引擎会沿着scriptObject的upvalue往上寻找，如果都没找到，对于写操作i = 1; 最后就会等价为 window.i = 1; 给window对象新增了一个属性。对于读操作，如果一直追溯到全局执行环境的scriptObject上都找不到，就会产生运行期错误）
step5. 如果还有下一个代码段，则读入下一个代码段，重复step2
step6. 结束
通过编译，JavaScript代码已经翻译成了语法树，然后会立刻按照语法树执行。进一步的执行过程，需要理解JavaScript的作用域机制，JavaScript采用的是词法作用域（lexcical scope）。通俗地讲，就是JavaScript变量的作用域是在定义时决定而不是执行时决定，也就是说词法作用域取决于源码，编译器通过静态分析就能确定，因此词法作用域也叫做静态作用域（static scope）。但需要注意，with和eval的语义无法仅通过静态技术实现，实际上，只能说JS的作用域机制非常接近lexical scope.

The vspace and hspace attributes specify the amount of white space to be inserted to the left and right (hspace) and above and below (vspace) an IMG, APPLET, OBJECT. The default value for these attributes is not specified, but is generally a small, non-zero length. Both attributes take values of type length.

这样做更有语意，w3c也是支持的语法格式如下
imageObject.hspace=pixels

function setSpace(){
  document.getElementById("el").hspace="50"
  document.getElementById("el").vspace="50"
}

下面说一下float:center实现浮动居中的思路，采用的是相对定位：ul为position:relative;left:50%，然后再让li像左浮动，在让它position:relative;right:50%（或者left:-50%），那么li就像向中间浮动一样居中了。

demo

有兴趣的朋友去看看看！有个疑问了，为什么IE的版本越到后来，bug越多呢？

一般来讲浏览器是通过DTD来判断模式的；浏览器进入Standards模式的DTD有：HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

• strict去掉了许多表现的标签，有利于结构和表现的分离
• loose会导致Firefox进入Almost Standards模式，在图片的处理上会有微小的差别

在IE6下，如果在DTD之前有任何字符都将导致其进入quirks模式

Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下，也会有这个问题

可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效

可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的

用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

body{text-align:center};#{content:text-align:left}

可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效

设置图片的padding会失效

Table中的字体属性不能继承上层的设置

white-space: pre会失效

许多CSS默认样式将不同

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效

JavaScript中的区别

Quirks mode的Table of measurements

参考

• Table of measurements
• MSDN

dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat，分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()

1、减少图片数：去除不必要的图片。
2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文大小的变化是比较大的。
3、常识使用脚本文件代替效果：
比如一些web2.0的样式，如果使用ps制作，每个图片基本会增加%5-%25的大小成本.
相反，使用javascript代码来实现效果,仅仅只增加几个字节.
图像格式的选择
一般在网页上使用的图片格式有三种，jpg、png、gif。
1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。
2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。
3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

网址后加斜杠

有些网址，比如www.yahoo.com当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成http://www.www.yahoo.com，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参 数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

减少http请求

当浏览者打开某个网页，浏览器会发出很多组件（图像、脚本等等），视乎网络延时情况，每个对象加载都会有所延迟。如果网页上对象很多，这可以需要花费大量的时间。

因此，要为http请求减负。如何减负？

1、去除一些不必要的对象。
2、将临近的两张图片合成一张。
3、合并CSS文件
看看下面这段代码，需要加载三个CSS文件：
<link rel=”stylesheet” type=”text/css” href=”/body.css” />
<link rel=”stylesheet” type=”text/css” href=”/side.css” />
<link rel=”stylesheet” type=”text/css” href=”/footer.css” />
我们可以将其合成一个：
<link rel=”stylesheet” type=”text/css” href=”/style.css” />
从而减少http请求。
其它小技巧:
1、去除不必要加载项。
2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。
3、尽量用图片代替flash，这对SEO也有好处。
4、有些内容可以静态化就将其静态化，以减少服务器的负担。
5、统计代码和JS文件一般放在页尾(或者使用延迟加载)。

使用面向对象的编程思想实现js代码其实也并不难，实现方法也又多种，比如prototype原型，new object()等方法。前面的每个方法都有其自己的优缺点，但都存在一个问题，那就是对于js变量作用域的控制。如果不能很好控制js变量作用域，就可能导致对象内部变量被外部肆意修改，从而导致程序被破坏，不便于程序的维护，对象的封装特性和程序健壮性都大打折扣。被由于js本身没有很好的对变量范围的定义（public/private等限定符），因此在js的面向对象编程中也就遇到了变量的控制问题，特别是对于对象内部的公有变量在prototype原型方法中都很难实现。

可惜的是，我国对于HTML的认识，特别在一些初学者中，有非常严重的错误。

让我们首先看看国内的一些术语。一些国内采用的术语：

• xhtml + css
• div + css

以上两种术语的流行也有一定的道理。使用table进行页面布局在我国仍然占据了大部分的网站，所以以上术语用来区分那些默认使用table来标记页面的技术还是十分直观和易于理解的。而对于国外的开发人员和设计师来说他们不需要使用以上这两个术语，因为采用符合语意的标记和使用CSS来制作网页已经大大超过了使用table，所以table已经被完全忽略了，这样还需要用“xhtml+css”或“div+css”来标识制作网页时采用的技术吗？显然默认的东西就没有必要提出了。

XHTML 是为了能够让HTML和XML兼容的一种产物，他的优势在于能够和W3C的其他XML的应用，如MathML、SVG兼容。但是我们现在写的网页是XHTML吗？显然不是。

你应当记住XHTML就是XML，所以它的content type应当 是application/xhtml+xml，而不是text/html 。所以如果你仍然象目前的Internet上的大多数网站一样，使用text/html作为你的站点的content type，那么你并没有使用XHTML，你用的仍然是HTML，只不过你在声明中添加了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

这条声明仅仅标识你的文档符合XHTML的标记标准，但是它并不表明你的文档正在以XHTML要求的方式被浏览器解析。事实上，人们不使用application/xhtml+xml因为，Internet Explorer 6 以及以下版本不能够解析application/xhtml+xml这种MIME type，如果你采用XHTML标准要求的content type发送文档，那么目前地球上大部分的人都看不到你的网页，所以人们仍然使用HTML。

所以xhtml+css是一个糟糕的术语。目前你至少应该使用HTML + CSS，而div+css更是荒谬的。但是如果你在编写HTML时，符合XHTML标准，那也非常好，至少在未来所有浏览器都支持XHTML后，你可以不用修改你的文档了，但是你心里应该明白，真正起作用的仅仅是HTML。

我想我们大部分人都应当重新审视HTML。

目前，W3C推荐的HTML版本是 HTML 4.01 ，这一版本早在近十年前就已出现。在当时的HTML 4.01的设计来看，它早已突出了在我们现在看来非常重要的设计。

• 国际化
• 文档与表现分离
• 无障碍性
• 符合语意的HTML

HTML文档应当是一份要让全世界任何角落的人，不管他们本身和使用Internet的环境如何，都应当能够正常访问的文档。因此在我们编写HTML文档之前，脑中应当始终放着HTML的设计思想。其中，容易被很多人所忽略的是，中文网站不应当使用gb2312作为文档的字符编码，最好采用UTF-8。

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。

2、尽量使用 <link rel=”stylesheet” href=”http://www.planabc/yuanxin.css” type=”text/css”> 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 <link> 放在页面尾部。

This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems