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

该页面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. Introduction of Servlet Filter(介绍javaweb组件之一过滤器filter)

    javaweb的三大组件都需要交给web服务器运行,都需要在web.xml文件中配置. ①Servlet:javax.servlet.Servlet通过http协议接受客户端的请求,并作出响应的Jav ...

  2. Spark 中Java实现数据库Row转Rating

    Dataset<Row> ratings = mlsc.sql("SELECT user,movie,rating FROM data");JavaRDD<Row ...

  3. java第十次笔记

  4. Saiku数据库迁移后的刷新脚本-Shell脚本读取数据库中的数据(二十三)

    Saiku数据库迁移后的刷新脚本 之前有谈过对saiku中的数据进行刷新,因为saiku默认会从缓存中查询数据,但是配置不使用缓存又会效率低下... 所以这里就需要做一个数据刷新,每次ETL之后都需要 ...

  5. MFC的PNG贴图按钮类(详细注释)

    MFC的PNG贴图按钮类(详细注释) (转载请注明出处) 作者:梦镜谷雨 萌新第二次写帖子,请多多包涵.末尾附上相应代码(PS公司繁体系统所以部分注释繁体请别介意). 因自带控件不美观,于是网上参考学 ...

  6. Java并发编程阅读笔记-锁和活跃性问题

  7. UnityShader实现物体被遮挡描边

    之前在网上看到物体遮挡描边的功能,自己也拿来实现了一番.算作第一篇博客的开篇. 先贴出几张效果图,也是个人思路和方案的改进路线吧. ////////////////////////////////// ...

  8. DOM艺术基础练习

    每个月对于学习的JAVASCRIPT进行总结,加油 主要应用知识点   :

  9. JAVAEE 第八周

    equals():反映的是对象或变量具体的值,即两个对象里面包含的值--可能是对象的引用,也可能是值类型的值. hashCode():计算出对象实例的哈希码,并返回哈希码,又称为散列函数.根类Obje ...

  10. Git 转载

    我每天使用 Git ,但是很多命令记不住. 一般来说,日常使用只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下 ...