HTML 파일에서 JavaScript를 어디에 두어야합니까?

210

대략 100kb 정도의 압축 된 JavaScript 파일이 있다고 가정 해 봅시다. 파일 <script src="...">은 HTML 자체에 붙여 넣지 않고 를 통해 연결되는 외부 파일임을 의미합니다 .

이것을 HTML에 넣을 가장 좋은 곳은 어디입니까?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

각 옵션마다 기능상의 차이가 있습니까?

javascript  html  optimization 
— 별자리
소스
— Ivar

답변:

175

야후! 뛰어난 성능 팀 은 브라우저가 구성 요소를 다운로드하는 방식으로 인해 페이지 하단에 스크립트를 배치 할 것을 권장 합니다.

물론 Levi의 의견은 "필요하기 전에 더 이상은 아닙니다"는 실제로 정답입니다. 즉 "의존"입니다.

— 월터 럼 스비
소스
4
예를 들어 많은 jQuery 작업을 수행하려면 실제로 사용하기 전에 라이브러리를로드해야합니다.
— BryanH
58
또한 Yahoo EPT가 JS를 맨 아래에 배치하도록 권장하는 이유는 JS가로드 된 후 실행되는 동안 브라우저가 단일 스레드 모드로 전환되어야하기 때문입니다. 스크립트가 컨텐츠의 헤드 또는 중간에있는 경우 브라우저는 JS를 처리하는 동안 "일시 정지"합니다. JS를 맨 아래에두면 컨텐츠가로드되고 일반적으로 표시되므로 브라우저가 여전히 JS를 처리하는 동안 사용자가 읽을 수 있습니다.
— BryanH
1
안녕하세요. $(function () {...})페이지 하단에 이와 같은 코드를 넣 <head>습니까 , 아니면 내부에 있어야 합니까?
— Thang Pham
7
여기서 "페이지 하단"에 대한 언급 이 끝나지 않기를 바랍니다 </body>.
— Mr_Green
1
최신 브라우저는 "지연"속성을 읽을 수도 있습니다. <body>의 맨 아래에 있지 않은 스크립트 태그에 defer = "defer"를 설정할 수 있으며 브라우저에서 해당 태그를 볼 때 먼저 나머지 HTML을로드 한 다음 돌아가서 내용을 해석합니다. 스크립트 태그 페이지를 완전히 제어 할 수없는 일종의 프레임 워크를 사용하는 경우에 유용합니다. 이 기사를
— 보라
75

가장 좋은 곳은 바로 전에 필요합니다.

또한 사용자의 실제 위치에 따라 Amazon S3 서비스와 같은 서비스를 사용하면 사용자가 서버보다 물리적으로 가까운 서버에서 서버를 다운로드하는 데 도움이 될 수 있습니다.

js 스크립트가 jQuery 또는 프로토 타입과 같이 일반적으로 사용되는 라이브러리입니까? 그렇다면 Google 및 Yahoo와 같은 여러 회사에서 분산 네트워크에서 이러한 파일을 제공하는 도구가 있습니다.

— 레비 로솔
소스
60

일반적으로 <script>태그 를 배치하는 가장 좋은 위치는 태그 바로 앞에 페이지 하단입니다 </body>. 이 같은:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

왜?

스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다. HTTP / 1.1 사양에서는 브라우저가 호스트 이름 당 2 개 이하의 구성 요소를 동시에 다운로드 할 것을 제안합니다. 여러 호스트 이름에서 이미지를 제공하는 경우 두 개 이상의 다운로드가 동시에 발생할 수 있습니다. 그러나 스크립트를 다운로드하는 동안 브라우저는 다른 호스트 이름에서도 다른 다운로드를 시작하지 않습니다. 더...

CSS

주제를 조금 벗어 났지만 ... 스타일 시트를 맨 위에 놓습니다.

Yahoo!에서 성능을 조사하는 동안 스타일 시트를 문서 HEAD로 이동하면 페이지가 더 빨리로드되는 것으로 나타났습니다. HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있기 때문입니다. 더...

추가 자료

야후는 웹 사이트 속도를 높이기위한 모범 사례를 소개하는 정말 멋진 안내서를 발표했습니다. 꼭 읽을 가치가 있습니다 : https://developer.yahoo.com/performance/rules.html

— 순교자
소스
1
"스크립트로 인한 문제는 병렬 다운로드를 차단한다는 것입니다." — 더 이상 사실이 아닙니다. w3.org/TR/html5/scripting-1.html#attr-script-async
— Quentin
4

