前端优化中的DOM优化
2019-02-18 本文已影响0人
锋享前端
我们在面试中前端优化是经常被问到的，所以我们应该从开始学习的时候就总结一些前端的优化方法：什么是前端优化呢？
我们前端要做的就是用户角度来考虑：页面加载更快、操作响应更快、体验更好
在这就是从服务端角度考虑：减少请求数、减小请求带宽
为什么减少dom操作就是优化了？小白们都知道，但是没有一个直观的数据来证明，还是有点不相信；
下面我们举一个例子来说明：
假如：我们有个需求是在ul中动态添加1000条li；
下面我用两种方法来做；看看这两种方法各用时多少。
方法一：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="list"></ul>
</body>
<script type="text/javascript">
console.time(1); //这个打印方法可以打印出运行时长 与 console.timeEnd(1)配合；
var list = document.getElementById('list');
for (var i = 0; i < 1000; i++) {
list.innerHTML += '<li>' + i + '</li>';
}
console.timeEnd(1);
</script>
</html>
运行用时6秒多.png
方法一的特点是我们循环了1000次的dom操作，如上图所见需要6秒多；
方法二：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul id="list"></ul>
</body>
<script type="text/javascript">
console.time(1);
var list = document.getElementById('list');
var str = '';
for (var i = 0; i < 1000; i++) {
str += '<li>' + i + '</li>';
}
list.innerHTML = str;
console.timeEnd(1);
</script>
</html>
用时不到5毫秒.png
方法二的特点是我们var了一个变量，然后拼接1000次字符串，只做一次的dom操作；如上图所见需要不到5毫秒；
总结：
同学们两种方法方法一用时6秒，方法二用时5毫秒；如此鲜明的对比；大家是不是对减少dom操作优化页面又有了新得理解呢？
