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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 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
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python日志处理模块logging用法解析
2020/05/19 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
省级四好少年事迹材料
2014/01/25 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
环保建议书400字
2014/05/14 职场文书
销售提升方案
2014/06/07 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python