210

Giả sử tôi có một tệp JavaScript khá nặng, được đóng gói xuống khoảng 100kb hoặc hơn. Theo tệp, ý tôi là đó là một tệp bên ngoài sẽ được liên kết qua <script src="...">, không được dán vào chính HTML.

Đâu là nơi tốt nhất để đưa cái này vào HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Sẽ có bất kỳ sự khác biệt chức năng giữa mỗi tùy chọn?

javascript html optimization

— nickf
nguồn

Có thể trùng lặp các thẻ <script> ở đâu trong đánh dấu HTML?

— Ivar

175

Yahoo! Nhóm Hiệu suất Đặc biệt khuyên bạn nên đặt các tập lệnh ở cuối trang vì cách trình duyệt tải xuống các thành phần.

Tất nhiên nhận xét của Levi "ngay trước khi bạn cần và không sớm hơn" thực sự là câu trả lời chính xác, tức là "nó phụ thuộc".

— Walter Rumsby
nguồn

4

Ví dụ: nếu bạn đang thực hiện một loạt các công cụ jQuery, bạn sẽ cần thư viện được tải trước khi bạn thực sự cố gắng sử dụng nó.

— BryanH

58

Ngoài ra, lý do tại sao Yahoo EPT khuyên bạn nên đặt JS ở dưới cùng là vì trình duyệt phải chuyển sang chế độ đơn luồng trong khi JS tải và sau đó thực thi. Nếu tập lệnh nằm ở phần đầu hoặc ở giữa nội dung, trình duyệt sẽ "tạm dừng" trong khi nó xử lý với JS. Bằng cách đặt JS ở dưới cùng, nội dung sẽ được tải và thường hiển thị để người dùng có thể bắt đầu đọc nó trong khi trình duyệt vẫn đang xử lý JS.

— BryanH

1

Chào. Chúng ta có đặt mã như thế này $(function () {...})ở cuối trang không, hay nó phải ở bên trong <head>?

— Thắng Phạm

7

Tôi hy vọng đề cập đến "dưới cùng của trang của bạn" ở đây không vượt quá </body>?

— Mr_Green

1

Các trình duyệt hiện đại cũng có thể đọc thuộc tính "defer". Bạn có thể đặt defer = "defer" trên các thẻ script không ở dưới cùng của <body> và khi trình duyệt nhìn thấy chúng, trước tiên, nó sẽ hoàn tất tải phần còn lại của html và sau đó quay lại và diễn giải nội dung của thẻ script. Điều này hữu ích nếu bạn đang sử dụng một số loại khung mà bạn không có toàn quyền kiểm soát trang. Đi sâu vào bài viết này và lưu ý rằng đó là một tài liệu sống nên một số thông tin đã lỗi thời: stackoverflow.com/questions/5250412/iêu

— LinuxDiscipl

75

Nơi tốt nhất cho nó là ngay trước khi bạn cần nó và không sớm hơn.

Ngoài ra, tùy thuộc vào vị trí thực tế của người dùng của bạn, sử dụng dịch vụ như dịch vụ S3 của Amazon có thể giúp người dùng tải xuống từ máy chủ gần với họ hơn so với máy chủ của bạn.

Tập lệnh js của bạn có phải là lib thường được sử dụng như jQuery hoặc nguyên mẫu không? Nếu vậy, có một số công ty, như Google và Yahoo, có các công cụ để cung cấp các tệp này cho bạn trên một mạng phân tán.

— Levi Rosol
nguồn

60

Theo nguyên tắc thông thường, nơi tốt nhất để đặt <script>thẻ là dưới cùng của trang, ngay trước </body>thẻ. Một cái gì đó như thế này:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Tại sao?

Vấn đề gây ra bởi các tập lệnh là chúng chặn tải xuống song song. Đặc 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 trên 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ần tải xuống song song. Tuy nhiên, trong 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. Hơn...

CSS

Hơi lạc đề một chút, nhưng ... Đặt bảng định kiểu lên hàng đầu.

Trong khi nghiên cứu hiệu suất tại Yahoo!, Chúng tôi đã phát hiện ra rằng các bảng định kiểu di chuyển đến tài liệu CHÍNH làm cho các trang dường như được tải nhanh hơn. Điều này là do việc đặt các bảng định kiểu trong ĐẦU cho phép trang hiển thị dần dần. Hơn...

đọc thêm

Yahoo đã phát hành một hướng dẫn thực sự tuyệt vời liệt kê các thực tiễn tốt nhất để tăng tốc trang web. Chắc chắn đáng đọc: https://developer.yahoo.com/performance/rules.html

— martynas
nguồn

1

"Vấn đề gây ra bởi các tập lệnh là chúng chặn tải xuống song song." - Điều đó không còn đúng nữa: w3.org/TR/html5/scripting-1.html#attr-script-async

— Quentin

4

