哈嘍，我是老劉
這兩天經常刷到的一個短視頻是在Pura70上用12306卡頓
首先我沒錢買Pura70，沒有實際測試，所以不敢説這種情況是不是真實存在
但是如果視頻裏的現象是真實的
我想站在一個程序員的角度分析一下可能的原因
不管最後的原因是什麼，我們也能借此瞭解一下影響app性能的因素有哪些
1、CPU性能問題？
很多博主説是因為CPU不給力
我的第一反應是不信的
因為作為一個客户端開發，我非常清楚一個列表頁的渲染，就是再複雜也不應該造成視頻裏那樣的卡頓
所以我第一時間用我手頭的紅米k60試了一下，第二天的惠州到東莞
是非常流暢的
第二天我想了想，可能k60的cpu也不算差了，於是找來了媽媽的老年機
測試結果會略微比k60卡一點點，但是還算流程
所以因為CPU的性能造成卡頓肯定可以排除了
天璣800u都不卡的
當然，如果cpu在某些場景下有缺陷另説
2、網絡問題？
有些人強行解釋説是網絡不好，還有説12306服務器當時訪問量太大的
這個説法我覺得站不住腳
因為看到一個視頻是四台手機同時刷新那個頁面，其它手機沒有卡頓現象
但是這個卡頓現象的一部分確實有可能和網絡相關
因為視頻中宣稱卡頓的其實是兩個問題，
第一個是頁面加載的時間更長，第二個是內容加載出來後滑動卡頓
這裏有必要解釋一下整個頁面的加載過程
我們在12306裏面輸入出發地和目的地點擊查詢後會打開車次的頁面，這時其實程序做了以下一些事情
第一步，請求數據
車次頁面打開後第一件事就去向服務器請求車次數據
這時頁面會向用户展示loading，也就是那個一直轉的圈
（抱歉手速慢，試了兩次沒截到圖）
數據啥時候能回來，取決於網絡傳輸速度
這一步Pura70應該是不慢的，因為從其它測評中能看到，Pura70的網絡測速還可以
第二步，解碼
服務端的數據返回回來後並不是馬上就能用的
因為網絡上傳輸的數據通常是經過了編碼、加密、壓縮等操作的
所以傳輸到手機端後還需要解碼、解密、解壓縮等操作
不確定12306用到了其中的哪些，但是這一步肯定是有的
第三步，頁面內容展示
解碼完成後按照一般的開發邏輯，我們會先關掉loading（就是那個轉的圈）
然後開始渲染頁面的內容，也就是各個車次的信息
這也就是為什麼在一些比較老的手機上
會看到loading圖標消失後先看到頁面內容顯示白色的什麼都沒有空白，然後才看到車次信息
那麼如果網絡傳輸速度並不慢，是什麼造成了loading時間過長呢
問題的關鍵就在解碼這一步
對於一個頁面的車次信息來説，其實整體的數據量不算大
因此對這個量級的信息進行解碼、解密等操作，屬於計算密集型任務
主要考驗的是cpu的計算能力，甚至是單核性能
當然，其實還有其它的可能性，也會影響解碼速度
這和視頻中的第二個問題有關，就是數據加載完成後的卡頓現象
所以我們來看第三點
3、客户端頁面採用的技術
如果説前面的加載慢可能受網絡影響，也可能是cpu解碼速度不行
那麼頁面卡頓就一定和頁面的實現方式有相關性
所以我們可以看一下12306在這個車次頁面的一些細節
打開android手機的顯示佈局邊界功能
可以看到12306頁面只有標題欄這一小塊有佈局邊界
這是一種典型的H5頁面嵌入App的使用方式
由原生提供頁面外殼，也就是標題欄和內容顯示的部分
由H5頁面填充具體的內容
當然如果具體內容是用Flutter這樣的技術開發的，也會有類似的效果
但是這裏面可以排除Flutter
一方面是因為如果用Flutter開發，不需要把標題欄用原生開發一遍，徒增煩惱
另一方面，我下載了一個12306的apk，沒有在裏面看到Flutter
好的，説回來，12306用了H5頁面展示車次信息
也就是説展示具體內容的部分是一個WebView
這也解釋了為什麼在我老媽的老手機上會略微卡頓
而且，前面第二點説的loading慢，也可能和webview的性能不足或者bug有關
但是即使是Webview性能差一些
也不應該有視頻中那樣卡頓的情況
所以我有幾種可能性的猜測，主要考慮webview上哪些地方可能出問題
第一種，麒麟9010這顆cpu對webview的兼容性不太好，比如某些底層指令有bug
第二種，鴻蒙系統的webview有bug，某些效果或者語句的執行會造成卡頓
我們知道鴻蒙的開發框架有些地方是依賴webview的，所以系統的webview有些特殊的修改可以理解
只是不知道這部分是否會對普通頁面展示造成影響
第三種，12306採用定製的特殊的webview，和鴻蒙系統或者9010存在兼容問題
因為其它手機不卡，説明如果是定製的webview，也不存在普遍的bug
其實這幾種可能性也是有一些方法去驗證的
比如如果是cpu對webview的兼容有問題
那麼找一個同樣使用webview的app，去展示覆雜頁面，看會不會有卡頓問題
當然這裏面的具體原因只能是遙遙領先和12306兩方面的工程師去研究了
下面可以説一下解決方案
解決方案
前面説的都是針對問題的一些可能性的分析
由於條件限制，沒辦法定位具體的原因
但是解決這個問題不一定要定位到具體的原因
還是有一些規避方案的
如果真的是系統webview的問題，那麼可以通過系統升級優化webview來解決
這個可能週期相對要長一點
不過很多手機剛發佈的時候，推送升級都是比較頻繁的
聽説Pura70已經推送幾個升級包了
另一方面，從12306的角度看有幾種優化方案
1、把webview改為原生，這時最根本的提升性能的方案
2、保留webview，優化H5頁面內的邏輯
比如把整個頁面一次性加載出來改為分頁加載或者懶加載
因為我們可以看到，當頁面車次少的時候是不卡頓的，所以懶加載這樣的方案應該也會規避問題
所以如果不出意外，兩方對這個問題都比較重視的話
應該很快這個問題就看不到了
這就體現了App內嵌H5頁面的最大的好處：
不需要客户端升級，就可以修改頁面的一些內容邏輯，用户是感知不到的
總結
寫這篇文章的目的不是黑或者洗白某款手機
而是站在一個客户端開發工程師的角度
藉由這個問題，提供一下客户端性能問題的一些分析思路
大家學習思路就好
如果過兩天人家官方出來説問題的原因和我們這篇文章分析的不一致，也很正常
好了，如果看到這裏的同學有學習Flutter的興趣，歡迎聯繫老劉，我們互相學習。
點擊免費領老劉整理的《Flutter開發手冊》，覆蓋90%應用開發場景。
可以作為Flutter學習的知識地圖。
覆蓋90%開發場景的《Flutter開發手冊》
