优化Javascript脚本以减少对浏览器UI线程的影响(定时器&webworker)
栏目: JavaScript · 发布时间: 5年前
内容简介:浏览器执行javascript的代码是单线程的,因此浏览器的UI线程不能同时处理UI界面的变化和javascript的代码执行。因为UI线程一次只能处理一个任务,所以有一个任务队列来存放即将要执行的任务。线程中当前任务执行完毕后,接着执行队列中的第一个任务。当一段javascript代码的执行时间大于假如要执行连续的三个耗时任务:
浏览器执行javascript的代码是单线程的,因此浏览器的UI线程不能同时处理UI界面的变化和javascript的代码执行。因为UI线程一次只能处理一个任务,所以有一个任务队列来存放即将要执行的任务。线程中当前任务执行完毕后,接着执行队列中的第一个任务。
使用定时器分解耗时量较大的脚本
当一段javascript代码的执行时间大于 100毫秒 ,就会对用户体验产生影响。因此最好将任务的执行时间控制在 50毫秒 以内。当需要循环大量数组或者执行一系列耗时任务时,可以使用定时器将任务分解。
假如要执行连续的三个耗时任务:
//封装多任务执行函数 function multipleTask(items,callback){ var tasks = items.concat(),func; setTimeout(func = function(){ if(tasks.length>0){ var task = tasks.shift(); task(); setTimeout(func,25); }else{ callback(); } },25); } function step_1(){ console.log('step_1 is runing.'); } function step_2(){ console.log('step_2 is runing.'); } function step_3(){ console.log('step_3 is runing.'); } //调用执行 function run(){ var items = [step_1,step_2,step_3]; multipleTask(items,function(){ console.log('multipleTask is over.'); }); } 复制代码
假设要进行的一系列任务并不全是耗时长的,要避免两个耗时任务连续执行,又要避免短时耗的任务占用一次定时任务,需要做一些优化:
function timedMultipleTask(items,callback){ var tasks = items.concat(),func; setTimeout(func = function(){ var start = +new Date(),task; do{ task = tasks.shift(); task(); }while(tasks.length>0&&new Date()-start>50) if(tasks.length>0){ setTimeout(func,25); }else{ callback(); } },25); } 复制代码
使用webworker处理脚本的大量计算
webworker是独立于UI线程的,每一个webworker都拥有自己的线程,不会影响到UI界面的变化。webworker拥有自己的运行环境,同时也能够和网页代码通过事件接口进行通信。webworker适合处理需要大量计算的场景,图像的计算,大数组的排序,解码/编码大字符串等。
假设需要重新 排序 一个大数组:
//web代码 var arr = [...]; var worker = new Worker('webworker.js'); worker.postMessage(arr); worker.onmessage = function(event){ var arr = event.data; process(data); //处理排完序的数组 } //webworker代码 function arrSort(arr){ var sortedArr = process(); //重新排序arr return sortedArr; } self.onmessage = function(event){ var arr = event.data, sortedArr = arrSort(arr); self.postMessage(sortedArr); } 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- JS中定时器线程理解
- 各种定时器--最全的定时器使用
- java定时器无法自动注入的问题解析(原来Spring定时器可以这样注入service)
- Golang定时器陷阱
- jmeter(七)定时器
- iOS定时器使用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HEX CMYK 转换工具
HEX CMYK 互转工具
HSV CMYK 转换工具
HSV CMYK互换工具