Miller -- IT技术博客大学习 -- 共学习共进步！

• Phonegap + HTML5 开发经验小结

去年曾对Phonegap做过一次调研，当时还是1.1版本，印象也一般。对他的性能以及真实的跨平台能力都不太确定。今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目，项目至今已经完成了一期的App Store提交，所以也正好能抽时间来小结一下。一个月左右的开发过程让我对这种开发模式有了更深的认识，这对于前端开发人员而言绝对是一个大的机会。Phonegap Native API + Plugin基本能访问移动设备绝大部分本地功能，除此之外就是HTML5了，迁移成本非常的低，而开发效率也是很高的。与传统Web开发相比，在移动设备进行Web开发有着自己的特点，例如不同设备的屏幕尺寸以及分辨率都有可

• [正则优化] CSS选择符匹配

CSS选择符匹配

• [正则优化] 加速正则失败效率

上一文《正则优化一则：CSS选择符匹配》中说到了如何优化一个正则在匹配成功时的效率，而实际上正则匹配有成功就会有失败，因此失败时的效率也是需要注意的。继续上文中的正则，分析了一下优化前和优化后表达式失败时的效率.

• [正则优化] CSS属性选择符的匹配

结果显示，在匹配成功的情况下，IE、Firefox的性能提升在1倍以上，Chrome下也超过50%。

• HTML5实战之本地存储(3) - 请求同步

在实际上项目当中，经常需要使用短轮询(每隔一定时间就向服务器发送一次请求，请求通常会立即返回)和长轮询(每次请求服务器会Hold一段时间直到有新数据或者超时，客户端收到数据后会立即进行下一次请求）来从服务器拉取数据，然后动态的更新页面。随着功能的增加，一个页面中往往存在不止一个这样的轮询请求，而且在用户开启多个Tab页面时，总得请求数会翻倍。而“请求同步”指的是在以上场景中，即使是开启多个Tab也只有一个Tab页...

• HTML5实战之本地存储(2)

本文介绍Tab之间的操作同步的实现，所谓操作同步是指将用户在某个Tab窗口中的操作同步到所有其他同一站点得Tab中。例如IM窗口的操作（打开、最大化、最小化、关闭、设置等），由于很多用户会在多个Tab之间切换，而IM在每个页面中都存在，因此对于数据同步的要求是比较高的，以前的做法是使用服务器方式来同步，即所有操作都向服务器发请求，然后广播，Tab收到消息后再响应。缺点是比较浪费资源，另外延时也比较严重。实现在具...

• HTML5实战之本地存储(1)

很早之前调研过HTML5的本地存储-《DOM Storage全解析》，大致上对localStorage、sessionStorage等API做了下了解，但是一直没有机会真正的在项目中使用。终于这次借重构Web IM的机会，对本地存储做了更深入的使用，除了基本的API使用之外还在次基础上封装了一些应用层的库，例如Tab之间的操作同步、Tab之间的请求同步等。本文主要做一个阶段性的经验总结。一、localStorge onstorage事件的兼容性 1. 触发情况 IE8/IE9/Firefox3.6:...

• 渐进式的脚本加载

通过之前几篇性能指标分析系列的文章可以发现，无论是对于哪个性能指标来说，脚本的影响都是最大的。实际的线上监控数据（图1）也确实能够论证这一点，例如某个页面DOM Ready的时间在4.1s左右，而外链脚本的加载和执行则消耗了2.8s左右，比例高达68.74%。也就是说假如该页面没有脚本的话，页面的DOM Ready时间将会大大缩短。实际的页面中，脚本在加强和提高交互体验方面又是不可或缺的，因此需要从脚本的合理使...

• 从用户体验出发的性能指标分析-TTI

TTI(Time To Interact)指的是页面可交互的时间。页面中的交互包括很多方面，例如点击一个链接、点击一个搜索按钮都属于页面交互的范畴，但是对于衡量性能的TTI则主要指核心功能可以交互的时间。核心功能的定义则是随着页面的不同而不同，例如对于百度首页而言，最为关键的就是搜索框出现的时间、而对于一些购物网站的商品详情页最关键的是购买功能可用和描述出现的时间。而目前的实际情况，TTI大都等于DOM Ready时间，因为不论交互功能是否重要，相关的Javascript都会在DOM Ready后才进行初始化和绑定，而实际上TTI是可以更早的。

• 从用户体验出发的性能指标分析-Page Load

Page Load时间指的就是window.onload事件触发的时间。与DOM Ready时间相比，Page Load的时间往往要更靠后一些，因为Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间，例如图片资源的加载、iframe的加载等。

• 从用户体验出发的性能指标分析-DOM Ready

DOM Ready，指的是页面解析完成的时间，在高级浏览器里有对应的DOM事件 - DOMContentLoaded。即该事件在文档解析完成时会触发。那么文档解析到底包括哪些操作呢？虽然暂不能给出一个完全的答案，但文档的解析至少应该包括以下操作：HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，但是不包括图片、iframe等其它资源的加载。正因为如此，该事件触发的时机一般比window.onload要早，而且是在所有DOM元素都可以操作之时。

• 从用户体验出发的性能指标分析-Start Render

如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？

• HTML5中的FORM2.0

FORM在HTML5中的变化算是比较大的，一方面体现在新增了大量的2.0时代的控件，另一方面则是整个FORM结构的变化。与新增的控件相比，新的FORM结构一样为将来的开发工作提供了很大的便利性。一、2.0的FORM结构 1. 可以随便放置的表单控件在HTML4的表单实现中，如果不借助脚本则必须将表单控件放置在

• HTML5中的自定义属性

在WEB页面中，为了配合Javascript的交互功能，很多时候都需要给HTML标签添加自定义属性（虽然标准不支持这么做），而关于自定义属性的名字则大都也是各自为战的自定义的，或根据功能、或根据项目等等

• 从另外两道题说起

最近貌似流行做Javascript题，Dmitry A. Soshnikov这又出了几道题-The quiz，还可以自我评分，有兴趣的可以去试试看自己可以得几分。本文主要挑了2道比较绕的题目来说几个知识点： 1. Javascript中的”,”（逗号）操作符 2. Javascript中”;”（分号）的重要性 3. Javascript中with块中的作用域下面请看题目。

• DOM Storage全解析

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。此外，在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage，但是这几种方式都存在兼容性方面的局限性，因此真正使用起来并不理想。针对以上情况，HTML5中给出了更...

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

文本内容主要包括以下几点：什么是repaint/reflow? 什么情况下会触发浏览器的repaint/reflow? 浏览器自身所作的优化如何优化你的脚本来减少repaint/reflow? 一、什么是repaint/reflow? 页面在加载的过程中，需要对文档结构进行解析，同时需要结合各种各样的样式来计算这个页面长什么样子，最后再经过浏览器的渲染页面就出现了。这整个过程细说起来还是比较复杂，其中充满了repaint和reflow。对于DOM结构中的各个元素都有自己...

• Javascript预解析相关一则

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

• 前端优化总结

前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。前言前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？ 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更...

• DOM操作琐碎知识点

1. parentWindow 与 defaultView parentWinow是IE下document的特有属性，表示的是document所在的window对象 defaultView DOM Level2中引入的属性，document.defaultView指向默认的AbstractView。 2. 各种坐标以及维度属性元素可见区域宽/高(不包括border)： clientWidth/clientHeight 元素可见区域宽/高(包括border)： offsetWidth/offsetHeight 元素整体宽/高(包括因滚动而隐藏的部分)： scrollWidth...