Tải css không đồng bộ

Xin chào hôm trước chúng tôi có phân tích về cách giải quyết sự cố web chậm hơn rất nhiều sau khi tích hợp

2 thông qua bài viết Cách giải quyết Google Analytics làm chậm hệ thống. Ở đó chúng tôi đã có cách của riêng mình giúp hệ thống tối ưu từ 80 lên 99 về hiệu suất trang tải. Trong bài viết này, bạn sẽ tiếp cận thêm một cách mà

3 đã hỗ trợ thêm đó là

4 và

5. Bạn sẽ có nhiều kiến ​​thức về hiệu suất hơn, giúp hệ thống tối ưu hơn sau khi tham khảo bài viết này

Ngoài ra thêm một gợi ý cho bạn cách tải js chuyên nghiệp. Tải động tệp javascript

Use script tag information

Trước khi đi vào vấn đề chính trong bài viết này, chúng ta nên quay lại khoảng thời gian trước đó một chút, để xem cách hoạt động khi bạn thêm tệp

--──────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

0 vào và để xem chuyện gì đã xảy ra. Ai cũng đã từng làm như thế này

Ok, tất nhiên là rất bình thường, nhưng bây giờ ngay tại thời điểm bây giờ thì nó có vấn đề

--──────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

Tôi nghĩ khi bạn nhìn vào thì có lẽ cũng đã hiểu đủ sự hạn chế của cách cũ như thế nào, nhưng cứ để tôi trình bày lại

• Đầu tiên khi người dùng tải trang, Tài liệu được phân tích (DOM. )
• Khi gặp câu lệnh khai báo như trên thì việc phân tích Document dừng lại, nhường cho việc tải tài nguyên

  --──────────────────────┬───────────────────────────────────────┬───────────────────┐
  / Parse the document    / Pause parsing                         / Resume parsing    /
  └───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                          / Download script   /
                          └───────────────────┼───────────────────┐
                                              / Execute script    /
                                              └───────────────────┘
  

  0 về. Sau đó, sẽ thực thi các hàm trong file js đó
• Sau khi thực thi script xong thì tiếp tục thực hiện việc phân tích DOM

Bạn thấy thế nào? . Chính vì những nhược điểm như vậy mà chúng ta phải thay đổi, điều đó đồng nghĩa với công việc vì sao lại ra đời hai thuộc tính

4 và

5 trong HTML

Async và Defer là gì?

Trường hợp trên này mang lại trải nghiệm người dùng không tốt vì người dùng không thể tương tác với trang khi tập lệnh được tải xuống. Họ phải đợi tất cả các tập lệnh được tải xuống và thực hiện chỉnh sửa hoàn chỉnh trước khi thấy toàn bộ trang được phân tích cú pháp. Để giải quyết vấn đề đó, HTML 5 cung cấp hai thuộc tính cho tập lệnh thẻ. Họ là

--──────────────────────┬───────────────────────────────────────┬───────────────────┐
/ Parse the document    / Pause parsing                         / Resume parsing    /
└───────────────────────┼───────────────────┬───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

4. Trước hết chúng ta đi tìm hiểu Async và Defer là gì?

Async and Defer hai thuộc tính cho trình duyệt biết rằng các tập lệnh có thể được tải xuống song song với quá trình phân tích cú pháp tài liệu. Điều đó giúp người dùng có trải nghiệm tốt hơn và hiệu suất tối ưu nhanh hơn. OK, nếu nói đến đây thì nó rất chung chung chính vì vậy chúng ta nên đi tìm hiểu kỹ hơn về hai thuộc tính này

Async Defer và các sự khác biệt

Có một số điểm khác biệt giữa hai thuộc tính này như sau

Đầu tiên mặc dù là các tài nguyên được tải song song với việc phân tích Tài liệu nhưng việc thực thi thì ở các thời điểm khác nhau

Xem quá trình sử dụng

4

┌───────────────────────────────────────────┬───────────────────┬───────────────────┐
/ Parse the document                        / Pause parsing     / Resume parsing    /
└───────────────────────┬───────────────────┼───────────────────┴───────────────────┘
                        / Download script   /
                        └───────────────────┼───────────────────┐
                                            / Execute script    /
                                            └───────────────────┘

Khi sử dụng

4 thì quá trình Execute script thì công việc phân tích tài liệu phải dừng lại, và sau khi thực thi mã js thành công thì trình duyệt tiếp tục công việc phân tích tài liệu

Xem quá trình sử dụng

5

 ───────────────────────────────────────────────────────────┐
/ Parse the document                                        /
└───────────────────────┬─────────────────┬─────────────────┘
                        / Download script /
                        └─────────────────┘                 ┌───────────────────┐
                                                            / Execute script    /
                                                            └───────────────────┘

Mặt khác

5, tập lệnh sẽ chỉ được thực thi khi quá trình phân tích cú pháp đã hoàn thành công việc của nó. GHI CHÚ. Khi sử dụng

4 thì được thực thi ngay sau khi nó được tải xuống hoàn toàn, do đó, chúng không thể được thực thi theo thứ tự tương tự khi chúng xuất hiện trên trang. Mặt khác, các lệnh tập tin được sử dụng

5 chắc chắn thứ tự thực hiện

Vị trí đặt thẻ Async và Defer

Như vậy thì một tập lệnh thống kê (ví dụ. file command Google Analytic) sẽ phù hợp trong trường hợp sử dụng này. Chắc chắn sẽ có những câu hỏi như vậy nên đặt ở đâu, trong thẻ

1 hay trên tab

2. Theo cá nhân tôi, thì tốt nhất hãy đặt kịch bản ngay trước đó

2

1

So sánh hiệu suất Async và Defer

a. Not async and defer, set in

b. Not async and defer, set in

c. Use async, set in

d. Use defer, set in

Thông qua các hình ảnh các bạn cũng đã thấy cách nào là tối ưu rồi chứ?

Kết luận

Đã rõ ràng ràng buộc, nếu bạn sử dụng

4 thì bạn không cần quan tâm đến các lệnh khác của tập tin. Còn tập lệnh này liên quan đến tập tin kìa thì nên sử dụng

5. Trừ khi bạn đã ổn định với tốc độ tải trang của mình, còn không hãy thay đổi và sử dụng theo cách này