高性能javascript--编程实践

2019-11-22 admin

- setTimeout()和settimeInterval()传递函数而不是字符串作为参数

引申: 用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?

精确度问题?

微任务和宏任务问题?

macro-task(宏任务):包括整体代码script,setTimeout,setInterval

micro-task(微任务):Promise,process.nextTick,类似node.js版的"setTimeout",在事件循环的下一次循环中调用 callback 回调函数。

同步>异步

主任务>微任务>宏任务

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

结果:script start, script end, promise1, promise2, setTimeout

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

结果:同步任务1,7,微任务nextTick和promise.then()6,8,宏任务setTimeout,里面作为一个新的内容2,4,3,5,9,11,10,12

- 尽量使用直接量创建对象和数组

// 使用直接量
var obj = {
  name: 'zzz',
  age: 24,
};
var arr = ["nicholas", 50, true];

// 不使用直接量
var obj = new Object();
obj.name = 'zzz';
obj.age = 24;

var arr = new Array();
arr[0] = "nicholas";
arr[1] = 50;
arr[2] = true;

- 避免做重复的工作,当需要检测浏览器的时候,可使用延迟加载或条件预加载

最常见的重复工作就是浏览器探测,基于浏览器的功能作分支判断导致产生大量代码。

一个页面假如有多次调用 addHandler 函数添加事件,那么每次浏览器都会做判断,来执行哪一个方法。事实上每次的判断结果都是一样的。有几种方法可以避免。

function addHandler(target, eventType, handler) { 
  if (target.addEventListener) {  // DOM2 Events
    target.addEventListener(eventType, handler, false);
  } else {  // IE
    target.attachEvent('on' + eventType, handler);
  }
}   

addHandler(document, 'click', function() {
  console.log('hello world');
});

方法一:延迟加载

延迟加载,也称惰性加载,惰性载入等。延迟加载意味着在信息被使用前不会做任何操作:

function addHandler(target, eventType, handler) { 
  if (target.addEventListener) {  // DOM2 Events
    addHandler = function(target, eventType, handler) {
      target.addEventListener(eventType, handler, false);
    };
  } else {  // IE
    addHandler = function(target, eventType, handler) {
      target.attachEvent('on' + eventType, handler);
    };
  }
  addHandler(target, eventType, handler);
}    

addHandler(document, 'click', function() {
  console.log('hello world');
});

addHandler(window, 'keydown', function() {
  console.log('key down');
});
//方法在第一个调用的时候,会做一次判断决定使用哪种方法去绑定时间处理器,然后原始addHandler会被新的addHandler函数覆盖,最后一步调用新的函数,并传入原始参数。随后每次调用addHandler()都不会再做检测,因为检测代码已经被新的函数覆盖。

//第一次总会消耗较长的时间,因为需先检测再调用完成任务。之后会变快。

方法二:条件预加载

条件预加载会在脚本加载期间提前检测,而不会等到函数被调用:

var addHandler = document.addEventListener ? 
  function(target, eventType, handler) {
    target.addEventListener(eventType, handler, false);
  }:
  function(target, eventType, handler) {
    target.attachEvent('on' + eventType, handler);
  };    

addHandler(document, 'click', function() {
  console.log('hello world');
});
//这个例子就是先检查 addEventListener()是否存在,然后根据结果指定函数。

//条件预加载确保所有函数调用消耗的时间相同,代价是需要在脚本加载时就检测。适用于一个函数马上就要被用到,并且在整个页面的生命周期中频繁出现的场景。

- 在做数学计数时,考虑使用直接操作数字的二进制形式的位运算

- js的原始方法比你写的任何代码都快,尽量使用原生方法。

特别是数学运算。内置Math对象的方法。dom运算,querySelector()和querySelectorAll()

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。 https://www.w3school.com.cn/j…

[转载]原文链接:https://segmentfault.com/a/1190000021086730

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79680.html

文章标题:高性能javascript--编程实践

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
回到顶部