浏览器支持情况

本文实现的功能在以下浏览器中经过测试：IE8、Firefox3.6、Chrome6.0、Opera10、Safari4。其中Firefox3.6与Chrome6.0已经实现了该标准（虽然并没有完全遵循标准），其他浏览器均未实现。关于具体的兼容性问题，后文将详细说明。

文件选择与获取

如今最常见的文件选择方式是使用File Input元素，用户通过该元素打开本机文件对话框寻找并选择相应的文件，不过随着HTML5 Drag Drop API的出现又增加了一种新的方式-用户可以直接将本机的文件拖拽到Web页面中。

方式一 <input type=”file”>

<input id="fileSel" type="file" onchange="handleFiles(this.files)">
<script type="text/javascript">

//获取用户选择的文件

function handleFiles(files){

    //遍历files并处理

}

</script>

方式二 Drag & Drop

<div id="fileDropRegion">将文件拖拽到此</div>
<script type="text/javascript">

//获取用户选择的文件

var dr = document.getElementById('fileDropRegion');

dr.addEventListener("drop",function(e){
     e.stopPropagation(); 
     e.preventDefault();  

     var dt = e.dataTransfer;  

     //获取文件数组
     var files = dt.files;
     handleFiles(files); 
},false);

function handleFiles(files){

    //遍历files并处理

}

</script>

文件读入与展示

通过上文中的方法我们获取到了用户选择的文件数组，接下来就该操作其中的每一个文件了，如HTML5 File API描述的那样，每个文件对象应该包含以下属性：

readonly attribute DOMString name;           //The name of the file.

readonly attribute unsigned long long size; //Represents the size of the Blob object in bytes.

readonly attribute DOMString type;            //The media type of the Blob

readonly attribute DOMString url;              //The URL representing the Blob object.

如果是上传图片则可以通过type属性来进行图片格式过滤，并可以通过size属性来控制图片大小。对于这些属性，Firefox与Chrome的实现情况是出奇的一致，均只支持name、size和type属性。

function handleFiles(files){

    //遍历files并处理

    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /image.*/;  

        //通过type属性进行图片格式过滤
    if (!file.type.match(imageType)) { 
      continue; 
    }  

        //读入文件

    } 

}

</script>

此外，HTML5 File API中还定义了一个BlobReader，通过它可以使用各种不同的方式读入文件并且可以监听和处理读取文件过程中的各个状态。不过在Firefox与Chrome的实现中，并没有这样一个BlobReader，取而代之的是FileReader，拥有与BlobReader相同的方法和事件。

// async read methods

void readAsArrayBuffer(in Blob blob);

void readAsBinaryString(in Blob blob);

void readAsText(in Blob blob, [Optional] in DOMString encoding);

void readAsDataURL(in Blob blob);

// event handler attributes

attribute Function onloadstart;

attribute Function onprogress;

attribute Function onload;

attribute Function onabort;

attribute Function onerror;

attribute Function onloadend;

以上4个读取文件的方式均是异步的，需要注册监听对应的事件来处理文件，而与图片预览相关的方法是readAsDataURL，该方法会将图片文件内容转换成dataURI的格式，而该格式是可以直接在浏览器中显示的。

function handleFiles(files){

    //遍历files并处理

    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /image.*/;  

        //通过type属性进行图片格式过滤
    if (!file.type.match(imageType)) { 
      continue; 
    }  

        //读入文件

    var reader = new FileReader(); 
    reader.onload = function(e){

            //e.target.result返回的即是图片的dataURI格式的内容

            var imgData = e.target.result,

                img = document.createElement('img');

            img.src = imgData;

            //展示img

    }
    reader.readAsDataURL(file); 
    }  

}

</script>

通过以上几步便简单的实现了图片的上传前的预览功能，具体的效果请在Firefox或Chrome下打开此页面。

参考资料

HTML5 File API

Using files from web applications

sessionStorage与localStorage

Web Storage实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

为什么选择Web Storage而不是Cookie？

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

兼容性如何？

接下来的各种测试是在以下浏览器中进行的：IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常的使用。

sessionStorage测试

本节主要针对sessionStorage的一些特性进行了测试，测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简单：打开页面A，在页面A中写入当前的session数据，然后通过页面A中的链接或按钮使用不同的方式进入下页面B，如果页面B中能够访问到页面A中的数据则说明浏览器将当前情况的页面A、B视为同一个session。测试的具体结果如表1：

表1 sessionStorage兼容性测试

从表1中可以看出，处于安全性考虑所有浏览器下session数据都是不允许跨域访问的，包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。

API测试

方法包括以下几个：

setItem(key,value)、removeItem(key)、getItem(key)、clear()、key(index)；

属性包括length、remainingSpace(非标准)。不过存储数据时可以简单的使用localStorage.key=value的方式。

测试地址为：http://varnow.org/pages/html5/web_storage/local/localStorage.html

测试结果另人满意，标准中定义的接口在各个浏览器中都已实现，此外IE8下新增了一个非标准的remainingSpace属性，用于获取存储空间中剩余的空间。结果如表2：

表2 API测试

此外关于setItem(key,value)方法中的value类型，理论上可以是任意类型，不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地，因此如果是自定义的类型则需要自己定义有意义的toString方法。

事件

