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在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
微信小程序  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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
php ci框架验证码实例分析
2013/06/26 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
js的[defer]和[async]属性
2014/11/24 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
js实现下一页页码效果
2017/03/07 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python正规则表达式学习指南
2016/08/02 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
详解python with 上下文管理器
2020/09/02 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
法国家具及室内配件店:home24
2017/01/21 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
户籍证明的格式
2014/01/13 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
2014年清明节寄语
2014/04/03 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技