Prestasi halaman web dipengaruhi oleh aliran semula dan lukis semula

Impak aliran semula dan lukisan semula pada prestasi halaman web memerlukan contoh kod khusus

Dengan perkembangan pesat Internet, prestasi halaman web telah menjadi isu yang tidak boleh diabaikan. Pengguna mempunyai keperluan yang semakin tinggi untuk kelajuan memuatkan halaman web dan kelancaran interaktif. Sebagai pautan utama dalam pemaparan halaman web, aliran semula dan lukisan semula mempunyai kesan penting pada prestasi halaman web. Memahami prinsip aliran semula dan lukisan semula, serta mengoptimumkan kod dengan cara yang disasarkan, boleh meningkatkan prestasi dan pengalaman pengguna halaman web dengan ketara.

Pertama, mari kita fahami definisi dan proses pelaksanaan aliran semula dan lukis semula.

Layout bermaksud penyemak imbas mengira dan menentukan kedudukan dan saiz setiap elemen dalam halaman web berdasarkan gaya dan struktur elemen DOM. Apabila aliran semula berlaku, penyemak imbas mengira semula reka letak halaman web, termasuk kedudukan, saiz dan pembalut teks elemen. Reflow akan mencetuskan pengiraan kompleks dan algoritma susun atur, menggunakan sumber prestasi yang besar.

Lukisan bermaksud penyemak imbas menarik kandungan elemen ke dalam peta bit berdasarkan gaya dan reka letak elemen dan memaparkannya pada skrin. Apabila lukisan semula berlaku, penyemak imbas mengira semula sifat lukisan elemen, seperti warna, bayang-bayang dan ketelusan, dan kemudian melukis semula elemen tersebut.

Aliran semula dan lukis semula biasanya dilakukan secara berterusan, dan satu aliran semula sering menyebabkan beberapa lukisan semula.

Di bawah, kami menggunakan contoh kod khusus untuk menggambarkan kesan aliran semula dan lukisan semula pada prestasi halaman web dan memberikan beberapa cadangan pengoptimuman.

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box" id="myBox"></div>

<script>
    var myBox = document.getElementById("myBox");
    myBox.style.width = "300px"; // 引起回流和重绘
    myBox.style.height = "300px"; // 引起回流和重绘
    myBox.style.opacity = "0.5"; // 只引起重绘

    // 优化建议：尽量避免频繁修改样式，可以使用 CSS 类名切换的方式，一次性修改多个属性。
    myBox.classList.add("big-box");

    // 优化建议：使用文档片段（DocumentFragment）进行 DOM 操作，减少回流次数。
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var div = document.createElement("div");
        fragment.appendChild(div);
    }
    myBox.appendChild(fragment);
</script>

Dalam kod di atas, kami mula-mula mencipta elemen myBox dan menetapkan gaya awalnya. Kemudian lebar, tinggi dan ketelusan myBox telah diubah suai melalui JavaScript. Perhatikan di sini bahawa menukar lebar dan ketinggian akan mencetuskan aliran semula dan lukisan semula, manakala menukar ketelusan hanya akan mencetuskan lukisan semula. myBox，并设置其初始样式。然后通过 JavaScript 修改了 myBox 的宽度、高度和透明度。这里注意，修改宽度和高度会触发回流和重绘，而修改透明度只会触发重绘。

为了优化代码，我们提供了两个建议。首先，尽量避免频繁修改样式，可以使用 CSS 类名切换的方式，一次性修改多个属性。例如，我们可以使用 classList.add 方法为元素添加一个 big-box 的类，从而一次性修改元素的宽度和高度。

其次，使用文档片段（DocumentFragment）进行 DOM 操作可以减少回流次数。在示例代码中，我们使用文档片段来一次性创建了 1000 个 div 元素，并将它们添加到 myBox

Untuk mengoptimumkan kod, kami menyediakan dua cadangan. Pertama sekali, cuba elakkan dari kerap mengubah suai gaya Anda boleh menggunakan penukaran nama kelas CSS untuk mengubah suai berbilang sifat sekaligus. Sebagai contoh, kita boleh menggunakan kaedah classList.add untuk menambah kelas big-box pada elemen untuk mengubah suai lebar dan ketinggian elemen sekali gus.

Kedua, menggunakan serpihan dokumen (DocumentFragment) untuk operasi DOM boleh mengurangkan bilangan aliran semula. Dalam kod sampel, kami menggunakan serpihan dokumen untuk mencipta 1000 elemen div sekaligus dan menambahkannya pada myBox. Melakukannya boleh mengurangkan bilangan aliran semula dan meningkatkan prestasi.

Alir semula dan lukis semula akan menggunakan banyak sumber prestasi, jadi anda harus cuba mengelak daripada mencetuskan terlalu banyak operasi alir semula dan lukis semula dalam pembangunan web. Untuk senario sensitif prestasi, kami boleh menggunakan alatan untuk mengesan dan mengoptimumkan prestasi halaman, seperti alat pembangun Chrome, Rumah Api, dsb. 🎜🎜Dengan memahami prinsip aliran semula dan lukisan semula, serta mengoptimumkan kod dengan sewajarnya, kami boleh meningkatkan prestasi dan pengalaman pengguna halaman web, menjadikan halaman web dimuatkan dengan lebih pantas dan berinteraksi dengan lebih lancar. Saya harap kandungan artikel ini dapat membantu anda. 🎜

Atas ialah kandungan terperinci Prestasi halaman web dipengaruhi oleh aliran semula dan lukis semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!