Di chuyển tất cả Javascript bao gồm trước </ body>

35

Có ai biết làm thế nào để có tất cả các thẻ script JS của Magento, ví dụ như được <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>hiển thị trước khi kết thúc </body>không?

Tôi đã thử điều này một lần trước đây, nhưng tôi đã gặp một lỗi mà tôi nghĩ là dọc theo dòng của phương thức addJS không có sẵn ở nơi tôi đã sử dụng nó, có thể là ở chân trang tham chiếu.

— Mark Weston
nguồn

4

Thực hiện khuyến nghị của GTMetix và YSlow với một chút muối. Thời gian bạn dành để đầu tư vào việc này sẽ không tạo ra sự gia tăng đáng chú ý về hiệu suất và gần như chắc chắn sẽ tốt hơn dành cho việc cấu hình mã của bạn (tước mỡ) hoặc đơn giản là tìm một máy chủ tốt hơn / nhanh hơn.

— Ben Lessani - Sonassi

1

@sonassi Mặc dù là một điểm hợp lệ, mất nửa giờ để thực hiện câu trả lời của JMax sẽ không gây hại gì và là một phần của lựa chọn cải tiến hiệu suất mặt trước có thể được đưa vào chủ đề cơ bản.

— Glo

1

@Glo Tất cả chúng ta đều cải tiến hiệu suất. Nhưng "lợi ích" này sẽ mang lại đơn giản là không tồn tại. Tải trang đầu tiên là lần duy nhất JS sẽ được tải và sau đó được phục vụ từ bộ đệm của trình duyệt. Chặn tải ban đầu có nhiều khả năng tạo chậm PHP hơn so với phân phối JS; và thậm chí, quá trình máy chủ hoặc kết nối hàng dặm của người dùng sẽ đóng vai trò lớn hơn trong thời gian thực sự kéo xuống.

— Ben Lessani - Sonassi

1

@sonassi Điều đó giống như nói rằng bạn nên bỏ qua người dùng truy cập đầu tiên vì họ sẽ sớm có bộ đệm được mồi. Tất nhiên, có những cải tiến PHP có thể và nên được thực hiện, nhưng với tư cách là người đi trước, công việc của tôi là lo lắng về việc làm thế nào tôi không chỉ có thể tăng tốc độ phân phối tài sản mà còn nhận thấy thời gian tải cho người dùng và tải tập lệnh ở cuối trang để ngăn chặn kết xuất đồ họa là một phần của chiến lược đó. Các trình duyệt hiện đại có thể xử lý các tập lệnh mà không chặn nhưng bạn biết cũng như tôi rằng mili giây == $$ trong thương mại điện tử. Tất nhiên, đây thường là một điểm cần thiết với trình tải tập lệnh.

— Glo

Tôi với @Glo, đây là một phần nhỏ của việc điều chỉnh hiệu quả và có thể không tạo ra sự khác biệt giữa ngày và đêm, nhưng không nên bỏ qua. Nhận nội dung trên màn hình nhanh chóng cho khách truy cập lần đầu rất quan trọng.

— STW

22

Nó phụ thuộc vào yêu cầu của bạn. Chẳng hạn, cuối cùng, tôi đã bị xóa tất cả các tập lệnh Prototype khỏi Homepagecửa hàng Magento mà tôi không gặp phải bất kỳ vấn đề nào. Nhưng như tôi đã nói, nó phụ thuộc vào chủ đề, tiện ích mở rộng của bạn, v.v.

Để di chuyển tập lệnh:

Tìm dòng sau trong page.xmlchủ đề của bạn

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

Và chèn vào sau đây ngay trước:

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

Đối với Magento 1.9, hãy sử dụng điều này:

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

Tạo tệp mẫu trong ứng dụng / thiết kế / frontend / [gói] / [theme] /template/page/html/jsfooter.phtml và đặt như sau

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

Thêm bên dưới trong mẫu của bạn ngay trước khi đóng </body>thẻ.

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

— Ouz Çelikdemir
nguồn

bạn có chắc chắn core/text_listcó một addJs()phương pháp?

— Alex

bạn nói đúng @Alex, tôi đã nhầm, xin lỗi về điều đó!

— Oğuz elikdemir

