浏览器渲染优--防抖节流懒加载_渲染" "节点" "防抖" "模板-CSDN博客

本文链接：https://blog.csdn.net/wzy0507/article/details/139424624

合理选择css选择器

相比于.content-title-span，使用.content .title span时，浏览器计算样式所要花费的时间更多。使用后面一种规则，浏览器必须遍历页面上所有 span 元素，先过滤掉祖先元素不是.title的，再过滤掉.title的祖先不是.content的。嵌套的层级更多，匹配所要花费的时间代价自然更高。

减少DOM访问

JS 引擎和渲染引擎是两个独立的线程。当我们用 JS 去操作 DOM 时，本质上是 JS 引擎和渲染引擎之间进行了“跨界交流”，交流依赖了桥接接口作为“桥梁
每操作一次 DOM（不管是为了修改还是仅仅为了访问其值），都要过一次桥

<body>
  <div id="container"></div>
</body>

for(var count=0;count<10000;count++){
   
    
  document.getElementById('container').innerHTML+='<span>我是一个小测试</span>'
}

// 只获取一次container，并缓存
let container = document.getElementById('container')
for(let count=0;count<10000;count++){
   
    
  container.innerHTML += '<span>我是一个小测试</span>'
}

// 只获取一次container
let container = document.getElementById('container')
let content = ''
for(let count=0;count<10000;count++){
   
    
  // 累计对DOM的修改操作
  content += '<span>我是一个小测试</span>'
} 
// 将累计的修改操作一次性地应用到 DOM
container.innerHTML = content

DocumentFragment

最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。所以性能耗费的比较少
https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment

<ul id="list"></ul>

const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

fruits.forEach((fruit) => {
   
   
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);

事件委托

将子元素的事件绑定在父元素上减少对dom的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="parent">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul