1、引入JQuery代码

2、运行如下代码测试：

+function(){
var s = '<h1><em class="a_b c" style="min-height:50px;_height:50px;">x</em></h1>';
var d = $(s);
alert(d.html());
}();

FF中的结果为：

<em class="a_b c" style="min-height: 50px;">x</em>

"_height:50px;" 部分不见了。

IE下的结果为：

<EM class="a_b c" style="MIN-HEIGHT: 50px; HEIGHT: 50px">x</EM>

"_" 不见了。

遇到此BUG的同学可以将inline的style改成className的方式来处理一下。

JQuery Bug Report: http://forum.jquery.com/topic/transform-bug-in-html-string

 在某开心农场做了本次Off-Site的课外活动，对很久木有外出的大家来说，景致真的不错！

本次Off-Site课外活动的集合点

晚上的篝火晚会灰常热闹，不过火焰太大，好热!

苏州真的不错！^_^

在使用Struts或Spring的后端中，使用Freemarker模板作为载体，能够非常有效的实现前后端的分离。

有人或许会认为使用前端模板一样可以实现此效果，而且实现的会更好。

如果单纯从技术和实现的角度去考虑，确实是使用前端模板效果会更好，前后端分离的会更彻底，但如果真的这样做，任何地方都采用前端模板去渲染，那这样的WEB应用将会失去高可靠性及易用性。

我们的建议是，一般的页面由后端模板渲染，页面中的某些特殊模组，可以由前端模板进行渲染，比如，一个具有诸多交互且内容不断变化的数据列表。

在使用过Freemarker模板后，感觉它的语法比较朴实，平易近人，容易上手，于是决定按它的语法风格实现一个前端的模板引擎，这就有了下面的EasyTemplate!

EasyTemplate模板的函数大小为1.34k（未压缩），暂时只实现了list，list index，if elseif else等功能，应该可以满足大部分的使用需求了。

EasyTemplate模板引擎的解析速度测试，渲染1000行数据，在不同的浏览器中，平均速度大约在30毫秒以内（测试机器性能较弱）。

EasyTemplate可用标签：

<#et tname $dataname> //模板开始标签，tname为此模板的名称，$dataname为此模板中用到的数据名称

<#if (condition)>

<#elseif (condition)>

<#else>

</#if>

{$x?a:b} //三元表达式，最后不能加分号"；" 注意：在所有的 {} 中都不能出现分号！

<#list $List as $list> //遍历一个数组对象

{$idx} //在此次遍历中的当前索引

{$list.xxx} //取值

</#list> //结束遍历

</#et> //模板结束标签

调用方法：

var x = easyTemplate(sTemplate,oData);

EasyTemplate模板引擎函数下载：http://www.easyui.org.cn/easyTemplate.js

EasyTemplate模板引擎在线演示：http://www.easyui.org.cn/easyTemplate.html

DOM Storage

类似http session和cookies的两种全新机制：

Session Storage

• 会话存储是针对用户执行单个事务的方案而设计的。
• 应用于用户在同一时间（同一个会话期）跨多窗口运行同一事务的场景。
• 来自MDC的说法:它常用于临时存储那些需要保存的数据以便当浏览器不小心刷新时能够恢复它们。
• 它含有一个在页面会话有效期内可用的存储区域。
• 只要页面没有关闭，一个页面会话就始终保持着，并且当页面被重新载入或恢复时“复活”。
• 打开一个新的标签页或新窗口都会初始化新的会话。
• Internet Explorer 8:不会在浏览器故障得到恢复后继续使用 sessionStorage。
• Firefox也木有实现介个功能，参见：bug 33945 https://bugzilla.mozilla.org/show_bug.cgi?id=339445

Cookies不能很实时的处理这些情形：

如，某个用户在某站点购买机票时打开了两个不同的窗口，如果该站点使用cookies来记录用户的购买信息，那么，该用户在一个窗口中“已购买”的机票信息可能在另一个窗口中就被“漏”掉了，这将导致该用户在另一个窗口中得不到实时通知的情况下购买两张相同航班的机票。

