ย้าย Javascript ทั้งหมดรวมถึงก่อนหน้า </body>

35

ไม่มีใครรู้วิธีการมีแท็กสคริปต์ JS ของ Magento ทั้งหมดเช่น<script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>แสดงออกก่อนปิด</body>?

ฉันเคยลองครั้งนี้มาก่อน แต่ฉันได้รับข้อผิดพลาดซึ่งฉันคิดว่าเป็นไปตามแนวของวิธีการ addJS ที่ไม่สามารถใช้งานได้เมื่อฉันใช้มันอาจเป็นส่วนท้ายในการอ้างอิง

— มาร์คเวสตัน
แหล่งที่มา

4

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

— Ben Lessani - Sonassi

1

@sonassi ในขณะที่จุดที่ถูกต้องใช้เวลาครึ่งชั่วโมงในการใช้คำตอบของ JMax จะไม่ทำร้ายอะไรและเป็นส่วนหนึ่งของการปรับปรุงประสิทธิภาพการทำงานของ front-end ที่สามารถรวมอยู่ในชุดรูปแบบพื้นฐาน

— Glo

1

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

— Ben Lessani - Sonassi

1

@sonassi นั่นก็เหมือนกับการบอกว่าคุณควรเพิกเฉยต่อผู้ใช้ครั้งแรกเพราะพวกเขาจะมีแคชที่เตรียมไว้ในไม่ช้า แน่นอนว่ามีการปรับปรุง PHP ที่สามารถและควรดำเนินการ แต่ในฐานะที่เป็น front-ender มันเป็นงานของฉันที่จะต้องกังวลว่าฉันจะไม่เพียงเพิ่มความเร็วในการส่งมอบสินทรัพย์ แต่ยังรับรู้ความเร็วในการโหลดสำหรับผู้ใช้และสคริปต์โหลดที่ด้านล่างของ หน้าเพื่อป้องกันการบล็อกการแสดงผลเป็นส่วนหนึ่งของกลยุทธ์นั้น เบราว์เซอร์สมัยใหม่สามารถจัดการสคริปต์ได้โดยไม่ปิดกั้น แต่คุณก็รู้เช่นกันว่าฉันเป็นมิลลิวินาที == ££ในอีคอมเมิร์ซ แน่นอนว่านี่เป็นจุดที่สงสัยด้วยตัวตักสคริปต์

— Glo

ฉันใช้ @Glo เป็นส่วนหนึ่งของการปรับแต่งประสิทธิภาพและอาจไม่สร้างความแตกต่างทั้งกลางวันและกลางคืน แต่ไม่ควรมองข้าม การรับเนื้อหาบนหน้าจออย่างรวดเร็วสำหรับผู้เข้าชมครั้งแรกเป็นสิ่งสำคัญ

— STW

22

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

ในการย้ายสคริปต์:

ค้นหาบรรทัดต่อไปนี้ในpage.xmlธีมของคุณ

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

และใส่ต่อไปนี้ก่อน:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
   <action method="addJs"><script>your_script.js</script></action>
</block>

สำหรับ Magento 1.9 ให้ใช้สิ่งนี้:

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

สร้างไฟล์เทมเพลตในแอพ / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml และใส่ต่อไปนี้

<?php echo $this->getCssJsHtml() ?>

เพิ่มด้านล่างในเทมเพลตของคุณก่อนปิด</body>แท็ก

<?php echo $this->getChildHtml('jsfooter') ?>

— OğuzÇelikdemir
แหล่งที่มา

คุณแน่ใจหรือว่าcore/text_listมีaddJs()วิธี?

— Alex

คุณถูก @Alex ฉันเข้าใจผิดขอโทษด้วย!

— OğuzÇelikdemir