标准的事件为onstorage，当存储空间中的数据发生变化时触发。此外，IE8中新增了一个onstoragecommit事件，当数据写入的时候触发。onstorage事件中的事件对象应该支持以下属性：

The key attribute represents the key being changed.
The oldValue attribute represents the old value of the key being changed.
The newValue attribute represents the new value of the key being changed.
The url attribute represents the address of the document whose key changed.
The storageArea attribute represents the Storage object that was affected.

对于这一标准的实现，webkit内核的浏览器（Chrome、Safari）以及Opera是完全遵循标准的，IE8则只实现了url，Firefox下则均未实现。

测试地址为：http://varnow.org/pages/html5/web_storage/local/event.html

具体结果见表3。

表3 onStorage事件对象属性测试

此外，不同的浏览器事件注册的方式以及对象也不一致，具体如表4。

表4 onStorage事件注册对象

缺陷与不足

Web Storage的缺陷主要集中在其安全性方面，具体体现在以下两点：

1. 浏览器会为每个域分配独立的存储空间，即脚本在域A中是无法访问到域B中的存储空间的，但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。测试地址：http://varnow.org/pages/html5/web_storage/local/corss_domain_js_access.html

2. 存储在本地的数据未加密而且永远不会过期，极易造成隐私泄漏。也许需要像保存密码一样询问用户是在用私人电脑还是公共电脑来决定是否将数据保存在本地。

跨页面通讯示例

示例地址：http://varnow.org/pages/html5/web_storage/app/play.html

玩法很简单：选择 打开多个窗口，页面会自动打开并定位4个新窗口，小球会在多个窗口间运动，在小球运动的过程中可以拖动窗口或者打开新的窗口来控制小球进入新的区域。

实现原理：每个新打开的窗口会将自己的坐标以及大小写入localStorage，小球在运动到窗口边界时会检测小球将要进入的下一个窗口，如果找到该窗口则将小球坐标写入并通知新窗口接收小球。

一、2.0的FORM结构

    1. 可以随便放置的表单控件

        在HTML4的表单实现中，如果不借助脚本则必须将表单控件放置在<form></form>标签之中才能顺利的提交到服务器，这就要求将提交到同一服务器的数据必须集中到一个DOM块中，这在form元素和表单控件较多的情况下对设计以及实现带来一定程度的限制。例如在某个注册模块中，有一部分信息需要提交到地址A，而另一部分则需要提交到地址B，然而在展现上这些控件又是混在一块的。这一场景在HTML4中处理起来是比较麻烦的，但是在HTML5中则可以轻松处理，因为在HTML5中，所有的表单控件都增加了一个新属性-form,以元素ID为值，表示该控件属于某个元素。通过这个属性则彻底突破了必须将控件写在<form></form>之中的限制。例如：

<form id="testform" action="serve.php">

    <button type="submit">Submit</button>

</form>

<input form="testform" name="var1" value="val1">

在提交表单testform时会将var1提交到服务器。不过，目前仅有Opera10支持这一特性。

    2. 一个表单，多处提交

        在HTML4中，一个form指定了action后便只能将<form></form>中的表单元素提交到一个地址。而在HTML5中则给所有的提交按钮，诸如<input type="submit">、<input type="image">、<button type="submit">都增加了form*属性，具体的如下：

        formaction - 指定表单提交地址，如果指定则覆盖<form>中的action;

        formenctype - 如果指定则覆盖<form>中的enctype;

        formmethod - 如果指定则覆盖<form>中的method;

        formtarget - 如果指定则覆盖<form>中的target;

        formnovalidate - 如果指定则覆盖<form>中的novalidate(新增form属性，表示不对表单进行有效性检查);

        有了这些属性使得一个表单中的数据可以根据提交按钮的不同提交到不同的地址，例如：

<form id="testform" action="serve.php">

    <input type="submit" name="s1" value="v1" formaction="s1.php">Submit to S1

    <input type="submit" name="s2" value="v2" formaction="s2.php">Submit to S2

</form>

<input form="testform" name="var1" value="val1">

<input form="testform" name="var2" value="val2">

与第一点相比，这一特性的浏览器支持则更糟糕，目前尚无浏览器支持。测试的浏览器包括：IE8、IE9、Firefox3.6、Chrome5.0、Opera10、Safari4。

二、2.0的新控件新属性

    1.新控件

        FORM2.0的新控件很大一部分是对<input>的type属性进行了扩展，新的type包括：

TYPE	描述	浏览器支持
search	检索类型，如：	Opera10、Safari4、Chrome5
tel	电话号码	NONE
url	绝对URL，有效性验证，如：	Opera10
email		Opera10
date & datetime & month & week & time & datetime-local		Opera10
number		Opera10
range		Safari4、Opera10、Chrome5
color	颜色值	NONE

    2. 新属性

ATTRIBUTE	描述	浏览器支持
pattern	属于input元素，设置正则表达式来给input的值设定特定的格式	Opera10
required	标识表单控件是必填的（不能用于hidden、range、color和submit）	Opera10
list	当用户输入时，可以给与选择的列表，如：	Opera10
placeholder	在未获得焦点并且无输入时的提示文字，如：	Safari4、Chrome5
autofocus	页面加载后是否自动获得焦点	Safari4、Chrome5

以上结果在以下浏览器中测试：

Firefox3.6 Chrome5、Safari4、Opera10、IE9 Platform Prevew