sessionStorage接口的定义正是为了解决此情形，一个站点可以将它的数据添加到session storage，然后，该站点在某窗口中打开的任何页面都可以访问到此数据。

Local Storage

• 本地存储机制跨多个窗口，且持续范围可超过当前会话。localStorage属性可为域提供持久存储区域。
• 它可使得WEB程序能够存储MB级的用户数据，如，存储整个用户签名档或用户的收件箱。
• 它也为客户端性能的优化提供了一种解决方案。

        Cookies还是不能很好地处理这些情形，因为它每次请求时都会将值传送给服务器，而且数据会过期。

每个站点都会有它们各自的存储区域。

Storage对象接口定义

constructor:
    返回Storage对象的构造器引用（Object）

remainningSpace:
    返回Storage对象中剩余的内存数量（Bytes）

length:
    返回当前Storage对象中key/value配对列表的长度，只读，数字类型

key(n):
    返回当前Storage对象中key/value配对列表的第N个元素的key值，如果N>=length，则返回null

getItem(key):
    返回当前Storage对象中给定的key值（复制的）

setItem(key, value):
    复制一份给定的value（不支持包含ImageData的对象，报NOT_SUPPORTED_ERR）
    检测在当前Storage对象list中是否存在指定的key：
    如果不存在，则在该list中插入此key/value的配对。
    如果存在，则更新此key的value。
    如果操作失败，则报空间不足（QUOTA_EXCEEDED_ERR）异常。

removeItem(key):
    从当前Storage对象中移除指定的key值

clear():
    清空当前Storage对象中所有的key/value

sessionStorage对象

• sessionStorage作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 全局对象，可通过sessionStorage或window.sessionStorage访问。
• 生存周期为一个窗口或一个TAB的生存期间所加载的所有同源页面。
• session storage存储的内容只在用户请求的数据被删除或者存储空间不足时才会被设置过期。
• 当sessionStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的sessionStorage都会
• 被指向到相同的存储区域，且都会触发Storage对象的相应事件。

localStorage对象

• localStorage对象作为Storage对象的实例，存在于浏览器全局作用域中，同源共用。
• 每个域和子域都具有自己单独的本地存储区域。 域可以访问子域的存储区域，而子域也可以访问父域的存储区域。
• 注意：http://example.com域无法访问https://example.com中的localStorage数据。
• localStorage['example.com']  可由 example.com 及其任何子域访问。
• 子域 localStorage['www.example.com']可由 example.com 访问，但不能由其他子域访问，如 mail.example.com。
• 全局对象，可通过localStorage或window.localStorage访问。
• local storage存储的内容只有在用户提出请求或出于安全因素处理时才会被设置过期。

安全提示

1. 当请求违反存储限制时，抛出SECURITY_ERR异常（如用户设置不允许存储数据）。
2. 磁盘配额限制将施加于设置相应值的页面所在的域，而不是施加于在其中设置相应值的域。 这可防止恶意脚本用尽相关域的存储配额。 同时还可阻止此类脚本使用随机子域来存储无限数量的数据。
3. 如果来自非同源（源由协议、主机名（或 IP 地址）和域的 URL 的端口号确定）的脚本，抛出SECURITY_ERR异常并忽略其他步骤。
4. 如果文档来源不属于HTML5源时，抛出SECURITY_ERR异常并忽略其他步骤。
5. 存储在Storage中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在Storage中。

当浏览器切换到private模式时（如果可以的话），localStorage存储的数据在浏览器模式改变后将被丢弃。

当localStorage调用setItem,removeItem或clear方法并成功执行时，所有打开的窗口中的localStorage都会被指向到相同的存储区域，且都会触发Storage对象的相应事件。

Storage事件（实现者）

当一个存储区域发生改变时，Storage事件即被触发，所有窗口中的Storage对象都将被影响。

