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读取xml实现javascript分页
Dec 13 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jQuery设计思想
Mar 07 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python 备份程序代码实现
2017/03/06 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
神路信息Java面试题目
2013/03/31 面试题
J2EE相关知识面试题
2013/08/26 面试题
英语自荐信常用语句
2013/12/13 职场文书
高中语文教学反思
2014/01/16 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
村庄环境整治方案
2014/05/15 职场文书
心得体会的写法
2014/09/05 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
总结Python变量的相关知识
2021/06/28 Python
对讲机知识
2022/04/07 无线电
Java版 单机五子棋
2022/05/04 Java/Android