Chúc mừng người đàn ông, điều này làm việc. Điều tôi thực sự mong đợi để nói sau khi làm việc này là khi bạn chạy hợp nhất JS, nó sẽ phủ nhận điều này bởi vì tệp đã hợp nhất sau đó được gắn vào đầu, nhưng thực ra, những gì Magento dường như đã làm trong thử nghiệm của tôi là tạo hai tệp được hợp nhất, một cho mỗi trang / khối html_head và tệp được hợp nhất cho chân trang js được nối trước '</ body>'. Điều đó có khả năng hữu ích. Tôi đã gặp một số vấn đề với việc hợp nhất JS và jQuery mà không bao gồm jQuery.noConflict. Bây giờ tôi đã hợp nhất JS làm việc với js trước khi '</ body>' có thể hữu ích.

— Đánh dấu Weston

20

Có hai vấn đề với việc di chuyển thẻ. Vấn đề lớn nhất là vì một số lý do, Magento tiêm rất nhiều JS phụ thuộc trực tiếp vào nguyên mẫu vào <body/>thẻ. Di chuyển các tập lệnh đến cuối tài liệu (mặc dù tốt cho thời gian tải), sẽ phá vỡ rất nhiều trang trong Magento.

Vấn đề khác là thực sự làm điều đó. Dường như không có <move />thẻ, hoặc chức năng tương tự. Những gì tôi đã làm cho các tập lệnh tùy chỉnh mà tôi đã tạo là thêm các tập lệnh như thế này. Nó là dư thừa hơn, nhưng nó hoạt động:

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

— Joseph tại SwiftOtter
nguồn

Đã đánh dấu @ Oğuz elikdemir chính xác vì anh ta đã cung cấp câu trả lời chi tiết hơn, nhưng về cơ bản, bạn đã đưa ra câu trả lời tương tự vì vậy cảm ơn rất nhiều vì nó hoạt động.

— Mark Weston

2

Vì một số lý do là bạn đang sử dụng một khung javascript, trên thực tế, một số. Họ phải cư trú sớm để hiển thị trang thích hợp. Có nhiều lý do để bao gồm các javascripts trước khi kết thúc cơ thể. Nếu bạn không hiểu điều này và đang mù quáng đẩy tất cả xuống đáy, bạn đang tham gia vào chương trình sùng bái hàng hóa. Thiết lập một nhà kho nhỏ với một đài phát thanh giả và tai nghe được thực hiện rất nhiều với Magento và đôi khi bởi những người được cho là nhà phát triển web có kinh nghiệm. Một số thứ thuộc về chính xác nơi nó được đặt.

— Phòng thí nghiệm Fiasco

15

Trong Magento 1.x đây là một việc vặt. Đơn giản là có quá nhiều tập lệnh nội tuyến nằm rải rác trong các tệp mẫu trong Magento sẽ bị hỏng nếu bạn di chuyển các tệp JS cốt lõi từ <head>. Có khả năng trong Magento 2, tình huống này sẽ thay đổi nhưng nó đang đứng trên Prototype và jQuery khi Magento di chuyển khỏi Prototype.

Đối với các tập lệnh khác, bạn nên đặt chúng trước </body>phần tử. Tôi thấy hữu ích khi bỏ qua <action method="addJS|addItem">XML của Magento và chỉ cần tạo một tệp mẫu mới cho mỗi tập lệnh, bao gồm một tham chiếu tập lệnh HTML đơn giản như:

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

Sau đó, bạn có thể nhúng tệp mẫu này ở bất cứ đâu (và vẫn sử dụng trước / sau để kiểm soát thứ tự) như vậy:

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

— Brendan Falkowski
nguồn

6

Di chuyển JavaScript bên ngoài xuống phía dưới là không đủ trong hầu hết các trường hợp. Nếu bạn sử dụng bất kỳ mẫu nào có JavaScript nội tuyến, như trong các chủ đề mặc định, bạn sẽ cần trì hoãn việc thực hiện các mẫu này cho đến khi tất cả các phụ thuộc (mẫu.js, varien.js, ...) được tải.

