Khi một thứ gì đó được nối vào DOM trong bộ nhớ, điều đó có làm cho trình duyệt bị hỏng không?

Question

Khi một thứ gì đó được nối vào DOM trong bộ nhớ, điều đó có làm cho trình duyệt bị hỏng không? Hoặc là nó chỉ khi các điểm ảnh trên màn hình được nói để thay đổi rằng reflow xảy ra? Ví dụ:

Trường hợp 1: yếu tố Img nối vào DOM một lúc

var parentDiv = $('#imgHolder'); 
var imgArray = []; // Array of img paths populated in another function 

$.each(imgArray, function() 
{ 
    parentDiv.append(createImgEle(this)); // createImgEle() // returns an <img> with the right src 
} 

Trường hợp 2: yếu tố Img được đặt trong một mảng riêng biệt và sau đó nối vào DOM

var parentDiv = $('#imgHolder'); 
var imgArray = []; // Array of img paths populated in another function 
var tempArray = []; // Holds the img elements until its fully populated 

$.each(imgArray, function() 
{ 
    tempArray.push(createImgEle(this)); 
} 
parentDiv.append(tempArray); 

Trường hợp 3: Hoặc là 1 hoặc 2 nhưng theo mặc định, parentDiv được đặt thành display:none; và hiển thị sau mỗi vòng lặp được thực hiện.

Về cơ bản, điều tôi muốn biết là, trình duyệt chỉ có bắt đầu chỉnh lại khi các pixel của màn hình được thông báo thay đổi không?

Btw, mã chỉ dành cho mục đích ví dụ và không phải trong sản xuất, do đó đừng làm tôi thất vọng vì bất kỳ lỗi logic nào. Cảm ơn vì bất cứ lời khuyên nào.

Answer 1

Về cơ bản, những gì tôi muốn biết là, trình duyệt chỉ bắt đầu chỉnh lại khi các pixel của màn hình được thông báo thay đổi không?

Không, trình duyệt sẽ phản ánh khi DOM thay đổi. Sau đó, nó sẽ repaint (nói với các điểm ảnh trên màn hình để thay đổi).

Để biết chi tiết, hãy xem this dev.opera.com article và câu hỏi When does reflow happen in a DOM environment?.

Tóm lại: Có tối ưu hóa khóa học cho các thay đổi DOM tiếp theo, ví dụ: nếu bạn chèn một mảng các phần tử trong một vòng lặp. Tôi sẽ không mong đợi trường hợp của bạn 1 và 2 khác nhau đáng chú ý.

Chỉ khi bạn đang thực sự thay đổi DOM thực sự nặng, bạn có thể cần trường hợp # 3. Điều này làm cho sự phản xạ, nên chúng xảy ra trong vòng lặp chèn, dừng lại khi gặp phải các phần tử ẩn để chúng cơ bản bị ngăn chặn. Tuy nhiên, hai thay đổi hiển thị trước và sau vòng lặp có thể dẫn đến nhấp nháy trong một số trình duyệt.