JS性能基礎

DOM性能優化
DOM :getElementById innerHTMl......
ECMA:if for ......
BOM:location open close......

var box = document.getElementById('box')
var str = '';
for (var i = 0; i < 5000; i++) {
  str += 'a'
}
//獨立js中操作
box.innerHTML = str //DOM與jq只交互1次，

chrome:dom方法appendChild要比直接innerHTMl性能要好，其他都為innerHTMl性能較好。

---

DOM 與JS

* 1、減少DOM操作str cloneNode()
* 2、訪問元素集合，盡量使用局部變量 len
* 3、盡量只獲取元素節點的方法 如若childNodes 元素節點，文本節點， children來替換
* 4、選擇器API querySelector/querySelectorAll

//片斷一
for (var i = 0; i < 10000; i++) {
  var li = document.createElement('li')
  li.innerHTML = 'li'
  ul.appendChild(li)
}
//片斷二
for (var i = 0; i < 10000; i++) {
  str += '<li></li>'
}
ul.innerHTML = str;
//片斷三
var li = document.createElement('li')
li.innerHTML = 'li'
console.time('hello3')
for (var i = 0; i < 10000; i++) {
  var liN = li.cloneNode(true);//使用cloneNode
  ul.appendChild(liN)
}

//片斷四
for (var i = 0; i < li.length; i++) {
  li[i].innerHTML = 'li';
}
//片斷五
for (var i = 0, len = li.length; i < len; i++) {
  li[i].innerHTML = 'li';
}

 var box = document.getElementsByTagName('li')
 var box = document.querySelectorAll('#box li')

---

DOM 與瀏覽器

* 1、重排、改變頁面內容 ,如通過js該變位置寬高或形狀
* 2、重繪：瀏覽器顯示內容，如重排結束後需要顯示效果，如只該變背景，不改變寬高，則只發生重繪，不會發生重排
* 3、添加順序：盡量在appendChild前添加操作，
* 4、合並dom操作：利用cssText
* 5、緩存布局信息
* 6、文檔碎片 createDocumentFragment()

//片斷六
for (var i = 0; i < 5000; i++) {
  var li = document.createElement('li')
  ul.appendChild(li)
  li.innerHTML = 'li'
}
//片斷七
for (var i = 0; i < 5000; i++) {
  var li = document.createElement('li')
  li.innerHTML = 'li' //加在appendChild前面，不會發生重排重繪過程
  ul.appendChild(li)
}

li.style.width = '100px'
li.style.height = '100px'
li.style.background = 'red'
//推薦
li.style.cssText = 'width:100px;height:100px;background:red;'

//片斷八
setInterval(function () {
  box.style.left = box.offsetLeft + 1 + 'px'
  box.style.top = box.offsetTop + 1 + 'px'
}, 30)
//片斷九
var L = box.offsetLeft,T = box.offsetTop;
setInterval(function () {
  L++;
  T++;
  box.style.left = L + 'px'
  box.style.top = T + 'px'
}, 30)

//片斷十
var ul2 = document.getElementById('ul2')
for (var i = 0; i < 5000; i++) {
  var _li = document.createElement('li')
  ul2.appendChild(_li)
}

//片斷十一
var ul2 = document.getElementById('ul2')
var _Frag = document.createDocumentFragment(); //創建一個box，每次添加裏都先加到box裏
for (var i = 0; i < 5000; i++) {
  var _li = document.createElement('li')
  _Frag.appendChild(_li)
}
ul2.appendChild(_Frag) //添加完後再加把box加到ul2裏

---

DOM與事件:事件委託

DOM與前端模板：能更好的對邏輯和視力分離，MVC架構的基礎 如jquery.tmpl