**使用HTML5开发))~WebApp性能注意点*!~

****使用HTML5开发))~WebApp性能注意点*!~ 

*PhoneGap HTML5 应用简介

PhoneGap是一个   

用基于HTML，CSS

和JavaScript的，   

创建移动跨平台移

动应用程序的快速

开发平台。它使开

发者能够利用iPhone，

Android，Palm，

Symbian,WP7,Bada

和Blackberry智能

手机的核心功能——包括地理定位，加速器，

联系人，声音和振动等，此外PhoneGap拥有

丰富的插件，可以以此扩展无限的功能。

PhoneGap是免费的，但是它需要特定平台提供

的附加软件，例如iPhone的iPhone SDK，

Android的Android SDK等，也可以和DW5.5配

套开发。使用PhoneGap只比为每个平台分别 

建立应用程序好一点点，因为虽然基本代码是

一样的，但是你仍然需要为每个平台分别  

编译应用程序。*

*PhoneGap WebApp分析

我们分析了目前Google play, 安卓市场，豌豆荚

市场，机锋市场的下载量前300名的应用，以及

每个分类的前50名的应用进行分析，发现以下 

7个应用采用了PhoneGap开发：

**

*来自国内市场的有5个应用.当然，还有更多的 

纯HTML5应用程序没有计算在内，也没有计算 

来自iOS的phoneGap应用。*

*分析工具WAPA介绍

我们将上述的PhoneGap应用全部使用了WAPA 

进行分析，WAPA是Web Application Performance

Analyzer(Web应用性能分析器)的简称，其来源于

Intel软件与服务部门全球合作伙伴关系事业  

部HTML5应用团队的创新项目。旨在给开发者 

提供如何编写高性能HTML5应用程序提供 

代码级别的建议*

*WAPA对HTML5应用分析过程如图所示*

**

*1.    首先解包目标Web应用的安装包；

2.    接下来解析相应的源代码文件(.html, .js. .css)

3.    如果是JS文件，则生成相应的语法树；如果是 

html和CSS文件，则静态解析文件；

4.    将解析后的文件或者语法树和WAPA中预置 

的优化规则进行匹配和识别；

5.    根据匹配和识别的结果生成相应的report，

供开发者选择**

*我们对目前采用PhoneGap开发的App使用 

WAPA分析之后，得出一些通用性的结论，

提供给开发者，供大家在开发PhoneGap App时参考*

*性能注意点介绍

经过WAPA优化规则的分析，我们得到了在

PhoneGap开发中性能优化的一系列的通用性

性能问题点，经过分析之后，以下六条规则

是在PhoneGap App中经常遇到的性能可以

得到优化的点：

*

*1.      将for循环条件语句中的.length属性存入

一个局部变量

该规则是指：在使用循环的时候，要尽量避免

使用for in, 除非是在一个不明确的对象里面，

需要迭代其内部对象。如果已经知道其结构和

内容数据类型，避免使用for in。在循环中，

将i.length存储为局部变量，可以提高for循环的

效率。从下列三个算法的测试结果即可看出 **

*算法一，使用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）*

*2.      用className属性取代其他style属性

在给静态的DOM元素添加样式的时候，有以下

三种写法，分别是系列的.css()、单独.css() 

写法，或者使用.addClass()方法，给元素添加

类名之后，在CSS文件中，添加样式**

*下图是我们在不同平台测试出来的结果，分别

对应不用的Web Runtime，在移动手机端，

结论是一样的 *

**

*读者可以通过下面的链接亲自感受一下上述三种

写法带来的性能差异：http://jsperf.com/class-ywq*

*3.      appendChild()的部分使用document 

fragments来修改DOM元素

当我们需要对DOM元素进行一系列操作时，

可以通过document fragments来减少重绘和重排

的次数。它可以在当前DOM之外构建一个子树

，对齐进行修改之后，再把它拷贝回文档 *

*其具体使用示例代码如下：

* var fragment = document.createDocumentFragment();

appendDataToElment(fragment, data);

document.getElementById("mylist").appendChild(fragment);  *

*4.      CSS 中将 2D的CSS变化转化为 3D的CSS

变换CSS的变换正在变得越来越强大，3D的

CSS变换已经能够非常完整地支持GPU硬件加速

，而传统的2D CSS转换仍然无法使用GPU进行

加速，导致的结果就是2D的CSS转换比3D CSS转