测试页面在此

此外，更详细的FORM标准请参考文档。

<!--来自贴吧—>

<div cid="count_ayjpb" st_type="toupiao"></div>

<!--来自有啊—>

<a href="#" favo_type="x" favo_obj_id="x" favo_title="x"></a>

这样的会造成自定义属性名混乱的问题，而且更为重要的是假如新的HTML标准中需要使用这个自定义属性，而且其含义与你的自定义属性中含义并不相同，这是一个大家都不希望看到的情况。于是在HTML5中给出了解决方案：只要是自定义属性都需要带上"data-"前缀。

The

data-*

collection of author-defined attributes. Authors can define any attribute they want as long as they prefix it with

data-

to avoid clashes with future versions of HTML.

因此，按照这个规范可以改写上面两个例子以获得更好的兼容性：

<!--来自贴吧—>

<div data-cid="count_ayjpb" data-st_type="toupiao"></div>

<!--来自有啊—>

<a href="#" data-favo_type="x" data-favo_obj_id="x" data-favo_title="x"></a>

实际上在淘宝的机票已经有看到这样的使用

<span data-display="inline" data-tnick="x" data-nick="x"></span>

–本文到此结束–

前言

    前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？

    1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

    2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

    总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

    前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

一、页面级优化

1. 减少HTTP请求数

    这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少HTTP请求，那请求多了到底会怎么样呢？首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个“漫长”而复杂的过程。时间成本就是用户需要看到或者“感受”到这个资源是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占用带宽。另外，由于浏览器进行并发请求的请求数是有上限的(具体参见此处)，因此请求数多了以后，浏览器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

    减少HTTP请求数的主要途径包括：

    (1). 从设计实现层面简化页面

        如果你的页面像百度首页一样简单，那么接下来的规则基本上都用不着了。保持页面简洁、减少资源的使用时最直接的。如果不是这样，你的页面需要华丽的皮肤，则继续阅读下面的内容。

    (2). 合理设置HTTP缓存

        缓存的力量是强大的，恰当的缓存设置可以大大的减少HTTP请求。以有啊首页为例，当浏览器没有缓存的时候访问一共会发出78个请求，共600多K数据（如图1.1），而当第二次访问即浏览器已缓存之后访问则仅有10个请求，共20多K数据（如图1.2）。（这里需要说明的是，如果直接F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是304响应，只有Header没有Body，可以节省带宽）

                           图1.1                                                                            图1.2

        怎样才算合理设置？原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过HTTP Header中的Expires设置一个很长的过期头；变化不频繁而又可能会变的资源可以使用Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于HTTP缓存的具体设置和原理此处就不再详述了，有兴趣的可以参考下列文章：

        HTTP1.1协议中关于缓存策略的描述

        Fiddler HTTP Performance中关于缓存的介绍

    (3). 资源合并与压缩

        如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外，CSS、Javascript、Image都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

    (4). CSS Sprites

        合并CSS图片，减少请求数的又一个好办法。

    (5). Inline Images

        使用data: URL scheme的方式将图片嵌入到页面或CSS中，如果不考虑资源管理上的问题的话，不失为一个好办法。如果是嵌入页面的话换来的是增大了页面的体积，而且无法利用浏览器缓存。使用在CSS中的图片则更为理想一些。

    (6). Lazy Load Images

        这条策略实际上并不一定能减少HTTP请求数，但是却能在某些条件下或者页面刚加载时减少HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。有啊首页曾经的做法是在加载的时候把第一屏之后的图片地址缓存在Textarea标签中，待用户往下滚屏的时候才“惰性”加载。

2. 将外部脚本置底

       前文有谈到，浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，在这里有比较详细的介绍（这里是译文和更详细的例子），而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

3. 异步执行inline脚本

        inline脚本对性能的影响与外部脚本相比，是有过之而无不及。首页，与外部脚本一样，inline脚本在执行的时候一样会阻塞并发请求，除此之外，由于浏览器在页面处理方面是单线程的，当inline脚本在页面渲染之前执行时，页面的渲染工作则会被推迟。简而言之，inline脚本在执行的时候，页面处于空白状态。鉴于以上两点原因，建议将执行时间较长的inline脚本异步执行，异步的方式有很多种，例如使用script元素的defer属性（存在兼容性问题和其他一些问题，例如不能使用document.write）、使用setTimeout，此外，在HTML5中引入了Web Workers的机制，恰恰可以解决此类问题。

4. Lazy Load Javascript

        随着Javascript框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费-既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的mini版框架，另一种则是Lazy Load。YUI则使用了第二种方式，在YUI的实现中，最初只加载核心模块，其他模块可以等到需要使用的时候才加载。

5. 将CSS放在HEAD中

        如果将CSS放在其他地方比如BODY中，则浏览器有可能还未下载和解析到CSS就已经开始渲染页面了，这就导致页面由无CSS状态跳转到CSS状态，用户体验比较糟糕。除此之外，有些浏览器会在CSS下载完成后才开始渲染页面，如果CSS放在靠下的位置则会导致浏览器将渲染时间推迟。

6. 异步请求Callback

        在某些页面中可能存在这样一种需求，需要使用script标签来异步的请求数据。类似：

Javascript:

/*Callback函数*/

function myCallback(info){

//do something here

}

HTML:

