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


Posted in Javascript onFebruary 15, 2017

用于执行JavaScript和更新用户界面的进程通常被称为“浏览器UI线程”。JavaScript和用户界面更新在同一个进程中运行,因此一次只能处理一件事情。 

·任何JavaScript任务都不应当执行超过100毫秒,过长的运行时间导致UI更新出现明显延迟,从而会影响用户体验。 

·浏览器有两类限制JavaScript任务的运行时间的机制,调用栈大小限制(即记录自脚本开始以来执行的语句的数量)和长时间运行脚本限制(记录脚本执行的总时长,超时的时候会有弹框提示用户[chrome没有单独的程云霞脚本限制,替代做法是依赖其通用奔溃检测系统来处理此类问题])。

一些优化JavaScript任务时间的常见做法:

①使定时器让出时间片段

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!')
});

②分割任务

如果一个函数的运行时间过长,那么可以把它拆分为一系列能在较短时间内完成的子函数。

如:

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!');
 })
}

③记录代码的运行时间

有时每次只执行一个任务的效率不高,且在两次之间产生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);
}

注意,定时器虽然可以提高性能,但是过度使用会适得其反。需要控制web应用中的使用数量。

④使用Worker

Web Worker是新版浏览器支持的特性,它允许在UI线程外部执行JavaScript代码,从而避免锁定UI。

参考资料:http://www.alloyteam.com/2015/11/deep-in-web-worker/

备注:

个人觉得,Worker的缺陷还是太多了。用不起来,而且要慎用。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 #Javascript
DOM事件探秘篇
Feb 15 #Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python列表如何更新值
2020/05/27 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
学生感冒英文请假条
2014/02/04 职场文书
出纳员岗位责任制
2014/02/11 职场文书
网站客服岗位职责
2014/04/05 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
纪律教育月活动总结
2014/08/26 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
计划生育个人总结
2015/03/02 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
ant design charts 获取后端接口数据展示
2022/05/25 Javascript