Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 1)

Phần 1: Remove render-blocking javascript

Tổng quan về render page:

Trước khi trình duyệt render một page nó sẽ xây dựng môt DOM tree bằng cách phân tích HTML. Trong quá trình này khi gặp bất cứ một đoạn script nào nó phải dừng lại và xử lý đoạn script đó trước khi tiếp tục phân tích HTML. Trong trường hợp đoạn script bên ngoài phải chờ load thì đó sẽ trở thành 1 nguyên nhân trì hoãn quá trình render

Các cách Remove render-blocking javascript:

Inline Javascript: Bình thường các script từ link bên ngoài buộc trình duyệt phải đợi cho đến khi nó được tải thành công, nếu script nhỏ, bạn có thể dùng Inline JavaScript (viết luôn javascript)

thành

 

Make JavaScript Asynchronous: Theo mặc định JavaScript làm nghẽn quá trình DOM construction, do đó làm tăng thời gian render. Để ngăn chặn điều này chúng ta có thể dùng thuộc tính async trên thẻ script: <script async src=”my.js”>

Defer loading of JavaScript: Thêm thuộc tính defer trên thẻ script: <script async src=”my.js”>

Sự khác nhau giữa 2 thuộc tính async và defer

Sự khác nhau giữa javascript async và defer

Sự khác nhau giữa javascript async và defer

  • Bình thường khi không có 2 thuộc tính này trong thẻ script: tập tin html sẽ được phân tích cho đến khi gặp phải script, ở thời điểm này quá trình phân tích sẽ bị dừng lại và sẽ tiến hành load file script sau đó phân tích script xong mới tiến hành tiếp.
  • <script async>: script sẽ được tải trong quá trình phân tích HTML nhưng quá trình phân tích HTML sẽ bị pause để thực hiện phân tích script xong mới tiến hành tiếp.
  • <script defer>: script sẽ được tải trong quá trình phân tích HTML và đươc phân tích khi quá trình phân tích HTML xong

 

Xem tiếp >> Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 2)

One thought on “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 1)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *