1.合并排序
算法核心是将一堆数组中前后相邻的两个有序序列合并成一个有序序列，采用递归来实现，先进行划分，再进行合并。

function merge(left, right) {
var result = [];
while (left.length > 0 && right.length > 0) {
if (left[0] < right[0]) {
result.push(left.shift());
} else {
result.push(right.shift());
}
}

return result.concat(left).concat(right);
}
function mergeSort(arr) {
if (arr.length <= 1) {
return arr;
}
var middle = Math.floor(arr.length / 2);
var left = arr.slice(0, middle);
var right = arr.slice(middle);

return merge(mergeSort(left), mergeSort(right));
}

2. 快速排序
算法核心是先在数组中选择一个枢纽值，然后将比这个枢纽值小的元素移到左边，大于枢纽值的元素移到后边，对枢纽两边的值递归进行这么操作直至只有一个元素。

function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
var pivot = arr.splice(Math.floor(arr.length / 2), 1)[0];
var left = [];
var right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}

return quickSort(left).concat([pivot], quickSort(right));
}

3. 冒泡排序
算法核心是从上往下扫描数组，比较相邻两个元素，大的在数组的后面，小的在前面，如果不符合则交换二者位置。

function bubbleSort(arr) {
if (arr.length <= 1) {
return arr;
}
for (var i = arr.length - 1; i > 0; i--) {
for (var j = i - 1; j >= 0; j--) {
if (arr[j] < arr[j - 1]) {
var tmp = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = tmp;
}
}
}

return arr;
}

4. 选择排序
算法核心是首先在未排序序列中找到最小元素，放在排序序列的起始位置，再从未排序序列中找到最小元素放到排序序列末尾位置。

function selectSort(arr) {
var min, tmp;
for (var i = 0; i < arr.length; i++) {
min = i;
for (var j = i + 1; j < arr.length; j++) {
if (arr[min] > arr[j]) {
min = j;
}
}
if (min != i) {
tmp = arr[i];
arr[i] = arr[min];
arr[min] = tmp;
}
}

return arr;
}

5. 插入排序
算法核心是每次从无序列表中取出第一个元素，把它插入到有序表的合适位置，使有序表仍然有序。

function insertSort(arr) {
for (var i = 1; i < arr.length; i++) {
var tmp = arr[i],
j = i;
while (arr[j - 1] > tmp) {
arr[j] = arr[j - 1];
--j;
}
arr[j] = tmp;
}

return arr;
}
};

6. 数组的原生Sort方法
在sort内传入对比function就可以

arr.sort(function(a, b) {
return a - b;
});

上面这几种排序方法性能如下（数据量比较小的情况下），测试地址：http://jsperf.com/javascript-sort

您可能也喜欢：
Mathematic in Javascript(2)	Mathematic in Javascript	YUI3:更快，更轻量，更容易用	由“支付宝缴费页面问题”探讨所想到的
无觅

在淘宝技术沙龙上的演讲视频：

您可能也喜欢：
Adobe Flash平台技术峰会感受	使用ARIA，增强网站可访问性	YUICONF 2009 PPT笔记	YUI3:更快，更轻量，更容易用
无觅

Here is the slide in slideshare.net, I’m going to have a topic about “HTML5 on mobile” for developer in future.

您可能也喜欢：
HTML5 on Mobile(For Developer)	Debugging Mobile Web Page	WebRebuild大会演讲《揭秘HTML5和CSS3》分享	HTML5相关资源
无觅

PC上开发

从我的经验来看我一般先是使用Safari的模拟User Agent来开发Mobile Page, 开启Safari, 选择设置, 高级, 显示”开发”工具菜单, 这样你就能在Safari的菜单中看到”开发”了, 然后就可以选择一些User Agent:

但是有时可能还需要模拟Android Safari上的User Agent, 如

Google Nexus One: Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus

Android Tablet: Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; device Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Safari/533.1

只需要选择”Other”把自定义的User Agent输入进去即可.

模拟器上调试

当然Safari的开发者工具也不比Firebug差, 在桌面的Safari开发完成后, 还需要在模拟器上进行调试, iOS的Simulator需要安装XCode, XCode是用于开发Apple系列产品如Mac, iPhone, iPad上的集成开发环境, 包括IDE, Instruments, iOS Simulator以及最新的Mac OS X和iOS SDK.安装完XCode后, 在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications这个目录下, 打开iOS Simulator就可以运行了, 界面如下:

这样你就可以看到底部有Safari的浏览器, 通过打开设置->Safari->开发者->高级->调试控制台, 设置为开就可以打开Safari的控制台了, console.log/console.error的输出都会出现在控制台里面.

Android的Emulator安装请参考http://developer.android.com/guide/developing/devices/emulator.html

在模拟器上使用HOST文件

使用模拟器通常需要绑定开发环境的host, iPhone的模拟器会使用你Mac电脑的host文件, 这个比较方便, 而Android的Emulator修改host会比较麻烦, 因为它不会使用你本机的host文件, 下面来说一下怎么修改:

1.在android-sdk/tools/目录下启动Android Virtual Device(AVD): emulator -avd myAvdNameHere -partition-size 128

2. adb remount

3. adb push /etc/hosts /system/etc

设备上调试

最后就是设备调试阶段, 同样iPhone越狱的手机可以在Cydia安装mobile terminal这款软件来修改host文件, Android手机同样也有修改host的方法.

对于Mobile上的调试还有一个很有用的bookmark工具Mobile Perf bookmarklet, 它是由Google的Steve Souders创建的一个针对Mobile的调试工具列表, 如 Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, Zoompf等, 其中有些已经集成了Jdrop(云端Json数据存储平台), 这样就可以很方便地在PC上分析Mobile的数据了, iPhone上的安装请看这里.

远程调试

刚才说了Mobile上的数据不太好分析, 如果能在PC上调试Mobile上的页面就好了, 所以也出现了很多远程调试工具, 下面介绍几个:

1. Weinre, 这是一个很强大的远程调试工具, Weinre是”WEb INspector REmote”的缩写, 通过它你可以在PC上使用Safari的开发者工具来调试Mobile上的页面, 你也可以在线使用http://debug.phonegap.com/或是下载Weinre的客户端软件.

2. Jsconsole, 这是一个Javascript命令行工具, 它也提供了远程调试的功能.

3. Opera Dragonfly, Opera浏览器提供的开发者工具, 也很方便, 如果你的网站是需要兼容Opera的话可以试一下.

4. Socketbug, 建立在Node.js和Socket.IO上的Mobile Web调试工具.

5. Remote Debugging with Chrome for Android, 通过USB调试模式和android sdk自带的工具同时使用chrome的开发工具远程调试android上的页面.

6. Adobe Shadow, 安装了Adobe Shadow后就可以同步手机设备和PC，然后就可以在PC上远端调试Mobile上的页面。

您可能也喜欢：

HTML5 on Mobile(For Developer)

使用HTML5和CSS3构建基于webkit的Web Page/App

HTML5 on Mobile (For Designer)

IOS5的Mobile Safari新特性

无觅

前面有一篇文章介绍了HTML5的一些新特性以及技巧, 现再来总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.

HTML, 从HTML文档的开始到结束排列:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条

<meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)

<link rel=”apple-touch-icon” href=”icon.png”/> 设置你网页的图标, 尺寸为57X57 px

<!– iOS 2.0+: tell iOS not to apply any glare effects to the icon –>

<link rel=”apple-touch-icon-precomposed” href=”icon.png”/>

<!– iOS 4.2+ icons for different resolutions –>

<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />

<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />

<link rel=”apple-touch-startup-image” href=”startup.png”> 全屏启动时候的启动画面图像, 尺寸320X460 px

<meta name=”apple-mobile-web-app-capable” content=”yes” /> 是否允许全屏显示, 只有在桌面启动时可用

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 控制全屏时顶部状态栏的外观, 默认白色

<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>  取消自动完成, 自动大写单词字母(适用于Mobile上)

<input type=”text” x-webkit-speech /> 语音输入

