记一次H5页面卡死的BUG
之前有次开发小程序内嵌页面,类似于网易星球那种,很多钻石可以手动点击收取。
该页面css动效非常多,几乎页面上除了纯色背景之外全部有动效。
也正因为如此,才做成了小程序内嵌的形式(太大了)。
当多次快速点击的时候会出现页面动效卡死不动,点击无反应的结果(偶发)。
多次查询后发现应该与浏览器渲染方式相关:
一个页面的展示需要浏览器的多个进程相互配合,而浏览器的 ' GUI渲染线程 ' 和 ' JS引擎线程 ' 是互斥的,当一个线程执行的时候另一个线程就会停止,冻结。
反应到页面上就是快速点击的时候,每次点击都会去修改样式和动效造成还没有渲染完成js又开始执行了,所以造成了页面卡死(低配手机偶发次数明显大于高配)。
解决办法就是将页面的动效尽量不与点击事件相互绑定,js点击事件禁止多次点击。
这样偶发虽然没有了,但是反应速度明显降低了,因为每次点击都会调取后台接口,接口反应速度慢,非常影响页面给用户的直观感受。
由此得出一个结论(后来证明,完全没人用,不仅是慢,页面也太过于花哨,与产品定位严重不符):
页面不要堆砌一大堆花里花哨的东西。
记一次H5页面卡死的BUG的更多相关文章
- 小程序-web-view嵌入H5页面遇到的bug
遇到的问题1:ios页面中,内容过多时有下滑真是功能,但是下滑的时候回看到底部的微信自带的灰色背景及H5的域名(ios的webview中上/下拉露出黑灰色背景问题) 解决办法:给body添加样式--- ...
- 移动端H5页面开发,碰到一个字体变大的BUG
移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...
- ios嵌套H5页面,出现的小bug;
ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content=" ...
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...
- 移动端H5页面遇到的问题总结
最近刚做完一个移动端的项目,产品之无敌,过程之艰辛,我就不多说了,记录下在这个项目中遇到的问题,以防万一,虽然这些可能都是已经被N多前辈解决掉了的问题,也放在这里,算是为自己漫漫前端路铺了一颗小石子儿 ...
- 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场
判断终端的类型.安卓.ios.微信.qq function GetMobelType() { var browser = { ...
- 移动端h5页面的那些坑
最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样 ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- 【H5】344- 微信 H5 页面兼容性解决方案
点击上方"前端自习课"关注,学习起来~ 最近给公司微信公众号,写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑,项目直接拿的公司页面,所以下文涉及图片都模糊处理了. ...
随机推荐
- 深度学习硬件:CPU、GPU、FPGA、ASIC
人工智能包括三个要素:算法,计算和数据.人工智能算法目前最主流的是深度学习.计算所对应的硬件平台有:CPU.GPU.FPGA.ASIC.由于移动互联网的到来,用户每天产生大量的数据被入口应用收集:搜索 ...
- 面试北京XX数通总结
软件架构师何志丹 1 总括 1.1 面试时间 2019年1月21号. 1.2 公司概况 员工近20人,其中开发人员6人,全部objectarx(C++),全部老 ...
- [BZOJ1596]电话网络
Problem 给你一棵树,可以在每个点上选择造塔或不造,每座塔可以覆盖这个节点和相邻节点,问覆盖整棵树的最小塔数. Solution 看到这道题的第一眼,我就觉得是一题贪心题,但看见出题的时候分类在 ...
- ios打包unity应用以及配置签名
先决条件是必须为苹果mac机.拥有公司苹果账号,并确保电脑上安装了unity,unity包 ios-support.和xcode. 1.打开了unity应用之后,选择buildSettings 然后点 ...
- javascript数据基本类型和引用数据类型区别
基本类型和引用数据类型区别 1.基本数据类型和引用数据类型 javascript中有两种数据类型,分别是基本数据类型和引用数据类型: 基本数据(原始数据)类型指的是简单的数据段,而引用数据类型则指的是 ...
- SoapUI之cookie设置
一.测试背景: 1)接口测试需要完成注册-->登录-->充值,使用soapui构建好测试用例.设置断言后,运行结果如下: 2)recharge接口运行失败,继续查看该接口具体发送的请求及返 ...
- Java作业:第一次过程性考核 ——长春职业技术学院 16级网络工程
Java作业:第一次过程性考核 ••<结构化程序设计>•• 考核目标:初步了解Java基本语法规则,学习结构化程序设计思想. 码云链接:https://gitee.com/SoridoD/ ...
- Scanner类、Random类、ArrayList 类
1.1 什么是Scanner类一个可以解析基本类型和字符串的简单文本扫描器. 例如,以下代码使用户能够从 System.in 中读取一个数: Scanner sc = new Scanner(Syst ...
- js初学
1.学习一门编程语言需要记住知识点: 1.关键字. 2.标识符. 3.注释. 4.运算符. 5.常量和变量 . 6.语句. 7.函数 ...
- AsyncTask 进行耗时操作和UI 更新
相信各位对 AsyncTask 不会陌生,虽然它有如下弊端: 1. 如果在activiy内部new 一个AsyncTask, 横竖屏切换生成一个新的activity,等结果返回时,处理不好容易出现NP ...