Thẻ script có thể được đặt ở đầu trong tài liệu html
Nên đặt thẻTại sao điều này thậm chí xảy ra?Bất kỳ tập lệnh nào cũng có thể chèn HTML của riêng nó thông qua Tuy nhiên, hầu hết các nhà phát triển JavaScript không còn thao túng DOM trong khi tài liệu đang tải. Thay vào đó, họ đợi cho đến khi tài liệu đã được tải trước khi sửa đổi nó. Ví dụ:
Javascript:
Vì trình duyệt của bạn không biết my-script.js sẽ không sửa đổi tài liệu cho đến khi nó được tải xuống và thực thi, trình phân tích cú pháp dừng phân tích cú pháp. Khuyến nghị cổCách tiếp cận cũ để giải quyết vấn đề này là đặt Cách tiếp cận này có vấn đề riêng của nó: trình duyệt không thể bắt đầu tải xuống các tập lệnh cho đến khi toàn bộ tài liệu được phân tích cú pháp. Đối với các trang web lớn hơn với tập lệnh & bảng định kiểu lớn, việc có thể tải xuống tập lệnh càng sớm càng tốt là rất quan trọng đối với hiệu suất. Nếu trang web của bạn không tải trong vòng 2 giây, mọi người sẽ chuyển đến trang web khác. Trong một giải pháp tối ưu, trình duyệt sẽ bắt đầu tải xuống tập lệnh của bạn càng sớm càng tốt, đồng thời phân tích cú pháp phần còn lại của tài liệu. Cách tiếp cận hiện đạiNgày nay, các trình duyệt hỗ trợ không đồng bộ
Các tập lệnh với thuộc tính async được thực thi không đồng bộ. Điều này có nghĩa là tập lệnh được thực thi ngay khi được tải xuống mà không chặn trình duyệt trong lúc này. Theo http://caniuse.com/#feat=script-async , 94,57% tất cả các trình duyệt hỗ trợ điều này. hoãn lại
Các tập lệnh với thuộc tính defer được thực thi theo thứ tự (tức là tập lệnh đầu tiên 1, sau đó là tập lệnh 2). Điều này cũng không chặn trình duyệt. Không giống như các tập lệnh async, các tập lệnh trì hoãn chỉ được thực thi sau khi toàn bộ tài liệu đã được tải. Theo http://caniuse.com/#feat=script-defer , 94,59% tất cả các trình duyệt hỗ trợ điều này. 94,92% hỗ trợ nó ít nhất một phần. Một lưu ý quan trọng về khả năng tương thích trình duyệt: trong một số trường hợp, IE <= 9 có thể thực thi các tập lệnh bị trì hoãn không theo thứ tự. Nếu bạn cần hỗ trợ các trình duyệt đó, vui lòng đọc phần này trước! Phần kết luậnCác trạng thái hiện đại là đặt các tập lệnh vào
Điều tốt là trang web của bạn vẫn nên tải chính xác trên 6% trình duyệt không hỗ trợ các thuộc tính này trong khi tăng tốc 94% khác. 1639 hữu ích 5 bình luận chia sẻ |