자바 스크립트 파일을 html 페이지에 포함 - 브라우저에서 무엇이 발생합니까?

Question

브라우저 의존적 인 질문 일 수 있다고 생각합니다. 10 개의 Javascript 파일과 여러 HTML 페이지가 있다고 가정합니다. HTML pageA에는 JS1.js와 JS3.js 만 필요하며, 마찬가지로 HTML pageB에는 JS4.js와 JS1.js가 필요합니다. 모든 HTML 페이지에 10 개의 자바 스크립트 파일을 모두 포함시키는 것이 효과가 있는지 알고 싶습니다. 브라우저의 메모리 사용과 직접 관련이 있습니까?

특히 YUI javascript 라이브러리에서이 문제에 직면하고 있습니다. datatable, event, container, calendar, dom-event 등과 같은 여러 구성 요소가 있습니다. 포함되는 순서도 중요합니다. 예를 들어 dom 이벤트 js가 나머지 작업 전에 포함되어야합니다 . 따라서 이러한 혼란을 피하기 위해 모든 HTML 페이지에 포함 된 헤더 파일에 모든 js 파일을 포함시킬 것을 고려했습니다.

내가 걱정하는 것은 메모리가 부풀어 올라 성능 문제가 발생할 수 있다는 것입니다.

감사합니다, 그들은로드 및 실행까지 -Keshav

Answer 1

페이지에로드 한 스크립트는 다운로드 한 후 캐싱 한 후에도 나머지 페이지가로드되기 전에 구문 분석되어야합니다.그런 의미에서 메모리 벌칙이 있으며, 스크립트에서 렌더링을 상당히 지연시킬 수있는 잠재력이 여전히 있습니다.

그러나 YUI와 같이 양심적으로 설계된 라이브러리의 경우 구문 분석 시간이 최소화 될 것으로 기대됩니다.

페이지 끝 부분에 모든 스크립트를로드 할 수 있으면 전체 페이지가 자바 스크립트 실행에 의해 차단되기 전에 렌더링 될 수 있으므로 사이트 성능이 크게 향상 될 수 있으며 사이트가 훨씬 더 멋지게 느껴질 수 있습니다.

Firebug Net panel과 YSlow extension을 조사하여 귀하의 웹 사이트에 대한 구체적인 실적 통계를 얻는 것이 좋습니다.

Answer 2

외부 스크립트는 다음 HTML의 표시를 지연 .. 같은 당신의 제안을 주시기 바랍니다. 처음 페이지가로드 된 후에도 영향은 훨씬 적습니다. 브라우저가 이미 캐시 된 상태이기 때문에 브라우저가 가끔씩 새로운 버전을 확인하기는하지만 지연되는 경우가 있습니다. 가능한 경우 스크립트의 수를 제한하고 스크립트 태그를 페이지의 맨 아래로 이동하려고합니다. 페이지가 이미 완전히 표시된 경우 사용자는 스크립트로드 지연을 알 수 없습니다.

Answer 3

Scriptaculous은 js 종속성을 처리하는 좋은 방법을 구현합니다. 당신이 그것을 확인하고 "다시 구현"할 수있을 것 같아요. ; D

메모리 부풀리기 및 성능 문제는 ... JS가 많이 유출되지 않는 한 (YUI는 그렇지 않을 수도 있습니다.) 메모리가 문제가되지는 않지만 페이지를 만들지 만 특히 헤더에로드 된 경우 느리게로드하십시오.

Answer 4

주어진 스크립트가 아무 것도하지 않으면 성능에 영향을 미치지 않습니다. 분명히 첫 번째 페이지는 느리게로드되지만 나머지는 캐시되므로 모든 스크립트를로드 할 필요가 없습니다. 그래서 다음 페이지를 빠르게

팁로드 :

1) BODY 태그를 닫기 바로 전에 페이지()의 하단에있는 스크립트를로드합니다.

2) 스크립트를로드하는 비 차단 방법을 사용하십시오. 이것이 제가 사용하는 것입니다.

<script type="text/javascript"> 

function AttachScript(src) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("body")[0].appendChild(script); 
    script.src = src; 
} 
AttachScript("/js/jquery.min.js"); 
AttachScript("/js/ndr.js"); 
AttachScript("/js/shadowbox.js"); 
AttachScript("/js/libraries/sizzle/sizzle.js"); 
AttachScript("/js/languages/shadowbox-es.js"); 
AttachScript("/js/players/shadowbox-img.js"); 
AttachScript("/js/adapters/shadowbox-jquery.js"); 

