ChènAdjacentHTML nhanh hơn nhiều so với innerHTML như thế nào?

About a month ago, Firefox 8 đã triển khai phương thức insertAdjacentHTML, được thêm vào IE4 cùng với innerHTML. Theo tiêu chuẩn this, chènAdjacentHTML thường là thứ tự độ lớn nhanh hơn so với innerHTML.ChènAdjacentHTML nhanh hơn nhiều so với innerHTML như thế nào?

Tôi cho rằng cả hai đều gọi cùng một trình phân tích cú pháp HTML, vậy tại sao sự khác biệt đó lại gây ấn tượng mạnh? insertAdjacentHTML là một lời gọi phương thức đơn giản, trong khi innerHTML là một getter/setter và có lẽ có một chút chi phí cho điều đó, nhưng tôi sẽ không bao giờ tưởng tượng được nhiều.

Nguồn

2011-09-28 Peter C

Lưu ý rằng việc sử dụng 'appendChild' nhanh hơn cả hai. Có lẽ vì không có trình phân tích cú pháp là cần thiết ở đó. Sự khác biệt giữa 'chènAdjacentHTML' và' innerHTML' có vẻ không đáng kể khi so sánh với 'appendChild'. Tuy nhiên, nếu bạn cần phân tích chuỗi html, 'appendChild' sẽ không giúp ích gì nhiều. Đây là một JSperf chi tiết: http://jsperf.com/insertadjacenthtml-perf/28 – oriadam

work.innerHTML += "test"; tương đương với work.innerHTML = work.innerHTML + "test";, tức là mỗi khi chạy, phải nối tiếp tất cả các nội dung hiện có của work và sau đó hoàn nguyên toàn bộ lô cộng với khoảng bổ sung.

work.insertAdjacentHTML("BeforeEnd", "test"); chỉ phân tích cú pháp một khoảng mỗi lần và sau đó đính kèm đoạn tài liệu nhỏ vào DOM.

Nguồn

2011-09-28 23:28:33 Alohci

Tôi hy vọng một trình duyệt tốt sẽ tối ưu hóa 'work.innerHTML + =" test "' chỉ cần nối thêm vào 'innerHTML', giống như hiện đại trình duyệt tối ưu hóa chuỗi nối. Mặc dù vậy tôi có thể sai, nhưng sẽ thật đáng ngạc nhiên nếu không có nhà cung cấp trình duyệt nào nghĩ về điều này. –

Nó không phải dễ dàng như vậy. Chu trình tuần tự/phân tích cú pháp có một số tác dụng phụ, chẳng hạn như đặt lại một số thuộc tính nút và thả trình xử lý sự kiện được đính kèm động. Tối ưu hóa sẽ yêu cầu những người được nhân rộng chính xác. Các nhà sản xuất trình duyệt có những thứ tốt hơn để làm. 'Element.innerHTML + = ...' là một mẫu chống dễ dàng tránh được trong mã JS. Chỉ cần không làm điều đó. – Alohci

+1 Tạo ý nghĩa. Tôi không đồng ý với 'e.innerHTML + = ...' là một mẫu đối tượng. Có một số sử dụng hợp lệ liên quan đến Ajax và tôi không thấy lý do tại sao nó có hại (ngoài việc bị chậm) ở nơi khác. –

Bộ đặt mã innerHTML sẽ phải xóa tất cả các nút con hiện có trước khi thêm các nút con mới.

Không biết nếu đây là lý do duy nhất, nhưng đó chắc chắn là một yếu tố.

Nguồn

2011-09-28 22:23:44 user123444555621

ChènAdjacentHTML nhanh hơn nhiều so với innerHTML như thế nào?

Trả lời

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