모든 자바 스크립트 포함을 이전으로 이동 </ body>

35

누구 아는 방법 젠토의 JS 스크립트 태그 등을 모두 가지고합니까 <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>닫는 전에 렌더링 </body>?

나는 이것을 전에 한 번 시도했지만 addJS 메소드의 라인을 따라 사용할 수없는 곳에서 참조 바닥 글에 있다고 생각되는 오류가 발생했습니다.

magento-1  performance  theme  layout  javascript 
— 마크 웨스턴
소스
4
소금 한 덩어리로 GTMetix와 YSlow의 추천을 받아보십시오. 이것에 투자하는 시간은 눈에 띄는 성능 향상을 가져 오지 않으며 거의 ​​확실하게 코드를 프로파일 링하거나 (지방을 줄임) 단순히 더 좋고 더 빠른 호스트를 찾는 데 더 좋습니다.
— Ben Lessani-Sonassi
1
@sonassi JMax의 답변을 구현하는 데 30 분이 걸리더라도 아무런 문제가되지 않으며 기본 테마에 포함될 수있는 프론트 엔드 성능 향상의 일부입니다.
— Glo
1
@Glo 우리는 모두 성능 향상을 위해 노력하고 있습니다. 그러나 이것이 얻을 수있는 "혜택"은 단순히 존재하지 않습니다. 첫 번째 페이지로드는 JS가로드 된 후 브라우저 캐시에서 제공되는 유일한 시간입니다. 초기로드를 차단하면 JS 제공보다 PHP 생성 속도가 느려질 수 있습니다. 그럼에도 불구하고 서버 이동 또는 사용자 라스트 마일 연결은 실제로 풀다운하는 데 걸리는 시간에 더 큰 역할을합니다.
— Ben Lessani-Sonassi
1
@sonassi 첫 방문 사용자는 곧 프라이밍 된 캐시를 가지므로 무시해야한다는 말과 같습니다. 물론 PHP 기능이 향상되어 프론트 엔드로서 자산 전달 속도를 높일 수있을뿐만 아니라 사용자의로드 시간을 인식하고 맨 아래에 스크립트를로드하는 방법에 대해 걱정해야합니다. 렌더링 차단을 방지하는 페이지는 해당 전략의 일부입니다. 최신 브라우저는 차단하지 않고 스크립트를 처리 할 수 ​​있지만 전자 상거래에서는 밀리 초 == ££라는 것을 알고 있습니다. 물론 이것은 일반적으로 스크립트 로더가있는 논점입니다.
— Glo
@Glo와 함께 사용하면 효율성 조정의 작은 부분이며 밤낮으로 차이를 만들지 않지만 무시해서는 안됩니다. 처음 방문자를 위해 화면에 컨텐츠를 빠르게 가져 오는 것이 중요합니다.
— STW

답변:

22

요청에 따라 다릅니다. 예를 들어, 마지막으로, 나는 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>

app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml에서 템플릿 파일을 생성하고 다음을 입력하십시오.

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

</body>태그 를 닫기 직전에 템플릿에 아래를 추가하십시오 .

<?php echo $this->getChildHtml('jsfooter') ?>
— 오 우즈 셀리 크데 미르
소스
확신하는 core/text_list이 addJs()방법을?
— Alex
당신은 맞습니다 @Alex, 나는 잘못했습니다, 미안합니다!
— Oğuz Çelikdemir
건배,이 작동합니다. 이 작업을 수행 한 후 실제로 말하고 싶었던 것은 JS 병합을 실행하면 병합 된 파일이 헤드에 추가되기 때문에 어쨌든 이것을 무시하지만 실제로 Magento는 내 테스트에서 수행 한 것입니다. 각 page / html_head 블록마다 하나씩 두 개의 병합 된 파일을 작성하고 바닥 글 js에 대한 병합 된 파일은 '</ body>'앞에 추가됩니다. 잠재적으로 유용합니다. jQuery.noConflict를 포함하지 않는 JS 병합 및 jQuery에 문제가 있습니다. 이제 '</ body>'전에 js를 작동시키는 JS 병합이 유용 할 수 있습니다.
— Mark Weston
20

