웹사이트 성능을 향상시키기 위해 JavaScript_javascript 팁을 처리하는 방법

특히 JavaScript 파일의 경우 다운로드 시 병렬 다운로드가 실제로 비활성화되고 페이지 렌더링도 차단됩니다!

JavaScript 다운로드 정보

JavaScript 스크립트 파일을 다운로드할 때 브라우저는 다른 다운로드를 동시에 시작하지 않지만 다른 요청을 계속하기 전에 JavaScript 스크립트 파일을 별도로 다운로드할 수 있도록 허용합니다. 이는 페이지 전체 성능에 큰 문제가 됩니다. 해결 방법은 다음과 같습니다.

해결 방법 1: JavaScript 스크립트를 페이지에 인라인합니다. 즉, JavaScript 스크립트를 작성합니다. HTML 태그에 직접 입력하세요.
장점: 가장 빠릅니다. 대규모 웹사이트의 홈 페이지에서는 JavaScript 스크립트의 일부를 HTML 태그에 직접 인라인하는 것이 합리적입니다.
단점: 자바스크립트 스크립트는 별도로 캐시되지 않으며, 다른 페이지에서 자바스크립트 스크립트를 공유할 수 없습니다(재사용할 수 없음).

해결책 2: HTML 파일 태그 하단에 JavaScript 스크립트 태그의 링크를 배치합니다.
요구 사항: 스크립트에 페이지를 다시 작성하기 위한 document.write() 메서드가 포함되어 있지 않습니다.

해결책 3: 지연된 스크립트를 사용하세요. 즉, 링크 태그에 defer 속성을 추가하면 JS 스크립트에 document.write() 메서드가 포함되어 있지 않음을 나타냅니다.
결함: Firefox에서 지연된 스크립트를 사용한 후에도 JavaScript 스크립트는 여전히 렌더링 및 병렬 다운로드를 차단합니다.
IE에서는 효과가 뚜렷하지 않습니다.

요약: 스크립트가 지연 스크립팅 기술을 사용할 수 있다면 반드시 페이지 하단으로 이동할 수 있습니다!
즉, '해결책 3'은 '해결책 2'로 완전히 대체될 수 있습니다.

해결책 4: 다운로드 후 로드를 사용하세요. 즉, 페이지가 로드된 후 onload 이벤트를 통해 JavaScript 스크립트가 동적으로 다운로드됩니다. (CSS도 보편적입니다.)
장점: HTML 페이지 렌더링을 차단하지 않으며 JavaScript 스크립트를 재사용할 수 있습니다(스크립트는 브라우저에 캐시됩니다).
단점: 이 기능을 구현하려면 추가 JavaScript 코드가 생성되므로 프로그램이 더 복잡해집니다.
문제: 두 번 로드될 수 있습니다(인라인으로 한 번, 외부로 한 번).

IFrame을 사용하여 페이지를 중첩하고 JavaScript 스크립트를 로드하면 이 문제를 해결할 수 있습니다.
예: http://stevesouders.com/hpws/post-onload.php

해결책 5: 동적 인라인. 쿠키를 표시기로 사용하고 코드를 사용하여 외부 JS를 페이지에 인라인하도록 판단합니다.
동적 인라인은 "로드 후 다운로드"를 더욱 개선한 것입니다. 또한 프로그램 복잡성이 다시 증가합니다.
자바스크립트 스크립트는 페이지 하단에 배치하는 것이 좋지만 CSS 스타일 시트는 페이지 상단에 배치하는 것이 좋습니다!

JavaScript 축소에 대하여

축소는 코드에서 불필요한 문자, 주석, 공백을 제거하여 JavaScript 코드의 크기를 줄여 다운로드 길이와 JavaScript 로딩 속도를 향상시키는 것입니다.

최소화 도구: JSMin JS Minifier js 압축
JSMin은 자바스크립트 파일에서 불필요한 문자, 주석, 공백을 모두 제거하는 데 사용됩니다.

cmd 사용법: C:Documents and Settingsxugang>jsmin js_rerurn.js
1. 먼저 jsmin.exe 폴더를 지정합니다.
2. openWin.js가 소스 파일입니다
3 .js_rerurn.js가 대상 파일입니다

Streamlining 도구: ShrinkSafe(원래 이름: Dojo Compressor) http://dojotoolkit.org/docs/shrinksafe
ShrinkSafe는 javascript 파일에서 공백을 제거하는 데 사용됩니다. 동시에 변수 이름도 대체를 통해 단축됩니다.
cmd 사용법: java -jarshrinksafe.jar infile.js > outfile.js
shrinksafe.jar은 도구 이름
infile.js는 소스 파일
outfile.js는 대상 파일

참고: 콘솔에서 실행할 때 Shrinksafe.jar과 js.jar이 동일한 디렉터리에 있는지 확인하고 입력 JS 소스 파일과 출력 JS 대상 파일도 동일한 디렉터리에 있어야 합니다. (기본값은 C 드라이브의 루트 디렉터리에 있습니다.)

일반적으로 JSMin과 ShrinkSafe 두 도구를 사용하여 JavaScript 파일을 간소화할 수 있습니다.
구성 요소 압축

동시에 HTTP 헤더 선언을 통해 스크립트, 스타일 시트 및 HTML 문서를 압축하여 응답 시간을 줄이는 것을 잊지 마세요.
브라우저 클라이언트 요청: Accept-Encoding: gzip, deflate
웹 서버 응답: Content-Encoding: gzip
gzip은 현재 인기 있고 이상적이고 효과적인 압축 방법이지만 deflate는 약간 덜 효과적이며 덜 인기가 있습니다.