之前有次開發小程序內嵌頁面,類似於網易星球那種,很多鑽石可以手動點擊收取。
該頁面css動效非常多,幾乎頁面上除了純色背景之外全部有動效。
也正因為如此,才做成了小程序內嵌的形式(太大了)。
當多次快速點擊的時候會出現頁面動效卡死不動,點擊無反應的結果(偶發)。
多次查詢后發現應該與瀏覽器渲染方式相關:
一個頁面的展示需要瀏覽器的多個進程相互配合,而瀏覽器的 ' GUI渲染線程 ' 和 ' JS引擎線程 ' 是互斥的,當一個線程執行的時候另一個線程就會停止,凍結。
反應到頁面上就是快速點擊的時候,每次點擊都會去修改樣式和動效造成還沒有渲染完成js又開始執行了,所以造成了頁面卡死(低配手機偶發次數明顯大於高配)。
解決辦法就是將頁面的動效盡量不與點擊事件相互綁定,js點擊事件禁止多次點擊。
這樣偶發雖然沒有了,但是反應速度明顯降低了,因為每次點擊都會調取后台接口,接口反應速度慢,非常影響頁面給用戶的直觀感受。
由此得出一個結論(后來證明,完全沒人用,不僅是慢,頁面也太過於花哨,與產品定位嚴重不符):
頁面不要堆砌一大堆花里花哨的東西。
