這些秘籍是基于，不正確的前提和對(duì)本地和網(wǎng)絡(luò)軟件棧之間關(guān)系的誤解，以及曲解數(shù)據(jù)的散點(diǎn)。 我們認(rèn)為重要的是，要對(duì)這些秘籍進(jìn)行驗(yàn)證，使用用我們已經(jīng)收集了多年來(lái)關(guān)于性能的數(shù)據(jù)和我們自己的做的移動(dòng) Web 應(yīng)用程序性能的經(jīng)驗(yàn)。

秘籍1：移動(dòng)網(wǎng)絡(luò)性能主要是由運(yùn)行在CPU上的JavaScript性能決定

現(xiàn)實(shí)：大多數(shù)網(wǎng)絡(luò)性能是由渲染管線的優(yōu)化程度，GPU加速程度，DOM交互速度三者制約。更快的JavaScript總是有用的，但它很少是決定因素。

秘籍2：因?yàn)橛布煌５纳?jí)，CPU越快，JavaScirpt執(zhí)行的也會(huì)越快(又稱摩爾定律)

事實(shí)上：在過(guò)去四年間，移動(dòng)設(shè)備上的JavaScript的渲染提速都是通過(guò)軟件的優(yōu)化來(lái)實(shí)現(xiàn)的，而不是通過(guò)硬體的加速。盡管單線程渲染JavaScript的速度有所提升，但是大多數(shù)網(wǎng)絡(luò)程序還是盡可能采用多線程來(lái)提升JavaScript整體性能。

秘籍3：移動(dòng)設(shè)備瀏覽器已經(jīng)優(yōu)化的相當(dāng)好了，沒(méi)有多少提升的空間了

事實(shí)上：每一個(gè)移動(dòng)設(shè)備瀏覽器都有自己的優(yōu)勢(shì)，有時(shí)甚至?xí)^(guò)對(duì)手10-40倍。Surface在SVG方面比iPhone好30倍。iPhone在DOM交互方面勝過(guò)Surface10倍?？磥?lái)，和對(duì)手優(yōu)點(diǎn)比較后還是有明顯提升空間的。

秘籍4: 未來(lái)的硬件提升不太可能轉(zhuǎn)變?yōu)閣eb app的性能增益

現(xiàn)實(shí)：過(guò)去三年中每一代硬件都帶來(lái)了顯著的JavaScript性能提升。手機(jī)上的單線程性能將會(huì)持續(xù)改進(jìn)，瀏覽器開(kāi)發(fā)人員也將會(huì)提升軟件平臺(tái)，通過(guò)減輕負(fù)載與多線程，充分利用增強(qiáng)的GPU速度，更快的內(nèi)存總線 與多核。許多瀏覽器已經(jīng)能利用并行的優(yōu)勢(shì)，以減輕主UI線程的負(fù)載，例如：Firefox 分離合成工作; Chrome 分離一些 HTML 解析; 以及 IE 分離 JavaScript JIT編譯。

秘籍 5: JavaScript 垃圾搜集對(duì)移動(dòng)app是一個(gè)性能殺手

現(xiàn)實(shí):這是真實(shí)的但有點(diǎn)過(guò)時(shí)。在2011年，Chrome已經(jīng)自Chrome 17開(kāi)始具有一個(gè)增量的垃圾搜集器。Firefox是去年開(kāi)始具有的 。這縮減了GC停頓約200ms到10ms —— 或者說(shuō)從一個(gè)掉幀 到一個(gè)明顯的停頓。避免垃圾回收事件能對(duì)性能有顯著的改進(jìn)，但如果你主要使用的是桌面web開(kāi)發(fā)模式或者用的是老的瀏覽器，它通常會(huì)成為一個(gè)殺手。在Fastbook（傳享網(wǎng)），我們的移動(dòng)HTML5版的Facebook克隆網(wǎng)站中，一個(gè)核心的技術(shù)就是循環(huán)利用一批DOM節(jié)點(diǎn)，以避免創(chuàng)建新節(jié)點(diǎn)的開(kāi)支（以及對(duì)老節(jié)點(diǎn)GC回收的相關(guān)開(kāi)支）。非常有可能寫(xiě)出一個(gè)糟糕的垃圾搜集器（參看老的Internet Explorers），但是并沒(méi)有本質(zhì)上限制垃圾搜集的語(yǔ)言，像JavaScript (或 Java)。

總結(jié)一下：

