210

บอกว่าฉันมีไฟล์จาวาสคริปต์ที่ค่อนข้างหนักบรรจุลงประมาณ 100kb หรือมากกว่านั้น โดยไฟล์ฉันหมายความว่ามันเป็นไฟล์ภายนอกที่จะเชื่อมโยงในผ่าน<script src="...">ไม่ได้วางลงใน HTML ตัวเอง

ที่ไหนดีที่สุดในการวางสิ่งนี้ลงใน 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>

จะมีความแตกต่างในการใช้งานระหว่างตัวเลือกแต่ละตัวหรือไม่?

javascript html optimization

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

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

— Ivar

175

Yahoo! ทีมงานที่มีประสิทธิภาพพิเศษแนะนำให้วางสคริปต์ที่ด้านล่างของหน้าเนื่องจากวิธีที่เบราว์เซอร์ดาวน์โหลดส่วนประกอบ

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

— Walter Rumsby
แหล่งที่มา

4

ตัวอย่างเช่นถ้าคุณกำลังจะทำสิ่งต่างๆมากมายของ jQuery คุณจะต้องโหลดไลบรารีก่อนที่จะลองใช้ประโยชน์

— BryanH

58

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

— BryanH

1

สวัสดี เราใส่โค้ดแบบนี้$(function () {...})ไว้ที่ด้านล่างของหน้าเว็บด้วยหรือต้องอยู่ข้างใน<head>หรือไม่?

— Pham

7

ฉันหวังว่าการอ้างอิงของ"ด้านล่างของหน้าของคุณ"ที่นี่ไม่เกิน</body>?

— Mr_Green

1

เบราว์เซอร์สมัยใหม่ยังสามารถอ่านแอตทริบิวต์ "เลื่อน" คุณสามารถตั้งค่า defer = "defer" บนแท็กสคริปต์ที่ไม่ได้อยู่ที่ด้านล่างของ <body> และเมื่อเบราว์เซอร์เห็นสิ่งนั้นมันจะทำการโหลด html ที่เหลือก่อนจากนั้นจึงย้อนกลับและตีความเนื้อหาของ แท็กสคริปต์ สิ่งนี้มีประโยชน์หากคุณใช้เฟรมเวิร์กบางประเภทที่คุณไม่สามารถควบคุมเพจได้อย่างสมบูรณ์ ขุดลงในบทความนี้และทราบว่าเป็นเอกสารที่มีชีวิตดังนั้นข้อมูลบางอย่างจึงล้าสมัย: stackoverflow.com/questions/5250412/…

— LinuxDisciple

75

สถานที่ที่ดีที่สุดคือก่อนที่คุณต้องการและไม่ช้าก็เร็ว

นอกจากนี้ยังขึ้นอยู่กับที่ตั้งทางกายภาพของผู้ใช้ของคุณการใช้บริการเช่นบริการ S3 ของ Amazon อาจช่วยให้ผู้ใช้ดาวน์โหลดจากเซิร์ฟเวอร์ที่อยู่ใกล้กับพวกเขามากกว่าเซิร์ฟเวอร์ของคุณ

สคริปต์ js ของคุณเป็น lib ที่ใช้กันทั่วไปเช่น jQuery หรือต้นแบบหรือไม่? หากมีหลาย บริษัท เช่น Google และ Yahoo ที่มีเครื่องมือในการจัดหาไฟล์เหล่านี้ให้คุณในเครือข่ายแบบกระจาย

— Levi Rosol
แหล่งที่มา

60

โดยทั่วไปแล้วกฎการวาง<script>แท็กที่ดีที่สุดคือด้านล่างของหน้าก่อน</body>แท็ก บางสิ่งเช่นนี้

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

ทำไม?

ปัญหาที่เกิดจากสคริปต์คือบล็อกการดาวน์โหลดแบบขนาน ข้อกำหนด HTTP / 1.1 แนะนำว่าเบราว์เซอร์ดาวน์โหลดไม่เกินสององค์ประกอบในแบบคู่ขนานต่อชื่อโฮสต์ หากคุณแสดงรูปภาพจากชื่อโฮสต์หลายชื่อคุณสามารถดาวน์โหลดมากกว่าสองครั้งเพื่อให้เกิดขนาน ในขณะที่สคริปต์กำลังดาวน์โหลดอย่างไรก็ตามเบราว์เซอร์จะไม่เริ่มการดาวน์โหลดอื่น ๆ แม้แต่ในชื่อโฮสต์ที่ต่างกัน มากกว่า...

