Tại sao cài đặt nhấp chuột innerHTML kích hoạt hai sự kiện phân tích cú pháp trên Chrome?

Sử dụng Timeline trong Công cụ nhà phát triển Chrome, tôi sử dụng mảnh nhỏ mã này để ghi lại các sự kiện thông qua innerHTML:Tại sao cài đặt nhấp chuột innerHTML kích hoạt hai sự kiện phân tích cú pháp trên Chrome?

<!DOCTYPE html> 

<html> 
<head> 
    <script> 
    function test(){ 
     var wrap = document.getElementById('wrapper'); 
     wrap.innerHTML = "test"; 
    } 
    </script> 
</head> 

<body> 
    <input type="button" value="click" onClick="test();"/> 
    <div id="wrapper"></div> 
</body> 
</html>

Và tôi có thể thấy rằng có hai sự kiện phân tích cú pháp bắn một lần phương pháp thử nghiệm được chạy :

Chrome Timeline showing parsing double events

tôi đang sử dụng Chrome Version 23.0.1271.64 m

có một cái gì đó mong đợi? Đây có phải là lỗi từ Công cụ dành cho nhà phát triển Chrome không? hoặc có gì để cải thiện trong Chrome không?

Nguồn

2012-11-11 JBE

bản sao có thể có của [Tại sao trình kích hoạt appendChild Tính toán lại kiểu trong khi thiết lập innerHTML không có trên Chrome?] (Http://stackoverflow.com/questions/13344080/why-appendchild-triggers-recalculate-style-whereas-setting-innerhtml -dont-on-ch) –

Sau một chút chơi xung quanh, tôi đoán rằng điều này có liên quan đến Chrome cần phân tích chuỗi "kiểm tra" và sau đó phân tích lại trang hoặc có thể chỉ là phần tử "bọc" sau chuỗi thêm. innerHTML là một hàm tò mò vì nó cho phép bổ sung bất kỳ nội dung nào, vì vậy một số xác nhận/phân tích cú pháp đã xảy ra.

Nó được phần nào nói rằng nếu bạn thay đổi chức năng của bạn như thế này:

function test() { 
    var wrap = document.getElementById('wrapper'); 
    var newtext = document.createTextNode("test"); 
    wrap.appendChild(newtext); 
}

... sau đó có sự kiện nào phân tích xảy ra ở tất cả.

Nguồn

2012-11-13 10:54:24 adhocgeek

Không có sự kiện phân tích cú pháp nào cả vì createTextNode() và appendChild() sau tương tự như wrap.textContent = 'test', không kích hoạt trình phân tích cú pháp HTML. – Erik

..yes, đó đúng hơn là điểm nhận xét. – adhocgeek

Tại sao cài đặt nhấp chuột innerHTML kích hoạt hai sự kiện phân tích cú pháp trên Chrome?

Trả lời

Các vấn đề liên quan