JavaScript ที่อ้างถึงในส่วนหัวควรให้บริการจากชื่อโฮสต์เดียวกันกับเอกสารหลักหรือไม่


12

ฉันอยู่ภายใต้ความประทับใจว่าเพื่อประสิทธิภาพที่ดีที่สุด Javascript ควรได้รับการปฏิบัติเหมือนเป็นเนื้อหาแบบคงที่และให้บริการจากโดเมนที่ไม่มีเนื้อหาพร้อมกับไฟล์ CSS รูปภาพและอื่น ๆ

แต่ Google บอกไว้ที่นี่: อย่าให้บริการไฟล์ JS ภายนอกที่โหลดไว้ล่วงหน้า แต่เนิ่นๆจากโดเมน cookieless

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

ดังนั้นตอนนี้ฉันทะเลาะกัน ฉันไม่ชัดเจนว่า "จำเป็นสำหรับการเริ่มต้นหน้าเว็บ" หมายถึงอะไร

ฉันมักจะมีการอ้างอิง JavaScript สองรายการ JQuery ให้บริการจาก ajax.googleapis.com และไฟล์ master.js ที่ส่วนใหญ่มีตัวจัดการเหตุการณ์ในฟังก์ชัน $ (document). ready () จำเป็นสำหรับการเริ่มต้นหน้าเว็บหรือไม่

มีตัวเลือกที่พร้อมใช้งาน (ajax.googleapis.com, โดเมนที่ไม่มีเนื้อหาคงที่, ชื่อโฮสต์ดั้งเดิม) ที่จะให้บริการ JavaScript ของฉัน

คำตอบ:


5

ดังนั้นตอนนี้ฉันทะเลาะกัน ฉันไม่ชัดเจนว่า "จำเป็นสำหรับการเริ่มต้นหน้าเว็บ" หมายถึงอะไร

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

ตัวอย่างเช่นหากคุณไปที่http://www.weather.com/คุณจะเห็นว่าคนดี ๆ ตัดสินใจใช้เวทมนตร์ JavaScript เพื่อให้คำแนะนำสำหรับแบบฟอร์มการค้นหาสภาพอากาศ นั่นคือคำที่Enter Zip, City or Place (e.g. Disney World)ปรากฏในช่องใส่ข้อความ ขออภัยมีความล่าช้าเล็กน้อยเมื่อโหลดหน้าเว็บอย่างน้อยในตอนท้ายของฉัน ดังนั้นหากหน้านั้นช้าพอที่จะโหลดและคุณก็เร็วพอที่จะเริ่มพิมพ์ในการป้อนข้อความก่อนที่จาวาสคริปต์จะดำเนินการ - ซึ่งไม่ได้เป็นการยืด - การป้อนข้อมูลของคุณสามารถถูกทำให้ยุ่งเหยิงโดยจาวาสคริปต์ ข้อความในกล่องใส่

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

มีตัวเลือกที่พร้อมใช้งาน (ajax.googleapis.com, โดเมนที่ไม่มีเนื้อหาคงที่, ชื่อโฮสต์ดั้งเดิม) ที่จะให้บริการ JavaScript ของฉัน

ไม่สามารถตอบได้โดยไม่ทราบว่า JavaScript ทำอะไร นอกจากนี้เนื่องจาก bpeterson76 alludes ขึ้นอยู่กับสถานการณ์เฉพาะของเว็บไซต์ของคุณ คือหน้ามีขนาดใหญ่แค่ไหน? ความต้องการในการประชุมโฮสต์ของคุณดีแค่ไหน? โหลดไฟล์ CSS, รูปภาพ, ฯลฯ จำนวนเท่าไหร่? มีการโหลดทรัพยากรภายนอกจำนวนเท่าใด

นี่อาจเป็นการปรับให้เหมาะสมก่อนกำหนด


4