CSS

ปิดหัวข้อเล็กน้อย แต่ ... ใส่สไตล์ไว้ที่ด้านบน

ในขณะที่ค้นคว้าประสิทธิภาพที่ Yahoo! เราค้นพบว่าการย้ายสไตล์ชีทไปยังเอกสาร HEAD ทำให้หน้าเว็บดูเหมือนว่าจะโหลดเร็วขึ้น นี่เป็นเพราะการวางสไตล์ชีทไว้ใน HEAD ทำให้เพจสามารถแสดงผลได้อย่างต่อเนื่อง มากกว่า...

อ่านเพิ่มเติม

Yahoo ได้เปิดตัวคู่มือที่ยอดเยี่ยมซึ่งแสดงวิธีปฏิบัติที่ดีที่สุดเพื่อเพิ่มความเร็วเว็บไซต์ การอ่านที่คุ้มค่าแน่นอน: https://developer.yahoo.com/performance/rules.html

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

1

"ปัญหาที่เกิดจากสคริปต์คือบล็อกการดาวน์โหลดแบบขนาน" - นั่นไม่เป็นความจริงอีกต่อไป: w3.org/TR/html5/scripting-1.html#attr-script-async

— Quentin

4

ด้วย Javascript 100k คุณไม่ควรวางไว้ในไฟล์ ใช้ไฟล์ Javascript สคริปต์ภายนอก ไม่มีโอกาสในนรกที่คุณจะใช้รหัสนี้ในหน้า HTML เพียงหน้าเดียวเท่านั้น ดูเหมือนว่าคุณกำลังถามว่าคุณควรโหลดไฟล์ Javascript ไว้ที่ใดเพราะคุณได้รับคำตอบที่น่าพอใจแล้ว

แต่ฉันอยากจะชี้ให้เห็นว่าโดยทั่วไปแล้วเบราว์เซอร์ที่ทันสมัยยอมรับไฟล์ Javascript ped gzip ! เพียงแค่ gzip x.jsไฟล์ไปที่x.js.gzและชี้ไปที่ในsrcแอตทริบิวต์ มันไม่ทำงานบนระบบไฟล์โลคอลคุณต้องมีเว็บเซิร์ฟเวอร์เพื่อให้มันใช้งานได้ แต่การประหยัดในการถ่ายโอนไบต์สามารถมหาศาล

ฉันทดสอบเรียบร้อยแล้วใน Firefox 3, MSIE 7, Opera 9 และ Google Chrome ดูเหมือนจะไม่ทำงานใน Safari 3

สำหรับข้อมูลเพิ่มเติมดูโพสต์บล็อกนี้และอีกหน้าโบราณที่มีประโยชน์เพราะชี้ให้เห็นว่าเว็บเซิร์ฟเวอร์สามารถตรวจพบว่าเบราว์เซอร์สามารถยอมรับ Javascript Javascript ได้หรือไม่ หากฝั่งเซิร์ฟเวอร์ของคุณสามารถเลือกที่จะส่ง gzipped หรือข้อความธรรมดาคุณสามารถทำให้หน้าใช้งานได้ในทุกเว็บเบราว์เซอร์

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

8

คุณเข้าใจผิดคำถามของ OP เขาถูกถามว่าอยู่ที่ไหนใน HTML เพื่อใส่แท็กสคริปต์ เขาใช้ไฟล์ภายนอกอยู่แล้วไม่ได้ฝังสคริปต์ไว้ เป็นที่ยอมรับว่าเรื่องนี้ชัดเจนน้อยกว่าก่อนที่เขาจะแก้ไขคำถามในเดือนเมษายน '09 อาจลบคำตอบนี้หรือไม่

— Mark Amery

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

— WynandB

1

ใน gzipped Javascript: คุณสามารถกำหนดค่าเว็บเซิร์ฟเวอร์ของคุณเพื่อบีบอัดมันได้เช่นกัน ... (หรือใช้บางอย่างเช่นโมดูล / ตัวเลือก gzip_static ของ nginx) (และ gunzip หนึ่งสำหรับไคลเอนต์อื่น ๆ ) อย่างน้อยก็ควรส่งส่วนหัวชนิดเนื้อหาที่ถูกต้อง ด้วยการเข้ารหัสที่ทำเครื่องหมายเป็น gzip อาจส่งผลให้การสนับสนุนเบราว์เซอร์ที่ดียิ่งขึ้น

