資訊專欄INFORMATION COLUMN
摘要：當(dāng)用戶滾動(dòng)頁面時(shí)，合成線程會(huì)通知主線程更新頁面中最新可見部分的位圖。但是，如果主線程響應(yīng)地不夠快，合成線程不會(huì)保持等待，而是馬上繪制已經(jīng)生成的位圖，還沒準(zhǔn)備好的部分用白色進(jìn)行填充。
動(dòng)畫做多了，自然就要考慮性能，我打算出一個(gè)系列的日志，詳細(xì)的講解一下網(wǎng)頁動(dòng)畫性能相關(guān)的知識(shí)，如果你已經(jīng)可以運(yùn)用css3 canvas來做動(dòng)畫，可以來參考一下。
目前我做的最復(fù)雜的動(dòng)畫就是360搜索中PC端的天氣動(dòng)畫。
共包含14個(gè)動(dòng)畫場(chǎng)景，每個(gè)場(chǎng)景基本由1-3個(gè)獨(dú)立的動(dòng)畫疊加而成，抽象動(dòng)畫共12個(gè)，從開發(fā)到優(yōu)化完成共分為四期完成，一二期所有的動(dòng)畫均使用canvas完成，三期四期對(duì)動(dòng)畫性能進(jìn)行大幅度改進(jìn)，重構(gòu)了部分代碼。其中兼容低倍屏、高倍屏，canvas繪制的折線圖瀏覽器兼容到IE6（具體實(shí)現(xiàn)參見：基于canvas折線圖統(tǒng)計(jì)圖），動(dòng)畫兼容到IE9，低版本瀏覽器動(dòng)畫顯示靜態(tài)圖片。所以以下我所有分析均依賴于該項(xiàng)目。
量化流暢的動(dòng)畫首先我們先來簡單的介紹一下動(dòng)畫原理，其實(shí)動(dòng)畫本身是不動(dòng)的，它的實(shí)現(xiàn)原理是利用人眼的“視覺暫留”現(xiàn)象，在段時(shí)間內(nèi)連續(xù)播放數(shù)副精致的畫面，使肉眼銀視覺殘象產(chǎn)生錯(cuò)覺，而產(chǎn)生“動(dòng)”的概念。
相關(guān)概念
正常情況下瀏覽器渲染刷新頻率穩(wěn)定在60fps左右，人眼是可以看到流暢平滑的動(dòng)畫的，一般來講低于30fps的動(dòng)畫，就會(huì)有卡頓。
工欲善其事必先利其器來了解一下，怎樣使用chrome這把利刃。
FPS Meter
使用這個(gè)工具你可以檢測(cè)當(dāng)前瀏覽器GPU渲染動(dòng)畫的幀率。
?? 高亮網(wǎng)頁中需要重繪的區(qū)域
?? 將需要重回的區(qū)域用橘黃色的邊框標(biāo)注
?? 繪制幀率，幀速率分布，以及GPU 緩存
?? 展示頁面中減慢滾動(dòng)的區(qū)域
?? 強(qiáng)制媒體類型來測(cè)試?yán)L制和屏幕渲染
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108854.html
摘要：性能統(tǒng)計(jì)有助于幫我們檢測(cè)網(wǎng)站的用戶體驗(yàn)。這樣，我們就輕輕松松的統(tǒng)計(jì)到了首屏?xí)r間。下一章，我們將繼續(xù)聊聊百度移動(dòng)版首頁那些事。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）： https://segmentfault.com/blog/frontenddriver 上一篇文章我們討論了，如何進(jìn)行前端日志打點(diǎn)統(tǒng)計(jì)： https://segm...
摘要：性能統(tǒng)計(jì)有助于幫我們檢測(cè)網(wǎng)站的用戶體驗(yàn)。這樣，我們就輕輕松松的統(tǒng)計(jì)到了首屏?xí)r間。下一章，我們將繼續(xù)聊聊百度移動(dòng)版首頁那些事。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）： https://segmentfault.com/blog/frontenddriver 上一篇文章我們討論了，如何進(jìn)行前端日志打點(diǎn)統(tǒng)計(jì)： https://segm...
摘要：回過頭來發(fā)現(xiàn)，我們的項(xiàng)目，雖然在服務(wù)端層面做好了日志和性能統(tǒng)計(jì)，但在前端對(duì)異常的監(jiān)控和性能的統(tǒng)計(jì)。對(duì)于前端的性能與異常上報(bào)的可行性探索是有必要的。這是我們頁面加載性能優(yōu)化需求中主要上報(bào)的相關(guān)信息。 概述 對(duì)于后臺(tái)開發(fā)來說，記錄日志是一種非常常見的開發(fā)習(xí)慣，通常我們會(huì)使用try...catch代碼塊來主動(dòng)捕獲錯(cuò)誤、對(duì)于每次接口調(diào)用，也會(huì)記錄下每次接口調(diào)用的時(shí)間消耗，以便我們監(jiān)控服務(wù)器接口...
摘要：在樣式代碼添加錄制性能日志如下可見，已經(jīng)不存在繪制的步驟了。下面通過一段代碼模擬頁面進(jìn)入的過程，來演示這個(gè)問題運(yùn)行效果如下可以看到，固定定位的黃色元素是在動(dòng)畫結(jié)束后才突然出現(xiàn)的。 對(duì)于移動(dòng)端的Web單頁應(yīng)用來說，為了達(dá)到媲美原生應(yīng)用的效果，頁面過渡動(dòng)畫是必不可少的。常用的頁面過渡動(dòng)畫包括： 位移——當(dāng)前頁向左側(cè)或右側(cè)水平移出可視區(qū)，下一頁由反方向移入可視區(qū)。 不透明度變化——當(dāng)前頁淡...
閱讀 1785·2023-04-26 00:25
閱讀 1103·2021-09-27 13:36
閱讀 1007·2019-08-30 14:14
閱讀 2261·2019-08-29 17:10
閱讀 1094·2019-08-29 15:09
閱讀 2043·2019-08-28 18:21
閱讀 1057·2019-08-26 13:27
閱讀 1067·2019-08-26 10:58