首先，讓咱看看一些基本常識(shí)?？偠灾?，瀏覽器是個(gè)運(yùn)行在OS上有著非常復(fù)雜抽象層的程序。是用HTML，JavaScript和CSS創(chuàng)造抽象層的混合體。不同的抽象層會(huì)有不同的效果。有些抽象層運(yùn)行的很快是因?yàn)樗鼭撛谡{(diào)用OS調(diào)用或是用接近系統(tǒng)庫(kù)的庫(kù)(在MacOS上又稱Canvas2D)。有些抽象層很慢因?yàn)樗麄兒苌儆肙S調(diào)用，而且他們本身太復(fù)雜(DOM樹(shù)，或是原型鏈)。

有關(guān)Sencha，我們知道，優(yōu)秀的程序員創(chuàng)造的程序會(huì)很快，甚至出乎我們意料之外，因?yàn)樗麄兌加靡恍┮苿?dòng)網(wǎng)絡(luò)技術(shù)和一些流行的框架如Sencha Touch。

很少有移動(dòng)設(shè)備作為計(jì)算中心，就像沒(méi)人會(huì)在iPhone上計(jì)算DNA序列。大多數(shù)移動(dòng)應(yīng)用程序都會(huì)合理響應(yīng)用戶操作。當(dāng)用戶有所操作時(shí)，移動(dòng)應(yīng)用程序會(huì)以每秒30幀或者更快的速度來(lái)予以響應(yīng)，大概用數(shù)百毫秒來(lái)完成。只要程序達(dá)到用戶的目標(biāo)，不是說(shuō)用更多的硅片就能達(dá)到的。這就像是我們突然轉(zhuǎn)移話題說(shuō)我們烹飪和飲食。

有關(guān)Sencha，我們知道，優(yōu)秀的程序員創(chuàng)造的程序會(huì)很快，甚至出乎我們意料之外，因?yàn)樗麄兌加靡恍┮苿?dòng)網(wǎng)絡(luò)技術(shù)和一些流行的框架如Sencha Touch。在過(guò)去的3年間我們以此而受到鼓舞。我們喜歡在此分享這些數(shù)據(jù)。

我們的意思不是說(shuō)移動(dòng)網(wǎng)絡(luò)應(yīng)用程序 總比本地程序快，或是總和桌面網(wǎng)絡(luò)應(yīng)用程序做比較。這是不切實(shí)際的，移動(dòng)設(shè)備的硬件要比桌面硬件設(shè)備慢5-10倍：CPU更弱，緩存等級(jí)更低，網(wǎng)絡(luò)鏈接延遲更大。而且任何層次的程序(如瀏覽器)都有很大的消耗。這不是程序員的問(wèn)題(我喜歡這一句，譯者注)。iOS開(kāi)發(fā)程序員會(huì)給你說(shuō)iOS CoreGrapics在Retina iPad跑會(huì)很慢，因?yàn)樗麄兌嫉弥苯佑肙penGL進(jìn)行開(kāi)發(fā)。

深入探討秘籍

在多年為Sencha Touch的數(shù)據(jù)驅(qū)動(dòng)的應(yīng)用程序的性能優(yōu)化工作中，我們可以滿懷信心地說(shuō)，我們很少有人被JavaScript性能優(yōu)化所困擾。唯一的重大案件迄今為止是Sencha觸摸布局系統(tǒng),我們?cè)诎l(fā)現(xiàn)界面切換到Flexbox后，JavaScript在Android 2. X運(yùn)行過(guò)于緩慢。更多的時(shí)候，我們碰到的問(wèn)題是與DOM交互，瀏覽器渲染引擎和垃圾事件有關(guān)。所有這些問(wèn)題都是每個(gè)瀏覽器的架構(gòu)師和開(kāi)發(fā)人員創(chuàng)建的，與 Javascript或Javascript引擎的固有特性無(wú)關(guān)。作為一個(gè)例子，當(dāng)我們與瀏覽器廠商在性能優(yōu)化方面合作時(shí)，我們已經(jīng)看到了在一個(gè)40倍的改善在瀏覽器一個(gè)操作（顏色屬性變化操作），這個(gè)操作是我們的滾動(dòng)列表實(shí)現(xiàn)的速度瓶頸，這只是其中的一例。

JavaScript 在IOS和android上的性能