กฎ "สิ่งใด ๆ ที่จำเป็นก่อนที่หน้าจะเริ่มแสดงผลควรมาจากเซิร์ฟเวอร์เดียวกัน" โดยทั่วไปจะใช้กับคุณเซิร์ฟเวอร์หรือทรัพยากรขนาดเล็กอื่น ๆ - สถานการณ์ที่การค้นหา DNS อาจใช้เวลาเพียงเสี้ยววินาทีซึ่งสามารถเพิ่มขึ้นอย่างรวดเร็วหากวัตถุของคุณเต็มไปด้วยโดเมนจำนวนมาก ด้วยทรัพยากรสาธารณะทั่วไปเช่นแคช jQuery ของ Google และห้องสมุดอื่น ๆ มีโอกาสดีที่เบราว์เซอร์ของผู้เข้าชมของคุณได้ทำการค้นหา DNS แล้วในวันนี้ (เนื่องจากเว็บไซต์อื่นอ้างถึงเนื้อหาจากบริการนั้น) และอาจมีไฟล์ในแคชด้วยเช่นกัน จำเป็นต้องมีการถ่ายโอน (หรือถ้ามีการร้องขออาจเพียงแค่ตอบกลับสั้น ๆ ว่า "304 - ไม่ได้แก้ไข") แม้ว่าจะต้องมีการดาวน์โหลดแบบเต็มสำหรับวัตถุเครือข่ายการจัดส่งเนื้อหาของ Google จะเร็วขึ้นสำหรับผู้ใช้ส่วนใหญ่กว่าการดำเนินการขนาดเล็กของคุณ

กฎที่เกี่ยวข้องหนึ่งข้อ: วัตถุที่ไม่จำเป็นสำหรับการทำงานที่ถูกต้องของหน้าเว็บ (ตามที่ผู้ใช้เห็น) ควรเรียกว่าช้าที่สุดเท่าที่จะทำได้ในการตอบกลับ HTTP หลัก ตัวอย่างเช่นสคริปต์ที่จำเป็นสำหรับบริการโฆษณา / สถิติ (เช่น Google Analytics และ ilk) ให้เนื้อหาของคุณแก่ผู้ใช้โดยเร็วที่สุดจากนั้นโหลดสิ่งที่พื้นหลังที่คุณสนใจจริงๆเท่านั้น ฉันบล็อกบริการโฆษณา / สถิติสองรายการ (โดยการจับคู่กับ 127.0.0.1 ในไฟล์โฮสต์ของฉัน) เพราะพวกเขามักจะช้าเกินไปและเว็บไซต์ที่อ้างถึงพวกเขา แต่เนิ่นๆเพียงแค่ให้หน้าว่างในขณะที่สคริปต์รออยู่แทน หมายถึงพวกเขามาสายเพื่อให้ฉันสามารถอ่านเนื้อหาที่ฉันอยู่ที่นั่นในขณะที่สิ่งอื่น ๆ trundles พร้อมในพื้นหลัง

ประโยชน์ของโดเมนที่ไม่มีคุกกี้สำหรับเนื้อหาแบบสแตติกนั้นเป็นเรื่องของขนาด หากคุณมี ID เซสชัน 10 ไบต์หนึ่งรายการในคุกกี้และผู้เข้าชมหนึ่งหมื่นต่อวันที่ขอวัตถุคงที่ 20 ต่อการเยี่ยมชมหนึ่งครั้งคุณจะประหยัดแบนด์วิดท์ ~ 118Mbyte ต่อเดือนเท่านั้น (20 * 20 * 10000 * 31/1024/1024) หากในอีกทางหนึ่งเว็บไซต์ของคุณเก็บสิ่งหนึ่งหรือสอง Kbytes ไว้ในคุกกี้ความแตกต่างอาจมีความสำคัญมากกว่าโดยเฉพาะอย่างยิ่งหากผู้ใช้ของคุณเข้าถึงเว็บไซต์ผ่านการเชื่อมต่อที่ช้า (เช่น GPRS ผ่านการปล่อยสัญญาณไปยังมือถือหรือ ลิงก์ wifi แบบไร้สายในพื้นที่สัญญาณรบกวนสูง) หรือหากคุณได้รับการเข้าชมนับล้านครั้งต่อวัน

เพื่อสรุปสำหรับสคริปต์ที่ต้องโหลดก่อนที่หน้าจะสามารถแสดงผลการตั้งค่าของฉันจะเป็น:

  1. ajax.googleapis.com หรือที่คล้ายกัน
  2. ชื่อโฮสต์ดั้งเดิมของหน้าการโทร
  3. โดเมนคุกกี้น้อยแบบคงที่

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


With common public resources ... there is a good chance that your visitor's browser has already done that DNS lookup today โดยส่วนตัวแล้วฉันรู้สึกไม่สบายใจที่จะใช้สิ่งนี้กับเว็บไซต์ของฉัน ฉันต้องการให้เร็วที่สุดเท่าที่จะเป็นไปได้ในหลาย ๆ สถานการณ์ให้มากที่สุด ไม่ว่าคุณจะทำคะแนนที่ดี +1
George Marian