换还要慢。我们建议开发者，将2D的CSS变换更

改为Z轴为0的3D CSS转换，以便充分利用GPU的

硬件特性 *

*5.      在HTML文档中，将inline的 JavaScript

代码转化为独立的JavaScript文件 

虽然JavaScript是动态解释执行的语言，绝大

多数的Web Runtime为了提高JavaScript的解释

执行时间，都会将JavaScript进行预编译为一个

中间态的文件。WebKit，IE10等都不例外。

但是HTML文档中的JavaScript代码是无法被预

编译为中间态文件的，这会显著减低执行效率

和时间，所以我们强烈建议PhoneGap的开发

人员将HTML中的JavaScript代码剥离出来，

放入单独的JavaScript文件中 *

*6.      由于脚本的阻塞特性，将JavaScript脚本放

在文件的最底端以及成组加载 

由于每个<script>标签在下载时都会阻塞页面
解析的过程，所以限制页面<script>总数也可以
改善性能。所以成组加载JavaScript脚本可以
提升页面整体性能，这个规则不仅对内联脚本
有效，对外部脚本同样适用  **

#*原因是在于每个HTTP 请求都会产生额外的性能

负担，下载一个100KB的脚本远比下载4个25KB 

的脚本要快*#

*同时将页面和页面初始化无关的JavaScript文件 

放在页面的最低端进行加载都可以提高性能*

*结论

随着HTML5的井喷式发展，使用PhoneGap开发

的本地应用程序也将会越来越多。性能问题是 

广大开发者最为关心的一个使用HTML5开发 

App的担忧。本文分析和总结了目前市面上的 

PhoneGap 应用程序，使用WAPA工具对其进行 

了性能分析，得出六点PhoneGap开发应用程序 

经常出现的性能优化点。供广大PhoneGap  

 HTML5开发者参考 *index CSS*

*







 

新增說明文字







/*  Licensed to the Apache Software Foundation (ASF) under one

  or more contributor license agreements.
 See the NOTICE file
  distributed with this work for
additional information

  regarding copyright ownership. 
The ASF licenses this file
  to you under the Apache License,
Version 2.0 (the
  "License");
you may not use this file
except in compliance
  with the License.
 You may obtain a copy of the License at

   
http://www.apache.org/licenses/LICENSE-2.0

  Unless required by
applicable law or agreed to in writing,
 
software distributed under the License is distributed on an

  "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND,
 either express or implied.  See the License for the

  specific language governing
permissions and limitations

 under the License.
*/

body {
  background-color:#F6F4F2;

 font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size:16px;
}

h1, ul,
 li {
  margin:0px;
  padding:0px;
}

