it-gundan.com

성능을 최적화하기 위해 Javascript를 페이지에로드하는 가장 좋은 방법은 무엇입니까?

자바 스크립트를 페이지에로드하여 더 빠르게로드 할 수있는 방법이 있습니까?

14
Jason

당신이 할 수있는 몇 가지가 있습니다 :

  1. 자바 스크립트 전에 HTML과 CSS를로드하십시오. 그러면 브라우저가 페이지를 레이아웃하고 렌더링하는 데 필요한 모든 것을 제공합니다. 이를 통해 사용자는 페이지가 거칠다는 인상을받습니다. 스크립트 태그 또는 블록을 가능한 한 닫는 본문 태그에 가깝게 배치하십시오.

  2. CDN 사용을 고려하십시오. JQuery와 같은 인기있는 라이브러리를 사용하는 경우 많은 회사 (예 : google, yahoo)가 라이브러리를로드하는 데 사용할 수있는 무료 CDN을 운영합니다.

  3. 내장 된 스크립트 대신 외부 파일에서 코드를로드하십시오. 이를 통해 브라우저는 JS 컨텐츠를 캐시하고 전혀로드하지 않아도됩니다. 연속적인 페이지 로딩이 더 빠릅니다.

  4. 웹 서버에서 Zip 압축을 켭니다.

Yahoo에는 페이지로드 시간을 줄이는 데 도움이되는 great page 제안 사항이 있습니다.

14

Minifing 외에도 gziping 및 CDNing (새로운 단어?). 로드 지연을 고려해야합니다. 기본적으로이 작업은 스크립트를 동적으로 추가하고 차단을 방지하여 병렬 다운로드를 허용합니다.

그것을하는 많은 방법이 있습니다, 이것은 내가 선호하는 방법입니다

<script type="text/javascript">
    function AttachScript(src) {
        window._sf_endpt=(new Date()).getTime();
        var script = document.createElement("script");
        document.getElementsByTagName("body")[0].appendChild(script);
        script.src = src;
    }
    AttachScript("/js/scripts.js");
    AttachScript("http://www.google-analytics.com/ga.js");
</script>

닫는 body 태그 바로 앞에 이것을 배치하고 AttachScript를 사용하여 모든 js 파일을로드하십시오.
여기에 더 많은 정보가 있습니다 http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

7
The Disintegrator

Google이 웹 로그 분석을로드하는 방식을 살펴볼 수도 있습니다.

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.Push(['_setAccount', 'UA-xxxxxxx-x']);
  _gaq.Push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

"모범 사례"일종의 스크립트로 간주됩니다.
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/

7
Jeff Atwood

두 명의 Google 직원이 Velocity 2010에서 새로운 오픈 소스 프로젝트를 발표했습니다Diffable 이라고합니다. Diffable은 새 버전이 출시 될 때 전체 새 파일을 보내지 않고 사용자 캐시에 저장된 버전 이후에 변경된 JS, HTML 및 CSS 부분 만 증분 적으로 게시하기 위해 약간의 마술을 수행합니다.

이 기술은 대단하고 시원하며 코드 변경이 거의없이 큰 JavaScript 코드 기반을 사용하는 웹 사이트에서 현재 가장 효과적이고 노력할 가치가 있습니다. 이는 적어도 매주 화요일에 한 번 릴리스 를 겪고 매년 평균 약 100 개의 새로운 릴리스를 거치는 Google지도와 같은 응용 프로그램에 특히 적용됩니다. HTML5 로컬 스토리지가 널리 보급되면 일반적으로 의미가 있습니다.

BTW, 구글의 마이클 존스 (Michael Jones)가 (지리 공간적 맥락에서) 변화에 대해 이야기하는 것을 보지 못했다면 그의 전체 GeoWeb 2009의 기조 연설 을 볼 가치가 있습니다.

3
JasonBirch

이 질문에 대한 업데이트를 제공합니다. 현대에서는 비 블로킹로드 방법이 더 이상 필요하지 않다고 생각합니다. 브라우저가 자동으로 수행합니다.

StackOverflow에 질문을 추가했습니다. 여기에도 내용을 추가하겠습니다.

로드 이벤트가 조금 일찍 발생하지만 파일로드 자체는 동일하게 유지된다는 점만 다릅니다. 또한 비 블로킹 스크립트로 onload가 더 일찍 시작 되더라도 JS 파일이 더 일찍 시작된 것은 아닙니다. 제 경우에는 일반 설정이 가장 좋았습니다

이제 스크립트는 다음과 같습니다.

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles는 여기에 모든 파일의 모든 URL을 보유하는 객체 일뿐입니다.

3 테스트를 실행했으며 결과는 다음과 같습니다.

일반 설정

Page load with css in the head and javascript at the bottom

이것은 정상적인 설정이며 헤드에 4 개의 CSS 파일이 있고 페이지 하단에 3 개의 CSS 파일이 있습니다.

이제 막는 것이 보이지 않습니다. 내가 보는 것은 모든 것이 동시에로드됩니다.

비 차단 JS

Page load with non-blocking javascript

이제 이것을 조금 더 진행하기 위해 js 파일 만 비 차단으로 만들었습니다. 이것은 위의 스크립트와 함께합니다. 갑자기 CSS 파일이로드를 차단하고 있음을 알았습니다. 첫 번째 예제에서 아무것도 차단하지 않기 때문에 이상합니다. CSS가 갑자기 부하를 차단하는 이유는 무엇입니까?

모든 비 차단

Page load with everything non-blocking

마지막으로 모든 외부 파일이 비 차단 방식으로로드되는 테스트를 수행했습니다. 이제 첫 번째 방법과 차이가 없습니다. 둘 다 똑같이 보입니다.

결론

내 결론은 파일이 이미 차단되지 않은 방식으로로드 된 것이므로 특수 스크립트를 추가 할 필요가 없습니다.

아니면 여기에 뭔가 빠졌습니까?

더:

1
Saif Bechan