Gần đây, tôi đã đọc tuyên ngôn của Yahoo Các phương pháp hay nhất để tăng tốc trang web của bạn . Họ khuyên bạn nên đặt JavaScript ở cuối mã HTML khi chúng tôi có thể.
Nhưng chính xác ở đâu và khi nào?
Chúng ta nên đặt nó trước khi đóng </html>hay sau? Và trên hết, khi nào chúng ta vẫn nên đặt nó trong <head>phần?
Câu trả lời:
Có hai khả năng cho các tập lệnh thực sự không phô trương:
</body></html>)Cách thứ hai có thể nhanh hơn vì nghiên cứu ban đầu của Yahoo cho thấy một số trình duyệt cố gắng tải các tệp script khi chúng nhấn thẻ script và do đó không tải phần còn lại của trang cho đến khi chúng hoàn thành. Tuy nhiên, nếu tập lệnh của bạn có phần 'sẵn sàng', phần này phải thực thi ngay sau khi DOM sẵn sàng, bạn có thể cần phải có nó trong đầu. Một vấn đề khác là bố cục - nếu tập lệnh của bạn thay đổi bố cục trang mà bạn muốn nó tải càng sớm càng tốt để trang của bạn không mất nhiều thời gian để tự vẽ lại trước mặt người dùng.
Nếu trang web script bên ngoài nằm trên một tên miền khác (như các widget bên ngoài) thì có thể nên đặt nó ở cuối để tránh làm chậm quá trình tải trang.
Và đối với bất kỳ vấn đề hiệu suất nào, hãy thực hiện các điểm chuẩn của riêng bạn - điều có thể đúng tại một thời điểm khi một nghiên cứu được thực hiện có thể thay đổi với thiết lập cục bộ của riêng bạn hoặc các thay đổi trong trình duyệt.
Nó không bao giờ cắt và khô như vậy - Yahoo khuyên bạn nên đặt các tập lệnh ngay trước </body>thẻ đóng , điều này sẽ tạo ra ảo tưởng rằng trang tải nhanh hơn trên bộ nhớ đệm trống (vì các tập lệnh sẽ không chặn tải phần còn lại của tài liệu). Tuy nhiên, nếu bạn có một số mã bạn muốn chạy khi tải trang, nó sẽ chỉ bắt đầu thực thi sau khi toàn bộ trang được tải. Nếu bạn đặt các tập lệnh vào <head>thẻ, chúng sẽ bắt đầu thực thi trước đó - vì vậy, trên một bộ đệm lót có sẵn, trang sẽ thực sự tải nhanh hơn.
Ngoài ra, đặc quyền đặt tập lệnh ở cuối trang không phải lúc nào cũng có sẵn. Nếu bạn cần bao gồm các tập lệnh nội tuyến trong các chế độ xem của mình phụ thuộc vào thư viện hoặc một số mã JavaScript khác đang được tải trước đó, bạn phải tải các phần phụ thuộc đó trong <head>thẻ.
Tất cả trong tất cả các khuyến nghị của Yahoo đều thú vị nhưng không phải lúc nào cũng có thể áp dụng được và cần được xem xét trong từng trường hợp cụ thể.
<script>thẻ nội tuyến không ngụ ý javascript gây khó chịu.
<script>các thẻ tách biệt với phần đánh dấu và có thể được sử dụng với mã nâng cao giao diện nhưng không bắt buộc. Vì vậy, không có gì khó chịu về các <script>thẻ nội tuyến .
<script>các thẻ để mã hóa các giá trị đó thành các biến javascript, để sử dụng có lẽ với chỉnh sửa nội tuyến hoặc hành vi tương tự khác.
Như những người khác đã nói, hãy đặt nó trước các thẻ html thân đóng .
Ngày hôm trước, chúng tôi đã nhận được nhiều cuộc gọi từ khách hàng phàn nàn rằng trang web của họ rất chậm. Chúng tôi đã đến thăm họ tại địa phương và nhận thấy họ mất 20-30 giây để tải một trang. Nghĩ rằng đó là do các máy chủ hoạt động không tốt, chúng tôi đã đăng nhập - nhưng cả máy chủ web và sql đều hoạt động ~ 0%.
Sau một vài phút, chúng tôi nhận ra rằng một trang web bên ngoài đã ngừng hoạt động mà chúng tôi đang liên kết đến cho các thẻ theo dõi Javascript. Điều này có nghĩa là các trình duyệt đang nhấn thẻ tập lệnh trong phần đầu của trang web và chờ tải xuống tệp tập lệnh.
Vì vậy, ít nhất đối với các tập lệnh bên thứ 3 / bên ngoài, tôi khuyên bạn nên đặt chúng là thứ cuối cùng trên trang. Sau đó, nếu chúng không khả dụng, trình duyệt ít nhất sẽ tải trang cho đến thời điểm đó - và người dùng sẽ không biết gì về nó.
Tóm lại, dựa trên các gợi ý ở trên:
</body>thẻ.</body>trừ khi bạn có lý do chính đáng để đặt các tập lệnh vào đầu.Nếu bạn muốn điều chỉnh vị trí của các tập lệnh của mình, YSlow là một công cụ tuyệt vời để cung cấp cho bạn hương vị nếu nó sẽ cải thiện hoặc làm giảm hiệu suất. Đặt javascript vào các vị trí tài liệu nhất định thực sự có thể giết thời gian tải trang.
Không, nó không nên sau </html>vì điều đó sẽ không hợp lệ. Nơi tốt nhất để đặt tập lệnh là ngay trước</body>
Điều này về cơ bản là do hầu hết các trình duyệt ngừng hiển thị trang trong khi họ đánh giá tập lệnh mà bạn cung cấp. Vì vậy, có thể đặt mã không chặn ở bất kỳ đâu trong trang (tôi chủ yếu nghĩ đến những thứ gắn các chức năng vào onLoadsự kiện, vì ràng buộc sự kiện nhanh đến mức miễn phí một cách hiệu quả). Một kẻ giết người lớn ở đây là ở đầu trang đặt một số tập lệnh máy chủ quảng cáo, điều này có thể ngăn bất kỳ trang nào tải trước khi quảng cáo được tải xuống hoàn toàn, khiến thời gian tải trang của bạn tăng vọt
Nếu bạn đặt nó ở dưới cùng, nó sẽ tải sau cùng, do đó tăng tốc độ mà người dùng có thể xem trang. Nó cần phải có trước trận chung kết, </html>nếu không nó sẽ không phải là một phần của DOM.
Tuy nhiên, nếu mã là cần thiết ngay lập tức, thì hãy đặt nó vào đầu.
Tốt nhất bạn nên đặt những thứ như widget blog ở dưới cùng để nếu chúng không tải thì cũng không ảnh hưởng đến khả năng sử dụng của trang.