Văn bản javascript không đồng bộ src được tải. Tải JavaScript không đồng bộ - tăng tốc độ tải trang. Thêm thuộc tính trì hoãn hoặc không đồng bộ trong WordPress
29.06.2020
Chào hỏi những người bạn! Bạn có biết rằng tải JavaScript là một trong những nút thắt lớn nhất trong hiệu suất trang web? Hôm nay nhiệm vụ chính của tôi là giải thích script là gì và nó ảnh hưởng như thế nào đến tốc độ và hiệu suất của trang web.
Trình duyệt tải thẻ tập lệnh ngừng hiển thị trang cho đến khi tập lệnh được tải và thực thi. Trang bị chặn và trình duyệt không phản hồi hành động của người dùng trong vài giây. Thời gian trì hoãn phụ thuộc vào một số yếu tố:
cấu hình,
tốc độ kết nối internet,
kích thước tệp và những thứ khác ...
Vì lý do này, Google PageSpeed \u200b\u200bInsights khuyên bạn nên xóa JavaScript khỏi đầu trang đã chặn nó. Một phương pháp hay là đặt các tập lệnh ở cuối trang web, chẳng hạn như trước thẻ đóng
hoặc thiết lập tải không đồng bộ.
Nếu mã script ảnh hưởng đến việc hiển thị phần trên của trang web, đừng đưa nó vào một tệp riêng mà hãy nhúng nó trực tiếp vào HTML.
JS có thể thay đổi nội dung của trang web và thậm chí chuyển hướng đến một url khác. Trong trường hợp này, việc nối script ở cuối tài liệu sẽ dẫn đến hiệu ứng “giật” trang, tải mới hoặc thay đổi các phần tử hiện có ở trên cùng.
Áp dụng các thuộc tính async và defer cho thẻ script
Chúng ta hãy xem xét hoạt động của JavaScript không đồng bộ và hoãn lại là gì và sự khác biệt cơ bản giữa thuộc tính async và defer là gì. Nhưng trước tiên, hãy xem xét trình tự xử lý tài liệu với kết nối thông thường của thẻ script.
< src \u003d "example.js"\u003e
Đối với một ví dụ minh họa, tôi sẽ sử dụng các quy ước sau:
- xử lý trang - tải tập lệnh - thực thi tập lệnh
Do đó, trình tự xử lý như sau:
Việc phân tích cú pháp mã HTML bị gián đoạn trong khi tập lệnh đang tải và thực thi, sau đó tiếp tục. Có sự chậm trễ trong việc hiển thị trang web.
Thuộc tính trì hoãn
Thuộc tính defer cho phép trình duyệt bắt đầu tải các tệp js song song mà không ngừng xử lý thêm trang. Chúng được thực thi sau khi phân tích cú pháp đầy đủ của Mô hình Đối tượng Tài liệu (gọi tắt là DOM), trong khi trình duyệt đảm bảo tính nhất quán dựa trên thứ tự mà các tệp được kết nối.
< trì hoãn src \u003d "example.js"\u003e
Thuộc tính không đồng bộ
Hỗ trợ thuộc tính async xuất hiện trong HTML5, nó cho phép trình duyệt tải các tệp js song song và thực thi ngay sau khi tải, mà không cần đợi phần còn lại của trang được xử lý.
< async src \u003d "example.js"\u003e
Sơ đồ trình tự xử lý:
Đây là bản tải xuống không đồng bộ. Thuộc tính được khuyến nghị cho các tập lệnh không ảnh hưởng đáng kể đến việc hiển thị tài liệu. Chúng bao gồm bộ đếm thu thập thống kê (Google Analytics, Yandex Metrica), mã mạng quảng cáo (Mạng quảng cáo Yandex, Google AdSense), các nút truyền thông xã hội, v.v.
Tốc độ tải trang web là một trong những yếu tố xếp hạng trên Google.
Kết nối JavaScript không đồng bộ làm giảm thời gian tải trang bằng cách loại bỏ độ trễ. Cùng với điều này, tôi khuyên bạn nên nén và hợp nhất các tệp js thành một, chẳng hạn như sử dụng thư viện. Người dùng thích các trang web nhanh 😎
Async and Defer - Các chiến lược tải JavaScript
JavaScript là một phần thiết yếu của bất kỳ ứng dụng web hiện đại nào và các chiến lược chúng tôi chọn sử dụng để tải ảnh hưởng trực tiếp đến hiệu suất của chính ứng dụng đó. Trong bài viết này, chúng tôi sẽ cố gắng hiểu sự khác biệt quan trọng giữa mỗi cách tiếp cận, ưu và nhược điểm cùng với ý nghĩa về hiệu suất và cách tối ưu hóa cho tương tác trang và thời gian tải.
Để minh họa, tôi sẽ tạo một trang web bao gồm các phần phụ thuộc bên ngoài sau. Đặc biệt chú ý đến kích thước tệp tương ứng, vì thời gian tải xuống tỷ lệ thuận với điều này.
HTML - trang ~ 1 MB. Chứa đánh dấu / nội dung thực tế để hiển thị một số đầu ra động từ JavaScript.
Hình ảnh - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB là javascript lõi (tệp chính) và phụ thuộc vào phân tích cú pháp HTML. Nó là cần thiết để hiển thị một số nội dung động hoặc để gắn kết một thành phần phản ứng / góc cạnh trên trang.
JavaScript - file2.js ~ 460B là một tệp javascript nhỏ, độc lập tương tác với dom.
JavaScript - file3.js ~ 1,5 MB là tệp js phụ và phụ thuộc vào tệp1.js để thực thi một số mã có mức độ ưu tiên thấp hơn. Mã này không cần thiết ngay lập tức để hiển thị trang và tương tác với người dùng; nó hiển thị các biểu tượng mạng xã hội, nhận xét, trợ giúp trực tuyến, khởi chạy một số tác vụ phân tích, v.v.
Bây giờ đã đến lúc phân tích các cách tiếp cận khác nhau
Phương pháp tiếp cận-1 [tập lệnh trong phần đầu]
Trong trường hợp đầu tiên, chúng tôi sẽ tải tất cả các thẻ script vào phần đầu của HTML của chúng tôi. Dưới đây là ảnh chụp màn hình phân tích tab mạng của trang chrome, sẵn sàng cho người dùng tương tác.
Ưu điểm:
Trình tự thực thi mã của các tệp JS khác nhau sẽ được lưu theo thứ tự mà các tệp được đưa vào HTML. Trong ví dụ hiện tại, ngay cả khi tệp2 và tệp3 được tải trước tệp1, thứ tự thực thi sẽ đúng.
Điểm trừ:
Trong trường hợp này, phân tích cú pháp HTML sẽ bị tạm dừng cho đến khi cả 3 tập lệnh trong phần đầu được tải, phân tích cú pháp và thực thi. Một màn hình trắng trống sẽ được hiển thị cho người dùng ngay cả khi tệp HTML đã được tải [nhưng chưa được phân tích cú pháp]. Điều này chắc chắn không tốt cho khả năng sử dụng.
Không có tập lệnh nào ở trên có thể truy cập / thao tác trang HTML vì DOM chưa sẵn sàng. Một giải pháp khả thi để xử lý vấn đề này là lắng nghe sự kiện DOMContentLoaded và thực thi mã sau đó. DOMContentLoaded Sự kiện này được kích hoạt khi tài liệu HTML gốc đã được tải đầy đủ và được phân tích cú pháp mà không cần đợi các biểu định kiểu và hình ảnh tải xong.
Phương pháp tiếp cận-2 [tập lệnh ở cuối]
Để khắc phục 2 vấn đề chúng ta gặp phải trong cách tiếp cận đầu tiên, hãy tải cả 3 tập lệnh ở cuối thẻ body.
Ưu điểm: HTML được phân tích cú pháp trước khi các tập lệnh được tải, vì vậy người dùng sẽ có thể xem nội dung thực tế ngay lập tức thay vì chờ đợi các tập lệnh.
Vì tất cả các tập lệnh được thực thi sau khi HTML được phân tích cú pháp, nên tất cả chúng đều có thể truy cập DOM để thực hiện bất kỳ thao tác nào. Trình tự thực hiện tập lệnh được giữ nguyên.
Điểm trừ:
Không có hiệu suất tăng như vậy.
Phương pháp tiếp cận-3 [sử dụng thuộc tính Async]
HTML5 đã giới thiệu thuộc tính tập lệnh không đồng bộ, giúp tải song song các tệp tập lệnh tương ứng trên một luồng khác mà không ảnh hưởng đến phân tích cú pháp HTML.
Tuy nhiên, tập lệnh tương ứng sẽ được phân tích cú pháp và thực thi ngay sau khi tải xong, cho dù quá trình phân tích cú pháp HTML đã hoàn tất hay chưa và sẽ tham chiếu đến phần tử DOM cho đến thời điểm cụ thể đó.
Ở đây, bạn có thể thấy rõ rằng file2.js đã được tải trước tệp HTML. Tuy nhiên, trong khi trình duyệt đang tải file2, nó không tạm dừng phân tích cú pháp HTML và do đó, vào thời điểm nó được thực thi, nó có một liên kết đến trình giữ chỗ html để đưa nội dung động vào.
Ưu điểm: Vì các tập lệnh được tải trên một chuỗi khác, phân tích cú pháp HTML sẽ không bị tạm dừng và người dùng sẽ có thể xem nội dung ngay lập tức thay vì một màn hình trống màu trắng. Mức tăng hiệu suất chính, tức là thời gian DOMContentLoaded đã giảm từ 47,68 giây xuống chỉ còn 21,12 giây và bằng ~ 55% mức tăng.
Điểm trừ:
Trình tự thực thi JS không được bảo toàn. Nó được thực thi theo thứ tự tải thích hợp, không phải chuỗi script được bao gồm trong HTML. Hỗ trợ trình duyệt - Không được hỗ trợ trên các trình duyệt web cũ hơn, tức là IE 9 trở xuống.
Điều gì sẽ xảy ra nếu JS được tải trước khi có phần tử DOM? Một lỗi sẽ được đưa ra.
Lưu ý: Việc đặt các tập lệnh có thuộc tính async ở cuối phần nội dung sẽ vô dụng và tương đương với Approach-2.
Phương pháp tiếp cận-4 [sử dụng thuộc tính Trì hoãn]
Thuộc tính Defer sẽ khiến tập lệnh chỉ được thực thi sau khi hoàn tất quá trình phân tích cú pháp HTML. Một điểm rất quan trọng cần lưu ý ở đây là Chrome chưa hỗ trợ trì hoãn và không ảnh hưởng đến thời lượng DOMContentLoaded. Tuy nhiên, nó thực thi các tập lệnh ở cuối quá trình phân tích cú pháp HTML.
Ưu điểm:
Trình tự nhập các tập lệnh được giữ nguyên. Vì vậy, file3.js chỉ được thực thi sau khi file1 hoàn tất quá trình tải xuống và thực thi, ngay cả khi file3 đã được tải trước đó.
Hỗ trợ trình duyệt - nó có hỗ trợ trình duyệt tốt hơn so với thuộc tính async, tức là được hỗ trợ một phần trong IE v6-9
Các tập lệnh có thể truy cập DOM vì nó chỉ được thực thi sau khi HTML đầy đủ đã được phân tích cú pháp.
Điểm trừ:
Ban đầu tôi nghĩ rằng trì hoãn sẽ là lựa chọn tốt hơn so với không đồng bộ, nhưng sau đó nhận thấy rằng Chrome chưa hỗ trợ nó [phiên bản 71.0.3578.98] và không ảnh hưởng đến thời lượng DOMContentLoaded.
Tuy nhiên, nó hoạt động như mong đợi trên Firefox với những cải tiến hiệu suất đáng kể.
kết luận
Tốt hơn là đặt các thẻ tập lệnh trong phần đầu có thuộc tính không đồng bộ cho các thư viện của bên thứ ba phụ thuộc vào Google Analytics, Google reCAPTCHA hoặc bất kỳ thứ gì khác không yêu cầu quyền truy cập DOM, vì các tập lệnh tương ứng được tải song song nhưng được thực thi ngay lập tức.
Sử dụng trì hoãn cho tất cả các tập lệnh khác được tải trong phần đầu vì chúng cũng sẽ được tải song song, nhưng sẽ chỉ được thực thi sau khi HTML đã phân tích xong và DOM đã sẵn sàng để được truy cập / thao tác.
Bạn cũng có thể sử dụng tổ hợp trình nghe DOMContentLoaded bên trong các tập lệnh không đồng bộ để thực thi chức năng sau này. Vui lòng để lại ý kiến \u200b\u200bvà kết luận của bạn trong phần bình luận, và tôi sẽ rất vui được thảo luận với bạn.
Tác giả của tài liệu này là tôi - Yuri Pakholkov. Tôi cung cấp dịch vụ viết chương trình bằng Java, C ++, C # (cũng như tư vấn về chúng) và tạo trang web. Tôi làm việc với các trang web trên CMS OpenCart, WordPress, ModX và tự viết. Ngoài ra, tôi làm việc trực tiếp với JavaScript, PHP, CSS, HTML - tức là tôi có thể sửa đổi trang web của bạn hoặc trợ giúp lập trình web.
Các tập lệnh trình cắm (JavaScript) chặn việc tải mã HTML. Khi trình duyệt (trình phân tích cú pháp) tiếp cận thẻ