Với 100k Javascript, bạn không bao giờ nên đặt nó vào trong tệp. Sử dụng tệp Javascript tập lệnh bên ngoài. Không có cơ hội trong địa ngục, bạn sẽ chỉ sử dụng số lượng mã này chỉ trong một trang HTML. Có thể bạn đang hỏi nơi bạn nên tải tệp Javascript, vì điều này bạn đã nhận được câu trả lời thỏa đáng.

Nhưng tôi muốn chỉ ra rằng thông thường, các trình duyệt hiện đại chấp nhận các tệp Javascript gzip ped! Chỉ cần gzip x.jstệp vào x.js.gzvà trỏ đến đó trong srcthuộc tính. Nó không hoạt động trên hệ thống tập tin cục bộ, bạn cần một máy chủ web để nó hoạt động. Nhưng sự tiết kiệm trong byte được chuyển có thể rất lớn.

Tôi đã thử nghiệm thành công nó trong Firefox 3, MSIE 7, Opera 9 và Google Chrome. Nó dường như không hoạt động theo cách này trong Safari 3.

Để biết thêm thông tin, hãy xem bài đăng trên blog này và một trang rất cổ khác nhưng vẫn hữu ích vì nó chỉ ra rằng máy chủ web có thể phát hiện xem trình duyệt có thể chấp nhận Javascript được nén hay không. Nếu phía máy chủ của bạn có thể tự động chọn gửi gzipped hoặc văn bản thuần túy, bạn có thể làm cho trang có thể sử dụng được trong tất cả các trình duyệt web.

— bart
nguồn

8

Bạn đã hiểu nhầm câu hỏi của OP. Anh ta hỏi HTML ở đâu để đặt thẻ script. Anh ta đã sử dụng một tập tin bên ngoài, không nội tuyến tập lệnh. Phải thừa nhận rằng điều này ít rõ ràng hơn trước khi anh ta chỉnh sửa câu hỏi vào tháng Tư '09. Có lẽ xóa câu trả lời này?

— Đánh dấu Amery

@Leandro Tôi đoán đó là vì mọi người không luôn ghi nhớ câu hỏi thực tế mà vẫn xem xét các câu trả lời như câu hỏi này hữu ích. Tuy nhiên, câu trả lời này hữu ích nhưng không nhất thiết phải liên quan. Nó có thể hoạt động tốt hơn nếu tooltip bỏ phiếu chứa từ ngữ rõ ràng hơn, ví dụ: 'Câu trả lời này hữu ích và phù hợp'.

— WynandB

1

Trên Javascript được nén: Bạn chỉ có thể định cấu hình máy chủ web của mình để nén nó ... (Hoặc sử dụng một cái gì đó như tùy chọn / mô-đun gzip_static của nginx) (và gunzip cho các máy khách khác) Ít nhất nên gửi tiêu đề loại nội dung chính xác, với mã hóa được đánh dấu là gzip, có khả năng dẫn đến hỗ trợ trình duyệt tốt hơn

— Gert van den Berg

4

Đặt javascript ở đầu có vẻ gọn gàng hơn, nhưng về mặt chức năng, tốt hơn là nên theo HTML. Theo cách đó, javascript của bạn sẽ không chạy và cố gắng tham chiếu các phần tử HTML trước khi chúng được tải. Loại vấn đề này thường chỉ trở nên rõ ràng khi bạn tải trang qua kết nối internet thực tế, đặc biệt là vấn đề chậm.

Bạn cũng có thể thử tải động javascript một cách linh hoạt bằng cách thêm một phần tử tiêu đề từ mã javascript khác, mặc dù điều đó chỉ có ý nghĩa nếu bạn không sử dụng tất cả các mã mọi lúc.

— Đèn chùm Matthias
nguồn

3

Sử dụng cuzillion, bạn có thể kiểm tra mức độ ảnh hưởng đến tải trang của các vị trí khác nhau của các thẻ script bằng các phương thức khác nhau: nội tuyến, bên ngoài, "thẻ HTML", "document.write", "phần tử JS DOM", "iframe" và "XHR eval" . Xem trợ giúp cho một lời giải thích về sự khác biệt. Nó cũng có thể kiểm tra biểu định kiểu, hình ảnh và iframe.

— Sam Hasler
nguồn

1

Câu trả lời là phụ thuộc vào cách bạn đang sử dụng các đối tượng của javascript. Vì đã chỉ tải các tệp javascript ở chân trang chứ không phải tiêu đề chắc chắn sẽ cải thiện hiệu suất nhưng cần lưu ý rằng các đối tượng được sử dụng được khởi tạo muộn hơn so với tải ở chân trang. Một cách nữa là tải các tệp 'js' được đặt trong thư mục sẽ có sẵn cho tất cả các tệp.

— GustyWind
nguồn

0

