HTML 파일의 JavaScript 위치
꽤 큰 JavaScript 파일을 가지고 있다고 칩시다.약 100kb 정도로 압축되어 있습니다.이란, 「」이라고 하는 것은, 「외부 파일」이라고으로, 「외부 파일」이라고 하는 것은, 「입니다.<script src="...">html 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>
각 옵션에 기능적인 차이가 있습니까?
야후!Exceptional Performance 팀은 브라우저의 컴포넌트 다운로드 방법 때문에 페이지 하단에 스크립트를 배치하는 것을 권장합니다.
물론 Levi의 코멘트는 "필요하기 직전에, 그리고 곧"이 정답입니다. 즉, "상황에 따라 다릅니다."
그것을 위한 가장 좋은 장소는 당신이 그것을 필요로 하기 직전이고, 더 빨리 하지 않는다.
또, 유저의 물리적인 장소에 따라서는, Amazon의 S3 서비스등의 서비스를 이용하는 것으로, 유저가 서버보다 물리적으로 가까운 서버로부터 다운로드 할 수 있는 경우가 있습니다.
js 스크립트는 jQuery나 프로토타입과 같이 일반적으로 사용되는 lib입니까?이 경우 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
Javascript 10만으로는 절대 파일에 넣지 마세요.외부 스크립트 Javascript 파일을 사용합니다.HTML 페이지 하나에서만 이 정도의 코드를 사용할 가능성은 전혀 없습니다.Javascript 파일을 어디에 로드해야 하는지 묻고 있을 것입니다. 이미 만족스러운 답변을 받았습니다.
하지만 일반적으로 최신 브라우저는 gzip된 Javascript 파일을 사용할 수 있습니다!그냥 gzip을 해 주세요.x.jsx.js.gz 있습니다.src파일 에서 작동하지 웹 작동합니다.로컬 파일 시스템에서 작동하지 않습니다. 작동하려면 웹 서버가 필요합니다.그러나 전송 바이트의 절감 효과는 엄청날 수 있습니다.
Firefox 3, MSIE 7, Opera 9, Google Chrome에서 성공적으로 테스트했습니다.Safari 3에서는 이런 식으로 동작하지 않는 것 같습니다.
상세한 것에 대하여는, 이 블로그의 투고를 참조해 주세요.또 다른 매우 오래된 페이지도 도움이 됩니다.웹 서버는 브라우저가 gzipped Javascript를 받아들일 수 있는지 여부를 검출할 수 있기 때문입니다.서버 측에서 gzip 또는 플레인텍스트의 송신을 동적으로 선택할 수 있는 경우는, 페이지를 모든 Web 브라우저에서 사용할 수 있도록 할 수 있습니다.
javascript를 맨 위에 놓는 것이 더 깔끔해 보이지만 기능적으로는 HTML을 따라가는 것이 좋습니다.그러면 javascript는 실행되지 않고 HTML 요소를 로드하기 전에 참조하려고 합니다.이런 종류의 문제는 실제 인터넷 연결(특히 느린 연결)을 통해 페이지를 로드했을 때만 나타납니다.
또한 다른 자바스크립트 코드에서 헤더 요소를 추가하여 자바스크립트를 동적으로 로드할 수도 있습니다.다만, 항상 모든 코드를 사용하지 않는 경우에만 이치에 맞습니다.
cuzillion을 사용하면 인라인, 외부, "HTML 태그", "문서" 등의 다양한 방법을 사용하여 스크립트 태그의 배치에 따른 페이지 로드에 대한 영향을 테스트할 수 있습니다.write", "JS DOM 요소", "iframe" 및 "XHR eval"을 선택합니다.차이점에 대한 설명은 도움말을 참조하십시오.스타일시트, 이미지 및 iframe을 테스트할 수도 있습니다.
답은 javascript 객체를 어떻게 사용하느냐에 달려 있습니다.이미 지적했듯이, 헤더가 아닌 바닥글에서 Javascript 파일을 로드하는 것은 확실히 성능을 향상시키지만 사용되는 오브젝트는 바닥글에서 로드되는 것보다 늦게 초기화되도록 주의해야 합니다.또 하나의 방법은 모든 파일에서 사용할 수 있는 폴더에 있는 'js' 파일을 로드하는 것입니다.
스크립트는 본문 태그 끝에 포함해야 합니다.이렇게 하면 HTML이 브라우저에 의해 해석되어 스크립트가 로드되기 전에 표시되기 때문입니다.
다른 사람들이 말한 것처럼, 대부분의 경우 외부 파일에 저장되어야 합니다.이러한 파일은 <head />의 말미에 삽입하는 것이 좋습니다.이 방법은 기계보다 인간 친화적이지만, 그렇게 하면 JS가 어디에 있는지 항상 알 수 있습니다.스크립트 파일을 다른 장소(imho)에 포함시키는 것은 읽기 어렵습니다.
나는 정말로 마지막 ms마다 한 번씩 짜내야 한다. 그러면 너는 야후가 말하는 것을 해야 할 것이다.
javascript 링크는 머리나 본문 태그 끝에 링크하면 성능이 향상되지만, 성능에 문제가 없는 한 머리에 배치하는 것이 읽기 쉽고 링크가 어디에 있는지 알고 참조하기 쉽습니다.
사실 Javascript 코드로 무엇을 할 예정인지에 따라 다르다고 생각합니다.
- 외부 JS 스크립트를 삽입할 계획이라면 페이지 선두가 최적의 장소입니다.
- 스마트폰에서 페이지를 사용할 계획이라면 태그 직전에 페이지 맨 아래를 클릭하십시오.
- 그러나 HTML과 JS(예를 들어 동적으로 작성되고 채워진HTML 테이블)의 조합을 계획하고 있다면 필요한 곳에 배치해야 합니다.
그 질문에 대한 답은 다르다.이 상황에는 2가지 시나리오가 있으며 적절한 시나리오에 따라 선택해야 합니다.
시나리오 1 - 중요한 스크립트 / 필수 스크립트
<head>예를 들어 애플리케이션 코드, 부트스트랩, 글꼴 등이 있습니다.
시나리오 2 - 중요도가 낮은 / 분석 스크립트
웹 사이트 보기에 영향을 주지 않는 스크립트도 있습니다.이러한 스크립트는 모든 중요한 세그먼트가 로드된 후에 로드하는 것이 좋습니다. 그 맨즉의 맨 가 될 입니다.<body>를 들어 구글 , 구글, 핫자르, Google hot hot hot hot hot hotjar, hotjar hot hot hot hot hot hot hot 。
보너스 - 비동기 / 연기
또한 스크립트 코드의 defer/async 인수를 사용하여 다른 스크립트 로드와 동시에 실행할 수 있으며 브라우저 선택에 따라 로드할 수 있음을 브라우저에 알릴 수도 있습니다.
예:<script async src="script.js"></script>
언급URL : https://stackoverflow.com/questions/196702/where-to-place-javascript-in-an-html-file
'source' 카테고리의 다른 글
| 현재 시각을 YYY-MM-DD HH로 취득하는 방법:MI: Sec.Millisecond 포맷(Java) (0) | 2022.12.25 |
|---|---|
| 어떻게 두 줄을 숫자처럼 추가할 수 있죠? (0) | 2022.12.25 |
| 클래스 JSON을 시리얼화 하는 방법 (0) | 2022.12.25 |
| 읽기 전용 목록 또는 수정 가능한 목록을 읽습니다.Net4.0 (0) | 2022.12.25 |
| "서브쿼리가 두 개 이상의 행을 반환함" 오류 해결 방법 (0) | 2022.12.25 |