前端性能优化之 DOM 与 JS
什么是 DOM？ DOM 就是用于操作 xml 和 html 文档的应用程序，浏览器会把 DOM 和 JS 独立实现。
JS 操作 DOM 就像是从一个岛到了另一个岛，岛与岛之间的桥，每次通过都是要收取过桥费的,所以我们要尽量减少过桥的次数，意思就是说能在独立的岛上去完成的，就在独立的岛上去做，避免跨“岛”操作。减少 DOM 与 JS 的交互，可以大大提高浏览器的性能。
使用缓存
<script type=
"text/javascript">
window.onload =
function(){
var oDiv = document.getElementById(
'div1');
var str =
'';
console.time(
'hello');
for(
var i=
0; i<
5000; i++){
oDiv.innerHTML +=
'A';
}
console.timeEnd(
'hello');
console.time(
'hello');
for(
var i=
0; i<
5000; i++){
str +=
'A';
}
oDiv.innerHTML = str;
console.timeEnd(
'hello');
}
<
/script>
通过测试可以发现：使用缓存可以大大提高浏览器的性能。
innerHTML 和 DOM 方法对比
<body>
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('ul1');
var str = '';
console.time('hello');
for(var i=0; i<5000; i++){
var oLi = document.createElement('li');
oDiv.appendChild(oLi);
}
console.timeEnd('hello');
console.time('hello');
for(var i=0; i<5000; i++){
str += '<li></li>';
}
oDiv.innerHTML = str;
console.timeEnd('hello');
}
</script>
</body>
通过测试可以发现：webkit 内核的浏览器 DOM 方法要比 innerHTML 方法的性能要好，其他的浏览器则相反，所以这个时候你就要根据你的用户量有针对性的去做选择。
节点克隆
<body>
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('ul1');
var str = '';
console.time('hello');
for(var i=0; i<5000; i++){
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
oDiv.appendChild(oLi);
}
console.timeEnd('hello');
console.time('hello');
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
for(var i=0; i<5000; i++){
var newLi = oLi.cloneNode(true);
oDiv.appendChild(newLi);
}
console.timeEnd('hello');
}
</script>
</body>
通过测试可以发先：使用节点克隆可以大大提高浏览器的性能
访问元素集合尽量用局部变量
<body>
<ul id="ul1"> </ul>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
for(var i=0; i<5000; i++){
var oLi = document.createElement('li');
oUl.appendChild(oLi);
}
console.time('hello');
for(var i=0; i<aLi.length; i++){
aLi[i].innerHTML = i;
}
console.timeEnd('hello');
console.time('hello');
var len = aLi.length;
for(var i=0; i<len; i++){
aLi[i].innerHTML = i;
}
console.timeEnd('hello');
}
</script>
</body>
var oDiv = document.getElementById(
'');
var oInput = document.getElementById(
'');
var oUl = document.getElementById(
'');
var doc = document;
var oDiv = doc.getElementById(
'');
var oInput = doc.getElementById(
'');
var oUl = doc.getElementById(
'');
通过测试可以发现：使用局部变量比未使用局部变量性能要高很多。
尽量用只获取元素的节点方法
childNodes;
children;
firstChild;
firstElementChild;
尽量用只获元素节点的方法可以提高浏览器的性能
使用新选择器
<body>
<ul id="ul1">
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<script type="text/javascript">
var oUl = document.getElementById('ul1');
var aLi = document.getElementsByTagName('li');
var aLi = document.querySelectorAll('#ul1 li');
for(var i=0; i<aLi.length; i++){
aLi[i].style.color = 'red';
}
</script>
</body>
利用 querySelector ,querySelectorAll 这些新的选择器对性能的提升是很大的。
前端性能优化之 DOM 与 浏览器
页面渲染机制
重排：当你改变页面中元素大小的时候，浏览器在加载页面的时候就会发生重排。
重绘：当浏览器显示的内容改变的时候就会发生重绘。
添加顺序
<body>
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');
console.time('hello');
for(var i=0; i<5000; i++){
var aLi = document.createElement('li');
oUl.appendChild(aLi);
aLi.innerHTML = 'LI';
}
console.timeEnd('hello');
console.time('hello');
for(var i=0; i<5000; i++){
var aLi = document.createElement('li');
aLi.innerHTML = 'LI';
oUl.appendChild(aLi);
}
console.timeEnd('hello');
}
</script>
</body>
cssText
利用 cssText 合并 DOM 操作，可以提高浏览器的性能。
<body>
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('ul1');
console.time('hello');
for(var i=0; i<5000; i++){
var aLi = document.createElement('li');
aLi.style.width = "100px";
aLi.style.height = "20px";
aLi.style.backgroundColor = 'red';
oUl.appendChild(aLi);
}
console.timeEnd('hello');
console.time('hello');
for(var i=0; i<5000; i++){
var aLi = document.createElement('li');
aLi.style.cssText='width:100px;height:20px;background:red;';
oUl.appendChild(aLi);
}
console.timeEnd('hello');
}
</script>
</body>
缓存布局信息
<body>
<div id="div1"></div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var L = oDiv.offsetLeft;
var T = oDiv.offsetTop;
setInterval(function(){
L++;
T++;
oDiv.style.left = L + 'px';
oDiv.style.top = T + 'px';
},30);
}
</script>
</body>
使用文档碎片
<body>
<ul id="ul1"></ul>
<script type="text/javascript">
window.onload = function(){
console.time('hello');
var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();
for(var i=0; i<5000; i++){
var aLi = document.createElement('li');
oFrag.appendChild(aLi);
}
oUl.appendChild(oFrag);
console.timeEnd('hello');
}
</script>
</body>
前端性能优化之 DOM 与 事件
前端性能优化之 DOM 与 前端模板
利用前端模板来对逻辑和视图进行更好的分离，页面的渲染和你的 JS 是分开进行的,这对大型的架构非常好。前端模板是 MVC 架构的基础。
