移动Web应用程序开发 高性能JavaScript篇 (五) 算法和UI响应

介绍

本系列博客将主要介绍如今大红大紫的移动Web应用程序开发最重要的三个工具:HTML5,JavaScript, CSS3。博文也分为三个大部分:

1. 众望所归的HTML5将主要介绍HTML5的前世今生,主要功能和API以及相关Demo,Demo的代码都可以在文章附件中下载到;

2. 高性能JavaScript将主要介绍如何让JavaScript更流畅,JavaScript debug和分析工具,可以说,没有JavaScript就不可能有互联网的今天,更不可能有移动互联网的明天,编写高性能的JavaScript至关重要;

3. 变化万千的CSS3将主要介绍如今异常强大的CSS3,结合HTML5编写动态的Web应用。熟练使用异常Fashion & Cool & 炫的CSS3将使Web应用增色不少。

本篇是高性能JavaScript介绍的介绍的第五篇也是最后一篇,将给大家结合实例例子介绍如何在算法层面编写高效的JavaScript代码,以及如何让UI更快地响应JavaScript代码。

相关文章

移动Web应用程序开发 高性能JavaScript篇 (一) JavaScript 性能瓶颈

移动Web应用程序开发 高性能JavaScript篇 (二) JavaScript 性能分析工具

移动Web应用程序开发 高性能JavaScript篇 (三) JavaScript 加载解析和部署

移动Web应用程序开发 高性能JavaScript篇 (四) JavaScript数据访问和DOM编程

1. 算法和流程控制

在使用循环的时候,要尽量避免使用for in, 除非是在一个不明确的对象里面,需要迭代其内部对象。如果已经知道其结构和内容数据类型,避免使用for in。

下面三个例子,可以说明不同的循环算法,所带来的性能上的差异。

算法一,使用for in,:

var i=0

for (i in geo){

document.write("The country is " + geo[i] +"<br />")

}

运行时间结果是最长的,即最没有效率的:(24ms)

算法二,for循环

for (var i=0 ; i < geo.length; i++){

document.write("The country is " + geo[i] +"<br />")

}

运行时间结果,比较有效率(17ms)

算法三 for循环,将i.length存储为局部变量

for (var i=0, len=geo.length; i < len; i++){

document.write("The country is " + geo[i] +"<br />")

}

运行时间结果,最高效。(14ms)

通常来说,使用switch 比使用if-else 要更高效。下面我们用一个string数组String[180]来举例:全部代码可以在本文最后附近中下载

算法一: if语句

if (i == "20"){

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

} else if (i == "11"){

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

} else if (i == "26"){

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

运行结果 (26ms):

算法二:使用switch 语句

switch(i){

case(20):

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

break;

case(11):

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

break;

case(26):

document.write("The country is " + geo[i] +"<br />")

document.write("The number is " + i +"<br />")

break;

运行结果(11ms)要明显优于if语句:

其他的优化方法,见下图:

2. UI相应

长时间执行的JavaScript代码会给UI线程带来阻塞。代码片段一:

<body>

<button onclick="handleClick()">Click Me</button>

<script type="text/javascript">

function handleClick(){

var div = document.createElement("div");

div.innerHTML = "Clicked!";

document.body.appendChild(div);

}

</script>

</body>

其运行情况如下图所示:

JS handleClick()函数会阻塞UI线程。为了解决这个问题,可以使用HTML5新引入的Web workers API,可以实现JS的多线程编程,可以在UI线程意外新建一个线程去执行workers里面的代码。

Web works一般使用在以下几个场合:

1. 对一个大的数据进行编解码

2. 复杂的数学运算

3. 对一个大的数据进行排序,删选等操作

注意,web works 里面不可以申请DOM访问权限。

Web works的示例代码如下:

本篇代码下载: 下载地址

Para obtener más información sobre las optimizaciones del compilador, consulte el aviso sobre la optimización.