笔记
<head>
<title>分离读写</title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById("box");
//现代的浏览器都有 渲染队列的机制
//如果发现你下面连续在修改样式
//分离读写
box.style.width = "200px"; //
console.log(box.clientWidth); //如果手贱输出了一句 就会阻断 一次回流
box.style.height = "200px"; //
box.style.margin = "200px"; //
// 会等样式都该完成后 再去修改
//批量处理 (避免阻塞)
// box.style.cssText = "width:200px;height:200px;";
box.className = "aa";
</script>
</body>
回流例子 - 1 这样的方法现在一般不好用
<body>
<ul id="box"></ul>
<script>
//批量处理 文档碎片-临时容器
let frg = document.createDocumentFragment();
for (let i = 0; i < 5; i++) {
let newLi = document.createElement("li");
newLi.innerHTML = i;
//创建的里放到文档碎片中
frg.appendChild(newLi);
}
//一次性把内容放到容器中: 引发一次回流
box.appendChild(frg);
//记住这样写了 一定要销毁
frg=null
</script>
</body>
2 字符串拼接方法-介意
<body>
<ul id="box"></ul>
<script>
let str = ``;
for (let i = 0; i < 5; i++) {
str += `<li>${i}</li>`;
}
box.innerHTML = str;
// es6
</script>
</body>
以后写动画的话 一定要用transform 不要去修改css样式 (应为transform开启了硬件加速)