Petua dan kaedah untuk mengurangkan operasi aliran semula dan lukis semula

Cara mengelakkan operasi pengaliran semula dan pengecatan yang kerap

Alir semula dan mengecat semula ialah dua operasi penting apabila penyemak imbas memaparkan halaman. Reflow merujuk kepada penyemak imbas yang mengira semula kedudukan dan saiz elemen berdasarkan perubahan dalam pepohon DOM, manakala melukis semula melukis semula halaman berdasarkan hasil pengiraan. Kedua-dua operasi ini menggunakan banyak sumber pengkomputeran dan menyebabkan prestasi halaman merosot. Oleh itu, mengelakkan operasi aliran semula dan lukis semula yang kerap adalah penting untuk mengoptimumkan prestasi halaman web.

Artikel ini akan memperkenalkan beberapa kaedah yang berkesan untuk mengelakkan operasi aliran semula dan lukis semula yang kerap, dan memberikan contoh kod khusus.

1. Gunakan atribut transformasi CSS
   Apabila anda perlu melakukan operasi seperti anjakan, putaran dan penskalaan elemen, anda harus cuba menggunakan atribut transformasi CSS dan bukannya mengubah suai terus kiri, atas, lebar, tinggi dan sifat-sifat lain unsur tersebut. Oleh kerana operasi transformasi tidak akan mencetuskan aliran semula, ia hanya akan mencetuskan operasi lukis semula, sekali gus meningkatkan prestasi.

Contoh kod:

// 不推荐的方式
element.style.left = '100px';
element.style.top = '200px';
element.style.width = '300px';
element.style.height = '400px';

// 推荐的方式
element.style.transform = 'translate(100px, 200px) scale(1.5)';

2. Elakkan akses kerap kepada atribut susun atur
   Jika anda perlu kerap membaca atribut susun atur elemen dalam JavaScript, seperti offsetWidth, offsetHeight, clientWidth, clientHeight, dll., anda harus meminimumkan akses kepada ini atribut untuk mengelak menyebabkan masalah Operasi aliran semula yang kerap.

Contoh kod:

// 不推荐的方式
for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

// 推荐的方式
const length = elements.length;
for (let i = 0; i < length; i++) {
    const element = elements[i];
    console.log(element.offsetWidth);
}

3. Menggunakan DOM maya
   Virtual DOM ialah teknologi yang mewakili DOM sebenar melalui objek JavaScript, yang boleh mengurangkan operasi aliran semula dan lukis semula melalui kemas kini kelompok. Apabila sebilangan besar elemen DOM perlu diubah suai dengan kerap, anda boleh melakukan pemprosesan kelompok dahulu melalui DOM maya, dan kemudian mengemas kini DOM sebenar sekali gus, dengan itu mengurangkan bilangan aliran semula dan lukisan semula.

Contoh kod:

// 创建虚拟DOM
const virtualDOM = document.createElement('div');
virtualDOM.style.width = '200px';
virtualDOM.style.height = '300px';

// 批量批处理
for (let i = 0; i < 1000; i++) {
    const element = document.createElement('span');
    element.innerText = 'Hello Virtual DOM';
    virtualDOM.appendChild(element);
}

// 一次性更新真实DOM
document.body.appendChild(virtualDOM);

4. Menggunakan pendikit dan nyahlantun
   Pendikit dan nyahlantun ialah teknik yang biasa digunakan untuk mengoptimumkan prestasi halaman. Pendikitan boleh mengehadkan kekerapan pencetus peristiwa untuk menghalang pengaliran semula dan operasi lukis semula yang disebabkan oleh pencetus yang kerap boleh melambatkan masa pencetus peristiwa untuk mencapai kesan mencetuskan hanya satu peristiwa dalam tempoh masa yang singkat, dengan itu mengurangkan bilangan peristiwa; operasi aliran semula dan lukis semula.

Contoh kod:

// 节流方式
function throttle(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fn.apply(this, arguments);
            }, delay);
        }
    };
}

// 防抖方式
function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}

// 使用节流方式绑定事件
element.addEventListener('scroll', throttle(function() {
    // 处理滚动事件
}, 200));

// 使用防抖方式绑定事件
element.addEventListener('resize', debounce(function() {
    // 处理调整窗口大小事件
}, 200));

Melalui kaedah di atas, kami boleh mengelakkan operasi aliran semula dan lukis semula yang kerap, serta meningkatkan prestasi dan pengalaman pengguna halaman. Semasa proses pembangunan, perhatian harus diberikan kepada penggunaan rasional atribut transformasi CSS, mengurangkan akses kepada atribut susun atur, menggunakan DOM maya untuk pemprosesan kelompok, menggunakan teknologi pendikit dan anti goncang, dsb. Mengoptimumkan operasi pemaparan halaman dengan teliti boleh membawa pengguna pengalaman menyemak imbas yang lebih pantas dan lancar.

Atas ialah kandungan terperinci Petua dan kaedah untuk mengurangkan operasi aliran semula dan lukis semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!