h5 怎么排查页面卡顿

2024-09-02

h5页面滑动卡顿解决方法

解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出

position: relative;导致页面卡顿

1.现象: vue单页面项目只有在某个页面切换的时候出现页面卡顿现象经过长时间排查确定最终原因是该模块外层div使用 position: relative 根本原因:待完善

Effective前端6：避免页面卡顿

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line span::after { content: " " } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWr

update layer tree导致页面卡顿

前因今天检查一个vue页面问题,就是在切换Tab时候(某些win10电脑),页面会卡顿一段很长的时间,短则3秒,长则十几秒,这个体验非常糟糕,于是我着手寻找其中原因. 概况这个vue页面的元素非常多,主要分为六个Tab内容,切换Tab也只是控制Tab内容的显隐.按道理这是非常简单的行为,不应该出现卡顿的情况. 检查代码上,我将切换Tab做的一些业务逻辑去掉,只留下控制显隐部分,并打印执行时间. 测试过后发现,即便是这么简单的操作,页面还是会卡顿,从打印的日志上看,我发现了切换的代码很快就执

firefox中outlook.com页面卡顿的原因

在火狐中使用outlook.com时,鼠标点击动作后,页面会卡顿一段时间,每次点击都是如此. 因为之前火狐出现由于硬件加速导致页面卡顿的情况,因此第一反应就是关闭硬件加速. 果然,关闭硬件加速后,页面反应正常.流畅.

记录一个关于 Document.on绑定事件后，导致页面卡顿的情况

假设当前页面的js文件中有如下函数: function A(){ function B(); } function B(){ $(document).on("click","#元素id",function(){ dosomething……; }); } 函数A是一个按钮上绑定的onclick函数处理: 那么每次点击按钮触发A函数之后,都会导致B函数的执行,进而 $("#元素id") 这个元素就会绑定一次点击事件. 如果多次触发A函数之后,导致 $

iscroll使用之页面卡顿问题

最近在开发项目时,遇到一个问题,使用iscroll实现的页面滚动,测试时发现在chrome浏览器中的模拟移动设备页面不能平滑滚动,有卡顿现象,在android手机端也有同样的问题. 在github上搜索了iscroll的相关问题,以下是对一些觉得对此问题解决有帮助的一些回答的总结. 解决办法:通过在head标签中加<script>window.PointerEvent = undefined</script>中<head>解决问题了我项目中遇到的问题. iScroll具

手机页面或是APP中减少使用setTimeout和setInterval，因为他们会导致页面卡顿

1.setTimeout致使页面的卡顿或是不流畅,打乱模块的生命周期 ,还有setTimeout其实是很难调试的. 当一个页面有众多js代码的时候,setTimeout就是导致页面的卡顿. var setTimeOut=setTimeout(function(){ console.log("延迟事件执行");},200);同样的代码在web端和APP端的执行的代码的效率会有很大的差异2.不要在setTimeOut里面嵌套setInterval,同样会导致页面的卡顿. var setTi

react native tap切换页面卡顿

问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿解决办法: InteractionManager.runAfterInteractions(() => { this.setState() })

UINavigationController push时，页面卡顿

1.A push B A.view.backgroundColor 与 B.view.backgroundColor 不一致. 2. AssistiveTouch打开关闭则不会出现卡顿情况 3.增加对比度关闭在设置-通用-辅助功能-增强对比度(开启)

前端页面卡顿？或是DOM操作惹的祸，需优化代码

文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaScript中重要的组成部分.在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注点就是DOM操作的优化.DOM操作

前端页面卡顿、也许是DOM操作惹的祸？

界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注点就是DOM操作的优化.DOM操作优化的总原则是尽量减少DOM操作. 先来看看DOM操作为什么会影响性能在浏览器中,DOM的实现和ECMAScript的实现是分离的.比如在IE中,ECMAScrit的实现在jscript.dll中,而DOM的实现在mshtml.dll中:在Ch

Web前端开发最佳实践（13）：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码

文档对象模型(DOM)是一个独立于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得DOM成为了JavaScript中重要的组成部分.在富客户端网页应用中,界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化的一个主要的关注点就是DOM操作的优化.DOM操作优化的总

element ui 渲染超过上百条数据时页面卡顿，更流畅的加载大量数据

问题:element ui table渲染上百条数据,页面渲染开始出现延时解决方案:使用pl-table 注意:设置use-virtual并给定table高度

一个页面多个HTTP请求页面卡顿！

用promise解决前两天面试的时候一个面试官问到这样一个问题这里先说出解决的路径这几天会更新具体的做法或者直接参考廖雪峰大神地址如下: https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000

DOM节点太多导致页面卡顿的优化方法

http://developer.51cto.com/art/201504/473422.htm

vue中页面卡顿，使用懒加载

为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件和 ES中的import 1.未使用懒加载和使用异步组件懒加载方法:component: resolve=>(require(['地址']), resolve) import Vue from 'vue' import Router from 'vue-router' import HelloWorld fro

H5：加载原理，慢加载和卡顿原因分析，

前端H5工作原理: 请求和显示原理 H5页面卡顿原因分析: 1.动画太多:渲染重绘占用GPU 2.页面操作导致重绘频繁 3.页面元素复杂:资源类标签太多(图像/视频/dom树太长) 4.内置webview性能太差 5.和3类似,iOS出现的,和native交互是,创建嵌套iFrame 解决办法:按照对应原因解决即可 H5加载太慢问题分析: 1.请求location时的中转太多 2.返回的资源太大,导致分次传输 3.Dom里的资源太多解决办法:CDN,GZIP合并压缩等

腾讯面试题,js处理1千万条数据排序并且页面不卡顿

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

DataGridView 多线程更新数据解决卡顿问题

使用多线程更新DataGridView,防止页面卡顿和卡死的问题 private delegate void UpdateDataGridView(DataTable dt); private void UpdateGV(DataTable dt) { if (dataGridView1.InvokeRequired) { this.BeginInvoke(new UpdateDataGridView(UpdateGV), new object[] { dt }); } else { dataG

img加载卡顿，解决办法

我觉得我在这个项目里遇到了太多的第一次.比如上一篇博文:在在360.UC等浏览器,img不加载原因. 当前情况是:图片加载缓慢,图片加载时出现卡顿. 上图:我缩放了图片,估计有点变形.能说明情况就行,粗糙点就粗糙点吧. 1.单张图片加载情况: 加载完: 2.banner图加载情况情况说明 banner有3张图,加载的时候就分了三层.发现这个情况的时候,我表示自己很萌萌哒. 寻找原因及解决办法 1.图片css样式和轮播图js影响了图片的加载初始情况下,我猜测是我的css样式没有写好,可能js轮

h5 怎么排查页面卡顿

热门专题