Một cách tiếp cận là trích xuất tất cả các <script>phần tử nội tuyến từ các khối được kết xuất bằng cách sử dụng trình quan sát http_response_send_beforevà di chuyển chúng đến cuối ngay sau các tập lệnh bên ngoài. Trong khi bạn đang ở đó, bạn có thể di chuyển tất cả các yếu tố tập lệnh, không chỉ nội tuyến. Điều này giúp bạn tránh những rắc rối khi di chuyển chúng thông qua mô hình bố trí, điều mà Magento rõ ràng không có ý định.

Tom Robertshaw đã tạo một tiện ích mở rộng thực hiện chính xác điều này, với một người quan sát duy nhất thay đổi HTML phản hồi bằng các biểu thức thông thường: https://github.com/bobbyshaw/magento-footer-js

Anh ta sử dụng core_block_abstract_to_html_aftersự kiện nhưng chỉ thực hiện hành động nếu khối hiện tại là khối gốc. Điều này có nghĩa, người quan sát được gọi thường xuyên hơn, nhưng nó nên tận dụng bộ nhớ đệm khối ở một mức độ nào đó.

— Fabian Schmengler
nguồn

Tiện ích mở rộng Robertshaw hoạt động thực sự tốt trên toàn bộ trang web, ngoại trừ trên bảng thanh toán của giỏ hàng OPC. Hoàn toàn làm trống bảng điều khiển. Tôi nghĩ đó là kịch bản xác thực Cổng thanh toán. Nó di chuyển mọi thứ xuống phía dưới ngay trước </body>thẻ đóng .

— Phòng thí nghiệm Fiasco

2

Tôi đặc biệt khuyên dùng mô-đun trang tốc độ trung bình để giúp bạn tối ưu hóa javascript (và css) của bạn và cải thiện thứ hạng cái nhìn sâu sắc của trang google.

Nó hoạt động bằng cách phân tích cú pháp đầu ra html bằng Magento và sau đó thực hiện hành động cắt và dán vào mã để di chuyển javascript xuống dưới cùng của mã html. Quá trình này nhanh nhưng được sử dụng tốt nhất kết hợp với bộ đệm toàn trang để lưu các thay đổi html.

Thông tin thêm về cách mô-đun này hoạt động và có thể giúp bạn cải thiện thứ hạng trang ở đây:

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

— đồ ngủ
nguồn

-1

Đối với Magento v1.6 + (cần thử nghiệm trong các phiên bản cũ hơn);

1 - tạo một tệp mẫu page/html/footer/extras.phtmlvới nội dung này:

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

2 - Thêm nút html này vào bố cục xml của bạn:

<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 - Thế thôi!

— Marcio Maciel
nguồn

-2

Do một vấn đề với tập lệnh khác này (trong sản phẩm / list.phtml), <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> tôi đã phải di chuyển một số JS ở cuối trang của mình.

Tôi không thể làm cho những gì được chỉ ra ở trên hoạt động vì vậy tôi tìm một cách khác để đạt được:

Tôi ghi đè lên Mage/page/Block/Html/Footer.php controllerbằng cách tạo lại nó với cùng một đường dẫn trong app/local folder.

Đây là đường dẫn đầy đủ sẽ được tạo nếu không tồn tại:

ứng dụng / cục bộ / Pháp sư / trang / Chặn / Html / Footer.php

Trong tệp này, tôi thêm các hàm từ Head.php có thể được tìm thấy trong cùng thư mục lõi của Magento (tức là Mage / page / Block / Html / Head.php).

Các chức năng bạn cần để làm cho nó hoạt động (rõ ràng là chức năng đầy đủ, ở đây tôi chỉ cho biết tên vẫn ngắn gọn):

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)
{...}

Sau đó, tôi thêm vào trang tùy chỉnh của mình (trang trong chủ đề của tôi) / html / footer.phtml cuộc gọi cho việc này:

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

Cuối cùng, bây giờ tôi có thể thêm JS vào chân trang của mình bằng cách gọi nó trong bất kỳ bố cục nào bằng cách

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

— twi_cy
nguồn

Cách tiếp cận thú vị, nhưng đây là một cách tiếp cận rất, rất không chính xác cho kiến trúc Magento.

— đánh dấu

github.com/pratikmage/magento-defer-javascript

— Pratik