解决 js 长任务导致的页面卡顿（时间分片技术）

最新推荐文章于 2024-04-30 16:28:12 发布
最新推荐文章于 2024-04-30 16:28:12 发布
阅读量4.1k 收藏 3
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_buzhidao/article/details/120330885
版权

时间分片技术

解决 js 长任务导致的页面卡顿

在web界面运行长时间代码时，会造成界面卡死，最新看了一篇时间分片技术，实现了执行长时间的任务而不会卡顿界面；

时间分片技术（解决 js 长任务导致的页面卡顿）

此方法作用于多次循环的情况，如果是单次导致界面卡死情况，代码可以如下

	//上面执行界面需要更新的
   await new Promise((resolve)=> setTimeout(resolve));
   //下面执行耗时的单次操作

界面操作使用transform动画会使用GPU，不会让界面卡死

一个修理地球的人
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 优化次数过多的循环 考虑到性能问题
10-28
IE没有我们想象中笨，它知道总的循环次数还是一千万次。因此，得把这一百个十万次循环分开执行。虽然Javascript是单线程的，但也可以通过setTimeout或setInterval模拟多线程。
如何解决JS执行时间过长导致页面卡顿
热门推荐
weixin_43589827的博客
01-14 1万+
背景 众所周知，JavaScript（简称 JS） 是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。这就必然会导致一些浏览器出现卡顿的问题，例如这次后端反馈，在文件上传的任务中，JS需要切割文件，分片上传给服务器，但遇到大型文件（几百G）的时候，则需分片几十万份，然后把这些分片逐步上传给服务器。我猜测是因为这个过程 JS 处理这些文件片段时间稍长，导致页面渲染 fps 低，所以才出现页面卡顿的现象。所以我就开始想，在面对这种因JS执行时间长，导致页面卡顿的
前端优雅地执行长任务
最新发布
as8996606的博客
04-30 164
这里以在页面上插入10W个数为案例，如果简单粗暴的通过for循环来执行，必然会出现页面卡顿，如果数字太多，甚至可能导致该标签页崩溃。工作中遇到过需要批量操作页面上大量dom的情况，结果就是页面出现长时间卡顿，如今了解到或可以通过一个Api（// 通过该Api可以将一个长任务进行切片，保证每次渲染都能执行一个分片。// 浏览器会一直等待任务执行完成后再执行渲染。// 由于浏览器是每隔一段时间执行一次渲染。// 浏览器会在空闲时调用传入的函数。// 这段代码执行起来效果感人。// 导致页面出现长时间无变化。
解决因为循环插入数据而导致内存不足及页面卡顿问题
qq_35168861的博客
02-27 860
最近公司做了一个类似于360软件管家的软件，但是只限于我们公司的软件。我跟一个比我大十岁的大神一起开发，压力好大。 本来都已经上线了，可是大佬又发现了一个bug，就是同时点几个打开，一键安装，页面就会有时候卡死，同时搜索也会有几秒的延迟。最后层层定位，定位是我页面上js的问题。 这种循环插入操作会导致内存不足，页面需要响应很久，甚至崩溃 我也不知道我怎么这么蠢会这样写。而正确写法应该是只插入一...
JavaScript——for…… in……循环性能问题
奔跑的程序员
09-22 529
问题： 使用for……in……循环会遍历原型链所有的可枚举属性，如果你的目的不是需要所有属性，会造成不必要的循环 const div =document.createElement('div') let m =0 for (let k in div){ m++ } console.log(m) //235 console.log(Object.keys(div).length) ...
js 处理大批量数据遇到的问题
温润如风的博客
12-03 2852
在快发版的这天，NB的测试给我测试出了一个性能问题。 问题：一个页面处理非常大的数据，循环处理，页面卡死，最终导致浏览器奔溃 从网上找了一上午，找到了一个日本牛人写的多线程执行的一个js库”Concurrent.Thread.js“，以下是我使用的过程 多线程链接：https://download.csdn.net/download/hsl_1990_08_15/10824718 1、在页...
javascript引擎长时间独占线程造成卡顿的解决方案
10-25
主要介绍了javascript引擎长时间独占线程造成卡顿的解决方案,需要的朋友可以参考下
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
10-15
在Angular应用中，遇到页面卡顿和表单控件输入延迟的问题通常是由于Angular的变更检测机制和大量DOM操作导致的。Angular的双向绑定是通过脏检查来实现的，当数据发生变化时，它会遍历整个组件树以检测并更新视图。在...
使用ionic切换页面卡顿的解决方法
08-31
使用ionic开发app的时候，会发现切换页面的动画会卡顿，并不流畅，为了保证用户体验，大家采用cordova提供的native transitions可以让页面切换近乎原型的体验，一起通过本文学习下具体实现思路
iOS App使用GCD导致的卡顿现象及解决方法
01-04
最近在调研 iOS app 中存在的各种卡顿现象以及解决方法。 iOS App 出现卡顿（stall）的概率可能超出大部分人的想象，尤其是对于大公司旗舰型 App。一方面是由于业务功能不停累积，各个产品团队之间缺乏协调，大家都...
JS--for循环的性能优化
okmingxue的博客
12-10 3128
以下代码的宗旨是将1000次访问元素改变为1次访问，性能优化了很多。           #div{       border: 1px solid #F00;                }       123        var oBtn=document.getElementById("btn");     var oDiv=doc
longtasks：长任务API
02-06
longtasks：长任务API
javaweb 一次性返回页面太多数据造成页面卡顿 如何优化_云音乐搭建平台性能优化实践...
weixin_42362146的博客
12-24 719
本文作者：傅远图片来源：https://hackernoon.com/drafts/ro2832a9.png前言XRN 平台是云音乐音乐内容组产出的一个可视化的搭建页面平台，通过拖拽组件与设置组件，XRN 可以快速生成同时能在 React Native 与 Web 端渲染的页面。不管是 React Native 端还是 Web 端，我们都期望能够输出高性能的页面，带给用户更好的体验。本文会介绍我们...
js代码实现定时刷新Iframe页面、用settimeout代替setinterval，可以解决定时器耗用内存过多导致卡死
gzcaiwei的博客
12-27 2491
js代码实现定时刷新Iframe页面、用settimeout代替setinterval，可以解决定时器耗用内存过多导致卡死 最近单位约车系统有同事抱怨审批完车辆分配动态无法自动显示，要人工点击刷新，随查找资料，通过在iframe便签添加一个id=caiwei定义，给下面JS代码应用，实现只自动刷新iframe页面。 实现代码如下： <script type="text/javascript"> //实现自动刷新iframe内容开始. setInterval("iFrameRel
2022.3.2 什么是长任务（时间切片，Web Worker ）
毛毛的博客
03-02 1231
长任务： 提示：理解长任务 浏览器执行耗时操作超过50ms就是长任务 JavaScript 单线程 同步任务：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。 异步任务：异步任务指的是，不进入主线程，而进入任务队列的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 事件循环 所有的同步任务都在主线程上执行，形成了一个执行栈。 主线程外，还存在一个“任务队列”。只要异步任务有了运行结果，就在“任务队列”中放置一个事件 一旦执行栈中的所
使用一个大的for循环造成卡屏现象的解决方案
zq9955的博客
03-30 3150
for循环使用的过程中，使用一个大的for循环，输出大量的数据时会造成卡顿的现象 原因：for循环在循环结束后才会输出循环体中的数据，大量的数据会使得for循环长时间的循环遍历 解决方案： 在循环体中加一个间断输出的函数 for( ; ;) { int i=0; i++; if(i%1000 ==0) { QCoreApplication::processEvents(); } } 就可以实现没循环一千次就会有一次输出 此解决方案目前只在QT中使用过，所以来记录一下，在
JS性能优化 之 FOR循环
hahahhahahahha123456的博客
05-19 1280
FOR 循环我们用的真的是太多了，但你是否关注过它的优化写法呢？记录下： 1. 最最常规写法，没有任何不妥 for (var i = 0; i < 10; i++) { // do something... } 2. 循环的次数为变量的情况 for (var i = 0; i < arr.length; i++) { // do something... } 其实大多数人都是这种写法，这种写法的缺点在于，每次循环都要去读取一次数组的长度，不划算 ...
JS使用setInterval定时器导致前端页面卡死
田螺姑娘的博客
10-20 8412
JS使用setInterval定时器导致前端页面卡死 原因 setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。 其原因与JS引擎线程有关（需深入研究JS引擎线程） ，但是setTimeout是自带清除定时器的。 解决方案 self.setInterval(() => { self.setTimeout(() => { this.queryChartTime() }, 0) }, 10000) ...
js中for循环的性能优化提升50%+
斗师——Ace
05-12 1695
在js中的for循环数组，for(vari=nums.length;i--;) 要比for(vari= 0;i<nums.length;i++) 性能提升50%以上： for(vari=nums.length;i--;) 循环消耗性能： var twoSum = function(nums, target) { for (var i = nums.length;i--;) { var j = nums.indexOf(target-nums[i]); ...
pyqt ui 画数据表时间长，导致ui卡顿
03-25
这通常是因为在UI线程中进行了耗时的操作，例如数据处理、网络请求等。为了避免UI卡顿，可以将这些耗时的操作放在后台线程中进行。您可以使用Python的多线程或者多进程功能，将数据处理等操作放在后台线程中，然后在UI线程中更新数据表。 另外，您可以考虑使用Qt的Model-View框架来更新数据表，这样可以动态更新表格数据而无需重新绘制整个表格。这将大大减少UI卡顿的时间。 最后，还要确保您的代码中没有不必要的重复计算或者循环等操作，这些都会影响UI的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值