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 相关文章推荐
浏览器页面区域大小的js获取方法
Sep 21 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
jQuery事件详解
Feb 23 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
js实现纯前端压缩图片
Nov 16 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php4的session功能评述(三)
2006/10/09 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
详解React-Todos入门例子
2016/11/08 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
学校采购员岗位职责
2014/01/02 职场文书
党员岗位承诺书
2014/03/25 职场文书
保健品市场营销方案
2014/03/31 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
刮痧观后感
2015/06/05 职场文书