事件定义

initStorageEvent():
    使用类似DOM Events接口的方式初始化事件

key:
    表示key被改变

oldValue:
    key被改变之前的值

newValue:
    key改变之后的值

url:
    表示该地址文档对象中的key被改变

storageArea:
    影响到的Storage对象

DOM Storage Events（IE8+）

当更新存储区域中的数据时，Internet Explorer 将触发相应事件，以便在浏览器或选项卡的多个实例之间能够保持信息同步。

onstorage

• 当存储区域发生更改时，document  中将触发  onstorage 事件。
• 所有共享相同会话上下文的文档，以及当前显示来自相同域或子域（即，本地存储将要提交到的域或子域）的页面的文档，都会接收到该事件。
• 如果目标文档对象当前未处于活动状态，则 Internet Explorer 不会触发任何事件。

onstoragecommit

• Internet Explorer 使用 XML 文件来存储本地存储数据。 将本地存储数据写入到磁盘上时，将触发  onstoragecommit 事件。

   
磁盘空间

每个域默认可以存储 5 MB 的数据，当超过时，需要提醒用户是否增加空间。
IE8+浏览器默认为 10 MB

userData Behavior

IE5+支持，允许对象存储数据在用户端

使用条件，为某对象设置behavior样式

html:
    <ELEMENT  STYLE="behavior:url('#default#userData')" ID=sID>

scripting:
    object.style.behavior = "url('#default#userData')"
    object.addBehavior("#default#userData")

userData对象成员表

expires:
    设置或返回userData的到期时间

XMLDocument:
    返回一个XML引用

load(user):
    加载指定user存储在userData中的数据对象

getAttribute(attr):
    返回指定attr的值

setAttribute(attr):
    设置指定attr的值

removeAttribute(attr):
    移除指定的attr值

save(user):
    保存指定user的数据对象到userData中

磁盘空间

本地：
    document limit:128KB，domain limit:1024KB
局域网：
    document limit:512KB，domain limit:10240KB
可信站点：
    document limit:128KB，domain limit:1024KB
互联网：
    document limit:128KB，domain limit:1024KB
受限站点：
    document limit:64KB，domain limit:640KB

安全提示

1. 为了安全考虑，userData存储的数据只对相同的目录，且使用相同的协议才能访问。
2. 存储在userData中的数据未经过任何编码和加密，建议在使用的时候不要将敏感的重要的用户数据存储在userData中。
3. 将userData行为应用在html,head,title,style等对象上时，使用save和load方法时将会发生错误。

Adobe Flash Player本地存储
存储空间: 100 KB

Cookie
存储空间: 4 KB

简单实现一个兼容新老浏览器的离线存储演示，简单判断是否可用localStorage，否则使用cookie.

在线演示DEMO：http://www.easyui.org.cn/domStorage.html

当一个产品的用户数量达到一个很大 的数量级时，这种情况确实会经常发生，若不能有效的解决，的确让产品工程师们很困扰。

在百 度泛用户体验博客中，百度有啊的同学分享了他们是怎么来处理这种情况的，那就是，提供一个客户端环境诊断的小工具 （页面），让用户配合工程师一起进行诊断，为处理用户遇到的问题提供较有价值，较全面的资料。

原文如下：

作者：Miller

有啊网页诊断工具是一个轻量级的浏览器环境检测工具，基于Javascript以及Flash实现。它的主要 功能包括问题检测以及针对某些问题给予提示性的建议，从而帮助用户自助的解决一些简单的问题。此外还能生成简单的检测报告，通过报告开发人员可是获得更为 详细的环境信息，为解决问题提供有效的支持。

该工具具体的检测项包括以下几个：

1. Javascript版本信息
2. Cookie是否开启
3. 用户的屏幕分辨率
4. Flash版本号以及浏览器是否开启了Flash拦截功能
5. 浏览器字体大小是否正常（某些浏览器缩放后会导致页面布局混乱）
6. 浏览器的Ajax功能是否正常，包括Get方式和Post方式
7. 浏览器的图片浏览功能是否正常
8. 用户的网络速度

