js 性能优化之快速响应的用户界面_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-10 23:04:51 点击率：次

用于执行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的缺陷还是太多了。用不起来，而且要慎用。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# js # 性能优化 # Web性能优化系列 10个提升JavaScript性能的技巧 # 整理AngularJS框架使用过程当中的一些性能优化要点 # javascript性能优化之事件委托实例详解 # nodejs的10个性能优化技巧 # JS性能优化笔记搜索整理 # js性能优化技巧 # web性能优化之javascript性能调优 # js性能优化如何更快速加载你的JavaScript页面 # JS 网站性能优化笔记 # js 性能优化之算法和流程控制 # 会有 # 都不 # 长时间 # 两次 # 把它 # 能在 # 时间内 # 适得其反 # 不高 # 添加时间 # 此类 # 被称为 # 就更 # 参考资料 # 两类 # 一件事情 # 时长 # 较短 # 检测系统 # 一个函数

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：昆明网站制作网页公司,在昆明买二手房，有哪些靠谱的中介或网

下一篇：怎样确保域名解析的安全性并防止DNS劫持攻击？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：昆明网站制作网页公司,在昆明买二手房，有哪些靠谱的中介或网

下一篇：怎样确保域名解析的安全性并防止DNS劫持攻击？