盡管我們說(shuō)JavaScript在移動(dòng)設(shè)備上的性能不是那么的重要，但是我們要反駁這段始終沒(méi)有得到改善的神話。以下是通過(guò)IOS的模型和版本展示出了歷史四年來(lái)SunSpider在IOS的數(shù)據(jù)得分（分?jǐn)?shù)越低越好）。（幸運(yùn)的是，SunSpider是一個(gè)用的非常廣泛的測(cè)試工具，它記錄了所有的IOS版本的網(wǎng)絡(luò)數(shù)據(jù)）。在2009年， 最初運(yùn)行IOS3的IPhone 3GS有得到一個(gè)已經(jīng)超過(guò)了15000的分值——是如此低的性能，與2009年的桌面瀏覽器有20倍的差距。

然而，如果你把Iphone 3GS升級(jí)到了IOS4,5或者6，你將會(huì)在相同的硬件設(shè)備上提升4倍的JavaScript性能。（性能提高***的是使用Nitro引擎的IOS4 和IOS5之間）SunSpider繼續(xù)在性能不斷提升的SunSpider上測(cè)試，但我們?nèi)蔚陀谀切㎞DA。與當(dāng)今的桌面瀏覽器相比，邊緣的移動(dòng)瀏覽器的約慢5倍——與2009年相比卻有30倍的提升

想了解更多ISO軟硬件方面的改進(jìn)，參見(jiàn)去年十月AnandTech的評(píng)論。

Android平臺(tái)也有類似層次的改進(jìn)。在我們的實(shí)驗(yàn)室里，我們組建了一個(gè)過(guò)去的三年里Android平臺(tái)的集合，我們認(rèn)為它們代表了典型的高端配置。我們測(cè)試了四部手機(jī)：

• Samsung Captivate Android 2.2 (2010年7月發(fā)布)
• Droid Bionic Android 2.3.4 (2011年9月發(fā)布)
• Samsung Galaxy Note 2 Android 4.1.2 (2012年9月發(fā)布)
• Samsung Galaxy S4 Android 4.2.2 (2013年4月發(fā)布)

正如你在下面看到的，這是一張過(guò)去的四年里SunSpider得分曲線，一個(gè)戲劇性的改善。從Android 2.x到Android 4.x性能有3倍的改善。

在這兩種情況下，改進(jìn)都比我們依據(jù)摩爾定律預(yù)測(cè)的好得多。在過(guò)去的3年里，我們期待一個(gè)4倍的提升（2倍每18個(gè)月），所以軟件肯定是導(dǎo)致性能的改善的要因。

測(cè)試關(guān)鍵因素

正如我們前面所提到的，SunSpider已成為一個(gè)不那么吸引人的基準(zhǔn)因?yàn)樗c應(yīng)用程序的性能的聯(lián)系微弱。相反，DOM交互基準(zhǔn)以及Canvas和SVG基準(zhǔn)可以在用戶體驗(yàn)方面告訴我們更多。（理想情況下，我們還會(huì)像開(kāi)到CSS動(dòng)畫(huà)幀頻一樣看到CSS屬性的變化，過(guò)渡和轉(zhuǎn)換-因?yàn)檫@是經(jīng)常在Web應(yīng)用中使用的-但現(xiàn)在仍沒(méi)有在手機(jī)上方便測(cè)量這些量的方法。）

首先試一下DOM交互測(cè)試：我們使用Dromaeo Core DOM作為基準(zhǔn)測(cè)試。下面是我們四部手機(jī)的測(cè)試結(jié)果，我們對(duì)Captivate性能索引所有的核心DOM（屬性，修改，查詢，遍歷），然后取4個(gè)核心DOM指數(shù)的平均值。

可以看出，盡管S4在Note2上只有一點(diǎn)小的提升,但是從Android 2.x 到4.x性能卻得到了3.5倍的提升。 我們可以看看在iOS上的Dromaeo結(jié)果，遺憾的是，我們不能去和老版本的IOS去比較性能，但是我們能夠通過(guò)幾代Iphone硬件看到顯著的提升，有趣的是，這些設(shè)備在性能的改善卻優(yōu)于CPU速度的加速，這就意味著在內(nèi)存帶寬或者緩存上的提升會(huì)優(yōu)于摩爾定律性能提升。

為了展現(xiàn)在瀏覽器之間仍然有很大的潛能去匹配相互間的性能，我們和Surface RT進(jìn)行了比較。在IE上具有低性能交互的DOM一直是性能得不到改善的來(lái)源，但是值得指出的是Iphone跟DOM進(jìn)行交互與運(yùn)行IE10的Microsoft Surface RT存在的巨大的性能差距。我們想摧毀的神話之一就是手機(jī)軟件堆棧是***的。Windows RT - 10倍的性能差距，這不是真的需要等著被填充（我們將以后面的IOS為基準(zhǔn)）。