通过对以上几个问题的检测，开发人员能够比较全面的了解目标浏览器的整体环境。

一、Javascript版本检测

对于Javascript版本的检测似乎显得不是那么必要，因为通常都可以根据浏览器的版本找到对应关系，不过作为浏览器环境的一部分，还是把该功 能加了进来。具体的实现原理：在页面中嵌入各个版本的script标签，并在每个标签中都给同一个全局变量赋值，最后根据变量的值得到版本号：

     
 JS_VERSION=('1.0');    

     
 JS_VERSION=('1.1');    

     
 JS_VERSION=('1.2');    

      ......
      ......
     
 JS_VERSION=('1.3');    

     
 window.onload = function(){
 if( typeof JS_VERSION != 'undefined' )
 document.getElementById('test').innerHTML = JS_VERSION;
 }    
  

根据W3C规范，script的language属性已经被废弃了，不过经测试该属性的兼容性较好，并能得到比较准确的结果。如果使用type= “text/javascriptN”则在很多浏览器下得不到正确的版本，因此在此依然使用了language属性。另外，关于javascript各个 版本与浏览器的对应关系可以参考如下表格：

相关参考资料：

http://www.w3.org/TR/REC-html40/interact/scripts.html W3C 关于script标签的描述

http://en.wikipedia.org/wiki/JavaScript#Versions 维基百科关于JavaScript中的版本描述

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/JavaScript_Overview JavaScript Versions and ECMAScript Editions

http://hi.baidu.com/jiaozhenqing/blog/item/d8f026380392f22cb9998fc7.html JavaScript版本一览

二、检测Cookie是否开启