<input type=”file” accept = “image/*; capture=camera” /> 文件上传, 从相机捕获媒体, 下同

<input type=”file” accept = “video/*; capture=camcorder” />

<input type=”file” accept = “audio/*; capture=microphone” />

<a href=”sms:18005555555,18005555556″]]> 发送短信给多个人 的链接

<a href=”sms:18005555555?body=Text%20goes%20here”]]> 发送短信附带内容 的链接

<a href=”tel:18005555555″]]>Call us at 1-800-555-5555</a]]> 拨打电话 的链接

CSS:

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明

-webkit-user-select: none; 设置为无法选择文本

-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片

:-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop)

div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器

@media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕设备

header { background-image: url(header-highres.png); }

}

@media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕设备

header { background-image: url(header-lowres.png); }

}

background-repeat:  space; background-repeat: round; 这两种CSS3的背景属性值得研究

width: calc(100%-40px); 计算宽度

text-decoration: #FF8800  wavy ine-through; 波浪型链接

text-rendering: optimizeLegibility; 用这个属性之后会收紧字符间的距离

font-variant-ligatures:  common-ligatures; 设置CSS连字

transform:  rotate(90); 旋转90度

transform-origin: center center; transform-origin可以改变变换的位置

-webkit-appearance: none; -webkit-appearance可以改变按钮或者其它控件看起来类似本地的控件

美化表单校验时的提示样式

::-webkit-validation-bubble {}

::-webkit-validation-bubble-message {}

::-webkit-validation-bubble-arrow {}

::-webkit-validation-bubble-arrow-clipper {}

当提示出现时类似于下面的结构

<div -webkit-validation-bubble>

<div -webkit-validation-bubble-arrow></div>

<div -webkit-validation-bubble-arrow-clipper></div>

<div -webkit-validation-bubble-message>Error Message</div>

</div>

自定义webkit浏览器的滚动条, 见Google Reader等在Chrome/Safari下的效果, 下面是一个实例, 这个滚动条的样式代码如下:

Customized WebKit Scrollbar /* Let´s get this party started */

::-webkit-scrollbar {

width: 12px;

}

/* Track */

::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

-webkit-border-radius: 10px;

border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

-webkit-border-radius: 10px;

border-radius: 10px;

background: rgba(255,0,0,0.8);

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4);

}

-webkit-background-composite: plus-darker; -webkit-background-composite用来设置一个元素的背景或颜色的组合样式

-webkit-text-stroke:  1px rgba(0,0,0,0.5); -webkit-text-stroke可以用来给文字添加描边

-webkit-mask-image:  url(/path/to/mask.png); 定义一个图片用来遮罩元素

-webkit-box-reflect:  below 5px; 定义了一个元素的反射

:local-link {font-weight: normal;}  local-link可以定义相对地址的链接样式

Javascript:

window.scrollTo(0,0); 隐藏地址栏

window.matchMedia(); 匹配媒体

navigator.connection; 决定手机是否运行在WiFi/3G等网络

window.devicePixelRatio; 决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)

window.navigator.onLine; 取得网络连接状态

window.navigator.standalone; 决定iPhone是否处于全屏状态

touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture事件 (Apple only, iOS 2+):  gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

window.addEventListener("orientationchange", function(e){

//window.orientation(0 is portrait, 90 and -90 are landscape)

}, false);

window.addEventListener("deviceorientation", function(e){

//e.alpha

//e.beta

//e.gamma

}, false);

window.addEventListener("devicemotion", function(e){

//e.accelerationIncludingGravity.x

//e.accelerationIncludingGravity.y

//e.accelerationIncludingGravity.z

}, false);

requestAnimationFrame() 新的动画函数

element.webkitRequestFullScreen() 调用全屏函数

阅读更多:

http://www.slideshare.net/franksvalli/mobile-html-css-and-javascript

http://css-tricks.com/9130-custom-scrollbars-in-webkit/

https://developer.mozilla.org/zh-CN/docs

您可能也喜欢：
使用HTML5和CSS3构建基于webkit的Web Page/App	WebRebuild大会演讲《揭秘HTML5和CSS3》分享	Javascript Sort	CSS3实例
无觅

Y.extend 实现了和原生继承一样的方式, Y.extend = function (SubClass, SuperClass, proto, static)