圖像渲染能力

除過(guò)加快JavaScript和DOM響應(yīng)外，我們也關(guān)心瀏覽器在Canvas和SVG方面的處理能力。同樣的硬件，我們發(fā)現(xiàn)iOS5在Canvas2D的處理能力要比iOS4高5-8倍，在升級(jí)的ios5中甚至比iPad2快80倍。因?yàn)镃anvas是通過(guò)CoreGraphics來(lái)渲染的，所以當(dāng)本地程序渲染速度提高后，Canvas也會(huì)提高。在我們的測(cè)試中，我們用mincast Canvas2D來(lái)做例子。下面我們看一下在不同代iPhone用同一個(gè)iOS測(cè)量的數(shù)據(jù)：

記住，這是iOS4到iOS5一個(gè)很大的性能提升。我們可以看出，在同一時(shí)期，iPhone CPU性能提升了4倍，但Canvas2D渲染能力提升了7倍，這都?xì)w功于GPU加速和GPU軟件的發(fā)展。

同樣的測(cè)試，我們?cè)賮?lái)看看Android，我們來(lái)看一組在缺少CPU加速和Canvas之間有意思的數(shù)據(jù)。一個(gè)大的變化是Android 2沒(méi)有GPU加速。同時(shí)我們可以看出純軟件的GPU加速是改善性能的主要原因。

SVG 基準(zhǔn)測(cè)試

SVG（譯著：可縮放矢量圖形）能夠從另外一個(gè)方面來(lái)體現(xiàn)web性能這一神話。盡管SVG并不如Canvas那樣被眾所周知（很有可能是應(yīng)為Canvas已經(jīng)變得很快了吧），但是SVG也可以反映出性能隨著硬件的改進(jìn)而改善。如下是Stephen Bannasch在不同機(jī)器上做的一個(gè)繪制10000段SVG路徑所花費(fèi)的時(shí)間的測(cè)試。 試結(jié)果再次表明硬件持續(xù)穩(wěn)定的提高改善了CPU和GPU性能（因?yàn)檫@些都是在ios6上進(jìn)行測(cè)試的）。

這種性能之間的差別主要來(lái)自于軟件：Surface RT比iphone 5(或者說(shuō)Ipad 4-我們同樣測(cè)試了ipad 4但測(cè)試數(shù)據(jù)并沒(méi)在上面的到體現(xiàn))要快30倍。實(shí)際上，Surface RT的性能比起在我用了一年的蘋(píng)果電腦的桌面瀏覽器Safari 6要好10倍。Windows 8/IE10 已經(jīng)完全由GPU來(lái)加載SVG,這對(duì)結(jié)果產(chǎn)生了巨大的影響。隨著瀏覽器制造商逐步的將由GPU來(lái)加載SVG，我們有理由期待在IOS和Android上同樣看到web性能出現(xiàn)階躍函數(shù)的變化。

除了長(zhǎng)路徑繪制，我們還運(yùn)行了來(lái)自Cameron Adams的另一項(xiàng)SVG測(cè)試，500個(gè)彈跳小球的每秒幀數(shù)。再一次的，我們看到了跨越最近四代硬件的持續(xù)的性能提升。

比性能提升更有趣的是每秒幀數(shù)fps的絕對(duì)值。一旦動(dòng)畫(huà)超越了每秒30幀，你就越過(guò)了模擬電影的每秒幀數(shù)(24fps)，可以獲得視覺(jué)性能的期望值。到達(dá)60fps時(shí)，你的GPU加速質(zhì)量就到達(dá)了黃油曲線部分。

真實(shí)的性能：垃圾回收機(jī)制、動(dòng)態(tài)語(yǔ)言及其它

我們希望通過(guò)前文關(guān)于移動(dòng)Web應(yīng)用性能的鋪陳來(lái)說(shuō)明一些（性能）問(wèn)題，以及揭示幾個(gè)“神話”。詳述如下：

• JavaScript性能持續(xù)快速增長(zhǎng)，勝似某國(guó)GDP
• JavaScript性能的提升是通過(guò)軟、硬件的同時(shí)優(yōu)化
• 性能提升是件“大好事”，但是Javascript 的CPU性能對(duì)很多移動(dòng)Web應(yīng)用的性能無(wú)能為力、可有可無(wú)。
• 好消息是其它影響移動(dòng)Web應(yīng)用的部分也得到了大幅提升，包括DOM的操作速度、Canvas和SVG.