先获取window.navigator['cookieEnabled']的值，如果该值非undefined的话则直接使用该值即可判断(经测 试IE7、Firefox3.5、Safari4、Opera10均能支持)。如果为undefined(即不支持该属性）则使用如下的方式：尝试向 Cookie中写入数据（为避免浪费设置1分钟的有效期），写入后检测document.cookie中是否存在刚才写入的数据，如果有则cookie有 效否则cookie无效：

 var cookie = document.cookie;
 var cookieEnabled = window.navigator['cookieEnabled'];

 if(typeof cookieEnabled == 'undefined'){
    var expireDate = new Date();
    expireDate.setTime(expireDate.getTime() + 1000);//Expired after 1 second
    var time = expireDate*1;
    var regExp = new RegExp(time + '=' + time);
    document.cookie = time + '=' + time + ';expires=' + expireDate.toGMTString();
    if( regExp.test(document.cookie) )
       cookieEnabled = true;
    else
       cookieEnabled = false;
 }

三、Flash版本以及可用性检测

Flash检测包含两方面的内容：

1. Flash是否安装、禁用，Flash版本号

对于Flash的版本检测可以通过在页面中引入AC_OETags.js（包含在Adobe官方的Flash Player Detection Kit中），然后通过调用其中的GetSwfVer方法获得具体的版本号，如果Flash未安装或者被禁用 则 GetSwfVer方法将会返回-1，否则返回正确的版本号。查看GetSwfVer的实现，与浏览器版本检测如出一辙，也是通过navigator信息 得到的，感兴趣的可以直接查看其源码。

2. 如果Flash已经安装是否被拦截

做这一步检查的前提是第一步能够获得正确的版本号。具体的检测方法也很简单，在页面中引入一个自定义的swf文件，在该swf文件中只定义 了一个方法checkFlash，并将该方法暴露出来使得JavaScript能够访问到，即 ExternalInterface.addCallback(“checkFlash”,checkFlash);在swf加载完成后通过 JavaScript访问checkFlash方法，如 果存在该方法则说明Flash访问正常，否则Flash可能被拦截了。

以上两步的代码实现大致如下：

HTML代码

Javascript代码

    //获取Flash版本号，如果version为-1则可能未安装Flash或者Flash被禁用
    var version = GetSwfVer();
    if( version != -1 ){
         var isIE = navigator.appVersion.indexOf("MSIE") != -1;
         if( isIE )//IE下取Object元素
            var swfObj = document.getElementById('oCheck');
        else//其他浏览器下取embed元素
            var swfObj = document.getElementById('eCheck');
        if( !swfObj.checkFlash ) {
            //被拦截
        }
        else {
           //未拦截
        }
    }
    else{
        //未安装Flash Player或者Flash Player被禁用
    }

四、Ajax功能检测

该功能的检测比较直接，即分别构造Ajax Get和Ajax Post请求，在请求过程中详细的记录Ajax的实例类型（ActiveXObject 或 XMLHTTPRequest）、请求的各个阶段的状态以及最终的请求结果。

五、检测图片是否被禁用

检测图片是否禁用的原理：新建一个Image对象，并监听其onload事件（IE某些版本中无效，需要监听onreadystatechange 事件）以及onerror事件。

 var img = new Image;
 //监听onload事件，由于在ie的某些版本中onload事件并不会被触发，因此增加onreadystatechange监听器
 img.onload = img.onreadystatechange = function(){
 //加载成功说明图片功能是正常的
 }
 //监听onerr事件
 img.onerror = function(){
 //如果触发了onerror事件，则说明图片功能不正常（在img的src正确的情况下）
 }
 img.src = 'xxx';

以上的实现中，对于加载事件的监听并没有什么问题，不过对于onerror事件还是存在比较大的兼容性问题：经测试发现，在IE下禁用图片后并不会 触发 onerror事件，而在Firefox中禁用图片后则能正常的触发onerror事件，至此的结论是使用onerror来判断图片功能是准确的。取而代 之的是使用超时检测来判断，即假定图片在一定时间内仍未能加载成功则视为失败。

 var img = new Image;
 //监听onload事件，由于在ie的某些版本中onload事件并不会被触发，因此增加onreadystatechange监听器
 img.onload = img.onreadystatechange = function(){
 //加载成功说明图片功能是正常的
 }
 //监听onerr事件
 img.onerror = function(){
 //如果触发了onerror事件，则说明图片功能不正常（在img的src正确的情况下）
 }
 img.src = 'xxx';
 var timer = setTimeout(function(){
 //如果执行到这里则认为图片功能异常
 },TIMEOUT);

六、检测网络速度

实现原理：请求一张已知大小的图片N次，并分别记录每次请求所花费的时间，最后根据图片大小计算出平均的网络速度。这里需要注意的是图片的大小问 题，图片如果太小结果会不准确，需要选择一张合适的图片，另外为防止图片被浏览器缓存需要给图片的src添加时间戳。

/*
 * @param { Integer } times 请求图片的次数
 * @callback { Function } callback 图片请求完成后调用的函数
 */
 function detectNetSpeedWithImage(times,callback){    
 times = times || 1;
 //已完成请求
 var completedImg = 0,
 res = [],
 timer = null,
 done = false;        
 for( var i = 0; i < times; i++){
 (function( index ){
 setTimeout(function(){            
 var img = new Image();
 //开关，在某些浏览器（如IE）会响应两次onreadystatechange
 var loaded = false;
 //请求开始时间
 var tStart = new Date();
 img.onload = img.onreadystatechange = function(){
 if( loaded ) return;
 //请求结束时间
 var tEnd = new Date();
 res.push(tEnd - tStart);
 //已完成请求加1
 completedImg++;
 loaded = true;
 //全部请求完成后调用callback
 if( completedImg == times && callback ){
 callback.call(null,res);
 if( timer ) clearTimeout(timer);
 }
 }
 img.onerror = function(){
 if( done ) return;
 callback([]);
 done = true;
 clearTimeout(timer);
 }
 img.src = Config.NET_SPEED_DETECT_IMAGE_URL + '?t=' + (new Date())*1;
 },index * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
 })(i);
 }
 //超时操作
 timer = setTimeout(function(){
 if( completedImg != times && !done ){
 callback([]);
 }
 },Config.NET_SPEED_DETECT_TIMEOUT + times * Config.NET_SPEED_DETECT_IMAGE_REQUEST_INTERVAL);
 }

 detectNetSpeedWithImage(Config.NET_SPEED_DETECT_TIMES,function(res){
 //失败
 if( res.length < 1 ){
 _handleError();
 }
 //成功
 else{
 var time = 0;
 for( var i = 0,l = res.length; i < l; i++){
 time += res[i] / ( l * 1000 );
 }
 //计算速度
 var speed = Config.NET_SPEED_DETECT_IMAGE_SIZE / time;
 //取小数点后两位
 speed = speed.toFixed(2);        
 me.isOver = true;    
 }
 });

七、检测客户端分辨率

直接获取window.screen的width与height即可。

八、检测浏览器字体大小是否正常

在IE6下，当使用px作为单位时，元素（字体大小）无法进行缩放，这在很多情况下都会造成页面混乱。另外，对于目前大多数浏览器，在默认字体设置 下，1em恰恰等于16px，于是可以根据这个原理来检测浏览器字体是否正常，具体的方式如下：

1. 创建一个DIV元素1，并设定其高为16px，宽为1px并使用CSS将其定位到可视范围之外（不能通过display或visibility隐藏）

2. 创建另一个DIV元素2，并设置其font-size为medium。在该DIV内部创建一个DIV元素3，并设置其高位1em，宽为1px并使用CSS 将其定位到可视范围之外

3. 比较元素1和元素3的高度，如果相等则字体大小正常否则异常

注意，元素3必须包含在元素2中，并且给元素2设置font-size: medium。因为em是一个相对单位，1em的大小相当于其父元素字体的大小，为了使检测不受其他样式影响，将其放在一个字体大小为浏览器默认值的容器 中。

 //隐藏DIV的CSS
 var hideCSS = 'position:absolute;left:-2000px;';

 //以px为宽度单位的元素
 var pxBlock = document.createElement('div');
 pxBlock.style.cssText = 'width:16px;height:1px;' + hideCSS;
 document.body.appendChild(pxBlock);
 //构建一个字体大小为浏览器默认值的容器
 var emBlockWrapper = document.createElement('div');
 emBlockWrapper.style.fontSize = 'medium';

 //以em为字宽度单位的元素
 var emBlock = document.createElement('div');
 emBlock.style.cssText = 'width:1em;height:1px;' + hideCSS;

 emBlockWrapper.appendChild(emBlock);
 document.body.appendChild(emBlockWrapper);

 //获得固定和变化的div宽度
 var pxBlockWidth = pxBlock.offsetWidth;
 var emBlockWidth = emBlock.offsetWidth;

 if(pxBlockWidth == emBlockWidth){
 //字体正常
 }
 else{
 //字体异常
 }

在看到Nicholas C. Zakas提出的可维护性的代码的观点后，这种感觉越发的强烈！

原文出处：

http://www.nczonline.net/blog/2010/03/02/maintainable-javascript-dont-modify-objects-you-down-own/

可维护的Javascript代码

当我们在开发WEB程序时，如何保证代码的可维护性？很简单，不要修改不是自己定义的对象。

为什么不可以去修改不属于自己定义的对象？

当我们去修改一个已有的并非我们自己定义的对象时，将发生多么糟糕的事情：

• 不可信任，导致混乱
  
  这样的修改不可信任，很有可能之前使用过此对象的地方发生BUG
   
• 不兼容
  
  在修改这些对象时，我们很可能会将一些新的方法添加进去，而没有考虑到这个对象很可能被应用在并没有实现这些方法的环境中
   
• 维护的梦魇
  
  试想，当这种情形发生在一个大项目，大团队中，对成员间开发的代码维护将会是件多么恐怖的事情。

在WEB开发中，怎样的代码才是可维护性高的代码？

有一段代码，当浏览器发生改变时，它并不需要作出任何修改，这就是可维护性高的代码！

在WEB开发中，这不仅适用于Javascript，同样适用于Css!

IE：

• 链接到一个锚点，如果该锚点在当前页未被定义，则不能产生history
• 页面中的iframe，如果改变其hash，href，或重新写入新的HTML内容，都会产生history
• 对iframe产生的history进行“向前”，“向后”操作时，页面地址栏的值不会改变
• iframe中使用hash change的方式，在操作历史记录时会相应回滚，可以以此作为历史记录改变的触发事件
• 页面hash的改变，无法通过location.hash获取

其他浏览器：

• 链接到一个锚点，如果该锚点在当前页未被定义，也能产生history
• 页面hash的改变，可以通过location.hash获取
• iframe中使用hash change的方式，在操作历史记录时不会相应回滚，没办法以此作为历史记录改变的触发事件

实现方案：

• 定时检测hash的变化

ajax history demo: http://www.easyui.org.cn/ajaxHistory.html

Retrieves a value that indicates whether the object has layout.

Syntax

HTML	N/A
Scripting	[ sHasLayout = ] object.currentStyle.hasLayout

Possible Values

sHasLayout

Boolean that receives one of the following values. false Default. Object does not have layout. true Object has layout.

The property is read-only. The property has a default value of false. The Microsoft Cascading Style Sheets (CSS) extension is not inherited.

Remarks

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.

CSS property	Value
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

As of Microsoft® Internet Explorer 6, when the !DOCTYPE declaration specifies strict standards compliance, inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.

Setting the contentEditable property to true will cause an element to have layout.

BODY, FIELDSET, IMG, INPUT, TABLE and TD elements always have layout.

 

当hasLayout为false的元素中包含了hasLayout为true的元素时，该子元素在应 用position类型的样式时将会遇到兼容问题。

当 hasLayout为false的元素应用position类型的样式时，将会遇到兼容问题。

See also:

background与 border的恩怨情仇

http://www.jslab.org.cn/?tag=hasLayoutBug

由谁提出的
    来自Yahoo! Exceptional Performance team

什么时候开始发起的
    2004年开始研究，2007年4月开始，陆续发布,(5月,7月,9月)

为什么
    Yahoo希望对自己的产品性能做出一些测量和改善

成绩
    总结出14条提升WEB产品性能的准则（后续21条）

第一条：最小化HTTP请求(Frontend)

    将CSS文件和JS文件合并（可行性不高）
    CSS Sprites
    Image Maps(很久以前经常使用的“热区”)
    Inline Images,data:URL（浏览器兼容问题）

    每天大概有40-60%的访问者去到我们的站点的时候都是empty cache，所以，
    我们如果能够使得他们在第一次访问时速度更快，那对他们来说将获得很好的体验。

第二条：使用内容分发网络 (Server)

    将静态文件分发到其他独立的服务器上。
    目的：使得用户可以就近获取到静态文件，从而解决动态内容站点网络拥挤的状况，提高用户访问网站的响应速度。
    Performance Golden Rule:
    80-90%的用户响应时间都花费在了下载某个页面上的组件上，
    如：images,stylesheets,scripts,flash等等，而这些文件都是静态的，完全可以分发出去。
       
    CDN很昂贵，可以租用，也可以退而求其次，采用部署多台Server进行反向代理

第三条：设置一个 Expires头(Server)

    静态文件：永不过期
    动态文件：适当设置"Cache-Control"头

    现在的WEB页面设计越来越丰富，这也意味着页面上会有越来越多的script,stylesheets,images,flash等等
    用户在第一次访问我们的站点时，会发出若干请求，但再次访问时或者继续访问其他页面时，
    如果这些文件设置了Expires头，就可以避免再次为它们发出新的HTTP请求，
    从而提高页面加载速度，减轻服务器压力，提升用户体验。

第四条：Gzip压缩静态文件(Server)

    为所有静态文件开启GZip
    压缩文件，节约带宽，提高下载速度

第五条：将样式表放置在源文件的顶部 (Frontend)

    将所有样式文件放置在接近源文件顶部的<head>标签内

    页面按加载进度逐步渲染，给予访问者视觉上的反馈，尤其是内容较大，网速较慢的访问者，尤为明显。

第六 条：将Script脚本放置在源文件底部(Frontend)

    在第二条中提到浏览器在同一主机上平行下载的进程是有限制的，HTTP/1.1规范中指定的是两个。
    如果在页面下载进程中遇到了Scripts的下载，则它会将这种平行下载阻断，导致页面加载更慢。

第七 条：避免使用CSS表达式(Frontend)

    不兼容
    监听评估导致页面性能低下，移动一次鼠标可能导致超过10,000次的评估。

第八条：将JavaScript和CSS全部放置到外部文件 进行调用(Frontend)
    减小主文件大小，加快page加载速度
    对XHTML进行兼容
    可作为静态文件分发到CDN
    可缓存
    可共用

第九条：减少DNS查询 （Frontend）

    Domain Name System，域名系统，它将主机映射到某个IP地址。
    当我们输入一个网址的时候，DNS会分析该网址，然后转换到具体的IP，这个过程大概会花20-120毫秒
    显然，如果DNS的查找能够进行缓存，将会提高站点的访问速度。
    当我们访问一个页面时，该页的URL，images,script,stylesheet,flash等等都会有一个DNS查询的过程
    如果我们能够减少该页面上出现多个不同的主机地址，就可以减少DNS的查询
    这样就会和之前讲到的平行下载有冲突，减少DNS查询会减少页面响应时间，
    但是降低了平行下载数量，则会增大页面响应时间，
    平衡的做法是，将所有静态文件分离到至少1个独立的主机，最多不超过4个。

第十条：最小化 JavaScript和CSS

    将JavaScript和CSS中任何多余的字符移除，如：注释，换行，排版用的空格等等
    减少文件大小，加速下载进度。

第十一条：避免重定向(Frontend)

    重定向将导致用户响应时间增加
    使用具体的URL
    如果一定要重定向，可使用标准的3xx HTTP状态码

第 十二条：移除重复的脚本

    使用外部脚本文件
    引入这些脚本文件时给文件名加上版本号
    <script type="text/javascript" src="menu_1.0.17.js"></script>
    养成提取公共方法，公共类的习惯
    在编码的过程中，如果发现某段代码至少有两个地方用到，而且代码量挺大的，
    就可以考虑将这部分代码提取成为公共的方法，在编写CSS的时候同样适用。

第十三条：配置ETag

    ETag，Entity tags的简称，
    它用来确定在浏览器向服务端请求一个组件时判断缓存的组件与服务器上的是否仍然还是同一份（即没有更改过）。
    Entity，其实就是“组件”的另一种说法，也就是images,scripts,stylesheets等等这些东西。   
    ETag的值由 INode（索引节点）, Size和MTime（最后修改时间）决定。
    由于这个INode在不同的服务器上是不同的，所以导致同一个组件会有不同的ETag，
    这就使得该组件不能发送304的状态，没有办法被用户缓存
    由于这个原因，在大型多服务器的站点，一般建议将ETag配置关闭
    如果可以保证各服务器对同一组件生成相同的ETag，则完全可以使用。

第十四条：缓存AJAX请求

    根据业务类型，为处理AJAX请求的Action文件的设置合适的到期时间
        动态更新AJAX请求的URL，如，给这个URL后面加上一个更新时间，如：
        &t=1190241612，只在请求的数据发生变化时动态修改该URL地址。

后续二十一条下次再过一遍! ^_^

High Performance Web Sites.ppt