Mã sau sử dụng Sự kiện đột biến DOM DOMNodeInserted để phát hiện sự tồn tại của phần tử body và quấn innerHTML của nó vào trình bao bọc.Các Trình theo dõi đột biến DOM có chậm hơn Sự kiện đột biến DOM không?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function DOMmanipulation() {
if (document.body) {
document.removeEventListener('DOMNodeInserted', DOMmanipulation);
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
}
document.addEventListener('DOMNodeInserted', DOMmanipulation);
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Và mặc dù thành công của gói, có lỗi cho thấy không tìm thấy nút. This answer của một câu hỏi giải thích rằng đó là vì khi jQuery đã được nạp, nó thêm một phần tử div vào cơ thể để thực hiện một số kiểm tra, nhưng nó không thể loại bỏ phần tử div bởi vì phần tử đó đã được gói vào trình bao bọc sao cho nó không phải là yếu tố con của cơ thể nữa.
Thí nghiệm trên cho chúng ta biết DOMNodeInserted sự kiện là nhanh hơn so với các bài kiểm tra của jQuery vì yếu tố thử nghiệm của jQuery (div) đã bọc trước khi nó có thể được loại bỏ bằng jQuery.
Bây giờ các mã sau đây có thể đạt được các thao tác tương tự, và nó sử dụng các nhà quan sát DOM Đột biến mới được giới thiệu. Tính đến thời điểm này (2012-07-11), nó chỉ hoạt động trên Chrome 18 trở lên.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var observer = new WebKitMutationObserver(function() {
if (document.body) {
observer.disconnect();
// DOM manipulation start
document.body.innerHTML = '<div class="wrapper">' + document.body.innerHTML + '</div>';
// DOM manipulation end
}
});
observer.observe(document, { subtree: true, childList: true });
</script>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Mã này không tạo ra lỗi nào. Điều đó có nghĩa là jQuery nhanh hơn các Trình theo dõi đột biến DOM, do đó, nó có thể loại bỏ phần tử thử nghiệm của nó (div) trước khi phần tử đó có thể được bao bọc trong trình bao bọc.
Từ hai thí nghiệm trên, chúng ta thấy rằng khi nói đến thực hiện tốc độ:
- DOM Đột biến Sự kiện > kiểm tra jQuery
- kiểm tra của jQuery > Quan sát đột biến DOM
Kết quả này có thể chứng minh thích hợp rằng Trình theo dõi đột biến DOM chậm hơn Sự kiện đột biến DOM không?
Cảm ơn rất nhiều @AshHeskes và lời giải thích tuyệt vời! Cuối cùng tôi hiểu nguyên tắc thực hiện của họ. –