Hướng dẫn loading javascript in head vs body - tải javascript trong head và body

94

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Hầu hết các cuốn sách/bài viết phát triển web của JavaScript và Web nói rằng bạn phải đặt CSS vào thẻ đầu và JavaScript ở cuối trang.

Nhưng khi tôi mở nguồn HTML của các trang web nổi tiếng như cái này, tôi thấy họ đã đặt một số tệp JS vào thẻ đầu.

Những ưu và nhược điểm của cả hai phương pháp và khi nào nên sử dụng cái nào?

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? Trong hay gần? Where should I declare JavaScript files used in my page? In or near ?

Hướng dẫn loading javascript in head vs body - tải javascript trong head và body

Cœur

356K24 Huy hiệu vàng188 Huy hiệu bạc257 Huy hiệu đồng24 gold badges188 silver badges257 bronze badges

hỏi ngày 16 tháng 3 năm 2010 lúc 0:32Mar 16, 2010 at 0:32

Amr Elgarhyamr ElgarhyAmr Elgarhy

64.4K68 Huy hiệu vàng185 Huy hiệu bạc299 Huy hiệu đồng68 gold badges185 silver badges299 bronze badges

2

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 đề gây ra bởi các tập lệnh là chúng chặn các bản tải xuống song song. Thông số kỹ thuật HTTP/1.1 cho thấy các trình duyệt tải xuống không quá hai thành phần song song cho mỗi tên máy chủ. Nếu bạn phục vụ hình ảnh của mình từ nhiều tên máy chủ, bạn có thể nhận được nhiều hơn hai lượt tải xuống xảy ra song song. Mặc dù một tập lệnh đang tải xuống, tuy nhiên, 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ễ để di chuyển các tập lệnh xuống đáy. 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, nó không thể được di chuyển thấp hơn trong trang. Cũng có thể có các vấn đề 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 xuất hiện là sử dụng các tập lệnh hoãn lại. Thuộc tính trì hoãn 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 kết xuất. Thật không may, Firefox không hỗ trợ thuộc tính trì hoãn. Trong Internet Explorer, kịch bản có thể được 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 di 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.

Do đó, nói chung, nó có thể ưa thích để đặt chúng ở phía dưới. Tuy nhiên, không phải lúc nào cũng có thể, và dù sao nó cũng không tạo ra sự khác biệt.

Đã trả lời ngày 16 tháng 3 năm 2010 lúc 0:39Mar 16, 2010 at 0:39

David Johnstonedavid JohnstoneDavid Johnstone

24K14 Huy hiệu vàng66 Huy hiệu bạc71 Huy hiệu đồng14 gold badges66 silver badges71 bronze badges

4

Như những người khác đã nói, khi bạn đặt JavaScript vào đầu, nó sẽ trì hoãn việc kết xuất trang cho đến khi các tập lệnh được tải, điều đó có nghĩa là trang có thể mất nhiều thời gian hơn để tải - đặc biệt là 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 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à bảng kiểu trước khi thẻ tập lệnh và trang có thể 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, điều này sẽ không có sẵn cho đến khi người dùng hiển thị một chút sau khi trang.

Nếu bạn đang thêm các kiểu hoặc phần tử (v.v. chuyển đổi văn bản với một số dạng trình soạn thảo phong phú hơn), điều này sẽ được người dùng hiển thị khi nhấp nháy.

Nếu bạn đang thêm các sự kiện nhấp chuột vào các yếu tố, chúng sẽ không thể nhấp cho đến khi có thể hiển thị một chút sau khi các yếu tố được hiển thị.

Đôi khi các vấn đề luận án đòi hỏi bạn phải đặt các tập lệnh 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 kịch bản của mình trong thẻ đầu và chỉ dựa vào họ để được lưu trữ hầu hết thời gian.

Đã trả lời ngày 16 tháng 3 năm 2010 lúc 1:05Mar 16, 2010 at 1:05

Nói chung, bạn nên đặt các tài liệu tham khảo tập lệnh ở cuối trang của bạn. Các tập lệnh không chỉ cần được tải xuống, chúng cũng phải được đánh giá và thực thi trước khi khối được phát hành và trang tiến hành quy trình kết xuất. Những thứ như Modernizr nên được đặt trong đầu vì nó thực hiện một số phát hiện tính năng cũng như các miếng chêm HTML5 mà bạn có thể muốn.

