การวางแท็ก <script> หลังแท็ก </body> ผิดหรือเปล่า

219

มันผิดขนาดไหนที่จะวางแท็กสคริปต์ไว้หลังแท็กปิดของเนื้อความ ( </body>) ?

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

javascript html

— danc
แหล่งที่มา

1

มีการสนับสนุนในเบราว์เซอร์ที่ทันสมัยหรือไม่

— Xdrone

เป็นไปได้ที่ซ้ำกันของตำแหน่งที่ฉันควรวางแท็ก <script> ในมาร์กอัพ HTML

— mapto

191

มันจะไม่ตรวจสอบนอก<body>หรือ<head>แท็ก นอกจากนี้ยังจะไม่ทำให้แตกต่างกันมาก - ถ้าคุณกำลังทำกิจวัตร DOM ที่สามารถทำลาย IEก่อนองค์ประกอบร่างกายเป็นแปล้ - </body>เพื่อวางไว้ก่อนที่จะปิด

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

— แอนดี้อี
แหล่งที่มา

13

@epalla: หากคุณวางสคริปต์ไว้ที่ส่วนท้ายของแท็ก body จะไม่มีเนื้อหาอื่นเหลือให้โหลดตามเวลาที่ได้รับดังนั้นจึงมีความแตกต่างเล็กน้อยระหว่างการวางสคริปต์ไว้ด้านนอกหรือด้านใน จากนั้นคุณจะได้รับประโยชน์เพิ่มเติมจากหน้าเว็บของคุณที่ยังคงตรวจสอบความถูกต้องซึ่งเป็นจุดที่ฉันพยายามทำในคำตอบของฉัน

— Andy E

1

ใช่ฉันเห็นด้วยกับคุณเนื่องจากคำตอบของคุณดี ฉันแค่อยากจะเพิ่มว่ามีเหตุผลในการวาง JS ที่ด้านล่างของหน้าแทนที่จะเป็นหัวในขณะที่เราทำมานาน

— Matt Brunmeier

3

@PHPst: ดีรหัสไม่ถูกต้องอาจมีผลข้างเคียงในบางเบราว์เซอร์ ไม่ว่าด้วยวิธีใดฉันไม่เห็นว่าการเยื้องเป็นหนึ่งความกว้างของแท็บน้อยกว่าโค้ดด้านบนทำให้มีลักษณะที่ดูสะอาดกว่า

— Andy E

1

@PHPst: ฉันคาดว่าเบราว์เซอร์จะจัดการกับมันถ้าคุณต้องการที่จะเขียนโค้ดของคุณในแบบนั้น อย่างไรก็ตามฉันขอแนะนำให้เขียนรหัสของคุณเพื่อตรวจสอบความถูกต้อง

— Andy E

1

@technosaurus: มีอยู่เสมอ<script src="..." defer>ซึ่งใช้งานได้กับเบราว์เซอร์ที่สำคัญทั้งหมด (แม้ว่าจะมีข้อผิดพลาดที่อาจเกิดขึ้นใน IE9 และต่ำกว่า)

— Andy E

88

ใช่. เฉพาะความคิดเห็นและแท็กปิดท้ายสำหรับองค์ประกอบ html ที่ได้รับอนุญาตหลังจากแท็กสิ้นสุดสำหรับเนื้อหา

เบราว์เซอร์อาจทำการกู้คืนข้อผิดพลาด แต่คุณไม่ควรขึ้นอยู่กับสิ่งนั้น

— เควนติน
แหล่งที่มา

12

นี่เป็นคำตอบที่ดีกว่า มีเบราว์เซอร์ใหม่ ๆ จำนวนมากที่มีมือถือเข้ามาเสี่ยงต่อการทำผิดเมื่อคุณต้องตัดและวางแท็กปิดหนึ่งแท็ก

— Erik Reppen

33

ดังที่Andyกล่าวว่าเอกสารจะไม่ถูกต้อง แต่อย่างไรก็ตามสคริปต์จะยังคงถูกตีความ ดูตัวอย่างจาก WebKit ตัวอย่าง:

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
แหล่งที่มา

11

"รองรับ HTML ที่เสียหายจริง ๆ " - ฉันคิดว่ามันบอกทุกอย่าง

— Diogo Kollross

8

IE ไม่อนุญาตสิ่งนี้อีกต่อไป (ตั้งแต่เวอร์ชัน 10 ฉันเชื่อ) และจะไม่สนใจสคริปต์ดังกล่าว FF และ Chrome ยังคงอดทนกับมัน แต่มีโอกาสที่สักวันหนึ่งที่พวกเขาจะทำสิ่งนี้ไม่ได้มาตรฐาน