태그 이동에는 두 가지 문제가 있습니다. 가장 큰 문제는 어떤 이유로 Magento가 프로토 타입에 의존하는 많은 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

마 젠토 1.x에서 이것은 바보의 심부름입니다. Magento의 템플릿 파일 전체에서 너무 많은 인라인 스크립트가 너무 많아서에서 핵심 JS 파일을 재배치하면 중단됩니다 <head>. 잠재적으로 Magento 2에서는이 상황이 변할 것이지만 Magento가 프로토 타입에서 멀어지면서 프로토 타입과 jQuery가 크게 늘어났습니다.

다른 스크립트의 경우 </body>요소 앞에 배치해야합니다 . Magento의 <action method="addJS|addItem">XML 을 무시 하고 각 스크립트에 대해 새 템플릿 파일을 만드는 데 도움이된다는 것을 알게되었습니다 . 여기에는 다음과 같은 일반 HTML 스크립트 참조가 포함됩니다.

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

그런 다음 다음과 같이이 템플릿 파일을 어디에나 포함시킬 수 있습니다 (그리고 여전히 순서를 제어하기 위해 전후에 사용).

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />
— 브렌든 팔 코프 스키
소스
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이벤트를 사용 하지만 현재 블록이 루트 블록 인 경우에만 조치를 취합니다. 즉, 옵저버가 더 자주 호출되지만 블록 캐싱을 어느 정도 활용해야합니다.

— 파비안 슈멩 글러
소스
Robertshaw 확장 프로그램은 OPC 카트의 결제 패널을 제외하고 사이트 전체에서 실제로 잘 작동합니다. 패널을 완전히 비 웁니다. 결제 게이트웨이 유효성 검사 스크립트라고 생각합니다. 닫는 </body>태그 바로 앞에 모든 것을 맨 아래로 이동 합니다.
— Fiasco Labs
2

자바 스크립트 (및 CSS)를 최적화하고 Google pagespeed 통계 순위를 개선하는 데 도움이되는 mediarox pagespeed 모듈을 적극 권장합니다.

Magento의 html 출력을 구문 분석 한 다음 코드에서 잘라 내기 및 붙여 넣기 작업을 수행하여 javascript를 html 코드의 맨 아래로 이동합니다. 프로세스는 빠르지 만 HTML 변경 사항을 캐시하기 위해 전체 페이지 캐시와 함께 사용하는 것이 가장 좋습니다.

이 모듈의 작동 방식에 대한 자세한 정보는 페이지 속도 순위를 개선하는 데 도움이 될 수 있습니다.

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

— 파즈
소스
-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-그게 다야!

— 마르시오 메이 엘
소스
-2

이 다른 스크립트 (product / list.phtml)의 문제로 인해 <script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> 내 페이지 끝에서 일부 JS를 이동해야했습니다.

위에 표시된 내용을 만들 수 없었으므로 달성 할 수있는 다른 방법을 찾았습니다.

Mage/page/Block/Html/Footer.php controller에서와 동일한 경로로 다시 작성 하여 를 재정의합니다 app/local folder.

존재하지 않는 경우 생성 할 전체 경로는 다음과 같습니다.

app / local / Mage / page / Block / Html / Footer.php

이 파일에는 Magento의 코어와 같은 폴더 (예 : Mage / page / Block / Html / Head.php)에있는 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)
{...}

그런 다음 내 사용자 정의 (내 테마의 하나) page / html / footer.phtml에 대한 호출을 추가하십시오.

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

마지막으로 이제 모든 레이아웃에서 JS를 호출하여 바닥 글에 JS를 추가 할 수 있습니다. 

<action method="addJs"><script>yourscript.js</script></action>
— twi_cy
소스
흥미로운 접근 방식이지만 Magento 아키텍처에는 매우 잘못된 접근 방식입니다.
— benmarks
— Pratik
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.