Các cách để tăng hiệu suất khi đặt giá trị lớn thành innerHTML

Question

Tôi đang cố gắng đặt một phản hồi lớn (200K) cho innerhtml của một nút. Mục đích là để có được thời gian tốt hơn so với 2,7 giây trong internet explorer 6. Bất kỳ ý tưởng ?,

Cảm ơn

Answer 1

Tôi đã nghe nói rằng innerText nhanh hơn innerHTML trong IE khoảng hai lần. Tuy nhiên, không chắc chắn nó có đúng hay không, nhưng nó có thể đáng để thử.

if (window.ActiveXObject) { // we're using IE 
    document.getElementById('myElement').innerText = 'Bla bla bla bla'; 
    // or create a textnode: 
    var txt = document.createTextNode('Lorem ipsum'); 
    document.getElementById('myElement').appendChild(txt); 
} else { 
    // other code here 
} 

Cập nhật: Lưu ý rằng nếu bạn muốn thay đổi mã HTML của myElement, không sử dụng innerText - HTML sẽ hiển thị trong văn bản đơn giản, giống như nếu bạn đang sử dụng < và >.

Answer 2

Điều này sẽ không làm cho điều đó xảy ra nhanh hơn nhưng nó sẽ ngăn trình duyệt không khóa trên người dùng; họ có thể tiếp tục sử dụng trang trong khi điều này xảy ra trong nền:

function asyncInnerHTML(HTML, callback) { 
    var temp = document.createElement('div'), 
     frag = document.createDocumentFragment(); 
    temp.innerHTML = HTML; 
    (function(){ 
     if(temp.firstChild){ 
      frag.appendChild(temp.firstChild); 
      setTimeout(arguments.callee, 0); 
     } else { 
      callback(frag); 
     } 
    })(); 
} 

Sử dụng nó:

var allTheHTML = '<div><a href="#">.............</div>'; 
asyncInnerHTML(allTheHTML, function(fragment){ 
    myTarget.appendChild(fragment); // myTarget should be an element node. 
}); 

Kỹ thuật này sẽ mất nhiều thời gian hơn so với đồng bằng innerHTML nhưng người dùng sẽ có thể tiếp tục sử dụng trang web của bạn mà không nhận thấy sự chậm trễ.

Answer 3

Trước hết, tôi sẽ đảm bảo HTML của bạn đơn giản nhất có thể. Là đánh dấu cấu trúc tối thiểu nhất có thể. Sử dụng CSS ở mọi nơi, kể cả tính năng xếp tầng của nó để bạn không đặt thuộc tính lớp ở mọi nơi, v.v.

Sau đó, hãy thử nghiên cứu thêm về các phương pháp tốt nhất cho mỗi trình duyệt. Ví dụ, một số làm tốt hơn bằng cách xây dựng các đối tượng DOM, một số thiết lập tất cả nó vào innerHTML của một nút DOM không phải là cây, sau đó thêm nó vào cây, v.v. Tôi đề nghị bạn đọc Quirksmode.org's Benchmark - W3C DOM vs. innerHTML.

Bạn cũng sẽ muốn có thể sử dụng tập lệnh như JimmyP được đề xuất thêm vào các đoạn, do đó giao diện người dùng trình duyệt dường như không treo. Mặc dù, bạn không muốn chia nhỏ quá nhiều hoặc bạn sẽ không cần thiết kích hoạt quá nhiều lần làm mới trang khi bạn không cần chúng.

Answer 4

Với tải trọng HTML lớn, bạn sẽ gặp rủi ro về lỗi "Thao tác bị hủy bỏ" trong IE 6. Hãy dành thời gian và xem lại các câu hỏi StackOverflow sau đây, vì lỗi phát sinh từ việc cập nhật DOM bằng innerHTML và cho đến ngày MS không có một sửa chữa hoàn chỉnh tại chỗ:

Why Does Asp.net cause the operation aborted error in ie7?

How To Overcome IE Bug When Dynamically Attaching DIV To Body From Script?

Answer 5

Tận dụng HTML như đơn giản càng tốt, hoặc sử dụng XML với các tên phần tử/thuộc tính ngắn nhất có thể.

Kiểu với CSS (Không sử dụng XML với XSLT, điều này có thể còn chậm hơn để phân tích cú pháp/xây dựng).

Việc xử lý XML trong các trình duyệt khác nhau không phải là không tương thích.

Answer 6

tại sao không mang phản hồi ở định dạng json và xử lý nó ở phía máy khách, ví dụ here một lượng lớn dữ liệu được điều khiển mỗi lần bạn thay đổi bất kỳ tùy chọn điều hướng nào.

Answer 7

Đảm bảo văn bản JSON/HTML/Plain của bạn đơn giản nhất có thể. Giải pháp đơn giản nhất là làm ít công việc hơn, nhưng nếu bạn thực sự cần truyền 200k, hãy đảm bảo việc truyền tải đến trình duyệt được nén, có thể định cấu hình trong ứng dụng và/hoặc máy chủ web của bạn. Gzip'ping nội dung (giả sử bạn đang sử dụng một dịch vụ AJAX thân thiện) thực sự giúp đỡ, đặc biệt là với văn bản đơn giản.

Nhìn vào những thứ khác như bất kỳ vòng lặp nào có thể đơn giản, v.v., nhưng có vẻ như đảm bảo dữ liệu sẵn sàng và đảm bảo rằng dữ liệu có thể được gửi qua dây hiệu quả sẽ là trợ giúp nhiều nhất.

Nếu IE là ngoại lệ và tất cả các trình duyệt khác hoạt động tốt, bạn có thể cần phải tiếp tục. Chỉ có rất nhiều bạn có thể làm, nhưng tôi nghi ngờ nó không phải là vấn đề chính.