:-(

Answer 5

메모리 소비 불구하고 소스 웹 페이지를 찾을 수 없습니다 : 다음 메모리 사용 및 성능 문제가해야

는 스크립트가 잘 기록 된 가정 모든 스크립트를 한꺼번에 포함하는 것의 가장 큰 문제점은 처음부터 사용자 경험의 지연 일 것입니다. 또는 변경하면 모든 스크립트를 다운로드해야하므로 한방. 나는 한 번에 모든 스크립트가 아니라 페이지 당 필요한 스크립트 만 포함시켜야한다고 생각합니다.

Windows의 작업 관리자/프로세스와 같은 간단한 도구를 사용하여 메모리/프로세서 사용률을 모니터링하거나 Firebug for FireFox과 같은 플러그를 사용하여 영향을 직접 평가할 수 있습니다.

스크립트 파일을 가능한 작게 만들려면 minification이라는 항목을 살펴볼 수도 있습니다.

종속 관계 :

일부 스크립트는 다른 스크립트의 기능에 따라 달라질 수 있습니다으로 중요 스크립트를 포함하는 순서. 따라서 한 스크립트의 코드가 실행을 시도하고 다운로드되지 않은 다른 스크립트의 코드가 필요한 경우 실패합니다. 내 충고는 실제로 모든 것을 한꺼번에 다운로드하는 것보다는 스크립트 파일에서 그 의존성을 이해하는 것이 더 쉬워 보일 것입니다.

Answer 6

YUI Configurator를 사용하여 필수 파일의 포함 여부 및 주문 방법을 결정하고 야후! 모든 YUI 파일을 단일 스크립트 태그로 결합하는 CDN 콤보 서비스. HTML 페이지에

http://developer.yahoo.com/yui/articles/hosting/

Answer 7

외부 자산은 일반적으로 브라우저 캐시됩니다. 외부 자산은 이미지, CSS, JavaScript 및 기타와 같은 HTML에서 요청되는 모든 것입니다. 따라서 전면에 10 개의 스크립트 파일을 모두로드하면 사용자에게 한 번만 다운로드하면됩니다. 이 시간이 지나면 사용자는 파일의 타임 스탬프를 변경하지 않는 한 스크립트를 다시 다운로드 할 필요가 없습니다.

귀하의 페이지는 필요한 것을 사용합니다. 특정 페이지가 js4.js 및 js5.js를 요청하면 해당 파일의 모든 기능이 인터프리터에 HTML에서 처음 요청 된 순서대로로드되고 둘째로 각 파일에 지정된 순서대로 인터프리터에로드됩니다. 그 파일들. 네임 스페이스 충돌이 있으면 인터프리터에 마지막으로로드 된 내용이 마지막으로 이깁니다. 브라우저에서 페이지를 언로드하면 해석기가 기능을 지 웁니다.

효율성을 위해 서버 측 삽입 프로세스를 사용하여 각 js 파일을 읽고 각 파일의 내용을 새로운 단일 js 파일에 포함시키는 것이 좋습니다. 이렇게하면 서버에 대한 HTTP 요청 수가 감소하고 HTTP 헤더 및 GET 요청과 관련하여 사용자에게 극도의 대역폭 리소스가 저장됩니다. 또한 HTML의 닫는 본문 태그 바로 앞에이 새 스크립트 파일의 요청을 넣으십시오. 스크립트를 다운로드하면 IE에서 병렬 다운로드가 차단되므로 페이지의 가장 낮은 지점에서 스크립트를로드하려고합니다.

Answer 8

PHP를 사용하여 여러 가지 JavaScript 파일을 하나의 큰 JS 파일로 전달하여 필요한 모든 것을 포함하는 캐싱 방법을 읽을 수 있습니다. 추가 성능 향상을 위해 브라우저에서 파일을 로컬로 캐시 할 수 있으며 gzip으로 전송할 수도 있습니다 (브라우저가 ob_start ("ob_gzhandler")와 같은 것을 사용하여 인코딩을 지원하는 경우). gzip 인코딩을 사용하면 전송중인 기본 JS 파일의 파일 크기를 크게 줄일 수 있습니다. 여기에는 모든 JS 코드가 포함됩니다 (일반 텍스트는 너무 잘 압축되므로). 최근에 내 웹 사이트에서이 작업을 수행해야했으며 JS 및 CSS 파일의 매력처럼 작동했습니다.

http://www.ejeliot.com/blog/72

이 튜토리얼의 지침에 따라, 당신의 JS 파일을 한 번만 전송됩니다 주와 클라이언트 컴퓨터의 브라우저는 이후 모든 방문의 성능이 향상됩니다 저장된 로컬 복사본을 유지합니다.

또한 Google 코드에서 호스팅해야하는 "축소판"을 검색하는 것을 고려하십시오.