<script type="text/javascript" src="http://abc.com/cb"></script>

cb返回的内容:

myCallback('Hello world!');

像以上这种方式直接在页面上写<script>对页面的性能也是有影响的，即增加了页面首次加载的负担，推迟了DOMLoaded和window.onload事件的触发时机。如果时效性允许的话，可以考虑在DOMLoaded事件触发的时候加载，或者使用setTimeout方式来灵活的控制加载的时机。

7. 减少不必要的HTTP跳转

        对于以目录形式访问的HTTP链接，很多人都会忽略链接最后是否带’/'，假如你的服务器对此是区别对待的话，那么你也需要注意，这其中很可能隐藏了301跳转，增加了多余请求。具体参见下图，其中第一个链接是以无’/'结尾的方式访问的，于是服务器有了一次跳转。

图1.3

8. 避免重复的资源请求

        这种情况主要是由于疏忽或页面由多个模块拼接而成，然后每个模块中请求了同样的资源时，会导致资源的重复请求。出现的几率不大，但是还是要注意排查，不然可能会出现如下局面，来自这里。

图1.4

图1.4中，同一个JS在一个页面中请求了9次，全是200请求，当然这个算比较极端的情况了。

二、代码级优化

1. Javascript

    (1). DOM

        DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除DOM元素或者对DOM集合进行操作。如果脚本中包含了大量的DOM操作则需要注意以下几点：

        a. HTML Collection

        在脚本中document.images、document.forms、getElementsByTagName()返回的都是HTMLCollection类型的集合，在平时使用的时候大多将它作为数组来使用，因为它有length属性，也可以使用索引访问每一个元素。不过在访问性能上则比数组要差很多，原因是这个集合并不是一个静态的结果，它表示的仅仅是一个特定的查询，每次访问该集合时都会重新执行这个查询从而更新查询结果。所谓的“访问集合”包括读取集合的length属性、访问集合中的元素。

        因此，当你需要遍历HTML Collection的时候，尽量将它转为数组后再访问，以提高性能。即使不转换为数组，也请尽可能少的访问它，例如在遍历的时候可以将length属性、成员保存到局部变量后再使用局部变量。

        b. Reflow & Repaint

        除了上面一点之外，DOM操作还需要考虑浏览器的Reflow和Repaint，因为这些都是需要消耗资源的，具体的可以参加以下文章：

        如何减少浏览器的repaint和reflow?

        Understanding Internet Explorer Rendering Behaviour

        Notes on HTML Reflow

    (2). 慎用with

        with(obj){ p = 1}; 代码块的行为实际上是修改了代码块中的执行环境，将obj放在了其作用域链的最前端，在with代码块中访问非局部变量是都是先从obj上开始查找，如果没有再依次按作用域链向上查找，因此使用with相当于增加了作用域链长度。而每次查找作用域链都是要消耗时间的，过长的作用域链会导致查找性能下降。

       因此，除非你能肯定在with代码中只访问obj中的属性，否则慎用with，替代的可以使用局部变量缓存需要访问的属性。      

    (3). 避免使用eval和Function

        每次 eval 或 Function 构造函数作用于字符串表示的源代码时，脚本引擎都需要将源代码转换成可执行代码。这是很消耗资源的操作 —— 通常比简单的函数调用慢100倍以上。

       eval 函数效率特别低，由于事先无法知晓传给 eval 的字符串中的内容，eval在其上下文中解释要处理的代码，也就是说编译器无法优化上下文，因此只能有浏览器在运行时解释代码。这对性能影响很大。

       Function 构造函数比eval略好，因为使用此代码不会影响周围代码；但其速度仍很慢。

        此外，使用eval和Function也不利于Javascript压缩工具执行压缩。

    (4). 减少作用域链查找

        前文谈到了作用域链查找问题，这一点在循环中是尤其需要注意的问题。如果在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。

低效率的写法：

//全局变量

var globalVar = 1;

function myCallback(info){

   for( var i = 100000; i--;){

      //每次访问globalVar都需要查找到作用域链最顶端，本例中需要访问100000次

      globalVar += i;

   }

}

   更高效的写法：

//全局变量

var globalVar = 1;

function myCallback(info){

   //局部变量缓存全局变量

   var localVar = globalVar;

   for( var i = 100000; i--;){

      //访问局部变量是最快的

      localVar += i;

   }

   //本例中只需要访问2次全局变量

   globalVar = localVar;

}

    此外，要减少作用域链查找还应该减少闭包的使用。

    (5). 数据访问

        Javascript中的数据访问包括直接量（字符串、正则表达式）、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：

        a. 对任何对象属性的访问超过1次

        b. 对任何数组成员的访问次数超过1次

        另外，还应当尽可能的减少对对象以及数组深度查找。

    (6). 字符串拼接

        在Javascript中使用"+"号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之相比更为高效的做法是使用数组的join方法，即将需要拼接的字符串放在数组中最后调用其join方法得到结果。不过由于使用数组也有一定的开销，因此当需要拼接的字符串较多的时候可以考虑用此方法。

    关于Javascript优化的更详细介绍请参考：

        Write Efficient Javascript(PPT)

        Efficient JavaScript   

2. CSS选择符

        在大多数人的观念中，都觉得浏览器对CSS选择符的解析式从左往右进行的，例如

#toc A { color: #444; }