100k Javascript를 사용하면 파일 안에 넣지 말아야합니다. 외부 스크립트 Javascript 파일을 사용하십시오. 한 번의 HTML 페이지에서만이 정도의 코드 만 사용하게 될 가능성은 없습니다. Javascript 파일을 어디에로드해야하는지 묻는 것일 수 있습니다. 이미 만족스러운 답변을 받았습니다.

그러나 일반적으로 최신 브라우저는 gzip ped Javascript 파일을 허용 합니다. x.js파일을 gzip으로 압축하고 속성 x.js.gz에서 해당 파일을 가리 킵니다 src. 로컬 파일 시스템에서는 작동하지 않으므로 작동하려면 웹 서버가 필요합니다. 그러나 전송 된 바이트의 절약은 막대 할 수 있습니다.

Firefox 3, MSIE 7, Opera 9 및 Chrome에서 성공적으로 테스트했습니다. Safari 3에서는 이런 식으로 작동하지 않는 것 같습니다.

자세한 내용은 이 블로그 게시물을 참조하십시오 . 그럼에도 불구하고 웹 서버가 브라우저에서 gzipped Javascript를 허용 할 수 있는지 여부를 웹 서버가 감지 할 수 있기 때문에 유용한 매우 오래된 또 다른 페이지 를 참조하십시오 . 서버 측에서 gzip 또는 일반 텍스트를 동적으로 보내도록 선택할 수 있으면 모든 웹 브라우저에서 페이지를 사용할 수 있습니다.

— 바트
소스
8
OP의 질문을 오해했습니다. 그는 HTML에서 스크립트 태그를 어디에 넣을 것인지 묻고있었습니다. 그는 이미 스크립트를 인라인하지 않고 외부 파일을 사용하고있었습니다. 분명히, 이것은 '09 년 4 월에 질문을 편집하기 전에 명확하지 않았습니다. 이 답변을 삭제 하시겠습니까?
— Mark Amery
@Leandro 사람들이 항상 실제 질문을 염두에 두지는 않지만 여전히이 질문과 같은 답변을 고려하기 때문이라고 생각합니다. 그럼에도 불구하고이 답변 은 유용하지만 반드시 관련이있는 것은 아닙니다. 투표 도구 설명에 '이 답변은 유용하고 관련이 있습니다'와 같이보다 명확한 문구가 포함되어 있으면 더 효과적 일 수 있습니다.
— WynandB
1
gzipped Javascript : 웹 서버를 압축하도록 구성 할 수도 있습니다 ... (또는 nginx의 gzip_static 모듈 / 옵션과 같은 것을 사용하십시오) (그리고 다른 클라이언트를 위해 gunzip을 사용하십시오) 적어도 올바른 내용 유형 헤더를 보내야합니다. GZIP으로 표시 인코딩 가능성이 더 나은 브라우저 지원의 결과
— 게르트 반 베르그 덴
4

자바 스크립트를 맨 위에두면 깔끔한 것처럼 보이지만 기능적으로는 HTML을 따르는 것이 좋습니다. 그렇게하면 자바 스크립트가 실행되지 않고 HTML 요소가로드되기 전에 참조하려고합니다. 이러한 종류의 문제는 실제 인터넷 연결, 특히 느린 연결을 통해 페이지를로드 할 때만 분명해집니다.

다른 모든 자바 스크립트 코드에서 헤더 요소를 추가하여 자바 스크립트를 동적으로로드 할 수도 있지만, 항상 모든 코드를 사용하지 않는 경우에만 의미가 있습니다.

— 마티아스 완델
소스
3

cuzillion 을 사용하면 인라인, 외부, "HTML 태그", "document.write", "JS DOM 요소", "iframe"및 "XHR eval"과 같은 다른 방법을 사용하여 스크립트 태그의 다른 배치의 페이지로드에 대한 영향을 테스트 할 수 있습니다. . 차이점에 대한 설명은 도움말 을 참조하십시오 . 또한 스타일 시트, 이미지 및 iframe을 테스트 할 수 있습니다.

— 샘 해 슬러
소스
1

대답은 자바 스크립트의 객체를 어떻게 사용하고 있는지에 달려 있습니다. 이미 지적한 것처럼 헤더가 아닌 바닥 글에 자바 스크립트 파일을로드하면 성능이 확실히 향상되지만 사용되는 객체가 바닥 글에로드 된 것보다 늦게 초기화되어야합니다. 또 다른 방법은 모든 파일에서 사용할 수있는 폴더에있는 'js'파일을로드하는 것입니다.

