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

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

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

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

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

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

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

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

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

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

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

记一次H5页面卡死的BUG的更多相关文章

  1. 小程序-web-view嵌入H5页面遇到的bug

    遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...

  2. 移动端H5页面开发,碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  3. ios嵌套H5页面,出现的小bug;

    ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content=" ...

  4. 解决因为手机设置字体大小导致h5页面在webview中变形的BUG

    首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...

  5. 移动端H5页面遇到的问题总结

    最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿 ...

  6. 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场

    判断终端的类型.安卓.ios.微信.qq function  GetMobelType()  {                 var  browser  =   {                 ...

  7. 移动端h5页面的那些坑

    最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...

  8. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  9. 【H5】344- 微信 H5 页面兼容性解决方案

    点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. ...

随机推荐

  1. 深度学习硬件:CPU、GPU、FPGA、ASIC

    人工智能包括三个要素:算法,计算和数据.人工智能算法目前最主流的是深度学习.计算所对应的硬件平台有:CPU.GPU.FPGA.ASIC.由于移动互联网的到来,用户每天产生大量的数据被入口应用收集:搜索 ...

  2. 面试北京XX数通总结

    软件架构师何志丹 1             总括 1.1     面试时间 2019年1月21号. 1.2     公司概况 员工近20人,其中开发人员6人,全部objectarx(C++),全部老 ...

  3. [BZOJ1596]电话网络

    Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...

  4. ios打包unity应用以及配置签名

    先决条件是必须为苹果mac机.拥有公司苹果账号,并确保电脑上安装了unity,unity包 ios-support.和xcode. 1.打开了unity应用之后,选择buildSettings 然后点 ...

  5. javascript数据基本类型和引用数据类型区别

    基本类型和引用数据类型区别 1.基本数据类型和引用数据类型 javascript中有两种数据类型,分别是基本数据类型和引用数据类型: 基本数据(原始数据)类型指的是简单的数据段,而引用数据类型则指的是 ...

  6. SoapUI之cookie设置

    一.测试背景: 1)接口测试需要完成注册-->登录-->充值,使用soapui构建好测试用例.设置断言后,运行结果如下: 2)recharge接口运行失败,继续查看该接口具体发送的请求及返 ...

  7. Java作业:第一次过程性考核 ——长春职业技术学院 16级网络工程

    Java作业:第一次过程性考核 ••<结构化程序设计>•• 考核目标:初步了解Java基本语法规则,学习结构化程序设计思想. 码云链接:https://gitee.com/SoridoD/ ...

  8. Scanner类、Random类、ArrayList 类

    1.1 什么是Scanner类一个可以解析基本类型和字符串的简单文本扫描器. 例如,以下代码使用户能够从 System.in 中读取一个数: Scanner sc = new Scanner(Syst ...

  9. js初学

    1.学习一门编程语言需要记住知识点:          1.关键字.     2.标识符.     3.注释.     4.运算符.     5.常量和变量 .     6.语句.     7.函数 ...

  10. AsyncTask 进行耗时操作和UI 更新

    相信各位对 AsyncTask 不会陌生,虽然它有如下弊端: 1. 如果在activiy内部new 一个AsyncTask, 横竖屏切换生成一个新的activity,等结果返回时,处理不好容易出现NP ...