这样一个选择符，如果是从右往左解析则效率会很高，因为第一个ID选择基本上就把查找的范围限定了，但实际上浏览器对选择符的解析是从右往左进行的。如上面的选择符，浏览器必须遍历查找每一个A标签的祖先节点，效率并不像之前想象的那样高。根据浏览器的这一行为特点，在写选择符的时候需要注意很多事项，有人已经一一列举了，详情参考此处。

3. HTML

        对HTML本身的优化现如今也越来越多的受人关注了，详情可以参见这篇总结性文章。

4. Image压缩

        图片压缩是个技术活，不过现如今这方面的工具也非常多，压缩之后往往能带来不错的效果，具体的压缩原理以及方法在《Even Faster Web Sites》第10章有很详细的介绍，有兴趣的可以去看看。

总结

        本文从页面级以及代码级两个粒度对前端优化的各种方式做了一个总结，这些方法基本上都是前端开发人员在开发的过程中可以借鉴和实践的，除此之外，完整的前端优化还应该包括很多其他的途径，例如CDN、Gzip、多域名、无Cookie服务器等等，由于对于开发人员的可操作性并不强大，在此也就不多叙述了，详细的可以参考Yahoo和Google的这些“金科玉律”。

对于各种优化途径，如果一定要我给一个分类的话，我会用颜色来区分。对于那些在各种页面中都适用而且无害的方法，我将它们归为绿色。相对而言，只有在某些具体的情况下才适用或者有违标准的方法归为橙色。

绿色方法

1. 使用相对URL

对于页面中的各种URL，例如链接、外链CSS的href、外链Javascript的src、图片src、iframe src等，如果能够确定它们与当前页面是处于同一域名下的话，则可以使用相对URL，这样每一个URL都能够节省至少一个域名的长度。

2. 删除HTTP或HTTPS