Một lý do khác mà bạn muốn cố gắng đặt các tập lệnh ở dưới cùng của trang là một điểm thất bại hoặc spofs. Đây là nơi một tập lệnh gọi thời gian ra hoặc vì một số lý do khác chặn 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.

Vâng, bạn có thể phải suy nghĩ khó hơn một chút về cách bạn kiến ​​trúc viên ứ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 kịch bản ở phía dưới và tôi có thể nói 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.

Đã trả lời ngày 5 tháng 11 năm 2012 lúc 21:49Nov 5, 2012 at 21:49

Hướng dẫn loading javascript in head vs body - tải javascript trong head và body

Chris Lovechris tình yêuChris Love

3.6401 Huy hiệu vàng18 Huy hiệu bạc15 Huy hiệu đồng1 gold badge18 silver badges15 bronze badges

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 cơ thể thì nó phải được tham chiếu trong tiêu đề để được tải. Khác nếu bạn chỉ gọi JavaScript khi toàn bộ tài liệu được tải thì thật khôn ngoan khi đặt JavaScript ở cuối thân. 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 nhìn thấy trang và vào thời điểm anh ấy/cô ấy quen thuộc với trang, tệp .js đã được tải xuống.

Đã trả lời ngày 16 tháng 3 năm 2010 lúc 1:03Mar 16, 2010 at 1:03

Hướng dẫn loading javascript in head vs body - tải javascript trong head và body

Azamsharpazamsharpazamsharp

19.2K36 Huy hiệu vàng142 Huy hiệu bạc219 Huy hiệu đồng36 gold badges142 silver badges219 bronze badges

Bất kỳ JavaScript nào trong đầu sẽ được đánh giá trước khi trang được tải, có nghĩa là trang cảm thấy như phải mất nhiều thời gian hơn để tải. Việc có các sự kiện sẽ hoạt động đúng hơn một chút nếu tất cả JavaScript ở cuối, nhưng JQuery khá nhiều giải quyết vấn đề này cho bạn.

Đã trả lời ngày 16 tháng 3 năm 2010 lúc 0:34Mar 16, 2010 at 0:34

DraemondraemonDraemon

33.2K13 Huy hiệu vàng75 Huy hiệu bạc103 Huy hiệu đồng13 gold badges75 silver badges103 bronze badges

2

Có tốt hơn là đặt JavaScript vào đầu hoặc cơ thể?

Cách thực hành tốt nhất là đặt các thẻ JavaScript ngay trước thẻ đóng chứ không phải trong phần HTML của bạn. Lý do cho điều này là HTML tải từ trên xuống dưới. Đầu tải trước, sau đó là cơ thể, và sau đó mọi thứ bên trong cơ thể.. The reason for this is that HTML loads from top to bottom. The head loads first, then the body, and then everything inside the body.

Tôi nên tải jQuery trong đầu hay cơ thể?

Luôn luôn là một thực tế tốt để thêm mã jQuery trong chân trang, tức là trước khi thẻ đóng.Nếu bạn chưa làm điều đó, thì hãy sử dụng thuộc tính trì hoãn. i.e. just before the closing tag. If you have not done that, then use the defer attribute.

Có tải đầu trước khi cơ thể HTML?

Các tập lệnh đầu bắt đầu tải rất sớm, trước khi DOM được xử lý chính;Bạn muốn các thư viện ở đây để họ có thời gian để đi.Các kịch bản cơ thể được tải trong khi DOM đang xây dựng.Không có gì đảm bảo DOM sẽ kết thúc trước khi các tập lệnh của bạn chạy, thậm chí được đặt tại ...; you want libraries here so they have time to get going. Body scripts are loaded WHILE the DOM is building. There is NO guarantee the DOM will finish before your scripts run, even placed at ...

Tôi nên đặt mã JavaScript của mình ở đâu trong HTML?

Để bao gồm một tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ tập lệnh với thuộc tính SRC.Bạn đã sử dụng thuộc tính SRC khi sử dụng hình ảnh.Giá trị cho thuộc tính SRC phải là đường dẫn đến tệp JavaScript của bạn.Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn.