高性能移動Web相較PC的場景需要考慮的因素也相對更多更復雜,我們總結為以下幾點: 流量、功耗與流暢度。 在PC時代我們更多的是考慮體驗上的流暢度,而在Mobile端本身豐富的場景下,需要額外關注對用戶基站網絡流量使用的情況,設備耗電量的情況。
關于流暢度,主要體現在前端動畫中,在現有的前端動畫體系中,通常有兩種模式:JS動畫與CSS3動畫。 JS動畫是通過JS動態(tài)改寫樣式實現動畫能力的一種方案,在PC端兼容低端瀏覽器中不失為一種推薦方案。 而在移動端,我們選擇性能更優(yōu)瀏覽器原生實現方案:CSS3動畫。
然而,CSS3動畫在移動多終端設備場景下,相比PC會面對更多的性能問題,主要體現在動畫的卡頓與閃爍。
目前對提升移動端CSS3動畫體驗的主要方法有幾點:
盡可能多的利用硬件能力,如使用3D變形來開啟GPU加速
新聞熱點
疑難解答