Y.extend(SubClass, SuperClass, {

someProperty: "booga!",
someMethod: function(){},

},{

someStaticMethod: function(){}

});

等价于下面的代码:

function SubClass() { // constructor}

SubClass.prototype = new SuperClass();

SubClass.prototype.someProperty = "booga!";

SubClass.prototype.someMethod = function () { ... };

SubClass.someStaticMethod = function () { ... };

Y. extend好处是创建了一个”干净”的继承关系, 不需要依赖YUI其它的模块, 保证了instanceof, 通过使用SubClass.superclass来控制父类的执行; 不足是没有实现多继承, 必须通过手动运行父类构造函数来保证链式调用; 适合简单的类继承

Y.Object, 拷贝一个新的对象

Y.Object = (function () {

function F() {}

return function (obj) {

F.prototype = obj;

return new F();

};

})();

Y. Object避免拷贝了过多的属性, 可以被用来构造工厂函数, 可以用来存储对象的初始值; 缺点是没有多继承, 在构造工厂函数的时候也许会产生凌乱, 在for/in循环中不能使用hasOwnProperty.

Y.augment, Y.augment = function (to, from, force, whitelist, config), to – 接受者, object/constructor, from – 提供者, constructor,to为constructor时, 会把from里的prototype里的东西传给to里面的prototype, 和extend不同的是它只是增加方法, 而不会暗示继承关系, 有点像多继承, 但是不是, 看下面这个例子:

YUI().use(´oop´, function(Y) {

function Foo() {}

Foo.prototype.doSomething = function () { /* something */ };

function Bar() {}

Y.augment(Bar, Foo);

var b = new Bar();

if (b instanceof Bar) {} // true

if (b instanceof Foo) {} // FALSE

});

使用Y.augment的好处是延迟构造函数的执行, 可以聚合多个类的方法, 支持类/对象的聚合; 缺点是instanceof聚合的类为false, 会消耗更多的内存, 对构造函数的控制受到了限制.

Plugins可以让你无缝地给对象(如nodes/widgets)添加功能,

Y.Plugin.Host.prototype.plug = function (Plugin, config) {

if (Plugin && Plugin.NS) {

config.host = this;

this[Plugin.NS] = new Plugin(config);

}

};

你也可以继承Y.Plugin.Base, 会获得更多的功能, 如对宿主的控制, 看下面的例子, 在给Widget类设计的一个Plugin里, 可以在render事件触发前改写_uiAnimSetVisible这个事件:

// A plugin class designed to animate Widget´s show and hide methods.

function WidgetAnimPlugin(config) {

//...

}

WidgetAnimPlugin.NAME = ´widgetAnimPlugin´;

WidgetAnimPlugin.NS = ´fx´;

WidgetAnimPlugin.ATTRS = {

animHidden : {

//...

},

};

Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {

initializer : function(config) {

// Override Widget´s _uiSetVisible method, with the custom animated method

this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);

},

_uiAnimSetVisible : function(show) {

// Instead of flipping visibility, use the animation

// instances configured for the plugin to animate

// hide/show.

if (this.get("host").get("rendered")) {

if (show) {

this.get("animHidden").stop();

this.get("animVisible").run();

} else {

this.get("animVisible").stop();

this.get("animHidden").run();

}

// Prevent the default method from being invoked.

return new Y.Do.Prevent();

}

}

});

使用Plugin的好处是避免方法/熟悉冲突, unplug后保留了宿主的行为, 普通的Plugin可以为不同类型的宿主工作, Y.Base和Y.Nodes类的实例可以直接使用.

Class Extensions, 当调用这个Y.Base.create = function(NAME, SuperClass, ext, proto, static)时, 会调用构造函数, 设置属性, 运行初始化方法.

MVC, 在YUI中App Framework实现了MVC, 由Y.Model, Y.ModelList, Y.View, Y.Controller(将会被Y.Router代替)的一些组件构成一个MVC结构来写单页面Javascript应用程序的框架，你可以用这些组件分别和一起创建任何简单的非交互式的视图或是基于URL的进程，数据绑定或者完全客户端式的同步。