绝对URL都以HTTP或HTTPS等协议头开始，如果能确定URL的协议与当前页面URL的协议是一致的，或者说该URL在多种协议下均是可用的，则可以考虑删除这个协议头。这样做虽然有些非主流，但事实证明是可行的，而且也有理论依据(见http://www.ietf.org/rfc/rfc2396.txt 第5.2节描述)。Nexus One的这个页面中有些资源URL就删除了协议头，虽然并不是出于节省资源的目的，但至少证明删除协议头是可行的。

对于CSS，如果删除协议头在IE7、IE8下会造成CSS下载两次，这个是需要注意的问题。

3. 删除注释

与CSS、Javascript一样，也可以通过删除HTML中的注释来实现优化。然而，这一点对于HTML来说却要复杂一些，因为在HTML中存在某些特殊作用的注释是不能删除的。

(a). IE条件注释

<!--[if expression]> HTML <![endif]—>

诸如这样的语法，只有符合expression的浏览器才能识别其中的内容。

(b). CDATA注释

<script type="text/javascript">
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

CDATA本身是XHTML中才需要的，在CDATA中的内容不需要对特殊字符进行转义，不过为了兼容老版本的浏览器，需要加上注释，以免出错。不过，对于这个注释，如果你的页面并没有真正的使用XHTML标准则可以大胆的删除掉。使用XHTML标准不是简单的声明DTD就可以办到的，除此之外还需要服务器能够派application/xhtml+xml这样的内容格式，另外还需要浏览器支持，目前IE并不支持XHTML格式。因此，目前你的页面可能是按照XHTML规范来写的，也能通过HTML验证，但想要兼容IE则一定还是以HTML方式来展示的。这样一来，很多为了遵循标准而增加的内容则可以删除，具体的在后文的橙色部分详述。

(c). 自定义注释

产品中自定义的一些具有特定功能的注释，例如统计。

4. 压缩空白符

在HTML中的大多数标签中，多个空白符都会被压缩成一个来显示，于是可以通过删除多余的空白符来减小HTML体积。不过需要注意的是并不是所有的空白符都可以这样做，例如pre、textarea中的空白符是按原样显示的，标签属性中的属性值也是按原样显示的，例如title、value等。

5. 压缩inline css & Javascript

不管inline还是external，都需要压缩，这是减小体积的最直接的方式。

6. CSS&Javascript尽量外链

外链CSS和Javascript，不仅仅是减小HTML本身的体积，而且还可以充分利用浏览器的缓存机制，所以当CSS、Javascript的代码量超过一定体积时，尽量外链。除此之外，尽量避免在页面中使用onmouseover=”xxxx”的方式来注册事件，既不利于维护也容易产生不必要的冗余代码。

7. 删除元素默认属性

在HTML规范中，很多HTML元素的属性是有默认值的，对于这些默认值可以抹去不写，下面是不完全统计。

橙色方法

橙色方法是指那些有违标准，或者会导致页面出现无法预料的问题的一类方法，算是一类非常规的方法，因此也仅仅适用于一些非常规的页面，例如搜索引擎首页。

1. 删除或替换<!DOCYTYPE>

DOCTYPE对于页面展现非常重要，浏览器会根据具体的DOCTYPE来决定如何显示页面，除非你对删除DOCTYPE后的页面展示十分有把握，否则不要轻易删除。另外一种可行的方式是采用HTML5中的写法，即<!doctype html>，大多数浏览器能够将这种doctype写法解析为标准或准标准(Almost Standard)模式，不过依然会造成一些问题，具体见这里。目前百度、Google都是这么做的。

2. 删除标签属性值的引号

引号不是必须的，删之。此处也需要考虑一些特殊情况，例如属性值中包含引号等。

（提醒：不符合XHTML规范）

3. 省略某些属性值

例如disabled、checked、multiple等的值都可以省略。

（提醒：不符合XHTML规范）

4. 删除可选的闭合标签

例如body、p、tr等标签是允许没有闭合标签的，具体的参考此处。

（提醒：不符合XHTML规范）

5. 删除自动闭合标签的”/”

（提醒：不符合XHTML规范）

工具

HTML优化工具目前比较理想的是Absolute HTML Compressor，另外，PageSpeed1.6中也引入了HTML压缩功能，不过目前只有四个简单的策略，尚处于实验性阶段。随着大家对前端性能越来越高的关注度，HTML优化及压缩方面也一定会有所发展的。

总结

1. HTML优化及压缩的发展滞后于前端其他资源，不过目前也已经引起大家越来越多的关注。

2. 绿色规则中的很多都是在写码过程中就可以注意和遵循的，如果能把这个优化融入到编码中，效果应该更好。

3. 橙色规则由于违背某些规范，只适用于某些特定的页面，使用时务必谨慎。

参考资料

HTML minify – to be or not to be?

Optimizing HTML

Optimizing Optimizing HTML

1. Javascript中的”,”（逗号）操作符

2. Javascript中”;”（分号）的重要性

3. Javascript中with块中的作用域

下面请看题目。

题目1

var
  b = 10,
  c = (
    20,
    function (x) { return x + 100},
    function () { return arguments[0]}
  );

a = b + c
({x: 10}).x;

要说这道题先来说说Javascript中的逗号，Javascript中的逗号大概在以下几处会用到：

//1. 变量申明
var v1, v2;

//2. 数组定义
var arr = [1,2,3];

//3. 函数参数
function func(arg1,arg2){};
func(1,2);

//4. 操作符(for语句中的循环执行表达式)
for( var i = 0, j = 0; i < len; i++,j++){}

其中用法1-3是比较常见的，而用法4中很多人并没有注意，for语句最后的”i++,j++”正式一个包含逗号操作符的表达式，在MDC中对逗号操作符做了如下描述：

You can use the comma operator when you want to include multiple expressions in a location that requires a single expression.

实际上，逗号操作符会从左往右依次计算每个表达式的值并返回最后一个表达式的计算结果。会到题中，变量c的赋值正是一个逗号操作符运算，因此c的值为function(){return arguments[0]}。

之后看a的赋值”b+c”，表面看貌似一个整数加一个函数，实际上因为c之后没有分号，因此c会与第二行的”({x:10})”结合，相当于”c({x:10})”，因此最后a的值为”10+10″。关于分号问题，下面有一段更常见的代码：

var a = function(){ return arguments[0];}
(function(x){
    return x;
})(100);

最后a的值为100，因此在给变量申明时务必记得加分号。

题目2

({
  x: 10,
  foo: function () {
    function bar() {
      console.log(x);
      console.log(y);
      console.log(this.x);
    }
    with (this) {
      var x = 20;
      var y = 30;
      bar.call(this);
    }
  }
}).foo();

这里主要是要搞清楚with块的作用，with(obj)使用时只是将obj放置在作用域链的最前端，而并不会像函数那样形成一个完整的活动对象（包括局部变量、arguments、函数等），因此在with块中使用var声明变量时，而实际上还是在with块之外创建了局部变量，并不是with块的局部变量。同样，在with块中定义的函数实际上也是属于with块外层。另外，在with块中给变量赋值时则会先从obj对象中查找变量，如果找不到则依次按照作用域链查找。 因此，以上的with块的代码可以这样分解：

({
  x: 10,
  foo: function () {
    function bar() {
      console.log(x);
      console.log(y);
      console.log(this.x);
    }

    var x,y;
    with (this) {
      x = 20;
      y = 30;
      bar.call(this);
    }
  }
}).foo();

在代码解析的时候，会在foo函数中创建两个局部变量x,y(初始值都为undefined)。而在运行时的with块中，给x赋值时因为首先找到的变量是this(也就是最外层的那个对象)中的x属性，因此this.x=20；这也造成了作用域链中位于this上一级的foo的上下文(context)中的局部变量x没有被赋值。同理，with块中给y赋值时，按作用域链查找到得是foo中的局部变量，因此局部变量y=30。最后bar在执行的时候，x/y均是访问foo中的局部变量，因此一个为undefined，一个为30,而this.x为20。

呃…要说清楚还真绕……!

HTML代码如下

<div class="test1">Test1</div>
<div class="test2">Test2</div>

CSS代码如下

.test1{
    background: url(http://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) 0 -207px no-repeat;
    width: 600px;
    height: 30px;
}
.test2{
    background: url(http://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) 0 -238px no-repeat;
    width: 270px;
    height: 60px;
}

通过Firebug查看具体请求如下：

经查证，这是一个已知Bug，仅存在于Firefox3.5中，不过在Firefox3.6版本中已经修复了。

如果无视Firefox3.5则可以到此为止，如果想要Hack这个问题则可以用以下的方式解决：

给每个使用背景图的元素添加一个相同的class name，并在这个class name中定义背景图片并在特定的类名中定义背景图片位置。这个方式也许并不算一个hack，仅仅是设置背景图片的另一个途径罢了，而且在一些情况下还可以节省字节。

修改后HTML代码如下

<div class="test test1">Test1</div>
<div class="test test2">Test2</div>

修改后CSS代码如下

.test{
    background: url(http://co.youa.baidu.com/picture/r/mall/xmas09/images/sprites.png) no-repeat;
}
.test1{
    background-position:0 -207px;
    width: 600px;
    height: 30px;
}
.test2{
    background-position:0 -238px;
    width: 270px;
    height: 60px;
}

通过Firebug查看具体请求如下：

修改后的测试页面在此。

1. 什么是repaint/reflow?
2. 什么情况下会触发浏览器的repaint/reflow?
3. 浏览器自身所作的优化
4. 如何优化你的脚本来减少repaint/reflow?

一、什么是repaint/reflow?

页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow；当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

以上提到的只是在页面加载时必然会出现的repaint和reflow，除此之外，在页面加载完成后，用户的一些操作、脚本的一些操作都会导致浏览器发生这种行为，具体在后文阐述。

另外，关于浏览器渲染的更为详细的资料可以参考以下，涵盖了IE以及Firefox：

Understanding Internet Explorer Rendering Behaviour

Notes on HTML Reflow

二、什么情况下会触发浏览器的repaint/reflow?

除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：

• DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
• 仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
• 应用新的样式或者修改任何影响元素外观的属性
• Resize浏览器窗口、滚动页面
• 读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))

在继续下面的文章之前，先介绍一款强大的性能分析工具-dynaTrace，借助该功能能够清晰的得到页面中的资源消耗情况，从而对症下药。另外，更细节的方面是它可以跟踪每个函数调用所造成的CPU消耗、Repaint/Reflow。接下来就借助该工具来测试一下以上描述的几点情况。

DOM元素的增删改

先看代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
    <body>
        <div id="test1" onclick="addNode()">这里是第1个节点</div>
        <div id="test2" onclick="modNode()">这里是第2个节点</div>
        <div id="test3" onclick="delNode()">这里是第3个节点</div>
    </body>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function addNode(){
            var n = document.createElement('div');
            n.innerHTML = 'New Node';
            $('test1').appendChild(n);
        }
        function modNode(){
            $('test2').innerHTML = 'hello';
        }
        function delNode(){
            $('test3').parentNode.removeChild($('test3'));
        }
    </script>
</html>

在依次点击完每一个按钮后，我们来看看dynaTrace的情况，首先是一目了然的点击事件分布

放大之后来看一下每个事件的repaint/reflow情况：

增加节点：

修改节点：

删除节点：

图中的绿色部分表示的是reflow和repaint过程，其中比较短的绿条标示的reflow过程，后面长条部分表示的是repaint过程。从图中可以看出，对DOM节点的增删改都会造成reflow和repaint，由于改动小所以reflow消耗的时间很短，但是由于repaint是全局的，因此消耗的时间都比较长。

修改DOM元素前景色

var n = $('colorNode');
n.style.color = 'red';

从上图中可以看到修改字体颜色后，浏览器只有repaint而没有reflow。接下来试试修改背景色：

var n = $('colorNode');
n.style.backgroundColor = 'red';

由图中可以看出，修改背景色也会造成reflow和repaint。另外，经过测试发现，只要是修改元素的cssText属性，不论它的值是什么，都会导致浏览器reflow和repaint，因此在某些时候选择特定的样式属性赋值会有更好的效果。

Resize浏览器窗口以及拖动滚动条

测试中的操作如下：缩小浏览器窗口->放大浏览器窗口->拖动页面滚动条至页面底部。从图中可以看到Resize浏览器窗口以及拖动滚动条都会造成浏览器的repaint，而且CPU的消耗也比较大，尤其是拖动滚动条的时候。

读取Layout属性

根据各种参考资料中的描述，在用Javascript读取DOM节点的Layout属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE)) 的时候也会触发repaint，不过在以下的测试例子中并没有发现这一点。