— Gert van den Berg

4

การวางจาวาสคริปต์ไว้ที่ด้านบนสุดนั้นดูจะดีกว่า แต่ถ้าเป็นไปได้ว่าจะดีกว่า HTML ด้วยวิธีนี้จาวาสคริปต์ของคุณจะไม่ทำงานและพยายามอ้างอิงองค์ประกอบ HTML ก่อนที่จะโหลด ปัญหาประเภทนี้มักปรากฏเมื่อคุณโหลดหน้าเว็บผ่านการเชื่อมต่ออินเทอร์เน็ตจริงโดยเฉพาะปัญหาที่ช้า

คุณสามารถลองโหลดจาวาสคริปต์แบบไดนามิกได้โดยการเพิ่มองค์ประกอบส่วนหัวจากรหัสจาวาสคริปต์อื่น ๆ แม้ว่าจะเหมาะสมเท่านั้นหากคุณไม่ได้ใช้รหัสทั้งหมดอยู่ตลอดเวลา

— Matthias Wandel
แหล่งที่มา

3

การใช้cuzillionคุณสามารถทดสอบผลกระทบต่อการโหลดหน้าเว็บของตำแหน่งแท็กสคริปต์ที่แตกต่างกันโดยใช้วิธีการที่แตกต่างกัน: แบบอินไลน์, ภายนอก, "แท็ก HTML", "document.write", "องค์ประกอบ JS DOM", "iframe" และ "XHR eval" . ดูความช่วยเหลือสำหรับคำอธิบายของความแตกต่างที่ นอกจากนี้ยังสามารถทดสอบสไตล์รูปภาพและ iframes

— Sam Hasler
แหล่งที่มา

1

คำตอบนั้นขึ้นอยู่กับวิธีการใช้งานของจาวาสคริปต์ ตามที่ชี้ไปแล้วการโหลดไฟล์จาวาสคริปต์ที่ส่วนท้ายแทนที่จะส่วนหัวช่วยเพิ่มประสิทธิภาพได้อย่างแน่นอน แต่ควรระมัดระวังว่าวัตถุที่ใช้จะถูกเตรียมใช้งานในภายหลังกว่าจะถูกโหลดที่ส่วนท้าย อีกวิธีหนึ่งคือการโหลดไฟล์ 'js' ที่อยู่ในโฟลเดอร์ซึ่งจะสามารถใช้ได้กับไฟล์ทั้งหมด

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

0

อย่างที่คนอื่น ๆ พูดกันมันน่าจะเป็นไฟล์ภายนอกมากที่สุด ฉันชอบที่จะรวมไฟล์ดังกล่าวไว้ที่ส่วนท้ายของ <head /> วิธีนี้เป็นมิตรกับมนุษย์มากกว่าเป็นมิตรกับเครื่องจักร แต่วิธีการที่ฉันรู้อยู่เสมอว่า JS อยู่ที่ไหน มันไม่สามารถอ่านได้เพื่อรวมไฟล์สคริปต์ที่อื่น (imho)

ฉันต้องบีบทุก ms สุดท้ายแล้วคุณน่าจะทำตามที่ Yahoo บอก

— บ้าดีเดือด
แหล่งที่มา

0

ควรรวมสคริปต์ไว้ที่ส่วนท้ายของแท็กเนื้อหาเนื่องจากวิธีนี้ HTML จะถูกแยกวิเคราะห์โดยเบราว์เซอร์และแสดงก่อนที่จะโหลดสคริปต์

— José Salgado
แหล่งที่มา

0

คำตอบของคำถามขึ้นอยู่กับ มี 2 สถานการณ์ในสถานการณ์นี้และคุณจะต้องเลือกตามสถานการณ์ที่เหมาะสมของคุณ

สถานการณ์สมมติ 1 - สคริปต์ที่สำคัญ / ต้องมีสคริปต์

ในกรณีที่สคริปต์ที่คุณใช้มีความสำคัญต่อการโหลดเว็บไซต์ขอแนะนำให้วางที่ด้านบนของเอกสาร HTML ของคุณเช่น <head>ของคุณ ตัวอย่างบางส่วน ได้แก่ - รหัสแอปพลิเคชัน bootstrap แบบอักษร ฯลฯ

