Rumah >hujung hadapan web >html tutorial >Berapa banyak prestasi dipengaruhi oleh perbezaan antara aliran semula dan lukis semula
Berapa banyak prestasi dipengaruhi oleh perbezaan antara aliran semula dan lukis semula
- 王林asal
- 2024-01-26 10:04:081006semak imbas
Impak perbezaan antara aliran semula dan lukis semula pada prestasi memerlukan contoh kod khusus
Dalam pembangunan bahagian hadapan, kita sering menghadapi situasi di mana kita perlu mengubah suai halaman, seperti menukar gaya, saiz atau kedudukan elemen , dsb. Walau bagaimanapun, perubahan ini tidak bebas kos Ia akan mencetuskan operasi pengaliran semula dan lukis semula penyemak imbas, yang akan memberi kesan kepada prestasi halaman.
Aliran semula dan cat semula ialah dua operasi berbeza yang dilakukan oleh penyemak imbas semasa mengubah suai halaman. Reflow bermakna apabila susun atur halaman atau sifat geometri berubah, penyemak imbas perlu mengira semula kedudukan dan saiz elemen, kemudian mengemas kini reka letak halaman dan melukisnya semula. Melukis semula bermakna apabila gaya halaman berubah, penyemak imbas hanya perlu melukis semula gaya elemen tanpa susun atur semula.
Memandangkan pengaliran semula melibatkan pengiraan semula reka letak halaman, ia jauh lebih mahal daripada melukis semula. Operasi aliran semula akan menyebabkan halaman disusun semula dan dilukis semula, manakala lukisan semula hanya akan menyebabkan halaman dilukis semula. Oleh itu, kita harus cuba mengelakkan aliran semula yang kerap untuk meningkatkan prestasi halaman.
Mari lihat beberapa contoh kod secara terperinci untuk menunjukkan kesan perbezaan antara aliran semula dan lukisan semula pada prestasi.
Mula-mula, kami mencipta halaman ringkas yang mengandungi butang dan elemen div:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="moveBox()">移动盒子</button>
<script>
function moveBox() {
var box = document.querySelector('.box');
box.style.left = '200px';
}
</script>
</body>
</html>Kod ini mengalihkan elemen div 200px ke kanan selepas mengklik butang. Walau bagaimanapun, memandangkan kami secara langsung mengubah suai gaya elemen, ini akan menyebabkan penyemak imbas melakukan operasi aliran semula.
Seterusnya, kami menambah baik kod untuk mengelakkan aliran semula:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: left 0.3s ease-out;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="moveBox()">移动盒子</button>
<script>
function moveBox() {
var box = document.querySelector('.box');
box.classList.add('move');
}
</script>
</body>
</html>Dalam contoh ini, kami menggunakan kesan peralihan CSS untuk mencapai pergerakan kotak yang lancar. Dengan menambah nama kelas (move), kita hanya perlu mengubah suai gaya elemen tanpa mencetuskan operasi aliran semula. Ini mengurangkan kos pengkomputeran penyemak imbas dan meningkatkan prestasi halaman.
Perbezaan antara reflow dan redraw mempunyai kesan yang jelas terhadap prestasi. Operasi aliran semula yang kerap akan menyebabkan susun atur halaman dan lukisan diulang secara berterusan, menyebabkan kemerosotan prestasi. Oleh itu, dalam pembangunan sebenar, kita harus cuba mengelakkan aliran semula yang kerap dan mengoptimumkan prestasi halaman dengan menggunakan CSS secara rasional dan mengelakkan manipulasi langsung gaya atau sifat geometri unsur.
Untuk meringkaskan, reflow dan redraw ialah dua operasi berbeza yang dilakukan oleh penyemak imbas apabila elemen halaman berubah. Aliran semula lebih mahal daripada lukisan semula kerana ia melibatkan pengiraan semula reka letak halaman. Kita harus cuba meminimumkan berlakunya aliran semula dan mengoptimumkan prestasi halaman dengan menggunakan CSS dengan bijak dan mengelakkan manipulasi langsung gaya atau sifat geometri unsur.
Atas ialah kandungan terperinci Berapa banyak prestasi dipengaruhi oleh perbezaan antara aliran semula dan lukis semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!