这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 性能优化的快速响应的用户界面。具有很好的参考价值,下面跟着小编一起来看下吧
用于执行 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 的缺陷还是太多了。用不起来,而且要慎用。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0610/327616.html