สถานการณ์ที่ 2 - สคริปต์การวิเคราะห์ที่สำคัญน้อยกว่า

นอกจากนี้ยังมีสคริปต์ที่ใช้ซึ่งไม่ส่งผลกระทบต่อมุมมองของเว็บไซต์ แนะนำให้โหลดสคริปต์ดังกล่าวหลังจากโหลดกลุ่มที่สำคัญทั้งหมดแล้ว และคำตอบก็คือด้านล่างของเอกสารนั่นคือด้านล่างของคุณ<body>หน้าแท็กปิด ตัวอย่างบางส่วน ได้แก่ - การวิเคราะห์ของ Google, hotjar ฯลฯ

โบนัส - async / เลื่อนเวลา

คุณสามารถบอกเบราว์เซอร์ว่าการโหลดสคริปต์สามารถทำได้พร้อมกันกับผู้อื่นและสามารถโหลดได้ตามตัวเลือกของเบราว์เซอร์โดยใช้อาร์กิวเมนต์ defer / async ในรหัสสคริปต์

เช่น. <script async src="script.js"></script>

— Praveen Thirumurugan
แหล่งที่มา

-1

ลิงก์จาวาสคริปต์ของคุณสามารถมีได้ทั้งที่ส่วนหัวหรือที่ส่วนท้ายของแท็กเนื้อหาเป็นความจริงที่ว่าประสิทธิภาพจะดีขึ้นโดยการวางลิงค์ไว้ที่ส่วนท้ายของแท็กร่างกายของคุณ แต่ถ้าประสิทธิภาพเป็นปัญหา เพื่อให้ผู้คนอ่านและคุณรู้ว่าลิงก์อยู่ที่ไหนและสามารถอ้างอิงได้ง่ายขึ้น

— Timothy Trousdale
แหล่งที่มา

-1

ฉันจะบอกว่ามันขึ้นอยู่กับสิ่งที่คุณวางแผนไว้ว่าจะบรรลุด้วย Javascript code:

หากคุณวางแผนที่จะแทรกสคริปต์ JS ภายนอกของคุณดังนั้นตำแหน่งที่ดีที่สุดคือส่วนหัวของหน้า
หากคุณวางแผนที่จะใช้หน้าบนสมาร์ทโฟนแล้วด้านล่างของหน้าก่อนแท็ก
แต่หากคุณวางแผนที่จะสร้างชุดค่าผสม HTML และ JS (ตัวอย่างเช่นสร้างและเติมตาราง HTML แบบไดนามิก) คุณต้องวางไว้ในตำแหน่งที่คุณต้องการ

— Ludus H
แหล่งที่มา

สิ่งที่ฉันพูดเพื่อสมควรลบ!? โธ่

— Ludus H

การอยู่ภายนอกต้องทำอะไรกับการวางสคริปต์ไว้ในหัว? เหตุใดส่วนล่างของหน้าจึงเหมาะที่จะวางสคริปต์สำหรับสมาร์ทโฟนโดยเฉพาะ ข้อความของคุณเกี่ยวกับการสร้าง HTML แบบไดนามิกจาก JS นั้นเป็นจริงเฉพาะในกรณีที่คุณใช้document.writeซึ่งคุณอาจไม่ควรทำ

— เควนติน

คุณ "คิดว่า" สิ่งที่ฉันคิดและเนื่องจากคำตอบของฉันได้ลบ? คุณคิดว่าการสันนิษฐานของคุณดีกว่าคำอธิบายของฉันใช่ไหม? ฉันวางแผนไว้ว่าจะให้คำอธิบายสั้น ๆ หากมีคนไม่เข้าใจเขาจะขอข้อมูลเพิ่มเติม ในความคิดเห็นของฉันฉันแนะนำให้วาง JS ลงในส่วนท้ายของหน้าสำหรับโทรศัพท์สมาร์ทแท็บเล็ตและก่อนที่จะสิ้นสุดของร่างกายเพราะการโหลดทั้งหน้าเร็วขึ้นเนื่องจากเบราว์เซอร์ไม่จำเป็นต้องเปลี่ยนไปใช้โหมด "เธรดเดียว" เนื้อหาของหน้าจะเริ่มปรากฏ บนหน้าจอ ... แต่คุณอาจรู้สิ่งนี้

— Ludus H

จะวาง JavaScript ในไฟล์ HTML ได้ที่ไหน

ทำไม?

CSS

อ่านเพิ่มเติม