CSS와 스크립트의 위치

렌더링 속도면에서 <script>...</script> 및 <style>...</style>을 입력하는 가장 좋은 위치는 어디입니까? <head>...</head> 또는 <body>...</body> 끝이나 그 직후입니까? 그리고 <head>...</head>에 평소 위치를 벗어날 수있는 다른 태그가 있습니까? <base>?CSS와 스크립트의 위치

출처

2012-02-25 sawa

[html5] [ HTML5 또는 CSS3과 아무 관련이없는 질문에 대해서는 @ css3] 태그를 사용하십시오. – BoltClock

@BoltClock 이러한 질문을 할 때 html5와 이전 또는 css3 사이에 사양에 차이가 있는지 알 수 없습니다. 그 대답은 html5 및 css3에 관한 것입니다. 내 태깅에 문제가 있습니까? – sawa

'html' 태그는'html5'를 포함하여 모든 버전의'html'을 다루고 있습니다. 질문이 HTML5에 관한 것이면 * html5 만 태그해야합니다. CSS/CSS3와 동일합니다. –

<style> 및 <link rel="stylesheet">은 <head>이어야합니다. 일치하지 않으면 스타일을 사용하지 않고 페이지를 렌더링 한 다음 스타일이로드 될 때 불규칙하게 변경 될 수 있습니다.

<script> 다른 한편으로는 어디서나있을 수 있습니다. 개인적으로는 외부 JS 파일을 <head> (일반적으로 함수를 정의하는 파일)에로드하는 것이 더 좋으며 페이지 자체에 영향을주는 스크립트는 실행하기 전에 모든 요소를 사용할 수 있도록 </body> 직전에 적용됩니다.

그러나 나는 <script> 요소를 어디서나 배치 할 수있는 새로운 스크립트 프레임 워크를 가지고 있지만 코드가 지연되어 마치 </body> 앞에 놓인 것처럼 실행됩니다. 이렇게하면 페이지 로딩에 부정적인 영향을 미치지 않고 영향을주는 페이지의 부분에 스크립트를 가까이 배치 할 수 있습니다.

출처

2012-02-25 05:42:43

Kolink가 말한 것처럼 CSS 스타일은 <head> 섹션에 있어야 스타일 적용없이 페이지가 렌더링되지 않습니다.

<scripts>이 본문의 맨 끝, 즉 <body> 태그 바로 앞에있는 경우 최대 페이지 렌더링 속도가 발생합니다. 이는 스크립트가 구문 분석되고 실행 된 후에가 아니라 스크립트가 구문 분석되거나 실행되기 전에 페이지를 렌더링 할 수 있기 때문입니다. 또한 최신 브라우저에서 defer 또는 async으로 표시 할 수있는 특정 순서로 실행하지 않아도이 자신의 부하의 원인이되며, 구문 분석

<scripts>은 HTML의 부하와 디스플레이를 직렬화 복원합니다.

대부분의 스크립트 (사용자 동작 (마우스 동작, 클릭, 키 등)에 응답하지만 모든 것이 가능하지는 않음)에 적합합니다 (예 : 모든 코드에서 사용되는 모든 스크립트). document.write()을 페이지 컨텐트에 직접 삽입해야 코드가 호출되어 코드가 호출되어 페이지가 구문 분석되고 배치되는 동안 사용할 수 있도록 일반적으로 코드 섹션이 <head> 섹션에 포함됩니다.

출처

2012-02-25 05:51:34 jfriend00

CSS와 스크립트의 위치

답변

관련 문제