Nên đặt thẻ <script> ở đâu trong HTML

Hiệp Bùi

Khi học về cách nhúng mã JavaScript từ tập tin bên ngoài vào trang HTML thì em thấy nhiều tài liệu hướng dẫn nên đặt thẻ <script> để tham chiếu tới file bên ngoài này ở cuối trang (trước thẻ <body>). Điều này giúp đảm bảo trang HTML được tải về mà không bị block bởi việc tải tập tin JavaScript.

Tuy nhiên ở một số tài liệu lại để một số thẻ <script> như khi muốn nhúng thư viện jQuery ở bên trong thẻ <head>.

Như vậy thì nên đặt thẻ <script> tham chiếu tới tập tin khác ở đâu trong trang HTML vậy các bác?

Chỉnh sửa
Thêm bình luận
Huỷ

1 Câu Trả Lời

Linh Nguyễn

Trước đây, khi sử dụng thẻ <script> để tham chiếu tới tập tin bên ngoài thì hầu hết các trường hợp bạn được khuyên nên đặt thẻ <script> ở trước thẻ đóng </body>. Điều này như bạn đề cập trong câu hỏi sẽ giúp cho trình duyệt có thể tải về mã HTML một cách liên tục mà không bị dừng lại giữa chừng để chờ tải về các tập tin JavaScript được tham chiếu vào trang.

Tuy nhiên, mới đây hai thuộc tính asyncdefer được giới thiệu để sử dụng cho thẻ <script>. Sử dụng hai thuộc tính này sẽ giúp mã lệnh JavaScript có thể được tải bất đồng bộ cùng với mã HTML. Điều này giúp cho trình duyệt có thể đồng thời tải cả mã HTML và JavaScript cùng một lúc.

Khi đó bạn nếu bạn sử dụng thẻ <script> ở bên trong thẻ <head> như sau:

</html>
    <head>
        <script src="/js/main.js" type="text/javascript" async></script>
    </head>
<body>
...
</body>
</html>

Thì tốc độ tải trang sẽ nhanh hơn khi để thẻ <script> ở cuối trang (trước thẻ <body>) vì lúc này chúng ta tận dụng được lợi thế trình duyệt tải về đồng thời HTML và JavaScript cùng một lúc.

Thêm bình luận
Huỷ

Thêm Trả Lời

Câu Hỏi Liên Quan