조사의 계기

최근에 앞부분을 만져보고 JQuery를 배웠어요.
"JS의 읽기가 body의 마지막"이라는 결정이 있었던 것 같은데 좀 메스꺼워서 조사해 봤어요.
약간 격식이 있는 말.
HTML에 JavaScript 파일을 가져오는 설명이 있으면 이 JavaScript를 다 읽기 전에 웹 페이지의 렌더링(묘사)이 멈추기 때문입니다.
https://allabout.co.jp/gm/gc/380498/2/
잠깐만, 그렇구나.
Qiita의 페이지를 포함하여 대충 확인한 페이지에서 JS 라이브러리는 모두 머리에 쓰여 있다

왜 처음부터 JS를 바디의 마지막에 놓지 않았어요?그래서 제가 알아봤어요.

결론

바디의 마지막에 뭐라고 쓰지 말고 defer 옵션을 사용하세요.

거치다

동적 입력 프롬프트에서 클릭
구글 씨의 공식 홈페이지에 견해가 실렸다.
jQuery와 같은 JavaScript 라이브러리를 사용하면 어떻게 합니까?
많은 JavaScript 라이브러리(예: JQuery)는 대화식과 애니메이션 등의 효과를 추가하여 페이지의 매력을 높이는 데 사용됩니다.그러나 이러한 동작의 대부분은 스크롤되지 않는 범위의 내용을 표시한 후에 추가할 수 있다.이러한 JavaScript의 읽기를 비동기화하거나 지연하는 것을 고려하십시오.
https://developers.google.com/speed/docs/insights/BlockingJS?hl=ja
총결산은 아래와 같다.

JavaScript 비동기화

스크롤되지 않는 범위의 내용을 표시한 후(≈body의 마지막) 읽기

그렇구나.확실히 JavaScript를 비동기화하려면
Qiita 페이지에서 async 옵션이 사용됩니다.
예제<script src="https://securepubads.g.doubleclick.net/gpt/pubads_impl_2019043001.js" async=""></script>또한 여러 가지 조사를 통해 defer 옵션을 사용하여 HTML 렌더링 후 읽기를 구현했습니다.
예제<script src="https://cdn.qiita.com/assets/public/bundle-d8e605d584dac63090b5a3f765cc8dbf.min.js" defer="defer"></script>어쨌든 바디의 마지막에 JS를 쓰지 않더라도 defer 옵션을 추가하면 HTML의 퍼스가 완성된 후에 JS를 실행할 것이다.async이것은 논리적 속성으로 가능하다면 스크립트를 비동기적으로 읽어야 한다는 것을 나타낸다.defer이 논리적 속성은 브라우저에 표시됩니다. 스크립트는 문서 해석이 끝난 후와 DOMContentLoaded가 발생하기 전에 실행됩니다.
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#Attributes
　
그래서 실제로 창고를 놓으면

먼저 모두 헤드에 놓고

구글 Analytics 등 처리 부하가 비교적 큰 것은 async

이다.

자체 제작된 JS는 내부 처리에 따라 내연 또는 defer 옵션으로 분산

좋은 것 같아요.

지원

삭제 옵션 정보

브라우저에 따라 defer 옵션이 작동하지 않는 것 같습니다.
이것은 아마도 왜 이 옵션이 아직 통용되는 홍보가 되지 않았는지 하는 것이다.
(낡은 브라우저라면 늦게라도 참을 수 있는 사람이 사용하고 있다고 생각한다.)

※ 참조: https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script#Browser_compatibility(20190510 시)
Chrome의 오류 중
XHTML 형식의 페이지라면 작동하지 않는 경우도 있는 것 같습니다.
추가 Chrome does not defer scripts with the defer attribute when the page is served as XHTML (application/xhtml+xml)
https://bugs.chromium.org/p/chromium/issues/detail?id=874749
https://bugs.chromium.org/p/chromium/issues/detail?id=611136
　
또한 defer 옵션은 JS의 실행만 지연되므로 다운로드 시간은 HTML 원근에 영향을 미칩니다.
(그럼에도 불구하고 다운로드 자체는 비동기 처리이고 헤드 단계에서 읽기 때문에 전체 속도는 바디의 마지막보다 빨라야 한다.)
HTML의 표시 속도가 느리고 JS의 파일 크기가 크면 (자체 제작 JS뿐만 아니라 외부 라이브러리 포함) body의 마지막에 놓고 다운로드의 영향을 없애는 검증을 해 보세요.

HTML 원근 후 JS 읽기가 반드시 올바른 것은 아닙니다.

스크롤하지 않으면 콘텐츠가 나오지 않는 사이트를 구축하려면 확인할 필요가 있다.
추가 정보: 페이지 마지막에 JavaScript 읽기 위치를 두지 않는 것이 좋습니다.
스크롤하지 않으면 콘텐츠가 나오지 않는 사이트를 만드는 상황에서 페이지 마지막에 JavaScript를 읽으면 JavaScript의 읽기가 끝나기 전에 아래 내용을 추천하지 않습니다
https://memocarilog.info/jquery/5842