var n = $('colorNode');
var temp = document.documentElement.currentStyle;
temp = n.offsetTop;
temp = n.offsetLeft;
temp = n.offsetWidth;
temp = n.offsetHeight;
temp = n.scrollTop;
temp = n.scrollHeight;
alert(temp);

三、浏览器优化

浏览器对于每一个渲染动作并不是立即执行，而是维护了一个渲染任务队列，浏览器会根据具体的需要分批集中执行其中的任务。除了浏览器自身维护的定期调度之外，脚本中的某些操作会导致浏览器立即执行渲染任务，例如读取元素的Layout属性。

var bodystyle = document.body.style;
var computed;
if (document.body.currentStyle) {
  computed = document.body.currentStyle;
} else {
  computed = document.defaultView.getComputedStyle(document.body, '');
}

//每次都读取

bodystyle.color = 'red';
bodystyle.padding = '1px';
tmp = computed.backgroundColor;
bodystyle.color = 'white';
bodystyle.padding = '2px';
tmp = computed.backgroundImage;
bodystyle.color = 'green';
bodystyle.padding = '3px';
tmp = computed.backgroundAttachment;

//最后再读取

bodystyle.color = 'yellow';
bodystyle.padding = '4px';
bodystyle.color = 'pink';
bodystyle.padding = '5px';
bodystyle.color = 'blue';
bodystyle.padding = '6px';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;

