대략 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>

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

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

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

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

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

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

일반적으로 <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

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 또는 일반 텍스트를 동적으로 보내도록 선택할 수 있으면 모든 웹 브라우저에서 페이지를 사용할 수 있습니다.

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

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

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

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

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

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

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

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

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

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

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

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

보너스-비동기 / 지연

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

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

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

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

• 외부 JS 스크립트를 삽입하려는 경우 가장 좋은 위치는 페이지 헤드입니다.
• 스마트 폰에서 페이지를 사용하려는 경우 태그 바로 앞에 페이지 하단을 사용하십시오.
• 그러나 HTML과 JS 조합 (예 : 동적으로 작성되고 채워진 HTML 테이블)을 작성하려는 경우 필요한 곳에 배치해야합니다.