대략 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’파일을로드하는 것입니다.