每次读取的渲染图：

最后读取的渲染图：

四、如何优化你的脚本来减少reflow/repaint?

1. 避免在document上直接进行频繁的DOM操作，如果确实需要可以采用off-document的方式进行，具体的方法包括但不完全包括以下几种：

(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置

(2). 将元素的display设置为”none”，完成修改后再把display修改为原来的值

(3). 如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document

function appendEveryTime(){
    for( var i = 5000; i--; ){
        var n = document.createElement('div');
        n.innerHTML = 'node ' + i;
        document.body.appendChild(n);/*每次创建的新节点都append到文档*/
    }
}

function appendLast(){
     var frag = document.createDocumentFragment();
     for( var i = 5000; i--; ){
         var n = document.createElement('div');
         n.innerHTML = 'node ' + i;
         frag.appendChild(n);/*每次创建的节点先放入DocumentFragment中*/
     }
     document.body.appendChild(frag);
}

用dynaTrace观察的结果如下，appendLast的性能无论是在Javascript的执行时间以及浏览器渲染时间方面都优于appendEveryTime。

appendEveryTime:

appendLast:

2. 集中修改样式

(1). 尽可能少的修改元素style上的属性

(2). 尽量通过修改className来修改样式

(3). 通过cssText属性来设置样式值

如下的代码中，每一次赋值都会造成浏览器重新渲染，可以采用cssText或者className的方式

el.style.color = 'red;
el.style.height = '100px';
el.style.fontSize = '12px';
el.style.backgroundColor = 'white';

3. 缓存Layout属性值

对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。

var width = el.offsetWidth;
var scrollLeft = el.scrollLeft;

4. 设置元素的position为absolute或fixed

在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。

<body style="position:relative">
	<div id="test" style="background-color:red;width:100px;position:relative;">Animation Here</div>
</body>
<script type="text/javascript">
	function $(id){
		return document.getElementById(id);
	}
	window.onload = function(){
		var t = $('test');

		~function(){
			t.style.left = t.offsetLeft + 5 + 'px';
			t.style.height = t.offsetHeight + 5 + 'px';
			setTimeout(arguments.callee,500);
		}();
	}
</script>

通过修改#test元素的postion为relative和postion分别得到如下两个测试结果

position: relative

position: absolute

在postion:relative的测试当中，浏览器在重新渲染时做的工作比position:absolute多了不少。

参考资料

Understanding Internet Explorer Rendering Behaviour

Notes on HTML Reflow

EFFICIENT JAVASCRIPT

alert("a" in window);    /*true    -    1*/
if( false ){
    var a = 1;
}
alert("b" in window);    /*false    -    2*/
if( false ){
    b = 1;
}
alert("b" in window);    /*false    -    3*/
alert("c" in window);    /*false    -    4*/
if( true ){
    c = 1;
}
alert("c" in window);    /*true    -    5*/

以上代码片段是在全局作用域下定义的，对于第一个例子，Javascript在预解析的时候已经将变量a的声明添加到了活动对象中（具体可参考Javascript的“预解析），于是在运行时 “a” in window 为true。

然后第二个例子的结果是false，也就是说变量”b”在预解析的过程中并没有被放置在当前环境的活动对象中，原因在于没有使用var来定义变量”b”。对于使用了var定义的变量，预解析时可以明确的知道这是当前作用域的“本地”变量，因此可以准确无误的将变量添加到活动对象中，而那些没有使用var定义的变量则需要在运行时去处理。示例中的2 - 5句正好验证了没有使用var定义的变量需要在运行时进行处理。

在Answering Baranovskiy’s JavaScript quiz一文中给出的前3个问题均与预解析相关，如下：

if (!("a" in window)) {
    var a = 1;
}
alert(a);/*undefined*/

预解析时已经将变量a添加到window上，因此!(”a” in window)为false，导致运行时a没有被赋值，所以a的值为undefined。

var a = 1,
    b = function a(x) {
        x && a(--x);
    };
alert(a);/*1*/

这个在所有浏览器下都输出1，预解析时，第一行定义的变量a被添加到了window对象中，此时它的值为undefined，解析到第二行时，变量b也被添加到window对象中，其值也为undefined。同时，在IE下，后面的函数表达式也会被当做一个函数定义来处理，即相当于

var a = 1;
var b = function (x){
   x && a(—x);
};
function a(x) {  /*在IE下会被当做函数定义处理*/
    x && a(--x);
}
alert(a);/*1*/

当解析过程完成后，window对象中的变量a的引用是一个函数定义（仅限于IE），而到了运行时给变量赋值的时候，执行了以下3个动作：

1. 给变量a赋值为1（覆盖了原先a上面的函数定义）

2. 给变量b赋值为函数表达式

3. alert(a)

因此a的值为1。

function a(x) {
    return x * 2;
}
var a;
alert(a);/*函数代码*/

预解析时，完成了函数a的定义，即在window对象上添加变量a，并赋值为函数定义。之后遇到”var a;”，由于当前作用域已经有变量a，因此不需要做什么工作。在运行时，由于并没有给变量a赋值，因此原来的函数定义并没有覆盖，因此最终变量a是一个函数。如果将”var a;”改为”var a=1;”，则最终a的值为1。