มันจะดีกว่าที่จะวางรหัส JS ในไฟล์ html หรือในไฟล์ภายนอก?

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

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

• การให้บริการ HTML และ JS แยกต่างหากมีข้อได้เปรียบที่ไคลเอนต์สามารถแคช JS ได้ สิ่งนี้ต้องการให้คุณส่งส่วนหัวที่เหมาะสมเพื่อให้ลูกค้าไม่ได้ออกคำขอใหม่ทุกครั้ง การแคชเป็นปัญหาถ้าคุณต้องการทำการอัปเดตและต้องการทำให้แคชของไคลเอ็นต์ใช้ไม่ได้ /static/mylibrary-1.12.2.jsวิธีหนึ่งคือการรวมถึงจำนวนรุ่นในชื่อไฟล์เช่น

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

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

  ที่นี่ลูกค้าไม่จำเป็นต้องเข้าถึงไฟล์ JS แยกต่างหากซึ่งสามารถซ่อนหากคุณต้องการ แต่ทุกคนยังสามารถดูรหัส JS ภายใน HTML ได้

กลยุทธ์อื่น ๆ เพื่อลดเวลาในการโหลดรวมถึง

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

  เกี่ยวข้องกับ minification คือการรวมไฟล์ JS ทั้งหมดของคุณไว้ในไฟล์เดียว สิ่งนี้จะลดจำนวนคำขอที่จำเป็น

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

เทคนิคเหล่านี้ยังนำไปใช้กับแหล่งข้อมูลอื่นเช่นรูปภาพ

• สามารถแทรกรูปภาพลงใน HTML หรือ CSS ด้วย data-URL นี่เป็นประโยชน์สำหรับรูปภาพขนาดเล็กและเรียบง่ายเท่านั้นเนื่องจากการเข้ารหัส base64 ทำให้ขนาดมีขนาดใหญ่ขึ้น สิ่งนี้ยังคงเร็วกว่าคำขออื่น
• สามารถรวมรูปภาพขนาดเล็กหลายอัน (ไอคอนปุ่ม) เป็นภาพเดียวแล้วแตกออกเป็นสไปรท์
• เซิร์ฟเวอร์สามารถลดขนาดรูปภาพตามขนาดที่ใช้จริงบนเว็บไซต์ซึ่งช่วยประหยัดแบนด์วิดท์ เปรียบเทียบภาพขนาดย่อ
• สำหรับกราฟิกบางตัวรูปภาพที่เป็นข้อความเช่น SVG อาจมีขนาดเล็กกว่ามาก

ฉันกำลังออกแบบเว็บไซต์หนึ่งหน้า

หากคุณมีหน้าเดียวจริง ๆ แล้วใช่จะดีกว่า (จากมุมมองประสิทธิภาพ) เพื่อให้บริการทุกอย่างในไฟล์เดียว ... stylesheets, JavaScript และแม้กระทั่งภาพ (ภาพขนาดเล็กที่สอดคล้องกับ data-URIs) สิ่งนี้จะช่วยลดคำขอ HTTP เพิ่มเติมที่จำเป็นในการดึงทรัพยากรภายนอกซึ่งค่อนข้างช้า

ไฟล์ผลลัพธ์ควร gzipped ก่อนให้บริการซึ่งจะลดขนาดของการตอบกลับข้อความทั้งหมดอย่างหนาแน่น

คุณควรพิจารณาให้มีรูปภาพขนาดใหญ่ภายนอกหน้าเนื่องจากมีข้อ จำกัด เกี่ยวกับขนาดของ data-URIs และความเข้ากันได้ของเบราว์เซอร์ (เช่น IE8 มีขีด จำกัด 32KB ซึ่งเท่ากับขนาดไฟล์จริงประมาณ 23KB เนื่องจากลักษณะของการเข้ารหัส base64)

ฉันสามารถเปลี่ยนการอนุญาตให้ปฏิเสธการร้องขอของผู้ใช้ได้หรือไม่ แต่หน้า html ยังคงสามารถเรียกรหัสได้

ไม่ได้รหัสที่ดีที่สุดสามารถทำให้งงงวยเพื่อ "ซ่อน" จากผู้สังเกตการณ์ทั่วไป แต่ไม่มีการป้องกันที่แท้จริง

