Có sai không khi đặt thẻ <script> sau thẻ </ body>?

218

Làm thế nào sai là đặt thẻ script sau thẻ đóng của body ( </body>). ?

<html>
  ....
  <body>
     ....
  </body>
  <script type="text/javascript" src="theJs.js"></script>
</html>

javascript html

— DanC
nguồn

1

Có hỗ trợ cho nó trong các trình duyệt hiện đại.

— Xdrone

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

— ánh xạ tới

190

Nó sẽ không xác nhận bên ngoài <body>hoặc <head>các thẻ. Nó cũng sẽ không tạo ra nhiều khác biệt - trừ khi bạn đang thực hiện các thao tác DOM có thể phá vỡ IE trước khi phần tử cơ thể được tải đầy đủ - để đặt nó ngay trước khi đóng </body>.

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

— Andy E
nguồn

13

@epalla: nếu bạn đặt tập lệnh ngay ở cuối thẻ body thì sẽ không có nội dung nào khác được tải vào thời điểm nó xuất hiện, do đó, sẽ có rất ít sự khác biệt giữa việc đặt nó bên ngoài hoặc ngay bên trong. Sau đó, bạn có thêm lợi ích của trang của bạn vẫn còn hiệu lực, đó là điểm tôi đang cố gắng đưa ra trong câu trả lời của mình.

— Andy E

1

Đúng, tôi đã đồng ý với bạn vì câu trả lời của bạn là tốt. Tôi chỉ muốn nói thêm rằng có một lý do để đặt JS ở cuối trang thay vì trong đầu như chúng tôi đã làm trong một thời gian dài.

— Matt Brunmeier

3

@PHPst: tốt, mã không hợp lệ có thể bị tác dụng phụ trong một số trình duyệt nhất định. Dù bằng cách nào, tôi không thấy cách thụt lề của nó là một chiều rộng nhỏ hơn mã trên nó làm cho nó trông gọn gàng hơn.

— Andy E

1

@PHPst: Tôi hy vọng các trình duyệt sẽ đối phó với nó nếu bạn thực sự muốn viết mã theo cách đó. Tuy nhiên, tôi vẫn khuyên bạn nên viết mã của mình để xác thực.

— Andy E

1

@technosaurus: luôn có <script src="..." defer>, hoạt động trong tất cả các trình duyệt chính (mặc dù có lỗi có khả năng phá vỡ trong IE9 trở xuống).

— Andy E

88

Đúng. Chỉ cho phép nhận xét và thẻ kết thúc cho phần tử html sau thẻ kết thúc cho phần thân.

Trình duyệt có thể thực hiện khôi phục lỗi, nhưng bạn không bao giờ nên phụ thuộc vào điều đó.

— Quentin
nguồn

12

Đây là một câu trả lời tốt hơn. Có quá nhiều trình duyệt mới trên mạng với thiết bị di động đang hoạt động có nguy cơ làm sai khi tất cả những gì bạn phải cắt và dán một thẻ đóng duy nhất.

— Erik Reppen

33

Như Andy nói tài liệu sẽ không hợp lệ, tuy nhiên kịch bản vẫn sẽ được diễn giải. Xem đoạn trích từ WebKit chẳng hạn:

void HTMLParser::processCloseTag(Token* t)
{
    // Support for really broken html.
    // we never close the body tag, since some stupid web pages close it before 
    // the actual end of the doc.
    // let's rely on the end() call to close things.
    if (t->tagName == htmlTag || t->tagName == bodyTag 
                              || t->tagName == commentAtom)
        return;
    ...

— Vitalii Fedorenko
nguồn

11

"Hỗ trợ cho html thực sự bị hỏng." - Tôi nghĩ nó nói lên tất cả.

— Diogo Kollross

8

IE không cho phép điều này nữa (kể từ Phiên bản 10, tôi tin) và sẽ bỏ qua các tập lệnh như vậy. FF và Chrome vẫn dung thứ cho họ, nhưng có khả năng một ngày nào đó họ sẽ bỏ cái này là không chuẩn.

— Phế quản
nguồn

1

Tuy nhiên, Google thực hiện điều này trong ví dụ về cách thực hiện đăng nhập G +, với "cập nhật lần cuối ngày 10 tháng 4 năm 2014". Tôi đã nhận được nó từ phiên bản dành cho Java trên máy chủ ( developers.google.com/+/quickstart/java ) nhưng có lẽ đó là cùng một HTML + js cho tất cả.

— Tom

2

Thủ tục chèn "tập lệnh phần tử" sau "phần tử phần tử" là "lỗi phân tích cú pháp" theo quy trình được đề xuất bởi W3C . Trong "Xây dựng cây" tạo lỗi và chạy "mã thông báo lại" để xử lý nội dung đó. Vì vậy, nó giống như bước bổ sung. Chỉ sau đó mới có thể chạy "Thực thi tập lệnh" - xem quy trình lược đồ .

Bất cứ điều gì khác "lỗi phân tích". Chuyển "chế độ chèn" thành "trong cơ thể" và xử lý lại mã thông báo.

Về mặt kỹ thuật, đó là quy trình nội bộ, cách họ đánh dấu và tối ưu hóa nó.

Tôi hy vọng tôi đã giúp ai đó.

— BG Bruno
nguồn

0

Đúng. Nhưng nếu bạn thêm mã bên ngoài thì rất có thể nó sẽ không phải là kết thúc của thế giới vì hầu hết các trình duyệt sẽ sửa nó, nhưng nó vẫn là một thực tiễn tồi để vào.

— Taylor Satula
nguồn

0

Google thực sự khuyến nghị điều này liên quan đến 'Tối ưu hóa CSS'. Họ đề xuất các kiểu xếp hàng quan trọng trong xếp hàng và trì hoãn phần còn lại (tệp css).

Thí dụ:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

Xem: https://developers.google.com/speed/docs/insights/OptizesCSSDelivery

— Donald Porter
nguồn

8

Bạn không nên đặt công cụ bên ngoài bodyyếu tố. Bài viết đó của Google không khuyên ai làm bất cứ điều gì như vậy.

— ChaseMoskal

2

Tôi sợ rằng trang google nói thực sự chỉ chính xác mà.

— 10us

6

Có vẻ như tại một thời điểm, trang đó đã đề xuất một điều như vậy, nhưng không còn nữa. (Bây giờ có một số tải động với javascript.) Phiên bản tiếng Đức không cập nhật và vẫn chứa ví dụ mã cũ.

— Bodo

1

"phần tử noscript" phải có bởi RFC bên trong "phần tử html" và "phần tử phần tử" nữa

— BG Bruno

0

Các trình duyệt hiện đại sẽ lấy các thẻ script trong phần thân như vậy:

<body>
    <script src="scripts/main.js"></script>
</body>

Về cơ bản, điều đó có nghĩa là tập lệnh sẽ được tải sau khi trang kết thúc, điều này có thể hữu ích trong một số trường hợp nhất định (cụ thể là thao tác DOM). Tuy nhiên, tôi thực sự khuyên bạn nên lấy tập lệnh tương tự và đặt nó vào thẻ head với "defer", vì nó sẽ cho hiệu quả tương tự.

<head>
    <script src="scripts/main.js" defer></script>
</head>

— Từ thiện quảng cáo
nguồn

Điều gì sẽ hữu ích là nếu scriptcác thẻ có một eventthuộc tính có thể được xác định để xác định khi nào phân tích cú pháp. Vì vậy, bạn có event="load" event="DOMContentLoaded"để chạy tập lệnh sau khi DOM được tạo hoặc event="beforeunload"trên beforeunloadsự kiện cửa sổ . Ví dụ , <script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1,21 gigawatt