YUI的MVC也是学习Backbone这个经典的MVC框架, 如果用过Backbone的话所以有些东西比较熟悉, Y.Model一般用来管理数据和状态, 观察属性, 管理事件, 维护需求逻辑, 通常有数据交互这一层; Y.View就是一个渲染的容器, 一般在这里订阅事件, 比较轻量级; Y.Router是一个基本的导航管理系统, 使用了HTML5的pushState和popState(或者降级使用基于hash的历史管理), 保证url可以被收藏并且浏览器后退前进按钮可用, Y.Router的一个例子:

router = new Y.Router();

router.route(/library/:lib/, function (req) {

var lib = req.params.lib;

if (lib === yui) {

Y.log(YUI Library is awesome!);

}

});

router.save(/library/yui/);// => YUI Library is awesome!

Y.Router的原理图如下:

Y.App是把前面三者组合起来的一个基础, 看下面的例子:

var usersApp = new Y.App({ 

views: { 

users: { 

type : Y.UsersView, 

preserve: true

}, 

user: { 

type : Y.UserView, 

parent: users 

} 

}

});

var users = new Y.UsersList();

usersApp.route(´/user/´, function () { 

this.showView(users, {modelList: users});

});

usersApp.route(´/user/:id/´, function (req) { 

var user = users.getById(req.params.id); 

this.showView(user, {model: user}, function (view) { 

// Called after transition. 

});

});

同时Eric还引入了一个Pjax的概念, pushState+Ajax=Pjax, 主要用来处理用户点击链接, 然后更新URL, 再去动态加载/更新内容, 它的原理图如下:

重新来看Y.App的话其实它就是一个使用Pjax的View/Router, 有一个激活的View, 处理各个View的生命周期以及过渡, 在做一个App时经常使用到的一个技术是模板技术, YUI也借鉴了Mustache的优点即将引入handlebars模块, Y.Handlebars, 看一个Handlebars的模板:

<script id="entry-template" type="text/x-handlebars-template">

<div class="entry"> 

<h1><{{title}}</h1> 

