记一次H5页面卡死的BUG

以前有次开发小程序内嵌页面，相似于网易星球那种，不少钻石能够手动点击收取。

该页面css动效很是多，几乎页面上除了纯色背景以外所有有动效。

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

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

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

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

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

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

这样偶发虽然没有了，可是反应速度明显下降了，由于每次点击都会调取后台接口，接口反应速度慢，很是影响页面给用户的直观感觉。

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

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