ชายไชโยงานนี้ สิ่งที่ฉันคาดหวังว่าจะต้องพูดหลังจากทำงานนี้คือเมื่อคุณมีการรวม JS ทำงานมันจะลบล้างต่อไปนี้เพราะไฟล์ที่ผสานแล้วจะถูกผนวกเข้ากับหัว แต่จริงๆแล้วสิ่งที่ Magento ดูเหมือนจะทำในการทดสอบของฉันคือ สร้างไฟล์ที่รวมสองไฟล์หนึ่งไฟล์สำหรับแต่ละหน้า / html_head block และไฟล์ที่รวมสำหรับส่วนท้าย js จะถูกต่อท้ายก่อน '</body>' นั่นอาจเป็นประโยชน์ ฉันมีปัญหาบางอย่างกับการรวม JS และ jQuery ซึ่งไม่รวมถึง jQuery.noConflict ตอนนี้ฉันมีการรวม JS ทำงานกับ js ก่อน '</body>' อาจมีประโยชน์

— Mark Weston

20

มีสองปัญหาในการย้ายแท็ก ปัญหาที่ยิ่งใหญ่ที่สุดคือด้วยเหตุผลบางอย่างที่วีโอไอพีทำการฉีด JS จำนวนมากซึ่งขึ้นอยู่กับต้นแบบโดยตรงลงใน<body/>แท็ก การย้ายสคริปต์ไปยังจุดสิ้นสุดของเอกสาร (แม้ว่าจะดีสำหรับเวลาในการโหลด) จะทำให้หน้าเว็บใน Magento แตกเป็นจำนวนมาก

ปัญหาอื่นกำลังทำอยู่ ดูเหมือนจะไม่มี<move />แท็กหรือฟังก์ชันการทำงานที่คล้ายกัน สิ่งที่ฉันทำสำหรับสคริปต์ที่กำหนดเองที่ฉันสร้างขึ้นคือการเพิ่มสคริปต์เช่นนี้ ซ้ำซ้อนมากขึ้น แต่ใช้งานได้:

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>

— โจเซฟที่ SwiftOtter
แหล่งที่มา

ทำเครื่องหมาย @ OğuzÇelikdemirให้ถูกต้องเพราะเขาให้คำตอบที่ละเอียดกว่าซึ่งใช้งานได้ แต่โดยทั่วไปคุณให้คำตอบเดียวกันดังนั้นขอบคุณมากที่ใช้งานได้

— Mark Weston

2

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

— Fiasco Labs

15

ใน Magento 1.x นี่เป็นธุระของคนโง่ มีสคริปต์แบบอินไลน์เพียงมากเกินไปเกลื่อนไปทั่วแฟ้มแม่แบบในวีโอไอพีที่จะทำลายถ้าคุณย้ายไฟล์ JS <head>หลักจากที่มี อาจเกิดขึ้นใน Magento 2 สถานการณ์นี้จะเปลี่ยนแปลง แต่มันคร่อมต้นแบบและ jQuery เป็น Magento โยกย้ายออกไปจากต้นแบบ

สำหรับสคริปต์อื่น ๆ คุณควรวางสคริปต์เหล่านั้นไว้</body>ด้านหน้าองค์ประกอบ ฉันพบว่ามีประโยชน์ในการเพิกเฉย<action method="addJS|addItem">XML ของ Magento และเพียงสร้างไฟล์เทมเพลตใหม่สำหรับแต่ละสคริปต์ซึ่งรวมถึงการอ้างอิงสคริปต์ HTML แบบธรรมดาเช่น:

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

จากนั้นคุณสามารถฝังไฟล์เทมเพลตนี้ได้ทุกที่ (และยังคงใช้ก่อน / หลังเพื่อควบคุมคำสั่งซื้อ) ดังนี้:

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />

— Brendan Falkowski
แหล่งที่มา

6

ในกรณีส่วนใหญ่การย้าย JavaScript ภายนอกไปที่ด้านล่างนั้นไม่เพียงพอ หากคุณใช้เทมเพลตใด ๆ ที่มี JavaScript แบบอินไลน์เช่นเดียวกับในธีมเริ่มต้นคุณจะต้องชะลอการเรียกใช้สิ่งเหล่านี้จนกว่าการอ้างอิงทั้งหมด (prototype.js, varien.js, ... ) จะถูกโหลด

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