1

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

คำถามนี้ผ่านไปเรื่อย ๆ ที่ Stackoverflow และคำตอบข้างต้นดูเหมือนจะเป็นฉันทามติเสมอ แต่จากมุมมองที่สมจริงกำไรที่เกิดขึ้นจากการเป็นโฮสติ้งที่หนึ่งเทียบกับที่อื่น ๆ จะค่อนข้างน้อยในระยะยาว คุณจะได้รับประโยชน์มากขึ้นจากการลดขนาดการปรับให้เหมาะสมและลดการร้องขอ HTTP โดยรวมมากกว่าที่คุณจะพิจารณาในกรณีที่สิ่งต่าง ๆ ตั้งอยู่ในร่างกาย ในสถานการณ์ที่มันเริ่มมีความสำคัญ (ฉันทำงานที่มีหน้าโหลด 1.5+ ล้านครั้ง / วันดังนั้นการปรับปรุง 5k หมายถึง 5 กิ๊กในการประหยัดแบนด์วิดธ์ 5 กิ๊ก) มักจะมีทีมของผู้มีอำนาจตัดสินใจที่มอบหมายให้พิจารณาการตัดสินใจเหล่านี้

โดยส่วนตัวแล้วฉันมักจะโฮสต์ที่ Google ด้วยเหตุผลเดียวที่พวกเขาจะให้สำเนาที่เป็นปัจจุบันที่สุดของสิ่งที่ฉันกำลังมองหา


คุณโฮสต์ JavaScript ที่กำหนดเองของคุณอยู่ที่ไหน โดเมน cookieless คงที่หรือชื่อโฮสต์เดิม?
James Lawruk

สุจริตนอก Jquery (ส่วนใหญ่) ในบรรทัดมีจริงๆไม่มากที่ไม่สามารถเชื่อมโยงแบบไดนามิก ฉันมักจะเก็บ voodoo ให้น้อยที่สุดโดยใช้ core (หลัก) Jquery และ Jquery UI ด้วยข้อยกเว้นที่เป็นไปได้ของปลั๊กอิน DataTables ฉันเชื่อในแนวคิดของ Keep it simple (stupid) และจะไม่ใส่รหัสถ้ามันไม่เข้ากันได้ย้อนหลังซึ่งออกกฎตัวเลือกมากมาย ดังที่ฉันได้กล่าวไว้ข้างต้นการวางหนึ่งไฟล์ในโดเมนที่ไม่ใช่การปรุงไม่ใช่เรื่องใหญ่
bpeterson76

1

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

ดังนั้นทางออกที่ดีที่สุดคือการใช้ CDN ยอดนิยมเช่น ajax.googleapis.com เนื่องจากไม่มีคุกกี้ ผู้ใช้อาจทำการค้นหา DNS แล้วและอาจแคชทรัพยากร CDN นั้นเหมาะสำหรับความเร็วและอาจมีเซิร์ฟเวอร์ใกล้กับผู้ใช้ของคุณ

หาก CDN ไม่ใช่ตัวเลือกถ้าคุณมีคุกกี้จำนวนมากหรือมีทรัพยากรจำนวนมากให้ดาวน์โหลด (รูปภาพ ฯลฯ ) จากนั้นใช้โดเมนฟรีคุกกี้ (ต้องทำการค้นหา DNS เพียงครั้งเดียวเท่านั้น)

หากคุณมีทรัพยากรน้อย (เพียงไฟล์จาวาสคริปต์ที่กำหนดเอง) และคุกกี้เพียงไม่กี่รายการ (เพียงแค่ ID เซสชันเล็ก ๆ ) โฮสต์จากโดเมนเดียวกัน

แหล่งข้อมูลที่ดี:

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://developer.yahoo.com/performance/rules.html


1

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

  • การตรวจสอบแบบฟอร์ม
  • การนำทางที่ใช้ JavaScript (ไม่เหมาะอย่างยิ่งต่อไป)
  • หากเลย์เอาต์ขึ้นอยู่กับ JavaScript
  • หากใช้ JavaScript หรือไลบรารี่ (เช่น jQuery) สำหรับการแก้ไข DOM ที่สำคัญ

และแนวทางการปฏิบัติงาน YSlowของ Yahoo สำหรับการอ้างอิง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.