客户端存储与计算

客户端存储与计算2010-06-03Part1客户端存储为什么要把数据存储在客户端性能Cache资源应用的离线功能用户隐私数据其他原因目前主要的存储方式CookieFlashShareObjectUserDataDomStorageWSilverlightGoogleGearsOpenDatabaseApplicationCache...主流浏览器的支持情况IE6IE7IE8FirefoxSafariChromeOperaCookieYYYYYYYFlashShareObjectyyyyyyyUserDataYYYNNNNDomStorageSessionStorageNNYYYYYLocalStorageNNYYYYYGlobalStorageNNNYNNNWYYYYYYYSilverlightyyyyyyyGoogleGearsyyyyyyyOpenDatabaseNNNNYYYApplicationCacheNNNYYYN注：Y支持N

不支持y

需要安装插件Cookie每个cookies的大小不能超过4096字节一般至多允许每个网站使用20个一些浏览器要求所有网站总共的cookie数不能超过300个不能跨浏览器每次请求都会把数据发送到服务器端浏览器支持最全面和服务器交互方便写cookie得拼RPCookieFlashShareObjectKey-Value存储方式默认提供了100k，可向用户申请更大的空间浏览器支持情况良好跨浏览器要求浏览器安装Flash插件FlashPlayer6+必须在页面中加载一个flash，而且得保证flash可以正常工作FlashShareObjectFlashShareObjectpublicclassFsoextendsSprite{

privatevarso:SharedObject;

publicfunctionFso(){

so=SharedObject.getLocal("wenwen");

ExternalInterface.addCallback("set",_set);

ExternalInterface.addCallback("get",_get);

}

privatefunction_set(_key:String,_value:String):void{

so.data[_key]=_value;

so.data.push();

} privatefunction_get(_key:String):String{

returnso.data[_key]; }}FlashShareObjectDemoUserDataUserData单个页面提供128K每个domain提供1024KIE5.5+浏览器支持不能跨浏览器只能在相同路径下的不同页面间共享UserDataDemoDomStorage三种形式sessionStorage、localStorage和globalStorageglobalStorage是与localStorage类似的早期实现sessionStorage会话结束时就会销毁localStorage是持久化存储sessionStorage和localStorage总共提供了10M的存储空间DomStorageW3C对Storage接口的定义DomStoragelocalStorage与globalStorage调用方法的差异DomStorageDemoWWindow原生对象的一个属性，所有浏览器都支持提供了2MB~~60MB的空间只有在链接跳转时才能传递数据可以跨页面，跨域可以在页面的domready事件之前使用不能够持久化WDemoSilverlight提供了一个IsolatedStorageFile独立存储的API默认为每个应用提供了1M的空间跨浏览器需要安装Silverlight插件SilverlightDemoGoogleGearsGoogleGears基于SQLite默认为每个应用提供了1M的空间，可向用户申请更大的空间需要安装GoogleGears插件支持全文检索Google不再打算支持此技术了GoogleGearsDemoGoogleGearsOpenDataBaseHTML5正宗的存储方案每个域名提供5MB的存储空间SQL语言的支持事务支持OpenDataBaseDemoApplicationCache可以CacheUI文件（js,css,html,img..）应用离线功能实现的基础<htmlmanifest=”foo.manifest”>text/cache-manifest当前支持的浏览器：Firefox、Chrome、SafariApplicationCacheDemo容量浏览器优点缺点Cookie4kAll安全，可设置过期时间存储空间小，不能跨浏览器FlashSharedObject100KIE,Firefox,Webkit,Opera提供key-value存储方式，浏览器支持良好需要安装flash插件User

Data128K/pageIE可持久化，快速只支持IE，只能在相同路径下的不同页面间共享DOMStorage10MB/zoneFirefox,IE8,Safari,Chrome存储空间大，快速，安全需要新版本的浏览器W2~~60MBAll浏览器支持良好，存储空间较大不能持久化，只能在页面跳转间传递，不安全Silverlight1MB/appIE,Firefox,Webkit,Opera存储空间大，高速需要安装silverlight插件(60%)GoogleGears5MBIE,Webkit*,Firefox基于SQLite，全文检索，高速需要安装googlegears插件，以后不再更新维护OpenDataBase~5MB*Safari,Chrome*,Opera*存储空间大，支持SQL，事务，前途光明，目前支持的浏览器还很少ApplicationCacheSafari，Chrome，Firefox目前支持的浏览器还很少Part2客户端计算客户端计算Javascript设计之初现在客户端计算浏览器单进程多进程JavaScript单线程多线程JavaScript运行在多个解释引擎下JavaScript更多的时候是和DOM、BOM在协同工作更多的时候是CSS和DOM让javascript变慢JavaScriptCoreSpiderMonkeyJScriptV8HTMLCollectionObjetNote:

CollectionsintheHTMLDOMareassumedtobe

live

meaningthattheyareautomaticallyupdatedwhentheunderlyingdocumentischanged.HTMLCollectionObjetDemo对于我们有用的优化方法尽量减少对元素属性的访问--把经常要访问的属性存储在本地变量中如果要访问一组元素可以将它们存储在一个数组对象当中客户端计算Reflow&Repaint页面渲染过程ReflowRepaintReflow&RepaintReflow(回流)是导致DOM脚本执行低效的一个关键因素。页面上任何一个结点触发reflow，都会导致它的子结点及祖先结点重新渲染Repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生，如改变visibility、outline、前景色什么时候发生Reflow&Repaint添加，删除，更新DOM节点通过display:none用隐藏DOM节点（导致reflow和重绘）或者用visibility:hidden（只导致重绘，因为位置不变）在页面移动DOM节点，或者使用动画添加样式表，调整style属性调整窗口大小，改变字体大小，还有滚动页面聪明的浏览器浏览器做了优化，不会立即执行更改但有些操作还是会立即执行--(HeightWidthgetComputedStyle()orcurrentStyle)Reflow&RepaintDemo对于我们有用的优化方法Off-DocumentOperationsDocumentFragment批量改变样式使用class修改不可见元素--如果一个元素的display样式被设置为none，即使其内容变化也不再需要重绘(Repaint)此元素，因为根本就不会显示此元素。注意尽量避免不必要的reflowDocumentFragment类似于document的对象有用的占位符暂时存放那些要一次插入文档的节点varfragment=document.createDocumentFragment();varheading=fragment.appendChild(document.createElement('h1'));heading.appendChild(document.createTextNode('QuotesbyYoda'));document.body.appendChild(fragment);WebWorkersWebWorkers为JavaScript脚本提供了一种能在后台进程中运行的方法。一旦它被创建，WebWorkers就可以通过postMessage()向任务池发送任务请求，执行完之后再通过postMessage()返回消息给创建者指定的事件处理程序WebWorkers进程能够在不影响用户界面的情况下处理任务，并且，它还可以