#header
{
  background-color:#515151;
  background:#515151 -webkit-gradient(

    linear,

    left top,
    left bottom,
   
color-stop(0.2, #515151),
    color-stop(0.8, #302F2D)
  );

  background:-moz-linear-gradient
(center bottom , #515151 20%, #747474 80%);

 border-top:1px solid #919192;
  height:32px;
  left:0px;

  position:fixed;

  top:0px;
  width:100%;
 
z-index:1;
}
#subheader {
  background-color:#CBCBCB;

 background:-webkit-gradient(linear,
    left top,

    left bottom,

    color-stop(0.0, #F9F9F9),
  
 color-stop(1.0, #CBCBCB)
  );
  background:-moz-linear-gradient
(center bottom , #CBCBCB 0%, #F9F9F9 100%);

  border-top:1px solid #383A3C;
 
border-bottom:1px solid #919395;
  height:32px;
  left:0px;
 
position:fixed;
  top:32px;
  width:100%;
  z-index:1;
}
#sidebar
 {
  background-color:#ECEAE7;
  bottom:0px;
  left:0px;

  overflow:auto;

 padding:20px 40px 0px 0px;
  position:fixed;
  text-align:right;

  top:66px;
 
width:180px;
  z-index:1;
}
#scrollable
 {
  bottom:0px;
  left:220px;
  position:fixed;
  overflow:auto;

  right:0px;

  top:64px;
}
#content
{
/*  top:64px;*/
/*  bottom:0px;*/
/*  right:0px;*/
/*
  left:220px;*/
/*
  margin:64px auto 0px 220px;*/
 
margin:20px 60px;
/*  position:absolute;*/
/*  overflow:auto;*/
 
z-index:0;
}

#header h1,
#header h1 a,
#subheader h1 {

  color:#F6F4F2;

  font-size:18px;
  font-weight:normal;
 
line-height:32px;
  margin:0px;
  text-align:center;

  text-shadow:0px -1px 1px #222222;
}

#header h1 a strong
{
  font-weight:bold;
}

#header h1 {
  text-align:left;

  margin-left:20px;
}

#subheader h1
{
  color:#000000;
  text-
shadow:#FFFFFF 0px 1px 0px;
}

#header small,
#subheader small
{
  color:#EFEFEF;
  font-size:14px;
  line-height:32px;

  position:absolute;

  top:0px;
  right:20px;

  text-shadow:-1px 1px 1px #666666;
}

#sidebar .vertical_divider
 {
  background-color:#CCCCCC;
  bottom:0px;
 
border-right:1px solid #FFFFFF;
  position:absolute;
  top:0px;

  right:0px;

  width:1px;
}

#sidebar h1
{
  color:#000000;
  font-size:18px;
  padding:0px;
  margin:30px 0px;

  font-weight:normal;

  text-shadow:#FFFFFF 0px 1px 0px;
}

#sidebar ul,
#sidebar li
 {
  margin:0px;

  padding:0px;
}
#sidebar li,
#sidebar li a {
  color:#767573;

  font-size:14px;

  list-style:none;

  margin:15px 0px;
  text-shadow:#FFFFFF 0px 1px 1px;
}
#sidebar li a
{
  -webkit-transition:color .15s ease-out;

  -moz-transition:color .15s ease-out;

  -o-transition:color .15s ease-out;
}
#sidebar li a:hover
 {
  color:#242220;

  -webkit-transition:color .15s ease-in;

  -moz-transition:color .15s ease-in;

  -o-transition:color .15s ease-in;
}

#otherbar
 {
  display:none;
}

#content
{
  font-size:13px;
  line-height:160%;

  max-width:750px;
}

#content h1
{
  border-bottom:2px solid;
  font-size:2em;
  font-weight:normal;

  margin:2.0em 0px 1.3em 0px;

  padding-bottom:0.6em;
}
#content h2 {
  color:#242220;

  font-size:1.4em;

  font-weight:bold;

  margin:1.3em 0px 0.8em 0px;

  text-shadow:#FFFFFF 0px 1px 1px;
}
#content h3
 {
  font-size:1.1em;
  font-weight:bold;

  margin:0.8em 0px 0.5em 0px;

  text-shadow:#FFFFFF 0px 1px 1px;
}

hr
 {
  display:none;
  border:none;

  margin:40px 0px;
  border-top:1px solid #CCCCCC;

  border-bottom:1px solid #FFFFFF;
}

p,blockquote,pre,ul
 {
  margin:1em 0px;
}

h2:after,
h3:after
 {
 content: ":";
}

blockquote
 {
  color:#767573;
 font-style:normal;
  margin-left:35px;

  padding-left:20px;

 position:relative;

 text-shadow:#FFFFFF 0px 1px 0px;
}
blockquote code
 {
 font-style: normal;
}
blockquote p
 {
  padding:10px 0px;
}
blockquote::before
 {
  font-style: normal;
  content: '\201C';
  font-size: 450%;

  font-family:Georgia, Palatino,
 'Times New Roman', Times;;
  position: absolute;
  left: -25px;

  top:0.3em;

  color: #E0E0E0;
}

ul
 {
  margin-left:40px;
}
ul > li {
 list-style:disc;

 list-style-position:outside;
}
ul ul
 {
  margin-bottom:0.5em;
  margin-top:0.5em;
}

code
 {
 font-family:"DejaVu", "Monaco", "Courier New", "Courier";

 font-size:90%;
 padding:2px 4px;

 white-space:pre-wrap;;
}

pre
 {
/*    border:1px solid #CCCCCC;*/

    background:#F2F0EE;
    -webkit-border-radius:11px;

    -moz-border-radius:11px;

    border-radius:11px;

    display:block;
    line-height:110%;

    margin:1.5em 0px 3em 0px;

    padding:15px 20px;

    white-space:pre-wrap;
}
pre code {
  background:none;

 border:none;

 font-size:11px;

 padding:0px;
}

a[href] {
/*  color:inherit;*/

  color:#F06433;

  text-decoration:none;

  text-shadow:#FFF 0px 1px 0px;
}
a[href]:hover
{
  color:#d0410f;
}

