记一次H5页面卡死的BUG

之前有次开发小程序内嵌页面，类似于网易星球那种，很多钻石可以手动点击收取。

该页面css动效非常多，几乎页面上除了纯色背景之外全部有动效。

也正因为如此，才做成了小程序内嵌的形式（太大了）。

当多次快速点击的时候会出现页面动效卡死不动，点击无反应的结果（偶发）。

多次查询后发现应该与浏览器渲染方式相关：

一个页面的展示需要浏览器的多个进程相互配合，而浏览器的 ' GUI渲染线程 ' 和 ' JS引擎线程 ' 是互斥的，当一个线程执行的时候另一个线程就会停止，冻结。

反应到页面上就是快速点击的时候，每次点击都会去修改样式和动效造成还没有渲染完成js又开始执行了，所以造成了页面卡死（低配手机偶发次数明显大于高配）。

解决办法就是将页面的动效尽量不与点击事件相互绑定，js点击事件禁止多次点击。

这样偶发虽然没有了，但是反应速度明显降低了，因为每次点击都会调取后台接口，接口反应速度慢，非常影响页面给用户的直观感受。

由此得出一个结论（后来证明，完全没人用，不仅是慢，页面也太过于花哨，与产品定位严重不符）：

页面不要堆砌一大堆花里花哨的东西。