— บรองซ์
แหล่งที่มา

1

และ Google ก็ทำเช่นนี้ในตัวอย่างวิธีลงชื่อเข้าใช้ G + ด้วย "อัปเดตล่าสุด 10 เมษายน 2014" ฉันได้รับจากเวอร์ชันสำหรับ Java บนเซิร์ฟเวอร์ ( developers.google.com/+/quickstart/java ) แต่น่าจะเป็น HTML + js เดียวกันสำหรับทุกคน

— ทอม

2

procedurally แทรก "องค์ประกอบสคริปต์" หลัง "ร่างกายองค์ประกอบ" คือ "ข้อผิดพลาดในการแยกวิเคราะห์" โดยขั้นตอนที่แนะนำโดย W3C ใน "การสร้างต้นไม้" สร้างข้อผิดพลาดและเรียกใช้ "tokenize อีกครั้ง" เพื่อประมวลผลเนื้อหานั้น มันเหมือนขั้นตอนเพิ่มเติม เท่านั้นแล้วสามารถ runned "ปฏิบัติงานของสคริปต์" - ดูกระบวนการโครงการ

สิ่งอื่นใด "ข้อผิดพลาดในการแยกวิเคราะห์" สลับ "โหมดแทรก" เป็น "ในร่างกาย" และประมวลผลโทเค็นอีกครั้ง

เทคนิคโดยเบราว์เซอร์เป็นกระบวนการภายในวิธีที่พวกเขาทำเครื่องหมายและปรับให้เหมาะสม

ฉันหวังว่าฉันช่วยใครซักคน

— BG Bruno
แหล่งที่มา

0

ใช่. แต่ถ้าคุณเพิ่มโค้ดข้างนอกมันส่วนใหญ่จะไม่เป็นจุดสิ้นสุดของโลกเนื่องจากเบราว์เซอร์ส่วนใหญ่จะแก้ไขได้

— เทย์เลอร์ Satula
แหล่งที่มา

0

Google แนะนำสิ่งนี้เกี่ยวกับ 'การเพิ่มประสิทธิภาพ CSS' อย่างแท้จริง พวกเขาแนะนำในรูปแบบที่สำคัญเหนือกว่าในการพับและการแยกส่วนที่เหลือ (ไฟล์ css)

ตัวอย่าง:

<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>

ดู: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

— โดนัลด์พอร์เตอร์
แหล่งที่มา

8

คุณไม่ควรวางสิ่งที่อยู่นอกbodyองค์ประกอบ บทความของ Google นั้นไม่ได้แนะนำให้ใครทำอย่างนั้น

— ChaseMoskal

2

ฉันกลัวว่าหน้า google จะพูดอย่างนั้นจริงๆ

— 10us

6

ดูเหมือนว่าครั้งหนึ่งหน้านั้นจะแนะนำสิ่งนั้น แต่ไม่ใช่อีกต่อไป (ขณะนี้มีการโหลดแบบไดนามิกด้วย javascript) รุ่นภาษาเยอรมันไม่ทันสมัยและยังมีตัวอย่างรหัสเก่า

— bodo

1

"องค์ประกอบ noscript" จะต้องได้รับโดย RFC ภายใน "องค์ประกอบ html" และ "องค์ประกอบของร่างกาย" ด้วย

— BG Bruno

0

เบราว์เซอร์สมัยใหม่จะใช้แท็กสคริปต์ในเนื้อหาดังนี้:

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

โดยทั่วไปหมายความว่าสคริปต์จะถูกโหลดเมื่อเพจเสร็จสิ้นซึ่งอาจมีประโยชน์ในบางกรณี (เช่นการจัดการ DOM) อย่างไรก็ตามฉันขอแนะนำให้คุณใช้สคริปต์เดียวกันและวางไว้ในแท็ก head ด้วย "defer" เนื่องจากจะให้ผลเหมือนกัน

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

— การกุศลโฆษณา
แหล่งที่มา

สิ่งที่จะมีประโยชน์คือถ้าscriptแท็กมีeventแอตทริบิวต์ที่สามารถกำหนดเพื่อกำหนดว่าจะแยกวิเคราะห์สคริปต์เมื่อใด ดังนั้นคุณต้องevent="load" event="DOMContentLoaded"รันสคริปต์หลังจากสร้าง DOM หรือevent="beforeunload"บนbeforeunloadเหตุการณ์หน้าต่าง ตัวอย่าง<script src="scripts/main.js" event="DOMContentLoaded"></script>.

— 1.21 gigawatts