作者：麦乐

起源：恒生 LIGHT 云社区

一 数据拜访

意识作用域链

function add(num1, num2) {
    var sum =num1 + num2
    return  sum
}

当 add 函数创立的时候，它的作用域链中填入了一个独自的可变对象，蕴含了所有全局作用域能够拜访到的变量。

当 add 函数执行的时候，会创立一个叫做运行期上下文的外部对象。此对象被推入作用域链的顶端。

标识符解析的性能

当要拜访某个变量时，会从 作用域链的顶端（0）开始查问，如果找到了，就拿来用，如果没有找到，0 就会持续沿着作用域链寻找（1）。实时上，查找的过程都会耗费性能的，一个标识符的地位越深，它的读写速度就会越慢。因而，函数中读写局部变量总是最快的，读写全局变量总是最慢的。各个浏览器的测试如下图：

function initUi() {
  var bd = document.body,
      links = document.getElementByName('a'),
      i = 0,
      len = links.length;
  while(i < len) {
    // do something
    i++;
  }
  document.getElementById('btn').onclick = function() {// do something}
} 

这个函数拜访了三次 document, 而 document 是一个全局变量，每次拜访都必须遍历整个作用域链，直到找到这个变量。能够通过上面得形式缩小性能得耗费：

function initUi() {
  var doc = document   
      bd = doc.body,
      links = doc.getElementByName('a'),
      i = 0,
      len = links.length;
  while(i < len) {
    // do something
    i++;
  }
  doc.getElementById('btn').onclick = function() {// do something}
} 

扭转作用域链

with 和 try catch 能够扭转一个运行期上下文的作用域链。

用 with 重写下 initUi 函数：

function initUi() {with(document) {
      var bd = body,
          links = getElementByName('a'),
          i = 0,
          len = links.length;
      while(i < len) {
        // do something
        i++;
      }
      getElementById('btn').onclick = function() {// do something}
    }
} 

用 with 也能够防止反复拜访一个全局变量的问题，这样看上去更高效，实际上产生了一个性能问题。当运行到 with 语句时，运行期上下文的作用域链被扭转了：

这就意味着所有的局部变量当初都处在第二个作用域链对象中，拜访的代价更高了。

try-catch 也是一样，当 try 产生谬误，间接跳转到 catch 执行，而后把异样对象推到作用域链的头部，这个时候 try 中的所有局部变量都会在第二位。一旦 catch 执行结束，作用域链就会回到以前的状态。如果要应用 try-catch，尽量不要在 catch 中去拜访局部变量。用上面的形式去解决异样：

try {// do} catch (error) {handleError(error)
}

动静作用域

with try-catch eval 都被认为是动静作用域。通过优化的 JavaScript 引擎，尝试通过剖析代码来确定哪些变量能够在特定时候被拜访。这些引擎试图避开传统作用域链的查找，取代以标识符索引的形式进行疾速查找。当波及到动静作用域时，这种优化形式就生效了。脚本引擎必须切换回较慢的基于哈希表的标识符辨认形式，这更像是传统的作用域链查找。

function execute(str) {eval(str)
    console.log(window)
}
execute('var window = {}')

闭包，作用域和内存

function assignEvents() {
  var id = "12"
  document.getElementById('btn').onclick = function() {saveDocument(id)
  }
}

下面的函数创立了一个闭包，作用域链和一般函数有些区别：

通常来说，函数的执行上下文对象会随着运行期上下文一起销毁，因为闭包的 [[scope]] 属性援用了执行期上下文对象，所以不会销毁。这就意味着闭包须要更多的内存开销。

当闭包被执行时，一个运行期上下文被创立，它的作用域链与属性 [[Scope]] 中援用的两个雷同的作用域链对象同时被初始化，而后一个流动对象为闭包本身所创立。

闭包中应用的两个标识符，id 和 saveDocument，处于作用域链的 1 和 2 层级，如果要大量拜访跨作用域链的标识符，就会造成很高的性能开销。

应用闭包的时候，也是能够应用把全局变量变为局部变量的形式来加重影响。

总结
函数中对同一内部变量拜访频繁时，尽量把它变为局部变量。
尽量不要应用 with, eval。
应用 try-catch 时，尽量避免对外部变量的拜访（包含部分的和全局的）。
审慎应用闭包，留神标识符的拜访深度问题。

二 DOM 编程

dom 的拜访和批改

对 dom 的拜访和批改总是低廉的，在应用的过程肯定要留神。比方上面代码：

function innerHTMLLoop() {for(var i = 0; i < 15000; i++) {document.getElementById('here').innerHTML += 'a'
  }
}

用 chrome 浏览器来测试下：

console.time()
innerHTMLLoop()
console.timeEnd()
// default: 820.547119140625 ms

这段代码的问题在于，每次循环迭代，该元素都被拜访两次：一次读取 innerHTML 属性值，另一次重写它。可优化为：

function innerHTMLLoop() {
  var count = ''
  for(var i = 0; i < 15000; i++) {count += 'a'}
  document.getElementById('here').innerHTML += count;
}

console.time()
innerHTMLLoop()
console.timeEnd()
// default: 1.85595703125 ms

执行工夫由 800ms 左右晋升到了 2ms 左右。

低廉的元素汇合

这段代码看上去只是简略地把页面中 div 元素数量翻倍。它遍历现有的 div 元素，每次创立一个新的 div 并增加到 body 中。但事实上这是一个死循环，因为循环的退出条件 allDivs.length 在每次迭代时都会减少，它反映出的是底层文档的以后状态。

var allDivs = document.getElementsByTagName('div')
    for(var i = 0; i < allDivs.length; i ++) {document.body.appendChild(document.createElement('div'))
}

在循环的条件管制语句中读取数组的 length 属性是不举荐的做法。读取一个汇合的 length 比读取一般数组的 length 要慢很多，因为每次都要从新查问。应用汇合时要记得把汇合转化为数组，或者防止在循环体内频繁的取汇合的 length.

function toArray(coll) {return Array.prototype.slice.call(coll)
}
var allDivs = document.getElementsByTagName('div')
var len = allDivs.length
for(var i = 0; i < len; i ++) {document.body.appendChild(document.createElement('div'))
}

查找 DOM 节点

应用 children 代替 childNodes 会更快，因为汇合项更少。HTML 源码中的空白实际上是文本节点，而且它并不蕴含在 children 汇合中。

css 选择器

尽量应用 querySelectorAll

最新的浏览器也提供了一个名为 querySelectorAll（）的原生 DOM 办法。这种形式天然比应用 JavaScript 和 DOM 来遍历查找元素要快很多。

var elements=document.querySelectorAll（＇#menu a＇）;

返回值是一个类数组，但不是一个 HTML 汇合。返回值相似一个动态列表，屡次取 length 不会引起反复计算。

var allDivs = document.getElementsByTagName('div')
console.log(allDivs)
var qDivs = document.querySelectorAll('#here')
console.log(qDivs)

如果须要解决大量组合查问，应用 querySelectorAll（）的话会更有效率。比方，页面中有一些 class 为“warning”的 div 元素和另一些 class 为“notice”的元素，如果要同时失去它们的列表，倡议应用 querySelectorAll（）：

var errs=document.querySelectorAll（＇div.warning,div.notice＇）;

最小化重绘和重排

办法一，合并批改款式

上面代码会触发三次重排和重绘。

优化后只触发一次：

var el=document.getElementById（＇mydiv＇）;
el.style.cssText=＇border-left: 1px; border-right: 2px; padding: 5px;＇;

办法二，使 DOM 脱离文档流

1 暗藏元素，批改后，从新显示

把上面数据增加到 ul 中

var data = [
  {
    url: 'http://www.csdn.com',
    text: '博客'
  },
  {
    url: 'http://www.csdn.com',
    text: '博客'
  }
]

 <ul>
    <li><a href="http:www.baidu.com"> 百度 </a></li>
 </ul>

用上面的惯例形式更新列表是相当损耗性能的，因为每次循环都会引起一次重排。

function appDataToEl(ul, data) {
  var doc = document;
 
  for(let i = 0; i < data.length; i++) {var liE = doc.createElement('li')
    var aE = doc.createElement('a')
    aE.innerHTML = data[i].text;
    aE.href =  data[i].url
    liE.appendChild(aE)
    ul.appendChild(liE)
  }
}
appDataToEl(document.getElementById('uls'), data)

优化如下：

var ul = document.getElementById('uls')
ul.style.display = 'none'
appDataToEl(ul, data)
ul.style.display = 'block'

2 利用文档片段

var ul = document.getElementById('uls')
var frame = document.createDocumentFragment()
appDataToEl(frame, data)
ul.appendChild(frame)

3 须要批改的节点创立一个备份，而后对正本进行操作，一旦操作实现，就用新的节点代替旧的节点。

var old = document.getElementById('uls')
var clone = old.cloneNode(true)
appDataToEl(clone, data)
old.parentNode.replaceChild(clone, old)

举荐尽可能地应用文档片断（第二个计划），因为它们所产生的 DOM 遍历和重排次数起码。

办法三 让动画脱离文档流

页面顶部的一个动画推移页面整个余下的局部时，会导致一次代价低廉的大规模重排，让用户感到页面一顿一顿的。渲染树中须要从新计算的节点越多，状况就会越糟。

1. 应用相对地位定位页面上的动画元素，将其脱离文档流。

2. 让元素动起来。当它扩充时，会长期笼罩局部页面。但这只是页面一个小区域的重绘过程，不会产生重排并重绘页面的大部分内容。

3. 当动画完结时复原定位，从而只会下移一次文档的其余元素。

办法四 事件委托

当页面中存在大量元素，而且每一个都要一次或屡次绑定事件处理器（比方 onclick）时，这种状况可能会影响性能。一个简略而优雅的解决 DOM 事件的技术是事件委托。它是基于这样一个事实：事件逐层冒泡并能被父级元素捕捉。应用事件代理，只需给外层元素绑定一个处理器，就能够解决在其子元素上触发的所有事件。

三 算法

循环

for，do while，while，for in，四种循环速度只有 for in 速度比较慢，因为它不仅查找对象自身，还还会查找对象的原型，防止应用 for in 来循环数组。

倒序循环晋升性能

for(var i = arr.length; i--;) {console.log(arr[i])
}
var i = arr.length
while(i--) {console.log(arr[i])
}
var i = arr.length
do {console.log(arr[--i])
} while(i)

1. 一次管制条件中的比拟（i==true）

2. 一次减法操作（i–）

3. 一次数组查找（items[i]）

4. 一次函数调用（console.log（items[i]））

新的循环代码每次迭代中缩小了两次操作，随着迭代次数减少，性能的晋升会更趋显著。

优化 if else

if else 比照 switch

二者速度上差异不大，判断条件较多的话，switch 易读性更好一些。

优化 if-else 的指标是：最小化达到正确分支前所需判断的条件数量。最简略的优化办法是确保最可能呈现的条件放在首位。思考如下代码：

var value = 4;
 
if(value <= 5) {} else if (value > 5 & value < 10) {} else {}

如果 value 小于等于 5 的概率比拟大，就能够把小于 5 的条件放在最后面，否则，抉择绝对概率比拟大的避免在最后面。

另一种缩小条件判断次数的办法是把 if-else 组织成一系列嵌套的 if-else 语句。应用单个宏大的 if-else 通常会导致运行迟缓，因为每个条件都须要判断。例如：

var value = 9;
 
if(value === 1) {} else if(value === 2) {} else if(value === 3) {} else if(value === 4) {} else if(value === 5) {} else if(value === 6) {} else if(value === 7) {} else if(value === 8) {} else if(value === 9) {} else {}

在这个 if-else 表达式中，条件语句最多要判断 10 次。假如 value 的值在 0 到 10 之间均匀分布，那么这会减少均匀运行工夫。为了最小化条件判断的次数，代码可重写为一系列嵌套的 if-else 语句，比方：

var value = 9;
if(value <= 5) {if(value === 1) {} else if(value === 2) {} else if(value === 3) {} else if(value === 4) {} else {}
} else {if(value === 6) {} else if(value === 7) {} else if(value === 8) {} else if(value === 9) {} else {}
}

防止应用 if else 和 switch

var value = 3
var resultArr = [1,2,3,4,5,6,7,8,9,10]
var result = resultArr[value]

用对象或者数组代替 if else 既能减少移读性，也能够进步性能。

总结：

● for、while 和 do-while 循环性能个性类似，所以没有一种循环类型显著快于或慢于其余类型。

● 防止应用 for-in 循环，除非你须要遍历一个属性数量未知的对象。

● 改善循环性能的最佳形式是缩小每次迭代的运算量和缩小循环迭代次数。

● 通常来说，switch 总是比 if-else 快，但并不总是最佳解决方案。

● 在判断条件较多时，应用查找表比 if-else 和 switch 更快。

● 浏览器的调用栈大小限度了递归算法在 JavaScript 中的利用；栈溢出谬误会导致其余代码中断运行。

● 如果你遇到栈溢出谬误，可将办法改为迭代算法，或应用 Memoization 来防止反复计算。

运行的代码数量越大，应用这些策略所带来的性能晋升也就越显著。

四 字符串和正则表达式

字符串链接

+=＂one＂+＂two＂;

此代码运行时，会经验四个步骤：

1. 在内存中创立一个长期字符串

2. 连贯后的字符串“onetwo”被赋值给该长期字符串

3. 长期字符串与 str 以后的值连贯

4. 后果赋值给 str

书中介绍，下面这种合并字符串的形式相比于 str = str +＂one＂+＂two＂; 会慢一些，自己在 chrome 浏览器中进行了测试发现：

function testStr() {
  var str = ''
  for(var i = 0; i < 200000; i++) {str += "one" + 'two'}
}

function testStr1() {
  var str = ''
  for(var i = 0; i < 200000; i++) {str = str + "one" + 'two'}
}

console.time()
testStr()
console.timeEnd()
// default: 14.6337890625 ms
console.time()
testStr1()
console.timeEnd()
// default: 26.135009765625 ms

后果是相同的，预计是古代浏览器对拼接办法进行了优化。

在 FireFox 浏览器中，工夫相差不大。

IE 浏览器中，也是第一个比上面的略微快一点。

比照第一种，用数组的办法拼接字符串，优化不是很显著，但在 Ie 浏览器中，数组办法比拟耗费工夫。

function arrToStr() {var str = '', arr = []
  for(var i = 0; i < 200000; i++) {arr.push("one" + 'two')
  }
  str += arr.join('')
}

str 的 contact 办法略微慢一些。

正则表达式优化

正则表达式优化的要点是了解它的工作原理，了解回溯。回溯会产生低廉的计算耗费，一不小心会导致回溯失控。

回溯法概念

根本思维是：从问题的某一种状态（初始状态）登程，搜寻从这种状态登程 所能达到的所有“状态”，当一条路走到“止境”的时候（不能再后退），再后退一步或若干步，从 另一种可能“状态”登程，持续搜寻，直到所有的“门路”（状态）都试探过。这种一直“后退”、一直“回溯”寻找解的办法，就称作“回溯法”。

引起回溯的场景

• 贪心量词

没有回溯的状况

假如咱们的正则是 /ab{1,3}c/，而当指标字符串是 “abbbc” 时，就没有所谓的“回溯”。其匹配过程是：

有回溯的状况

如果指标字符串是 ”abbc”，两头就有回溯。

其中第 7 步和第 10 步是回溯。第 7 步与第 4 步一样，此时 b{1,3} 匹配了两个 “b”，而第 10 步与 第 3 步一样，此时 b{1,3} 只匹配了一个 “b”，这也是 b{1,3} 的最终匹配果。

惰性量词

var string = "12345"; 
var regex = /(\d{1,3}?)(\d{1,3})/; 
console.log(string.match(regex) ); 
// => ["1234", "1", "234", index: 0, input: "12345"]

指标字符串是 “12345”，匹配过程是：

晓得你不贪、很知足，然而为了整体匹配成，没方法，也只能给你多塞点了。因而最初 \d{1,3}? 匹配的字 符是 “12”，是两个数字，而不是一个。

分支构造

分支构造也是惰性的，然而也会引起回溯

var reg1 = /^can|candy$/g
console.log('candy'.match(reg1)) //  ['can']
 
var reg = /^(?:can|candy)$/g
console.log('candy'.match(reg)) // ['candy']

下面第二个正则的匹配过程：

总结：

• 贪心量词“试”的策略是：买衣服砍价。价格太高了，便宜点，不行，再便宜点。
• 惰性量词“试”的策略是：卖东西加价。给少了，再多给点行不，还有点少啊，再给点。
• 分支构造“试”的策略是：货比三家。这家不行，换一家吧，还不行，再换。

比照贪心量词和惰性量词的回溯：

惰性量词的匹配次数比贪心量词的多，亲自在不同的浏览器试过后发现，即便匹配的内容很长，也很难看出二者谁的效率更高。

当正则表达式导致你的浏览器假死数秒、数分钟、甚至更长时间，问题很可能是因为回溯失控。

计划: 有待补充

五 响应速度

浏览器的响应速度是一个很重要的性能关注点，大多数浏览器让一个繁多的线程执行 javascript 代码和用户界面的更新，也就是说如果 javascript 代码执行工夫过长，将会导致用户界面得不到及时的更新，甚至新的工作不会被放入 ui 队列。

浏览器 UI 线程

浏览器 UI 线程做了两件事件，执行 javascript 和更新用户界面。UI 线程的工作基于一个简略的队列零碎，工作会被保留到队列中直到过程闲暇。一旦闲暇，队列中的下一个工作就被从新提取进去并运行。这些工作要么是运行 JavaScript 代码，要么是执行 UI 更新，包含重绘和重排（在第三章探讨过）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id='btn' onclick="handleClick"></button>
 
  <script>
    function handleClick() {var div = document.createElement('div')
      div.innerHTML = 'Clicked'
      document.body.appendChild(div)
    }
  </script>
</body>
 
</html>

点击按钮时，会触发两个工作，一个 button 按钮款式的扭转，一个是点击事件的执行，这两个工作会被放入 UI Queue。顺次执行，如果遇到新的工作，再放入 UI Queue，在 UI 闲暇再接着执行，以图形来示意：

当所有 UI 线程工作都执行结束，过程进入闲暇状态，并期待更多任务退出队列。闲暇状态是现实的，因为用户所有的交互都会立即触发 UI 更新。如果用户试图在工作运行期间与页面交互，不仅没有即时的 UI 更新，甚至可能新的 UI 更新工作都不会被创立并退出队列。

浏览器很聪慧，对 JavaScript 工作的运行工夫做了限度，此类限度分两种：调用桟大小限度（在第 4 章探讨过）和长时间运行（long-running）脚本限度。

• Chrome 没有独自的长运行脚本限度，代替做法是依赖其通用解体检测零碎来解决此类问题。
• Firefox 的默认限度为 10 秒；该限度记录在浏览器配置设置中（通过在地址栏输出 about:config 拜访），键名为 dom.max_script_run_time。反对批改

• Opera 没有长运行脚本限度
• Safari 的默认限度为 5 秒；该限度无奈更改，然而你能够通过 Develop 菜单抉择 Disable Runaway JavaScript Timer 来禁用定时器。

浏览器给出了限度工夫，然而并不意味着你能够让代码执行这么久，事实证明，哪怕是 1s 种对脚本运行而言也太久了。单个 JavaScript 运行的工夫不能超过 100ms。

宰割工作

当遇到长时间执行的 JavaScript 代码时，应该怎么做优化呢？因为 JavaScript 的执行妨碍了 UI 的渲染，咱们次要让长时间执行代码在执行的过程中让出工夫给 UI 渲染，是不是就能够解决问题了呢？

上面这段代码就是通知浏览器期待 2s 当前向 UI 队列插入一个执行 greeting 函数的工作

    function greeting() {alert(2)
    }
    setTimeout(greeting, 2000)

能够应用延时器来解决长数组：

const arr = [];
 
for(let i = 0; i < 10000; i ++) {arr.push(i)
}
 
function handleArr(item) {
  // ...
  console.log(item)
}
 
 
function processArray(arr, process,callback) {const _arr = arr.concat();
  function test() {process(_arr.shift())
    if(_arr.length > 0) {setTimeout(test, 25)
    } else {callback()
    }
  
  }
  setTimeout(test, 25)
}
 
processArray(arr,handleArr, () => {console.log('processArray')
})

也能够应用这种形式来宰割不同的工作：

function openDocument() {// ...}
function addText() {// ...}
function closeDocument() {// ...}
 
function saveDocument(id) {const arr = [openDocument, addText, closeDocument]
  function test() {const process =  arr.shift();
    typeof process === 'function' &&  process.call(this, id)
    if(arr.length) {setTimeout(test, 25)
    }
  }
 
  setTimeout(test, 25)
 
}

封装为通用的函数：

function multistep(arr, args, callback) {if(!Array.isArray(arr)) {console.error('第一个参数为数组');
    return
  }
  const _arr = arr.concat();
  function excu() {const process = _arr.shift();
    typeof process === 'function' && process.call(null, args)
    if(_arr.length) {setTimeout(excu, 25)
    } else {typeof callback === 'function' && callback()
    }
  }
  setTimeout(excu, 25)
}

然而下面的办法还存在一些问题，每次只会执行数组的一个函数，而有些函数的执行工夫或者不长，如果遇到这样的函数，能够容许执行数组的多个工作函数，这样就能更高效的去执行工作：

const arr = [openDocument, addText, closeDocument]
 
function multistep(arr, args, callback) {if(!Array.isArray(arr)) {console.error('第一个参数为数组');
    return
  }
  const _arr = arr.concat();
  let  timer;
  function excu() {const preDate = new Date();
    do {const process = _arr.shift();
      typeof process === 'function' && process.call(null, args);
      console.log(3)
    } while(_arr.length && new Date() - preDate < 50);
    if(_arr.length) {timer = setTimeout(excu, 25)
    } else {typeof callback === 'function' && callback()
    }
  }
 timer = setTimeout(excu, 25)
}
multistep(arr, 8, () => {console.log('h')
})

在 Firefox 3 中，如果 process（）是个空函数，解决 1 000 项的数组须要 38～43 毫秒；原始的函数解决雷同数组须要超过 25 000 毫秒。这就是定时工作的作用，能防止把工作分解成过于系统的片断。代码中应用了的定时器序列，避免创立太多的定时器影响性能。

Worker

思考这样一个例子：解析一个很大的 JSON 字符串（JSON 解析将会在第 7 章探讨）。假如数据量足够大，至多须要 500 毫秒能力实现解析。很显著工夫太长了，超出了客户端容许 JavaScript 运行的工夫，因为它会烦扰用户体验。而此工作难以分解成若干个应用定时器的小工作，因而 Worker 成为最现实的解决方案。上面的代码描述了它在网页中的应用：

worker.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>live-srver</div>
  <script>
    const worker = new Worker('core.js');
    worker.onmessage = function(event) {console.log(event.data)
    }
    worker.postMessage({a: "maile"})
  </script>
</body>
</html>

core.js

self.onmessage = function(event) {jsonObj(event.data)
  self.postMessage(event.data)
}
 
function jsonObj(obj) {// ...}

浏览器个别不容许在本地应用 Worker，能够应用 live-server 疾速启动一个本地服务器来测试。也能够在 vscode 中装置一个 live server 插件。

Worker 运行环境由以下局部组成：

● 一个 navigator 对象，只包含四个属性：appName、appVersion、user Agent 和 platform

● 一个 location 对象（与 window.location 雷同，不过所有属性都是只读的）

● 一个 self 对象，指向全局 worker 对象

● 一个 importScripts（）办法，用来加载 Worker 所用到的内部 JavaScript 文件

● 所有的 ECMAScript 对象，诸如：Object、Array、Date 等

● XMLHttpRequest 结构器

● setTimeout（）和 setInterval（）办法

● 一个 close（）办法，它能立即进行 Worker 运

Worker 通过 importScripts（）办法加载内部 JavaScript 文件

importScripts('file1.js', 'file2.js')
 
self.onmessage = function(event) {jsonObj(event.data)
  self.postMessage(event.data)
}
 
function jsonObj(obj) {// ...}

应用场景：

解析一个大字符串只是许多受害于 Web Workers 的工作之一。其余可能受害的工作如下：

● 编码 / 解码大字符串

const num1 = 3;
const num2 = 4;
var res0 = eval("num1 + num2");
console.log(res0) // 7
 
var res = new Function('arg1', 'arg2', "return arg1 + arg2");
console.log(res(num1, num2)) // 7
 
var res1;
setTimeout("res1 = num1 + num2",  100) // setInterval
  console.log(res1) // 7
},100)
 

● 大数组排序

任何超过 100 毫秒的处理过程，都该当思考 Worker 计划是不是比基于定时器的计划更为适合。当然，前提是浏览器反对 Web Workers。

六 编程实际

防止双重求值

JavaScript 像其余很多脚本语言一样，容许你在程序中提取一个蕴含代码的字符串，而后动静执行它。有四种规范办法能够实现：eval（）、Function（）构造函数、setTimeout（）和 setInterval（）。其中每个办法都容许你传入一个 JavaScript 代码字符串并执行它。来看几个例子：

应用 Object/Array 间接量

从技术上看，第二种形式没有什么问题，然而从运行速度上看，第一种要快些，数组也是如此。

// 较快
var myObject = {
  name: "maile",
  count: 2,
  age: 15,
  parent: 2
}
 
// 较慢
var otherObject = new Object()
otherObject.name = "maile";
otherObject.count = '1';
otherObject.age = '15';
otherObject.parent = '2';

提早加载

乍一看这些函数仿佛曾经过充沛优化。暗藏的性能问题在于每次函数调用时都做了反复工作，因为每次的查看过程都雷同：看看指定办法是否存在。如果你假设 target 惟一的值就是 DOM 对象，而且用户不可能在页面加载完后奇迹般地扭转浏览器，那么这次查看就是反复的。

function addHandle(target, type, fun) {if(target.addEventListener) {target.addEventListener(type, fun)
  } else {target.attachEvent("on" + type, fun)
  }
}

能够优化为：

function addHandle(target, type, fun) {if(target.addEventListener) {addHandle = function(target, type, fun){target.addEventListener(type, fun)
    }
  } else {addHandle = function(target, type, fun) {target.attachEvent("on" + type, fun)
    }
  }
  addHandle(target, type, fun)
}
function removeHandle(target, type, fun) {if(target.removeEventListener) {removeHandle = function(target, type, fun){target.removeEventListener(type, fun)
    } 
  } else {removeHandle = function(target, type, fun){target.detachEvent(type, fun)
    } 
  }
  removeHandle(target, type, fun)
}

位操作

Bitwise AND 按位与 &

两个操作数的对应位都是 1 时，则在该位返回 1。

const num1 = 25
const num2 = 4;
 
console.log(num1.toString(2)) // 11001 二级制
console.log(num2.toString(2)) //   100 二进制
const res1 = num1 | num2
console.log(res1.toString(2)) // 11101 二进制
console.log(res1)  // 29

Bitwise OR 按位或 |

两个操作数的对应位只有一个为 1 时，则在该位返回 1。

const num1 = 25
const num2 = 4;
 
console.log(num1.toString(2)) // 11001 二级制
console.log(num2.toString(2)) //   100 二进制
const res1 = num1 | num2
console.log(res1.toString(2)) // 11101 二进制
console.log(res1)  // 29

Bitwise XOR 按位异或 ^

两个操作数的对应位只有一个为 1，则在该位返回 1，如果两个都为 1 舍弃该位

const num1 = 56
const num2 = 34;

console.log(num1.toString(2)) // 111000 二级制
console.log(num2.toString(2)) // 100010 二进制
const res1 = num1 ^ num2
console.log(res1.toString(2)) // 11010 二进制
console.log(res1)  // 26

const num1 = 43
const num2 = 45;
 
console.log(num1.toString(2)) // 101011 二级制
console.log(num2.toString(2)) // 101101 二进制
const res1 = num1 ^ num2
console.log(res1.toString(2)) // 110 二进制
console.log(res1)  // 6

const num1 = 43
const num2 = 45;

console.log(num1.toString(2)) // 101011 二级制
console.log(num2.toString(2)) // 101101 二进制
const res1 = num1 ^ num2
console.log(res1.toString(2)) // 110 二进制
console.log(res1)  // 6

Bitwise NOT 按位取反 ~

遇 0 则返回 1，反之亦然。

const num1 = 43
 
console.log(num1.toString(2)) // 101011 二级制
const res1 = ~num1
console.log(res1.toString(2)) // -101100 二进制
console.log(res1)  // -44

偶数的最低位是 0，奇数的最低位是 1。能够用来辨别奇数个偶数。

const arr = [3,67,5,2,4,7,53,1,34,5]
const evenArr=[];
const oddArr = []
arr.forEach((item) => {item & 1 ? oddArr.push(item) : evenArr.push(item)
})
 
console.log(oddArr, evenArr)

第二种应用位运算的技术称作“位掩码”

在开发过程中，有些时候咱们要定义很多种状态标，举一个经典的权限操作的例子, 假如这里有四种权限状态如下：

public class Permission {
    // 是否容许查问
    private boolean allowSelect;

    // 是否容许新增
    private boolean allowInsert;

    // 是否容许删除
    private boolean allowDelete;

    // 是否容许更新
    private boolean allowUpdate;
}

咱们的目标是判断以后用户是否领有某种权限，如果单个判断好说，也就四种。但如果混合这来呢，就是 2 的 4 次方，共有 16 种，这就繁琐了。那如果有更多权限呢？组合起来复杂度也就成倍往上升了。

换二进制来示意，二进制后果中每一位的 0 或 1 都代表以后所在位的权限敞开和开启，四种权限有 16 种组合形式，这 16 种组合形式就都是通过位运算得来的，其中参加位运算的每个因子你都能够叫做掩码（MASK）

 
const ALLOW_SELECT = 1 << 0, // 1 0001  是否容许查问，二进制第 1 位，0 示意否，1 示意是
      ALLOW_INSERT = 1 << 1, // 2 0010  是否容许新增，二进制第 2 位，0 示意否，1 示意是
      ALLOW_UPDATE  = 1 << 2, // 4 0100 是否容许批改，二进制第 3 位，0 示意否，1 示意是
      ALLOW_DELETE  = 1 << 3, // 8 1000 是否容许批改，二进制第 3 位，0 示意否，1 示意是
      ALLOW_UPDATE_DELETE_MASK = 12, // 1100 容许批改和删除
      AllOW_ALL_MASK = 15 // 容许所有
class Premission {constructor() {this.flag = null;}
   setPremission(premission) {this.flag = premission}
 
   // 启用某些权限
 
   enable(premission) {this.flag = this.flag | premission}
 
   // 删除某些权限
 
   disable(premission) {this.flag = this.flag & (~premission)
   }
 
   // 是否有某些权限
   isAllow(premission) {return (this.flag & premission) == premission
   }
 
   // 是否仅仅领有某些权限
   isOnlyAllow(premission) {return this.flag == premission}
  // 是否禁用某些权限
   isNotAllow(premission) {return (this.flag & premission) == 0
   }
 
 
}
new Premission()

像这样的位掩码运算速度十分快，起因正如后面提到的，计算操作产生在零碎底层。如果有许多选项保留在一起并频繁查看，位掩码有助于进步整体性能。

应用这些办法比应用同样性能的 JavaScript 代码更快。当你须要运行简单数学运算时，应先查看 Math 对象。