記一次H5頁面卡死的BUG

以前有次開發小程序內嵌頁面，相似於網易星球那種，不少鑽石能夠手動點擊收取。

該頁面css動效很是多，幾乎頁面上除了純色背景以外所有有動效。

也正由於如此，才作成了小程序內嵌的形式（太大了）。

當屢次快速點擊的時候會出現頁面動效卡死不動，點擊無反應的結果（偶發）。

屢次查詢後發現應該與瀏覽器渲染方式相關：

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

反應到頁面上就是快速點擊的時候，每次點擊都會去修改樣式和動效形成尚未渲染完成js又開始執行了，因此形成了頁面卡死（低配手機偶發次數明顯大於高配）。

解決辦法就是將頁面的動效儘可能不與點擊事件相互綁定，js點擊事件禁止屢次點擊。

這樣偶發雖然沒有了，可是反應速度明顯下降了，由於每次點擊都會調取後臺接口，接口反應速度慢，很是影響頁面給用戶的直觀感覺。

由此得出一個結論（後來證實，徹底沒人用，不只是慢，頁面也太過於花哨，與產品定位嚴重不符）：

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