วิธีที่ดีที่สุดในการโหลด Javascript ลงในหน้าเพื่อเพิ่มประสิทธิภาพคืออะไร

มีวิธีโหลด JavaScript ของฉันลงในหน้าเว็บที่จะทำให้โหลดเร็วขึ้นหรือไม่

มีบางสิ่งที่คุณสามารถทำได้:

1. โหลด HTML และ CSS ก่อนจาวาสคริปต์ สิ่งนี้จะทำให้เบราว์เซอร์ทุกอย่างที่จำเป็นต้องใช้ในการจัดหน้าและแสดงผล สิ่งนี้ทำให้ผู้ใช้รู้สึกว่าหน้าเว็บนั้นเร็ว วางแท็กสคริปต์หรือบล็อกให้ใกล้เคียงกับแท็กเนื้อหาปิดที่สุด

2. พิจารณาใช้ CDN หากคุณใช้ไลบรารี่ยอดนิยมอย่าง JQuery หลาย บริษัท (เช่น google, yahoo) จะใช้งาน CDN ฟรีที่คุณสามารถใช้โหลดไลบรารี่ได้

3. โหลดโค้ดจากไฟล์ภายนอกแทนสคริปต์ฝังตัว นี่เป็นการเปิดโอกาสให้เบราว์เซอร์แคชเนื้อหา JS และไม่ต้องโหลดเลย การโหลดหน้าต่อเนื่องจะเร็วขึ้น

4. เปิดการบีบอัด zip บนเว็บเซิร์ฟเวอร์

Yahoo มีหน้าคำแนะนำที่ยอดเยี่ยมที่สามารถช่วยลดเวลาในการโหลดหน้าเว็บ

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

มีหลายวิธีในการทำนี่เป็นวิธีที่ฉันชอบ

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

วางสิ่งนี้ไว้ก่อนแท็กเนื้อความการปิดและใช้ AttachScript เพื่อโหลดทุกไฟล์ js
ดูข้อมูลเพิ่มเติมได้ที่นี่http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

คุณอาจต้องการดูวิธีที่ Google โหลด Analytics ด้วย:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

เนื่องจากถือว่าเป็นสคริปต์ประเภท "แนวปฏิบัติที่ดีที่สุด":
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

สองสามคนของ Google ประกาศโครงการที่มาเปิดใหม่ที่ความเร็ว 2010เรียกว่าDiffable Diffable ทำเวทย์มนตร์เพื่อเพิ่มส่วนเฉพาะของ JS, HTML และ CSS ซึ่งมีการเปลี่ยนแปลงตั้งแต่รุ่นที่เก็บไว้ในแคชของผู้ใช้แทนที่จะส่งไฟล์ใหม่ทั้งหมดเมื่อมีการเปิดตัวเวอร์ชั่นใหม่

เทคนิคนี้เจ๋งมากและในปัจจุบันมีประสิทธิภาพมากที่สุด (และคุ้มค่ากับความพยายาม) ในเว็บไซต์ที่คุณใช้ฐานรหัส JavaScript ขนาดใหญ่ที่มีการเปลี่ยนแปลงรหัสบ่อยๆ สิ่งนี้ใช้ได้ดีกับแอปพลิเคชันเช่น Google แผนที่ซึ่งมีรุ่นอย่างน้อยหนึ่งครั้งทุกวันอังคารและมีค่าเฉลี่ยประมาณ 100 รุ่นใหม่ต่อปี นอกจากนี้ยังมีเหตุผลโดยทั่วไปเมื่อที่จัดเก็บในตัว HTML5 กลายเป็นที่แพร่หลายมากขึ้น

BTW ถ้าคุณยังไม่เห็นพูดคุยไมเคิลโจนส์ของ Google เกี่ยวกับการเปลี่ยนแปลง (ในบริบทเชิงพื้นที่) ก็คุ้มค่าดูทั้งหมดของเขาปราศรัยใน GeoWeb 2009

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

ฉันได้เพิ่มคำถามไปยัง StackOverflow ฉันจะเพิ่มเนื้อหาที่นี่เช่นกัน

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

ตอนแรกสคริปต์พวกเขามีลักษณะเช่นนี้:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles อยู่ที่นี่แค่วัตถุที่เก็บ url ทั้งหมดสำหรับไฟล์ทั้งหมด

ฉันได้ทำการทดสอบ 3 ครั้งนี่คือผลลัพธ์:

ตั้งค่าปกติ

นี่เป็นเพียงการตั้งค่าปกติเรามี 4 ไฟล์ css ในส่วนหัวและ 3 ไฟล์ css ที่ด้านล่างของหน้า

ตอนนี้ฉันไม่เห็นสิ่งใดปิดกั้น สิ่งที่ฉันเห็นมันคือทุกอย่างกำลังโหลดพร้อมกัน

ไม่ใช่การปิดกั้น JS

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

ทุกอย่างไม่ปิดกั้น

ในที่สุดฉันก็ทำการทดสอบว่าไฟล์ภายนอกทั้งหมดถูกโหลดด้วยวิธีที่ไม่มีการบล็อก ตอนนี้ฉันไม่เห็นความแตกต่างกับวิธีแรกของเรา พวกเขาทั้งสองดูเหมือนกัน

ข้อสรุป

ข้อสรุปของฉันคือไฟล์ถูกโหลดในลักษณะที่ไม่มีการปิดกั้นฉันไม่เห็นความจำเป็นในการเพิ่มสคริปต์พิเศษ

หรือฉันกำลังพลาดบางสิ่งที่นี่

มากกว่า:

• บทความ: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• คำถาม: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-bodyคำถาม:
• คำถาม: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
• รหัส: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• รหัส: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/