เบราว์เซอร์จะต้องเห็นโค้ด JS ฝั่งไคลเอ็นต์ (นั่นคือหากเพจนั้นจำเป็นต้องใช้ JS โดยตรง) - นั่นหมายความว่าเบราว์เซอร์ต้องดาวน์โหลดเบราว์เซอร์

คุณไม่สามารถใช้เบราว์เซอร์ใช้ JS บนหน้าเว็บได้หากไม่สามารถดาวน์โหลดได้

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

หากคุณมีรหัสที่คุณไม่ต้องการเปิดเผยผ่านเบราว์เซอร์คุณจะต้องใช้รหัสฝั่งเซิร์ฟเวอร์ (เช่น node.js, php, perl, asp.net, jsp - มีตัวเลือกมากมาย) และโต้ตอบกับมัน จากเบราเซอร์ - ทั้งในการโหลดหน้าเว็บเริ่มต้นหรือใช้AJAX

มันขึ้นอยู่กับปริมาณของรหัสและคุณจริงจังกับการเป็นโปรแกรมเมอร์ / วิศวกรซอฟต์แวร์มากแค่ไหนกับ coder ฉันทำงานกับนักออกแบบหลายคนที่วางโค้ดสั้น ๆ ลงใน HTML โดยตรงและในขณะที่ฉันกำลังเขียน - มันใช้งานได้จริง

แม้ว่ามันจะไม่ใช่สิ่งที่ฉันจะทำเองและถ้าคุณต้องการทราบแนวทางปฏิบัติที่ดีที่สุดของการพัฒนาซอฟต์แวร์ฉันแนะนำให้คุณปูทุกอย่างใน*.jsไฟล์ภายนอกและโหลดผ่าน<script>แท็ก

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

มันจะดีกว่าที่จะสร้างไฟล์ภายนอกสำหรับรหัส JS ของฉันหรือเพียงแค่วางไว้ในรหัส html?

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

การให้บริการไฟล์ที่น้อยลงจะดีกว่าเนื่องจากไคลเอ็นต์จะมีคำขอ HTTP ที่จะจัดการน้อยกว่า

วางบนหน้าเว็บเพื่อโหลดเร็วขึ้นหรือไม่

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

ฉันสามารถเปลี่ยนการอนุญาตให้ปฏิเสธการร้องขอของผู้ใช้ได้หรือไม่ แต่หน้า html ยังคงสามารถเรียกรหัสได้

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

ประโยชน์มากมายของการแยกเนื้อหา html และ javascript เป็นไฟล์แยก:

• เพิ่มความสามารถในการอ่านของแต่ละไฟล์ของหลักสูตร
• เนื่องจากรหัส javascript ไม่ได้ถูก จำกัด อยู่ในไฟล์ html อีกต่อไปไฟล์ html และ javascript อื่น ๆ หรือไลบรารีจึงสามารถใช้รหัส javascript ของคุณ
• รหัสจาวาสคริปต์ในทำนองเดียวกันที่ใส่ลงในไฟล์แยกต่างหากสามารถใช้ไฟล์อื่นและไลบรารีขั้นสูงเพื่อทำการคำนวณที่ซับซ้อนได้อย่างง่ายดาย (การเรียนรู้ของเครื่อง, กราฟิก 3 มิติ, กรอบงาน, ฯลฯ ไลบรารี)
• จาวาสคริปต์สามารถแคชในฝั่งไคลเอ็นต์และผ่านเนื้อหา html เท่านั้นที่ต้องโหลดใหม่ในการรีเฟรชหน้า
• การปฏิบัติด้านวิศวกรรมซอฟต์แวร์ที่ดี / ทันสมัยสามารถนำไปใช้กับไฟล์ / โมดูล / ไลบรารี javascript แยกต่างหาก (รูปแบบการออกแบบอ่านเกี่ยวกับ typescript / babel ฯลฯ )
• รหัสจาวาสคริปต์สามารถทำให้งงงวยได้อย่างง่ายดายหรือ 'ซ่อน' จากผู้เข้าชมไปยังหน้าเว็บโดย minification / uglification
• ไฟล์จาวาสคริปต์สามารถรวมเข้าด้วยกันเป็นไฟล์ / โมดูลเดียวผ่าน gulp, webpack ฯลฯ