zoukankan      html  css  js  c++  java
  • 记一次H5页面卡死的BUG

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

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

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

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

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

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

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

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

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

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

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

  • 相关阅读:
    方法引用
    day2
    柯朗数(Courant number)研究
    Socket网络编程学习一
    自制导航
    HighChart 体验之旅 (后台传递JSON参数和数据的方法)
    HighChart体验之旅2 对HighChart控件的再次封装
    委托学习小计
    面试常用SQL整理
    动态LINQ(Lambda表达式)构建
  • 原文地址:https://www.cnblogs.com/sixrookie/p/10407879.html
Copyright © 2011-2022 走看看