— 구 스티
소스
0

다른 사람들이 말했듯이 외부 파일로 이동해야합니다. <head /> 끝에 이러한 파일을 포함하는 것을 선호합니다. 이 방법은 기계 친화적보다 인간 친화적이지만 JS의 위치를 ​​항상 알고 있습니다. 스크립트 파일을 다른 곳 (imho)에 포함시키는 것은 읽기 쉽지 않습니다.

나는 당신이 정말로 모든 마지막 ms를 짜 내야한다. 그러면 아마 야후의 말을해야 할 것이다.

— 맹렬한
소스
0

스크립트는 body 태그의 끝에 포함되어야합니다. 이렇게하면 브라우저에서 HTML을 구문 분석하고 스크립트가로드되기 전에 표시됩니다.

— 호세 살가도
소스
0

질문에 대한 대답은 다릅니다. 이 상황에는 두 가지 시나리오가 있으며 적절한 시나리오를 기반으로 선택해야합니다.

시나리오 1-중요 스크립트 / 필수 스크립트

사용중인 스크립트가 웹 사이트를로드하는 데 중요한 경우 HTML 문서 맨 위에 배치하는 것이 좋습니다 (예 :) <head>. 응용 프로그램 코드, 부트 스트랩, 글꼴 등이 여기에 해당합니다.

시나리오 2-덜 중요 / 분석 스크립트

웹 사이트의보기에 영향을 미치지 않는 스크립트도 사용됩니다. 이러한 스크립트는 모든 중요한 세그먼트가로드 된 후에로드하는 것이 좋습니다. 그에 대한 답은 문서의 맨 아래, 즉 <body>닫는 태그 앞의 맨 아래에 있습니다 . 몇 가지 예에는 Google 분석, hotjar 등이 포함됩니다.

보너스-비동기 / 지연

또한 브라우저에 다른 스크립트와 동시에 스크립트로드를 수행 할 수 있으며 스크립트 코드에서 지연 / 비동기 인수를 사용하여 브라우저의 선택에 따라로드 할 수 있다고 브라우저에 알릴 수 있습니다.

예. <script async src="script.js"></script>

— 프라 빈 티루 무루 간
소스
-1

자바 스크립트 링크는 헤드 또는 바디 태그의 끝에있을 수 있지만, 바디 태그의 끝에 링크를 넣어서 성능을 향상시키는 것은 사실이지만, 성능에 문제가없는 한 헤드에 배치하는 것이 더 좋습니다 사람들이 읽고 링크의 위치를 ​​알고 쉽게 참조 할 수 있습니다.

— 디모데 터 로우 데일
소스
-1

Javascript 코드로 달성하려는 계획에 따라 다릅니다.

  • 외부 JS 스크립트를 삽입하려는 경우 가장 좋은 위치는 페이지 헤드입니다.
  • 스마트 폰에서 페이지를 사용하려는 경우 태그 바로 앞에 페이지 하단을 사용하십시오.
  • 그러나 HTML과 JS 조합 (예 : 동적으로 작성되고 채워진 HTML 테이블)을 작성하려는 경우 필요한 곳에 배치해야합니다.
— 루 두스 H
소스
내가 빼기 위해 말한 것!? 이런.
— Ludus H
외부에있는 것은 스크립트를 머리에 두는 것과 어떤 관련이 있습니까? 페이지 하단이 스마트 폰 전용 스크립트를 작성하기에 좋은 이유는 무엇입니까? JS에서 HTML을 동적으로 생성하는 것에 대한 귀하의 진술은을 사용 document.write하는 경우에만 해당됩니다 .
— Quentin
내가 생각한 것을 "추정"했는데 내 대답이 마이너스가 되었습니까? 당신은 아마 당신의 추정이 내 설명보다 낫다고 생각할 것입니다. 누군가가 이해할 수 없다면 더 많은 정보를 요구할 것입니다. 내 의견으로는 브라우저가 "단일 스레드"모드로 전환 할 필요가 없기 때문에 전체 페이지로드가 더 빠르기 때문에 본문 끝 직전에 JS를 스마트 폰 및 태블릿의 페이지 끝에 넣는 것이 좋습니다. 페이지 내용이 나타납니다. 화면에 ...하지만 당신은 아마 이것을 알고 있습니다.
— Ludus H
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.