記一次H5頁面卡死的BUG


之前有次開發小程序內嵌頁面,類似於網易星球那種,很多鑽石可以手動點擊收取。

該頁面css動效非常多,幾乎頁面上除了純色背景之外全部有動效。

也正因為如此,才做成了小程序內嵌的形式(太大了)。

當多次快速點擊的時候會出現頁面動效卡死不動,點擊無反應的結果(偶發)。

多次查詢后發現應該與瀏覽器渲染方式相關:

一個頁面的展示需要瀏覽器的多個進程相互配合,而瀏覽器的 ' GUI渲染線程 ' 和 ' JS引擎線程 ' 是互斥的,當一個線程執行的時候另一個線程就會停止,凍結。

反應到頁面上就是快速點擊的時候,每次點擊都會去修改樣式和動效造成還沒有渲染完成js又開始執行了,所以造成了頁面卡死(低配手機偶發次數明顯大於高配)。

解決辦法就是將頁面的動效盡量不與點擊事件相互綁定,js點擊事件禁止多次點擊。

這樣偶發雖然沒有了,但是反應速度明顯降低了,因為每次點擊都會調取后台接口,接口反應速度慢,非常影響頁面給用戶的直觀感受。

由此得出一個結論(后來證明,完全沒人用,不僅是慢,頁面也太過於花哨,與產品定位嚴重不符):

頁面不要堆砌一大堆花里花哨的東西。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM