성능을 최적화하기 위해 Javascript를 페이지에로드하는 가장 좋은 방법은 무엇입니까?
답변:
당신이 할 수있는 몇 가지가 있습니다 :
자바 스크립트 전에 HTML과 CSS를로드하십시오. 이를 통해 브라우저는 페이지를 레이아웃하고 렌더링하는 데 필요한 모든 것을 제공합니다. 이를 통해 사용자는 페이지가 거칠다는 인상을받습니다. 스크립트 태그 또는 블록을 가능한 한 닫는 본문 태그에 가깝게 배치하십시오.
CDN 사용을 고려하십시오. JQuery와 같은 인기있는 라이브러리를 사용하는 경우 많은 회사 (예 : google, yahoo)가 라이브러리를로드하는 데 사용할 수있는 무료 CDN을 운영합니다.
내장 된 스크립트 대신 외부 파일에서 코드를로드하십시오. 이를 통해 브라우저는 JS 컨텐츠를 캐시하고 전혀로드하지 않아도됩니다. 연속적인 페이지 로딩이 더 빠릅니다.
웹 서버에서 zip 압축을 켭니다.
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/
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/
두 명의 Google 직원이 Velocity 2010에서 Diffable 이라는 새로운 오픈 소스 프로젝트를 발표했습니다 . Diffable은 새로운 버전이 출시 될 때 전체 새 파일을 보내지 않고 사용자 캐시에 저장된 버전 이후에 변경된 JS, HTML 및 CSS 부분 만 증분 적으로 게시하기 위해 약간의 마술을 수행합니다.
이 기술은 멋지다. 코드 변경이 빈번한 대규모 JavaScript 코드 기반을 사용하는 웹 사이트에서 현재 가장 효과적이고 노력할 가치가있다. 이는 매주 화요일 에 최소 한 번의 릴리스 를 거치며 매년 평균 약 100 개의 새로운 릴리스 를 수행하는 Google지도와 같은 애플리케이션에 적용됩니다 . HTML5 로컬 스토리지가 널리 보급되면 일반적으로 의미가 있습니다.
BTW, 구글의 마이클 존스가 (지리 공간적 맥락에서) 변화에 대해 이야기하는 것을 보지 못했다면 GeoWeb 2009에서 그의 기조 연설 전체를 볼 가치가 있습니다.
이 질문에 대한 업데이트를 제공합니다. 현대에서는 비 블로킹로드 방법이 더 이상 필요하지 않다고 생각합니다. 브라우저가 자동으로 수행합니다.
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 테스트를 실행했으며 결과는 다음과 같습니다.
일반 설정
이것은 일반적인 설정이며 헤드에는 4 개의 CSS 파일이 있고 페이지 하단에는 3 개의 CSS 파일이 있습니다.
이제 막는 것이 보이지 않습니다. 내가 보는 것은 모든 것이 동시에로드됩니다.
비 차단 JS
이제 이것을 조금 더 진행하기 위해 js 파일 만 비 차단으로 만들었습니다. 이것은 위의 스크립트와 함께합니다. 갑자기 CSS 파일이로드를 차단하고 있음을 알았습니다. 첫 번째 예제에서 아무것도 차단하지 않기 때문에 이상합니다. CSS가 갑자기 부하를 차단하는 이유는 무엇입니까?
모든 비 차단
마지막으로 모든 외부 파일이 비 차단 방식으로로드되는 테스트를 수행했습니다. 이제 첫 번째 방법과 차이가 없습니다. 둘 다 똑같이 보입니다.
결론
내 결론은 파일이 이미 차단되지 않은 방식으로로드되었다는 것입니다. 특별한 스크립트를 추가 할 필요가 없습니다.
아니면 여기에 뭔가 빠졌습니까?
더:
- 기사 : http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
- 질문 : /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
- 질문 : /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
- 코드 : http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
- 코드 : http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/