Reflow और Repaint कम करना
In this page:
var html = "";
for (/* each item */) {
html += "<tag>" + value + "</tag>"; // build in memory
}
$("#container").html(html); // one DOM update
$("selector").addClass("className"); // one class instead of many stylesReflow और Repaint क्या हैं?
एक reflow वह है जब browser page पर elements की position और size recalculate करता है, जो बार-बार trigger होने पर तुलनात्मक रूप से महंगा है।
उदाहरण: What are Reflow and Repaint?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").css("width", "200px");
console.log($("#box")[0].offsetHeight);
</script>
</body>
</html>DOM Updates को Batch करना
एक के बाद एक कई अलग DOM changes करना — उदाहरण के लिए, एक loop में एक-एक करके elements append करना — हर एक individually extra layout work trigger कर सकता है।
उदाहरण: Batch DOM Updates
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
let html = "";
for (let i = 0; i < 5; i++) {
html += "<li>Item " + i + "</li>";
}
$("#list").html(html);
</script>
</body>
</html>कई Styles के बजाय Classes इस्तेमाल करें
एक CSS class बदलना एक साथ कई style properties update कर सकता है, क्योंकि class खुद color, size, spacing, और ज़्यादा को एक rule में bundle कर सकती है।
उदाहरण: Use Classes Instead of Many Styles
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.highlighted { background: yellow; border: 1px solid orange; padding: 4px; }
</style>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").addClass("highlighted");
</script>
</body>
</html>Unnecessary Layout Reads से बचें
styles बदलने के तुरंत बाद layout values — जैसे किसी element की offsetHeight या getBoundingClientRect() — पढ़ना browser को force कर सकता है recalculate करने के लिए।
उदाहरण: Avoid Unnecessary Layout Reads
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
$("#box").css("width", "300px");
setTimeout(function() {
console.log($("#box")[0].offsetHeight);
}, 0);
</script>
</body>
</html>एक छोटा Performance Project
अच्छी DOM performance practice कुछ habits combine करती है: DOM updates को साथ batch करना, फिर से query करने के बजाय selectors cache करना, और CSS class को prefer करना।
उदाहरण: Small Performance Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"></ul>
<script>
const $list = $("#list");
let html = "";
for (let i = 0; i < 3; i++) {
html += "<li>Row " + i + "</li>";
}
$list.html(html);
</script>
</body>
</html>- एक loop के अंदर एक-एक करके elements append करना, कई reflows का कारण बनते हुए, जबकि markup पहले बनाना और उसे एक बार add करना तेज़ है।
- एक साथ कई
.css()properties set करना एक-एक करके, जबकि एक single class toggle करना उन्हें साथ update कर देता है। - एक loop के अंदर writes के बीच
.width()जैसी layout values पढ़ना, जो browser को हर बार layout recalculate करने पर force करता है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: