Bahagian 1: Pelaksanaan kod diperkemas: Petua untuk mengurangkan aliran semula dan lukisan semula
Apabila membangunkan aplikasi web, mengoptimumkan prestasi adalah tugas penting. Antaranya, mengurangkan pengaliran semula halaman (reflow) dan mengecat semula (repaint) adalah salah satu perkara utama untuk meningkatkan prestasi halaman web. Artikel ini akan berkongsi beberapa petua dan contoh kod khusus untuk membantu anda mengurangkan aliran semula dan lukis semula dengan lebih baik serta meningkatkan prestasi halaman web.
Pada elemen yang perlu dianimasikan, cuba gunakan animasi CSS3 dan bukannya melaksanakan animasi melalui JavaScript. Animasi CSS3 menggunakan pecutan perkakasan, yang mengurangkan aliran semula dan lukisan semula dengan berkesan. Berikut ialah contoh menggunakan animasi CSS3:
.animated-element { transform: translateX(0); transition: transform 0.3s; } .animated-element:hover { transform: translateX(100px); }
Apabila membuat berbilang pengubahsuaian gaya pada elemen, kita boleh menggabungkan operasi ini menjadi satu operasi kelompok dengan menukar classList
untuk membuat pengubahsuaian gaya sekali sahaja. Ini mengurangkan bilangan aliran semula dan lukisan semula. Berikut ialah contoh penggunaan classList
: className
或使用 classList
来进行一次性的样式修改。这样可以减少回流和重绘的次数。以下是一个使用 classList
的示例:
element.classList.add('class1', 'class2'); element.classList.remove('class3');
在监听浏览器事件时,对于一些频繁触发的事件,如 scroll
和 resize
,我们可以利用节流(throttle)和防抖(debounce)来减少回流和重绘的次数。节流和防抖可以通过自定义函数或使用第三方库来实现。以下是一个使用 lodash 库的节流和防抖的示例:
// 节流 window.addEventListener('scroll', _.throttle(function() { // 需要执行的代码 }, 200)); // 防抖 window.addEventListener('resize', _.debounce(function() { // 需要执行的代码 }, 300));
虚拟 DOM(Virtual DOM)是一种将页面元素的更新操作先应用于虚拟 DOM 树,再将其与真实 DOM 进行比较,最后仅更新真正需要改变的部分,从而减少回流和重绘的开销。常用的虚拟 DOM 库有 React 和 Vue 等。以下是一个使用 React 的示例:
class MyComponent extends React.Component { render() { return ( <div> {/* 内容 */} </div> ); } } ReactDOM.render(<MyComponent />, document.getElementById('root'));
requestAnimationFrame
使用 requestAnimationFrame
来进行动画绘制,可以让浏览器在下一次重绘之前执行 JavaScript 代码,从而将多次重绘合并为一次。以下是一个使用 requestAnimationFrame
function render() { // 绘制代码 requestAnimationFrame(render); } render();
scroll
dan resize
, kita boleh menggunakan pendikit dan nyahpantun untuk mengurangkan bilangan aliran semula dan lukisan semula. Pendikitan dan anti-goncang boleh dicapai melalui fungsi tersuai atau menggunakan perpustakaan pihak ketiga. Berikut ialah contoh pendikitan dan anti-goncang menggunakan perpustakaan lodash: 🎜rrreeerequestAnimationFrame
🎜🎜🎜Gunakan requestAnimationFrame
untuk lukisan animasi, yang membenarkan penyemak imbas untuk Kod JavaScript dilaksanakan sebelum lukisan semula, sekali gus menggabungkan beberapa lukisan semula menjadi satu. Berikut ialah contoh penggunaan requestAnimationFrame
: 🎜rrreee🎜Melalui beberapa teknik mudah di atas dan contoh kod khusus, kami boleh mengurangkan bilangan aliran semula dan lukis semula dengan berkesan serta meningkatkan prestasi aplikasi web. Saya harap kandungan ini boleh membantu kerja pengoptimuman halaman web anda. 🎜Atas ialah kandungan terperinci Optimumkan kod: cara untuk mengurangkan aliran semula dan lukis semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!