C# Cordova 的大概－小丁的部落格

引用自此(http://adon988.logdown.com/posts/249660-visual-studio-2015-and-apache-cordova)

有趣的地方

Cordova幫助了網頁開發人員踏出APP開發的一步，讓這些開發者可以維持大部分的工作習慣，特別是一些關於響應式設計及更加靈活布局的技術。其中，非常值得關注的就是動態效果，如果是透過Javascript來開發，就必須考慮兼容各種瀏覽器的問題(原生應用程式則不太會有這樣的問題)。除此之外，我們必須考慮到使用者可能會使用IE6或7的情況；並且，在移動裝置的 CPU及可用RAM不足並不如桌上型電腦好。因此，如果想保險一點，你可以選擇特定的OS版本，以確保客戶端先決條件充足才能安裝。

因此，應該將Javascript動態效果替換成CSS動畫效果，並且，最好使用CSS3最新的功能，讓CPU運作過程，可以避免一些"reflow"現象。當一個元素尺寸改變時，只要將這些動作放在背景執行，就能夠避免計算過程中造成瀏覽器暫時慢下來的情況。

舉例來說，使用漸變(transition)及變形(transform)效果的效能較好，應該避免去使用"top"及"left"座標。最後，優化的DOM及Javascript在電腦上是非必要的，但是在移動裝置上卻是相當重要。

舉例來說，下面這段CSS在大多數瀏覽器都能執行，但效能很差:

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    left: -100%;   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    left: 0;   
}

底下這段CSS則相反，雖然兼容性不高，但是卻能避免觸發"reflow"，保持高效能:

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    transform: translateX(-100%);   
    -webkit-transform: translateX(-100%);   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    transform: translateX(0);   
    -webkit-transform: translateX(0);   
}