{{#if author}} 

<p class="author">{{author}}</p> 

{{/if}} 

<div class="body">{{body}}</div> 

</div>

</script>

看看Y.Handlebars是怎么处理的:

YUI().use(´handlebars´, ´node-base´, function (Y) { 

var template = Y.one(´#entry-template´).getContent(), 

render = Y.Handlebars.compile(template), 

entry = { 

title : ´The Adventures of Tom Selleck´, 

body : ´Tom crossed the river in his Ferrari…´, 

author: ´Ryan Grove´ 

}; 

Y.one(#entry).setContent(render(entry));

});

有一个例子Photonearme就是使用了YUI的App Framework, 同时又实现了响应设计, 源代码请移步这里, YUIConf还有更精彩的内容, 待续.

了解更多:

http://yuilibrary.com/yui/docs/app/

https://gist.github.com/1367067

您可能也喜欢：

使用YUI3组织网站结构

Get Started with YUI

YUI3.3.0新特性

YUI3的Widget组件介绍

无觅

Twitter上看到的一个好文，关于Mobile网站性能优化的文章，http://davidbcalhoun.com/2011/mobile-performance-manifesto

现总结以下：

Mobile网站的性能受到很多因素的影响: 低网速, 高延迟, 慢硬件, 不同的浏览体验, 不同的手机类型, 不同的网络.

延迟测试:

ATT Edge: ~400-600ms

ATT 3G: ~400ms

Verizon 3G: ~150-250ms

Coffee Wifi: ~75ms-200ms

Home Wifi: ~25-35ms

带宽测试:

ATT Edge: ~2-10kbps

ATT 3G: ~60-100kbps

Verizon 3G: ~20-70kbps

Coffee Wifi: ~550kbps-650kbps

Home Wifi: ~1000kbps-2000kbps

不同运营商的网络状况不同，就需要我们针对不同的网络选择不同的页面配置，Android 2.2以上已经支持navigator.connection，如一个3G的手机返回的结果是： {  type: 4, UNKNOWN: 0, ETHERNET: 1, WIFI: 2, CELL_2G: 3, CELL_3G: 4  }

在页面的组织上，Mobile上的Web Page尽量要减少跳转，同时也要充分利用浏览器的缓存，Feature Phone对缓存的支持比较少，而Smart Phone则可以在一个会话中比较好的缓存页面资源文件。

避免重定向

在服务器上设置重定向的场景，如一个url在desktop是pc的结果，而在mobile上则是mobile的结果，对于用户来说是透明的，而不是foo.com被定向到m.foo.com

优化图片

针对不同的设备显示不同大小的图片，通过Javascript或者CSS的Media Query来优化图片，如

Javascript Example:

window.innerHeight;       // max height actually available
window.innerWidth;        // max width actually available
window.devicePixelRatio;  // pixel density (standard is 1, high resolution is generally > 1)

Media Query Example:

@media only screen and (max-width: 480px) {

/* small screen styles */

}

@media only screen and (min-width: 481px) {

/* large screen styles */

}

@media (-webkit-min-device-pixel-ratio: 1.5),

(-o-min-device-pixel-ratio: 3/2),

(min--moz-device-pixel-ratio: 1.5),

(min-device-pixel-ratio: 1.5) {

/* high resolution styles */

}

使用Data URL来渲染图片

可以在HTML和CSS中使用base64加密二进制图片数据，一般用来渲染小图标

使用Unicode和Emoji

☆ (HTML entity: #9734)  (HTML entity: #x1f468)

还可以使用Unicode字符和Emoji来显示一些特殊符号，不过在各个不同的浏览器和各个运营商它们的实现都不尽相同，所以可以尝试地去使用一下。

充分利用CSS3

很多场景下都不需要使用图片而使用CSS3就能达到一样的效果，如透明度，阴影，渐变等。

避免使用Cookie

使用LocalStorage/SessionStorage代替Cookie。

使用App Cache

如果想让你的Web App离线可以用，App Cache是一个不错的选择。

延迟执行Javascript

我们知道延迟加载Javascript可以提高网站的性能，同样延迟执行Javascript甚至更重要，当然你可以用defer属性，但是它只是在加载的时候有效，当加载后怎么办呢，如XHR或JSONP这样在后台的请求还是会让UI冻结住， Gmail Mobile给出的一个解决方法是Comment动态加载的脚本，当需要的时候再去eval，如：

<html>

...

<script id="lazy">

// Make sure you strip out (or replace) comment blocks in your JavaScript first.

/*

JavaScript of lazy module

*/

</script>

<script>

function lazyLoad() {

var lazyElement = document.getElementById(´lazy´);

var lazyElementBody = lazyElement.innerHTML;

var jsCode = stripOutCommentBlock(lazyElementBody);

eval(jsCode);

}

</script>

<div onclick=lazyLoad()> Lazy Load </div>

</html>

感知性能

在任何时候都要让用户知道UI正在响应，如点击一个按钮，让用户知道他们已经点过了，如果用户点了一个可能会请求网络的东西，给他们展示一个加载的图标，即使你还没有发送那个请求。

Onclick事件的延迟

许多Mobile操作系统里面的onclick事件大概都有几百毫秒的延迟，解决的方法是使用touch事件。

充分利用硬件加速

使用硬件加速的CSS Transform(如translate3d, translateZ, rotate3d, scale3d)，这时HTML的元素就会转变为图形，这时就可以充分利用GPU的优势，而且减少了CPU的压力。但是GPU也不是万能的，所以不要对所有元素都使用硬件加速。

HTTP Pipeling

充分利用HTTP Pipeling，HTTP Pipeling由于用的比例不多所以经常被人们忽视，但是在Mobile上使用的比例越来越多，因为它很大程度上消除了RTTs，现在Android的很多设备和IOS5都已经支持HTTP Pipeling了，如果让你的服务器支持HTTP Pipeling，你需要添加以下两句：

Use of HTTP/1.1

An explicit “Connection: Keep-Alive” header (required by Android)

DNS预获取

关闭DNS预获取，使用<meta http-equiv=”x-dns-prefetch-control” content=”off”>，同样你也可以强制一个DNS查询

<link rel=”dns-prefetch” href=”http://www.example.com/”>

避免脚本库臃肿

尽量减少脚本库的使用，如Jquery Mobile(因为对于桌面版本的jquery依赖性较强)，可以使用以下新的Javascript API:

querySelector/querySelectorAll, getElementsByClassName, classList, XMLHttpRequest, HTML5 history, HTML5 Form Validation, HTML5 input types

当然你也可以考虑使用优化过的库如Zepto.js，或者某一个功能的库如http://microjs.com/。

客户端数据库

大部分Mobile浏览器支持WebSQL，但是标准逐渐会转向indexedDB，所以还是使用indexedDB为好。

更多

1.使用和pc上的最佳实践一样的优化方法

2.使用requestAnimationFrame代替setTimeout

3.使用setImmediate代替setTimeout(fn(){},0)

4.不要用过多的XHR

5.避免rgba, box shadows, text shadow，因为在动画的时候会影响性能

6.可以通过伸缩页面来提高性能

7.webkit的动画比javascript做的更快

8.如果要用javascript做动画的话，现在UI的更新最快到17ms，即相当于60fps

更多请阅读：

http://www.slideshare.net/firt/mobile-web-html5-performance-optimization

http://davidbcalhoun.com/present/mobile-performance/

http://www.html5rocks.com/en/mobile/optimization-and-performance.html

http://www.blaze.io/mobile/http-pipelining-big-in-mobile/

http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devconf.pdf

http://29a.ch/2011/5/27/fast-html5-canvas-on-iphone-mobile-safari-performance

您可能也喜欢：

跨浏览器移动网站开发(cross-browser mobile web development)

提高网站性能最佳实践

YUI Loader & YLS

HTML5 on Mobile(For Developer)

无觅

IOS5(官方介绍)即将发布，可以说是又增加了很多新的特性，而Mobile Safari已经成为了IOS中一个很重要的特性，它也是第一个没有依赖Flash并且给手机用户带来完整的web体验的浏览器。

在IOS5刚出beta版本的时候，微软做的一个测试显示ios5的Mobile Safari对比Windows Phone7的ie和Android的浏览器性能很差，不过在后来的版本中IOS5做了很大的提高，那个测试的分数已经超过了这两个。

对于开发者来说，Mobile Safari有哪些新的特性呢? 我觉得最让我们兴奋的就是解决了position:fixed和overflow:scroll的问题。

在IOS5之前IOS不支持position:fixed，所以只能模拟这种效果，如监听body的touchmove事件，获取偏移量再计算元素的位置，可以看看Twitter的顶部条采用的就是这种方法。

同样IOS5将会提供对于overflow:scroll的支持，这样就不用通过JS的方法来模拟scroll的效果，如果浏览器原生就支持scroll，势必会对网页的性能有好处，而且也不需要像iScroll或YUI的Scrollview或是scrollability这样的优雅降级的解决方案了，同时开发者可以通过-webkit-overflow-scrolling: touch;来使用浏览器内置的滚动条。

除了上面说的两个新特性外，在HTML5方面，IOS5还增加了一些对Input的支持，如date, datatime, month, time, range的支持，还有对于Web Workers, ECMASCRIPT 5, inline SVG, float32array, int8array, int16array, int32array in JavaScript, MathML, -webkit-linear-gradient等，via http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5

你现在可以测试一下这些新特性了，可以通过下载IOS5的SDK或者是在Safari中设置Useragent(Mozilla/5.0 (iPhone Simulator; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46(KHTML, like Gecko) Version/5.1 Mobile/9A5302b Safari/7534.48.3)

相信IOS5会给我们带来惊喜，native apps和web apps的区别会变得越来越模糊，他们也可以”混搭”做出兼容各个平台的app，虽然Facebook的”斯巴达”项目是为了抵制Apple，但是Apple对于web apps的确提供了很好的平台。

您可能也喜欢：
Debugging Mobile Web Page	HTML5 on Mobile(For Developer)	HTML5 on Mobile (For Designer)	跨浏览器移动网站开发(cross-browser mobile web development)
无觅