Hầu hết các sách / bài báo về javascript và phát triển web đều nói rằng bạn phải đặt CSS trong thẻ head và javascript ở cuối trang.
Nhưng khi tôi mở mã nguồn html của các trang web nổi tiếng như stackoverflow này, tôi thấy họ đặt một số tệp js trong thẻ head.
Ưu và nhược điểm của cả hai cách tiếp cận là gì và khi nào thì sử dụng?
Tìm thấy một câu hỏi khác cho cùng một vấn đề: Tôi nên khai báo các tệp JavaScript được sử dụng trong trang của mình ở đâu? Ở <head> </head> hay ở gần </body>?
Câu trả lời:
Từ các Thực tiễn Tốt nhất của Yahoo để Tăng tốc Trang Web của Bạn :
Vấn đề do tập lệnh gây ra là chúng chặn tải xuống song song. Đặc tả HTTP / 1.1 gợi ý rằng các trình duyệt tải xuống không quá hai thành phần song song trên mỗi tên máy chủ. Nếu bạn cung cấp hình ảnh của mình từ nhiều tên máy chủ, bạn có thể tải xuống song song nhiều hơn hai lần. Tuy nhiên, khi tập lệnh đang tải xuống, trình duyệt sẽ không bắt đầu bất kỳ tải xuống nào khác, ngay cả trên các tên máy chủ khác nhau.
Trong một số tình huống, không dễ dàng để di chuyển các tập lệnh xuống dưới cùng. Ví dụ: nếu tập lệnh sử dụng document.write để chèn một phần nội dung của trang, thì không thể di chuyển nó xuống thấp hơn trong trang. Cũng có thể có vấn đề về phạm vi. Trong nhiều trường hợp, có nhiều cách để giải quyết những tình huống này.
Một gợi ý thay thế thường được đưa ra là sử dụng các tập lệnh hoãn lại. Thuộc tính DEFER chỉ ra rằng tập lệnh không chứa document.write và là manh mối cho các trình duyệt mà chúng có thể tiếp tục hiển thị. Rất tiếc, Firefox không hỗ trợ thuộc tính DEFER. Trong Internet Explorer, tập lệnh có thể bị hoãn lại, nhưng không nhiều như mong muốn. Nếu một tập lệnh có thể được hoãn lại, nó cũng có thể được chuyển xuống cuối trang. Điều đó sẽ làm cho các trang web của bạn tải nhanh hơn.
Vì vậy, nói chung, nên xếp chúng ở dưới cùng. Tuy nhiên, điều đó không phải lúc nào cũng khả thi và dù sao thì nó thường không tạo ra nhiều sự khác biệt.
Như những người khác đã nói, khi bạn đặt javascript vào đầu, nó sẽ trì hoãn việc hiển thị trang cho đến sau khi các tập lệnh được tải, có nghĩa là trang có thể tải lâu hơn - đặc biệt nếu bạn đang tải xuống các tệp tập lệnh lớn.
Nếu bạn di chuyển các thẻ tập lệnh của mình đến cuối trang, bạn sẽ đảm bảo rằng trình duyệt tải xuống hình ảnh và biểu định kiểu trước các thẻ tập lệnh và trang có khả năng sẽ được hiển thị trước khi các tập lệnh bắt đầu chạy. Điều này cũng có nghĩa là nếu bạn phụ thuộc vào một số chức năng từ các tập lệnh của mình, thì tính năng này sẽ không khả dụng cho đến một lúc sau khi trang hiển thị cho người dùng.
Nếu bạn đang thêm kiểu hoặc phần tử (v.v. chuyển đổi các trường văn bản bằng một số dạng trình chỉnh sửa phong phú hơn), điều này sẽ hiển thị cho người dùng dưới dạng nhấp nháy.
Nếu bạn đang thêm các sự kiện nhấp chuột vào các phần tử, chúng sẽ không thể nhấp được cho đến khi các phần tử đó hiển thị một chút.
Đôi khi các vấn đề của chủ đề đòi hỏi bạn phải đặt các kịch bản của mình vào đầu, những lần khác, bạn sẽ ổn bằng cách dán chúng ở phía dưới.
IMHO (hoàn toàn chống lại YSlow và rất nhiều người thông minh) bạn nên giữ các tập lệnh của mình trong thẻ head và chỉ dựa vào chúng để được lưu vào bộ nhớ cache hầu hết thời gian.
Nói chung, bạn nên đặt tham chiếu tập lệnh ở cuối trang của mình. Các tập lệnh không chỉ cần được tải xuống, chúng còn phải được đánh giá và thực thi trước khi khối được phát hành và trang tiếp tục quá trình kết xuất. Những thứ như Modernizr nên được đặt ở trên cùng vì nó thực hiện một số tính năng phát hiện cũng như các miếng chêm HTML5 mà bạn có thể sẽ muốn.
Một lý do khác mà bạn muốn cố gắng đặt tập lệnh ở cuối trang là Điểm lỗi đơn lẻ hoặc SPOF. Đây là nơi mà lệnh gọi tập lệnh hết thời gian chờ hoặc vì một số lý do khác chặn việc thực thi trang. Điều này có thể xảy ra rất nhiều với các thư viện quảng cáo của bên thứ ba, v.v.
Có, bạn có thể phải suy nghĩ nhiều hơn một chút về cách bạn kiến trúc ứng dụng của mình, nhưng tôi thấy nó trở nên rất tự nhiên rất nhanh đối với tôi. Tôi đã xây dựng hàng trăm ứng dụng web trong 4 năm qua với tập lệnh ở dưới cùng và tôi có thể nhận ra sự khác biệt. Tôi có thể là 500ms nó có thể là 5000ms nhưng tất cả đều quan trọng.
Nó thực sự phụ thuộc vào trang web của bạn. Nếu bạn đang truy cập và gọi các hàm JavaScript bên trong nội dung thì nó phải được tham chiếu trong tiêu đề để được tải. Nếu không, nếu bạn chỉ gọi JavaScript khi toàn bộ tài liệu được tải xong thì nên đặt JavaScript ở cuối nội dung. Bằng cách đặt tệp .JS ở cuối, bạn tải toàn bộ trang và sau đó tìm nạp tệp .JS. Bằng cách này, người dùng sẽ có thể nhanh chóng xem trang và khi họ làm quen với trang, tệp .JS đã được tải xuống.
Bất kỳ javascript nào trong phần đầu sẽ được đánh giá trước khi trang được tải, có nghĩa là trang có cảm giác mất nhiều thời gian hơn để tải. Khó hơn một chút để các sự kiện hoạt động bình thường nếu tất cả javascript ở cuối, nhưng jQuery giải quyết được khá nhiều vấn đề này cho bạn.