盡管咱們可以借助高速攝像頭來(lái)觀察（這些性能變化），但所有移動(dòng)Web開(kāi)發(fā)者都清楚的了解，自Android 2.1以降，動(dòng)畫(huà)、過(guò)場(chǎng)切換以及屬性的修改等性能都得到了極大的提升，而且在此后的每次升版中，均有超越前作的表現(xiàn)。

至此我們已經(jīng)糾正了一些錯(cuò)誤的觀點(diǎn)，現(xiàn)在我們匯集到一起并真正的駁斥一下。最近一次我們聽(tīng)到周圍有人斷言，移動(dòng)web app將總是很慢，因?yàn)镴avaScript這種動(dòng)態(tài)語(yǔ)言的垃圾回收會(huì)傷及性能。這其中有一定的實(shí)情。使用類似Sencha Touch之類的框架， 將DOM內(nèi)容動(dòng)態(tài)生成的一個(gè)好處，就是我們可以管理對(duì)象的創(chuàng)建與析構(gòu)，就像在某個(gè)層面，在一個(gè)瀏覽器上的特定的UI組件上下文之內(nèi)，我們管理事件一樣。例如，這使得我們可以能夠通過(guò)回收DOM內(nèi)容，調(diào)節(jié)事件和優(yōu)化行動(dòng)等等，提供60fps 的性能體驗(yàn)給那些以數(shù)據(jù)為中心的無(wú)窮內(nèi)容（網(wǎng)格、列表、旋轉(zhuǎn)木馬）。

如果沒(méi)有這種程度的迂回方法，將會(huì)很容易制造出很差的移動(dòng)web app性能體驗(yàn)——就像Facebook的***代移動(dòng)web app。我們覺(jué)得寫(xiě)在UI框架基礎(chǔ)之上的應(yīng)用，如jQuery Mobile，與潛在的DOM聯(lián)系的過(guò)于緊密，在可預(yù)見(jiàn)的未來(lái)將會(huì)持續(xù)承受性能問(wèn)題。

整體歸納

文中提到了大量的信息和不同的觀點(diǎn)，在這里為大家總結(jié)一下。如果您是一位開(kāi)發(fā)者，希望從中獲得一些啟發(fā)：

• 移動(dòng)平臺(tái)的速度不及電腦的1/5 — 較慢的CPU，還有內(nèi)存和圖形處理方面的限制。這些都是無(wú)法改變的事實(shí)。
• 移動(dòng)端的JavaScript+DOM的存儲(chǔ)速度逐步加快，但是你始終對(duì)待iPhone5就像08年的1.0版本的谷歌瀏覽器一樣 (即比電腦平臺(tái)的IE8快5-10倍)。
• 隨著GPU的加速和軟件的優(yōu)化，圖形處理方面也得到了飛速的發(fā)展。已經(jīng)能夠?qū)崿F(xiàn)30幀每秒的動(dòng)畫(huà)。
• 垃圾回收機(jī)制和平臺(tái)渲染的問(wèn)題仍然困擾著你，基本上是用一個(gè)抽象的框架像Sencha Touch來(lái)達(dá)到***性能。
• 利用遠(yuǎn)程調(diào)試和性能監(jiān)控可以看出移動(dòng)網(wǎng)絡(luò)平臺(tái)： 谷歌瀏覽器對(duì)安卓提供了一個(gè)幀數(shù)計(jì)數(shù)的支持，而且這個(gè)邊界會(huì)告訴你什么時(shí)候計(jì)數(shù)器溢出，還有移交GPU和計(jì)算結(jié)構(gòu)被加載的次數(shù)等功能。

我們希望在查看性能數(shù)據(jù)的時(shí)候始終能夠找到一些除此之外的有用秘籍。我要感謝在Sencha的每一個(gè)人促就了這部秘籍，包括審查和發(fā)起大量連接到瀏覽器做性能優(yōu)化的Ariya Hidayat 和在Sencha Touch上作出詳細(xì)關(guān)于抽象和性能優(yōu)化的Nguyen

Michael Mullany著

Michael Mullany是Sencha的CEO。他在非常有影響力的硅谷公司Netscape, Loudcloud和 VMware擔(dān)當(dāng)過(guò)各種產(chǎn)品總監(jiān)和市場(chǎng)總監(jiān)的角色。他拿到了斯坦福大學(xué)工商管理碩士學(xué)位和哈佛大學(xué)經(jīng)濟(jì)學(xué)學(xué)士學(xué)位