性能优化之快速响应的用户界面
来源:互联网 发布:mac 软键盘 编辑:程序博客网 时间:2024/05/23 17:45
用于执行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的缺陷还是太多了。用不起来,而且要慎用。
0 0
- 性能优化之快速响应的用户界面
- 性能优化之快速响应的用户界面
- 性能优化之快速响应的用户界面
- 性能优化之快速响应的用户界面
- 性能优化之快速响应的用户界面
- 性能优化之快速响应的用户界面
- 高性能Js—快速响应的用户界面
- Android开发之响应用户界面的事件
- 建立有响应的用户界面
- Flex 移动应用性能 之 快速优化
- Android性能优化之提高应用响应速度(了解ViewStub和推迟视图的初始化)
- [学习笔记]用户界面优化之Android SurfaceView的使用
- 快速了解 MySQL 的性能优化
- 快速的JavaScript,JS性能优化
- 用线程创建有响应的用户界面
- android性能优化之context的优化
- 性能优化之解析:fastJson快速解析大数据json
- [学习笔记]用户界面优化之Android Fragment
- python装饰器、with和contextmanager
- 线程特有存储模式(Thread Specific Storage)
- 爬虫学习记录(二)
- 如果不想弄了,厌烦了
- UVa 10815 Andy's First Dictionary 【STL】【set】
- 性能优化之快速响应的用户界面
- [指数型生成函数] HDU 1521 排列组合
- 说说什么是回调
- linux下运用c实现队列调度
- 西蒙斯告诉你何为传奇人生 James Simons
- PAT A1071. Speech Patterns (25)
- Glide使用详解
- RecyclerView加下划线的工具类和用法
- Maven 配置SpringMVC常见一问题