優(yōu)化移動(dòng)體驗(yàn)的HTML5技巧有哪些呢，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
在這篇文章中，我們將討論創(chuàng)建一個(gè)移動(dòng)HTML5webapp需要的最低限度的東西。主要觀點(diǎn)是去除現(xiàn)在移動(dòng)框架試圖隱藏的隱含復(fù)雜性。你會(huì)看到一個(gè)簡(jiǎn)約方法（使用核心的HTML5APIs）和使你能夠?qū)懗鲎约旱目蚣芑蚪o你現(xiàn)在在用的框架貢獻(xiàn)代碼的基本原則。
優(yōu)化移動(dòng)體驗(yàn)的HTML5技巧簡(jiǎn)介
連軸轉(zhuǎn)的刷新，不斷變向的頁(yè)面轉(zhuǎn)換，以及tap事件的周期性的延遲僅僅是現(xiàn)在移動(dòng)web環(huán)境令人頭疼事情的一小部分。開(kāi)發(fā)者正試圖盡可能的靠近原生應(yīng)用，但卻經(jīng)常被各種兼容問(wèn)題，系統(tǒng)復(fù)位，和僵化的框架打亂步調(diào)。
HTML5硬件加速
通常情況下，GPUs處理精細(xì)的3D建?；蛘逤AD圖表，但這種情況下，我們想要原始的制圖(divs,背景，下落式陰影的文字，圖像等等...)能通過(guò)GPU平滑地展現(xiàn)出來(lái)并且有流暢的動(dòng)畫(huà)。不幸的是，大多數(shù)前端開(kāi)發(fā)者沒(méi)有考慮動(dòng)畫(huà)處理的機(jī)制并將其裝載在第三方框架，但是這些核心的CSS3特性應(yīng)該被掩蓋嗎？讓我來(lái)給你們一些關(guān)于為什么關(guān)心這件事是十分重要的理由：
1.內(nèi)存分配和計(jì)算壓力-如果你將所有元素都合成在DOM里，僅僅是為了硬件加速，在你的代碼基礎(chǔ)上繼續(xù)工作的另一個(gè)人可能會(huì)想狠狠揍你一頓。
2.電源消耗-顯然地，當(dāng)硬件開(kāi)始工作，電源也隨之開(kāi)始消耗。當(dāng)進(jìn)行移動(dòng)端開(kāi)發(fā)時(shí)，開(kāi)發(fā)者開(kāi)發(fā)移動(dòng)應(yīng)用必須要考慮設(shè)備多樣化的約束。普遍流行的情況是瀏覽器開(kāi)發(fā)商開(kāi)始使其產(chǎn)品能適應(yīng)多樣的設(shè)備硬件。
3.沖突-我曾經(jīng)歷過(guò)小故障：將硬件加速應(yīng)用到一部分能夠加速的頁(yè)面。值得確信的是如果你有重復(fù)的加速區(qū)域是非常重要的。
總之，為了盡可能地使戶交互平滑并且接近真實(shí)，我們必須使瀏覽器為我們工作。理想的情況是，我們想要HTML5移動(dòng)設(shè)備的CPU建立初始化動(dòng)畫(huà)，然后使GPU僅僅負(fù)責(zé)動(dòng)畫(huà)處理過(guò)程中合成不同的層。這就是translate3d,scale3d,translateZ做的事-他們給了動(dòng)畫(huà)元素到他們各自的層，因此允許設(shè)備能平滑渲染。如果想要了解更多加速合成，WebKit工作原理，提供了許多信息。
看完上述內(nèi)容，你們掌握優(yōu)化移動(dòng)體驗(yàn)的HTML5技巧有哪些呢的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
