Vue $refs 减小获取dom消耗
程序员文章站
2022-04-06 08:21:17
...
通过前面的文章我们知道了通过$refs是如何获取元素的。其实就是$refs对象中的一个属性指向了创建的元素。
<div ref="divRef" id="divId"></div>
this.$refs.divRef = createElement("div");
要获取div元素，我们可以通过document.getElementById("divId") ， 也可以直接通过this.$refs.divRef
我们实验一下是否可以减小获取dom的消耗。
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div id="testDiv">0</div>
<script>
setTimeout(function(){
console.log("begin: " + Date.now());
for(var i=0; i<10000000; i++){
document.getElementById("testDiv").textContent = i;
}
console.log("endxx: " + Date.now());
}, 5000);
</script>
</body>
</html>
通过getElementById 大约在15秒左右。
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script>
var testDiv2 = document.createElement("div");
document.body.appendChild(testDiv2);
testDiv2.textContent = 0;
setTimeout(function(){
console.log("begin: " + Date.now());
for(var i=0; i<10000000; i++){
testDiv2.textContent = i;
}
console.log("endxx: " + Date.now());
}, 5000);
</script>
</body>
</html>
通过this.$refs 这种方式大约在14秒左右。两者相差不大。