.prettyprint a[href],
.prettyprint a[href]
 span {
  text-decoration:underline;

  text-shadow:none;
}
.prettyprint a[href]
 :hover,
.prettyprint a[href]
 span :hover {
  text-decoration:none;
}

code a[href]
 {
  color:inherit;
/*
  border-bottom:1px dotted #000000;*/

  text-decoration:underline;
}
code a[href]:hover {
  color:inherit;

  text-decoration:none;
}

a[href].external:after {
 content: "*";

 font-style: super;

 opacity: .5;
}

#index {
 -webkit-column-width: 235px;

 -webkit-column-rule-width: 5px;

 -moz-column-width: 235px;
 -moz-column-rule-width: 5px;

 column-width: 235px;

 column-rule-width: 5px;
}

#index h2:after,
#index h3:after
 {
  content:"";
}

#index h2
 {
  margin:0px;
  padding:0px;
}

#index
 {
  padding: 10px 1px;
}

#index ul
 {
 margin:0px 0px 30px 0px;
 padding:0;
}

#index ul li
 {
 list-style: none;
}

#index ul li a {

}

#home h1
 {
  border-bottom:1px solid #919395;

  padding-bottom:20px;
  margin:30px 0px;
}

#home h2
 {
  font-weight:normal;

  margin:0px 0px 10px 0px;
  padding:0px;
}

#home h2:after
 {
  content:'';
}

#home h2
 a {
  text-shadow:#FFFFFF 0px 1px 1px;
}

#home span {
  color:#8B8078;

  font-size:14px;

  text-shadow:#FFFFFF 0px 1px 0px;
}

#home ul {
  float:left;

  margin:0px;

  padding:0px;
}
#home ul li {
  float:left;
  height:120px;

  list-style:none;
*

moblie CSS *

*

/* Licensed to the Apache Software Foundation (ASF) under one

  or more contributor license agreements.
 See the NOTICE file

  distributed with this work for additional information

  regarding copyright ownership.  The ASF licenses this file

  to you under the Apache License, Version 2.0
 (the
  "License"); you may not use this file except in compliance

  with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,

  software distributed under the License is distributed on an

  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY

  KIND, either express or implied.  See the License for the

  specific language governing permissions and limitations

  under the License.
*/

body {
  margin:0px;

  padding:0px;
}

#header
 {
  position:static;
}

#header h1 {
  margin:0px;

  text-align:center;
}

#subheader
 {
  position:static;
  text-align:center;
}

#subheader h1
 {
  display:none;
}

#subheader small
 {
  position:static;
}

#sidebar
 {
  display:none;
}

#scrollable {
  position:static;
}

#content
 {
  margin:0px;
  max-width:none;
  padding:10px;

  position:static;
}

#home,
#index
 {
  margin:0px 10px;
}

#home h1,
#index h2
 {
  border:none;
  color:#CCCCCC;
  font-size:20px;

  font-weight:bold;

  margin:10px 0px;
  padding:0px;

  text-shadow:#FFFFFF 0px 1px 0px;
}

#home h2 a,
#index ul li a
 {
  text-shadow:#FFFFFF 0px 1px 1px;
}

#home ul,
#index ul
 {
  background-color:#F9F9F9;
  border:1px solid #CCCED0;

  -moz-border-radius:6px;
  -webkit-border-radius:6px;

  border-radius:6px;
  display:block;
  margin:0px 0px 20px 0px;

  padding:0px;
  float:none;
}

#home ul li,
#index ul li
 {
  border-bottom:1px solid #CCCED0;
  display:block;

  float:none;
  height:100%;
  margin:0px;
  padding:0px;

  width:100%;
}

#home ul li:last-child,
#index ul li:last-child
 {
  border-bottom:none;
}

#home li h2
 {
  margin:0px;
  padding:0px;
}

#home li h2 a,
#index li a
 {
  background:url(arrow.png) no-repeat 100% 50%;

  color:#66686A;

  display:block;
  font-size:16px;
  font-weight:normal;

  margin:0px;
  padding:10px 20px;
}

#home li span
 {
  display:none;
}

#index {
 -webkit-column-width: auto;

 -webkit-column-rule-width: auto;

 -moz-column-width: auto;

 -moz-column-rule-width: auto;
 column-width: auto;

 column-rule-width: auto;
}                                              *

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&