Giống như những người khác đã nói, rất có thể nó sẽ đi trong một tập tin bên ngoài. Tôi thích bao gồm các tệp như vậy vào cuối <head />. Phương pháp này thân thiện với con người hơn là thân thiện với máy móc, nhưng theo cách đó tôi luôn biết JS ở đâu. Nó chỉ là không thể đọc được để bao gồm các tập tin kịch bản bất cứ nơi nào khác (imho).

Tôi thực sự cần phải vắt kiệt mọi ms cuối cùng thì có lẽ bạn nên làm những gì Yahoo nói.

— Berserk
nguồn

0

Các tập lệnh nên được bao gồm ở cuối thẻ body vì cách này HTML sẽ được trình duyệt phân tích cú pháp và hiển thị trước khi tập lệnh được tải.

— Jose Salgado
nguồn

0

Câu trả lời cho câu hỏi phụ thuộc. Có 2 kịch bản trong tình huống này và bạn sẽ cần đưa ra lựa chọn dựa trên kịch bản phù hợp của mình.

Kịch bản 1 - Kịch bản quan trọng / Kịch bản cần thiết

Trong trường hợp tập lệnh bạn đang sử dụng rất quan trọng để tải trang web, bạn nên đặt tập tin ở đầu tài liệu HTML của mình <head>. Một số ví dụ bao gồm - mã ứng dụng, bootstrap, phông chữ, v.v.

Kịch bản 2 - Các tập lệnh phân tích / ít quan trọng hơn

Ngoài ra còn có các tập lệnh được sử dụng mà không ảnh hưởng đến quan điểm của trang web. Các tập lệnh như vậy được khuyến nghị để được tải sau khi tất cả các phân đoạn quan trọng được tải. Và câu trả lời cho điều đó sẽ ở dưới cùng của tài liệu, tức là dưới cùng của bạn <body>trước thẻ đóng. Một số ví dụ bao gồm - Google Analytics, hotjar, v.v.

Phần thưởng - không đồng bộ / trì hoãn

Bạn cũng có thể nói với các trình duyệt rằng việc tải tập lệnh có thể được thực hiện đồng thời với các trình duyệt khác và có thể được tải dựa trên lựa chọn của trình duyệt bằng cách sử dụng đối số defer / async trong mã tập lệnh.

ví dụ. <script async src="script.js"></script>

— Praveen Thirumurugan
nguồn

-1

Các liên kết javascript của bạn có thể có trong đầu hoặc ở cuối thẻ body, đúng là hiệu suất được cải thiện bằng cách đặt liên kết ở cuối thẻ cơ thể của bạn, nhưng trừ khi hiệu suất là một vấn đề, đặt chúng vào đầu sẽ đẹp hơn để mọi người đọc và bạn biết vị trí của các liên kết và có thể tham khảo chúng dễ dàng hơn.

— Timothy Trousdale
nguồn

-1

Tôi sẽ nói rằng nó phụ thuộc vào thực tế những gì bạn dự định đạt được với mã Javascript:

nếu bạn dự định chèn bên ngoài (các) tập lệnh JS của mình, thì vị trí tốt nhất nằm ở đầu trang
nếu bạn dự định sử dụng các trang trên điện thoại thông minh, thì cuối trang, ngay trước thẻ.
nhưng, nếu bạn dự định tạo kết hợp HTML và JS (ví dụ: bảng HTML được tạo và điền), thì bạn phải đặt nó ở nơi bạn cần đến đó.

— Ludus H
nguồn

Những gì tôi nói là đáng bị trừ!? Trời ạ.

— Ludus H

Những gì bên ngoài phải làm với việc đưa kịch bản vào đầu? Tại sao dưới cùng của trang là một nơi tốt để đặt các tập lệnh dành riêng cho điện thoại thông minh? Tuyên bố của bạn về việc tạo HTML động từ JS chỉ đúng khi bạn đang sử dụng document.write, điều mà có lẽ bạn không nên làm.

— Quentin

Bạn "đoán" những gì tôi nghĩ và do câu trả lời của tôi bị trừ? Bạn nghĩ rằng có lẽ giả định của bạn là tốt hơn so với lời giải thích của tôi, phải không? Tôi chỉ lên kế hoạch để giải thích ngắn gọn, nếu ai đó không thể hiểu thì anh ta sẽ hỏi thêm thông tin. Trong nhận xét của tôi, tôi đã đề xuất đưa JS vào cuối trang cho điện thoại thông minh và máy tính bảng, ngay trước khi kết thúc phần thân vì tải toàn bộ trang nhanh hơn vì trình duyệt không cần chuyển sang chế độ "một chủ đề", nội dung trang sẽ bắt đầu xuất hiện trên màn hình ... nhưng bạn có thể biết điều này.

— Ludus H

Nơi đặt JavaScript trong tệp HTML?

Tại sao?

CSS

đọc thêm