源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js 性能优化之快速响应的用户界面

  • 时间:2022-03-18 14:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js 性能优化之快速响应的用户界面
用于执行JavaScript和更新用户界面的进程通常被称为“浏览器UI线程”。JavaScript和用户界面更新在同一个进程中运行,因此一次只能处理一件事情。  ·任何JavaScript任务都不应当执行超过100毫秒,过长的运行时间导致UI更新出现明显延迟,从而会影响用户体验。  ·浏览器有两类限制JavaScript任务的运行时间的机制,调用栈大小限制(即记录自脚本开始以来执行的语句的数量)和长时间运行脚本限制(记录脚本执行的总时长,超时的时候会有弹框提示用户[chrome没有单独的程云霞脚本限制,替代做法是依赖其通用奔溃检测系统来处理此类问题])。 [b]一些优化JavaScript任务时间的常见做法:[/b] [b]①使定时器让出时间片段[/b] 1.使用定时器处理数组。当处理过程不须同步,数据不须按顺序处理时。即可考虑用定时器分解任务。 如:
function processArray(items,process,callback){
 var todo = items.concat();
 setTimeout(function(){
 process(todo.shift());
 
 if(todo.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback(items);
 }
 },25);
}
var items = [1,2,3];
function output(value){
 console.log(value);
} 
processArray(items,outputValue,function(){
 console.log('finished output!')
});
[b]②分割任务[/b] 如果一个函数的运行时间过长,那么可以把它拆分为一系列能在较短时间内完成的子函数。 如:
function multistep(steps,args,callback){
 var tasks = steps.concat();
 setTimeout(function(){
 var task = tasks.shift();
 task.apply(null,args||[]);
 
 if(tasks.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback();
 }
 },25);
}
function saveDocument(id){
 var tasks = [open,write,close];
 multistep(tasks,[id],function(){
 console.log('finished!');
 })
} 
[b]③记录代码的运行时间[/b] 有时每次只执行一个任务的效率不高,且在两次之间产生25ms的延迟就更不好了。所以可以添加时间检测机制来改进processArray()方法。 如:
function timeProcessArray(items,process,callback){
 var todo = items.concat();
 setTimeout(function(){
 var start = +new Date();
 do{
 process(todo.shift());
 }while(todo.length > 0 &&(+new Date() - start < 50)) ;
 if(todo.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback(items);
 }
 },25);
}
[b]注意,定时器虽然可以提高性能,但是过度使用会适得其反。需要控制web应用中的使用数量。[/b] [b]④使用Worker[/b] Web Worker是新版浏览器支持的特性,它允许在UI线程外部执行JavaScript代码,从而避免锁定UI。 参考资料:[url=http://www.alloyteam.com/2015/11/deep-in-web-worker/]http://www.alloyteam.com/2015/11/deep-in-web-worker/[/url] [b]备注:[/b] 个人觉得,Worker的缺陷还是太多了。用不起来,而且要慎用。 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部