최근에 웹 사이트 속도 향상을위한 Yahoo 선언문 Best Practices를 읽었 습니다 . 가능한 경우 HTML 코드 하단에 JavaScript 포함을 넣을 것을 권장합니다.
하지만 정확히 언제 어디서?
닫기 전 </html>또는 후에 넣어야 합니까? 그리고 무엇보다도 언제 <head>섹션에 넣어야 할까요?
최근에 웹 사이트 속도 향상을위한 Yahoo 선언문 Best Practices를 읽었 습니다 . 가능한 경우 HTML 코드 하단에 JavaScript 포함을 넣을 것을 권장합니다.
하지만 정확히 언제 어디서?
닫기 전 </html>또는 후에 넣어야 합니까? 그리고 무엇보다도 언제 <head>섹션에 넣어야 할까요?
답변:
눈에 잘 띄지 않는 스크립트에는 두 가지 가능성이 있습니다.
</body></html>)두 번째 방법은 원래 Yahoo 연구에서 일부 브라우저가 스크립트 태그에 도달 할 때 스크립트 파일을로드하려고하므로 완료 될 때까지 페이지의 나머지 부분을로드하지 않는 것으로 나타났기 때문에 더 빠를 수 있습니다. 그러나 스크립트에 DOM이 준비 되 자마자 실행되어야하는 '준비'부분이있는 경우이를 머리에 넣어야 할 수 있습니다. 또 다른 문제는 레이아웃입니다. 스크립트가 가능한 한 빨리로드하려는 페이지 레이아웃을 변경하여 페이지가 사용자 앞에서 다시 그리는 데 오랜 시간을 소비하지 않도록합니다.
외부 스크립트 사이트가 다른 도메인 (예 : 외부 위젯)에있는 경우 페이지로드 지연을 방지하기 위해 하단에 배치하는 것이 좋습니다.
성능 문제에 대해 자체 벤치 마크를 수행하십시오 . 연구가 수행 될 때 한 번에 사실 일 수있는 것은 자체 로컬 설정 또는 브라우저 변경으로 변경 될 수 있습니다.
너무 잘려서 건조하지 않습니다. Yahoo는 닫는 </body>태그 바로 앞에 스크립트를 배치 할 것을 권장 합니다. 그러면 페이지가 빈 캐시에 더 빨리로드된다는 착각이 생깁니다 (스크립트가 문서의 나머지 부분을 다운로드하는 것을 차단하지 않기 때문입니다). 그러나 페이지로드시 실행하려는 코드가있는 경우 전체 페이지가로드 된 후에 만 실행이 시작됩니다. <head>태그에 스크립트를 넣으면 이전에 실행되기 시작하므로 프라이밍 된 캐시에서 페이지가 실제로 더 빨리로드되는 것처럼 보입니다.
또한 페이지 하단에 스크립트를 넣는 권한이 항상있는 것은 아닙니다. 라이브러리 또는 이전에로드 된 다른 자바 스크립트 코드에 의존하는 인라인 스크립트를 뷰에 포함해야하는 경우 해당 종속성을 <head>태그 에로드해야합니다 .
Yahoo의 모든 권장 사항은 흥미롭지 만 항상 적용 가능한 것은 아니므로 사례별로 고려해야합니다.
<script>태그는 눈에 거슬리는 자바 스크립트를 의미하지 않습니다.
<script>태그는 마크 업과 분리되어 있으며 인터페이스를 향상시키는 코드와 함께 사용할 수 있지만 필수는 아닙니다. 따라서 인라인 <script>태그 에 대해 본질적으로 눈에 띄는 것은 없습니다 .
<script>태그를 사용하여 해당 값을 JavaScript 변수로 인코딩 할 수 있습니다. 인라인 편집 또는 기타 유사한 동작.
다른 사람들이 말했듯이 닫는 본문 html 태그 앞에 배치하십시오 .
다른 날 우리는 고객들로부터 그들의 사이트가 매우 느리다고 불평하는 수많은 전화를 받았습니다. 우리는 지역을 방문하여 한 페이지를로드하는 데 20-30 초가 걸린다는 것을 알았습니다. 서버의 성능이 나쁘다고 생각하고 로그온했지만 웹 서버와 SQL 서버는 모두 ~ 0 % 활동이었습니다.
몇 분 후, 자바 스크립트 추적 태그를 위해 연결하는 외부 사이트가 다운되었음을 알게되었습니다. 이것은 브라우저가 사이트 의 헤드 섹션 에서 스크립트 태그를 누르고 스크립트 파일을 다운로드하기를 기다리고 있음을 의미합니다.
따라서 적어도 제 3 자 / 외부 스크립트의 경우 페이지에 마지막으로 두는 것이 좋습니다. 그런 다음 사용할 수없는 경우 브라우저는 최소한 해당 시점까지 페이지를로드하고 사용자는이를 알지 못합니다.
스크립트의 위치를 수정하고 싶다면 YSlow는 성능을 향상 시키거나 손상시킬 경우 풍미를 제공하는 훌륭한 도구입니다. 특정 문서 위치에 자바 스크립트를 배치하면 실제로 페이지로드 시간을 줄일 수 있습니다.
그것은 </html>유효하지 않을 것이므로 이후에 있어서는 안됩니다 . 스크립트를 넣는 가장 좋은 장소는</body>
이는 기본적으로 대부분의 브라우저가 사용자가 제공하는 스크립트를 평가하는 동안 페이지 렌더링을 중지하기 때문입니다. 따라서 페이지의 아무 곳에 나 비 차단 코드를 넣어도 괜찮습니다 ( onLoad이벤트 바인딩이 매우 빠르기 때문에 이벤트 에 함수를 첨부하는 것을 주로 생각하고 있습니다). 여기서 가장 큰 킬러는 페이지 시작 부분에 광고 서버 스크립트를 삽입하는 것입니다.이 스크립트는 광고가 완전히 다운로드되기 전에 페이지로드를 방지하여 페이지로드 시간을 풍선으로 만듭니다.