Tom Robertshaw สร้างส่วนขยายที่ทำสิ่งนี้โดยผู้สังเกตการณ์คนเดียวที่เปลี่ยนการตอบสนอง HTML โดยใช้นิพจน์ทั่วไป: https://github.com/bobbyshaw/magento-footer-js

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

— เฟเบียน Schmengler
แหล่งที่มา

ส่วนขยาย Robertshaw ทำงานได้ดีทั่วทั้งไซต์ยกเว้นในแผงการชำระเงินของรถเข็น OPC ช่องว่างแผงทั้งหมด ฉันคิดว่าเป็นสคริปต์การตรวจสอบความถูกต้องของเกตเวย์การชำระเงิน มันย้ายทุกอย่างไปที่ด้านล่างก่อน</body>แท็กปิด

— Fiasco Labs

2

ฉันขอแนะนำโมดูล mediarox pagespeed เพื่อช่วยให้คุณเพิ่มประสิทธิภาพ javascript (และ css) ของคุณและปรับปรุงการจัดอันดับข้อมูลเชิงลึกของ google pagespeed

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

ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโมดูลนี้และสามารถช่วยคุณปรับปรุงอันดับหน้าเพจได้ที่นี่:

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

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

-1

สำหรับ Magento v1.6 + (จำเป็นต้องทดสอบในเวอร์ชั่นที่เก่ากว่า);

1 - สร้างไฟล์เทมเพลตpage/html/footer/extras.phtmlด้วยเนื้อหานี้:

<?php echo $this->getCssJsHtml() ?>

2 - เพิ่มโหนด html นี้ลงในเค้าโครง xml ของคุณ:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - นั่นแหละ!

— Marcio Maciel
แหล่งที่มา

-2

เนื่องจากปัญหากับสคริปต์อื่นนี้ (ใน product / list.phtml) <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> ฉันต้องย้าย JS บางส่วนที่ส่วนท้ายของหน้าของฉัน

ฉันไม่สามารถทำสิ่งที่ระบุไว้ข้างต้นได้ดังนั้นฉันจึงหาวิธีอื่นในการบรรลุ:

ฉันแทนที่ด้วยการสร้างมันด้วยเส้นทางเดียวกันในMage/page/Block/Html/Footer.php controllerapp/local folder

นี่คือเส้นทางแบบเต็มที่จะสร้างหากไม่มี:

แอป / ท้องถิ่น / Mage / หน้า / บล็อก / html / footer.php

ในไฟล์นี้ฉันเพิ่มฟังก์ชั่นจาก Head.php ซึ่งสามารถพบได้ในโฟลเดอร์เดียวกับแกนหลักของ Magento (เช่น Mage / หน้า / บล็อก / Html / Head.php)

ฟังก์ชั่นที่คุณต้องทำให้มันใช้งานได้ (เห็นได้ชัดว่าฟังก์ชั่นเต็มรูปแบบที่นี่ฉันแค่ระบุชื่อให้กระชับ):

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

จากนั้นฉันจะเพิ่มไปยังที่กำหนดเองของฉัน (หนึ่งในชุดรูปแบบของฉัน) หน้า / html / footer.phtml สายนี้:

<?php echo $this->getCssJsHtml() ?>

ในตอนท้ายฉันสามารถเพิ่ม JS ในส่วนท้ายของฉันโดยเรียกมันในรูปแบบใด ๆ โดย

<action method="addJs"><script>yourscript.js</script></action>

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

วิธีการที่น่าสนใจ แต่นี่เป็นวิธีที่ไม่ถูกต้องสำหรับสถาปัตยกรรมวีโอไอพี

— benmarks

github.com/pratikmage/magento-defer-javascript

— Pratik