InternalHTML có không đồng bộ không?

Tôi hy vọng mình sẽ không tự lừa mình nhưng tôi đang cố gắng hiểu điều gì đang xảy ra trong hai dòng mã đó:

document.body.innerHTML = 'something';
alert('something else');

Những gì tôi đang quan sát là cảnh báo hiển thị trước khi HTML được cập nhật (hoặc có thể có nhưng trang chưa được làm mới / sơn lại / bất cứ điều gì)

Kiểm tra codepen này để xem tôi muốn nói gì.

Xin lưu ý rằng ngay cả việc đưa alertvào setTimeout(..., 0)cũng không giúp được gì. Có vẻ như cần nhiều vòng lặp sự kiện hơn innerHTMLđể thực sự cập nhật trang.

BIÊN TẬP:

Tôi quên đề cập rằng tôi đang sử dụng Chrome và không kiểm tra các trình duyệt khác. Có vẻ như nó chỉ hiển thị trong Chrome. Tuy nhiên tôi vẫn quan tâm tại sao điều đó lại xảy ra.

Đặt innerHTML là đồng bộ, cũng như hầu hết các thay đổi bạn có thể thực hiện đối với DOM. Tuy nhiên, việc hiển thị trang web là một câu chuyện khác.

(Hãy nhớ rằng DOM là viết tắt của "Document Object Model". Nó chỉ là một "mô hình", một đại diện của dữ liệu. Những gì người dùng nhìn thấy trên màn hình của họ là hình ảnh về cách mà mô hình đó sẽ trông như thế nào. Vì vậy, việc thay đổi mô hình không phải ngay lập tức thay đổi hình ảnh - cần một thời gian để cập nhật.)

Việc chạy JavaScript và hiển thị trang web thực sự diễn ra riêng biệt. Nói một cách đơn giản, đầu tiên tất cả JavaScript trên trang đều chạy (từ vòng lặp sự kiện - hãy xem video xuất sắc này để xem chi tiết hơn) và sau đó sau khi mà trình duyệt làm cho bất kỳ thay đổi để trang web cho người dùng xem. Đây là lý do tại sao "chặn" lại là một vấn đề lớn như vậy - việc chạy mã chuyên sâu về tính toán sẽ ngăn trình duyệt vượt qua bước "chạy JS" và chuyển sang bước "hiển thị trang", khiến trang bị treo hoặc đơ.

Đường dẫn của Chrome trông giống như sau:

Như bạn có thể thấy, tất cả JavaScript xảy ra đầu tiên. Sau đó, trang được tạo kiểu, bố cục, vẽ và kết hợp - "kết xuất". Không phải tất cả đường ống này sẽ thực thi mọi khung hình. Nó phụ thuộc vào phần tử trang nào đã thay đổi, nếu có và cách chúng cần được hiển thị.

Lưu ý: alert()cũng đồng bộ và thực thi trong bước JavaScript, đó là lý do tại sao hộp thoại cảnh báo xuất hiện trước khi bạn thấy các thay đổi đối với trang web.

Bây giờ bạn có thể hỏi "Chờ đã, chính xác thì điều gì sẽ được chạy trong bước 'JavaScript' đó trong quy trình? Tất cả mã của tôi có chạy 60 lần mỗi giây không?" Câu trả lời là "không", và nó quay trở lại cách hoạt động của vòng lặp sự kiện JS. Mã JS chỉ chạy nếu nó nằm trong ngăn xếp - từ những thứ như trình nghe sự kiện, thời gian chờ, bất cứ điều gì. Xem video trước (thực sự).

https://developers.google.com/web/fundamentals/performance/rendering/

Có, nó là đồng bộ vì điều này hoạt động (hãy tiếp tục, nhập nó vào bảng điều khiển của bạn):

document.body.innerHTML = 'text';
alert(document.body.innerHTML);// you will see a 'text' alert

Lý do bạn thấy cảnh báo trước khi thấy trang thay đổi là do trình duyệt hiển thị mất nhiều thời gian hơn và không nhanh bằng việc thực thi javascript của bạn từng dòng một.

Thực innerHTMLtế thuộc tính được cập nhật đồng bộ, nhưng bản vẽ lại trực quan mà thay đổi này gây ra xảy ra không đồng bộ.

Việc hiển thị trực quan DOM là không đồng bộ trong Chrome và sẽ không xảy ra cho đến khi ngăn xếp hàm JavaScript hiện tại bị xóa và trình duyệt có thể tự do chấp nhận một sự kiện mới. Các trình duyệt khác có thể sử dụng các chuỗi riêng biệt để xử lý mã JavaScript và hiển thị trình duyệt hoặc chúng có thể cho phép một số sự kiện được ưu tiên trong khi cảnh báo đang tạm dừng thực thi một sự kiện khác.

Bạn có thể thấy điều này theo hai cách:

1. Nếu bạn thêm for(var i=0; i<1000000; i++) { }trước cảnh báo của mình, bạn đã cho trình duyệt nhiều thời gian để vẽ lại, nhưng nó chưa được, vì ngăn xếp hàm chưa xóa ( addvẫn đang chạy).

2. Nếu bạn trì hoãn alertthông qua không đồng bộ setTimeout(function() { alert('random'); }, 1), quá trình vẽ lại sẽ đi trước chức năng bị trì hoãn bởi setTimeout.

   • Điều này không hoạt động nếu bạn sử dụng thời gian chờ 0, có thể do Chrome dành ưu tiên hàng đợi sự kiện cho 0thời gian chờ trước bất kỳ sự kiện nào khác (hoặc ít nhất là trước các sự kiện vẽ lại).