사이트 성능 향상

특히 자바 스 크 립 트 파일 은 다운로드 할 때 병행 다운로드 가 사실상 비활성화 되 어 있 으 며 페이지 의 표 시 를 막 을 수 있 습 니 다!자 바스 크 립 트 에 대한 다운 로드 는 자 바스 크 립 트 스 크 립 트 파일 을 다운로드 할 때 브 라 우 저 는 다른 다운 로드 를 병행 하지 않 고 자 바스 크 립 트 스 크 립 트 파일 을 단독으로 다운로드 한 후 다른 요청 을 계속 합 니 다.이것 은 페이지 의 전체 성능 에 큰 문제 가 될 것 입 니 다.해결 방안 은 다음 과 같 습 니 다.해결 방안 1:자 바스 크 립 트 스 크 립 트 를 페이지 에 연결 합 니 다.즉,자 바스 크 립 트 스 크 립 트 를 HTML 탭 에 직접 쓰 는 것 입 니 다.장점:속도 가 가장 빠르다.대형 사이트 의 홈 페이지 에 서 는 자바 스 크 립 트 스 크 립 트 의 일 부 를 HTML 태그 에 합 리 적 으로 연결 할 수 있 습 니 다.단점:JavaScript 스 크 립 트 는 단독 캐 시 되 지 않 습 니 다.다른 페이지 에 서 는 이 JavaScript 스 크 립 트 를 공유 할 수 없습니다(다시 사용 할 수 없습니다).솔 루 션 2:자바 스 크 립 트 탭 의 링크(link)를 HTML 파일 탭 의 아래쪽 에 놓 습 니 다.요구:스 크 립 트 에 document.write()방법 으로 페이지 를 바 꾸 는 것 은 포함 되 지 않 습 니 다.솔 루 션 3:지연(Defferred)스 크 립 트 를 사용 합 니 다.링크 탭 에 defer 속성 을 추가 하면 JS 스 크 립 트 에 document.write()방법 이 포함 되 어 있 지 않 음 을 나타 낸다.결함:Firefox 에서 지연(Defferred)스 크 립 트 를 사용 하면 자바 스 크 립 트 스 크 립 트 가 나타 나 는 것 을 막 고 병렬 다운 로드 를 막 습 니 다.IE 에서 도 효과 가 뚜렷 하지 않다.요약:스 크 립 트 가 지연(Defferred)스 크 립 트 기술 을 사용 할 수 있다 면 페이지 아래로 이동 할 수 있 습 니 다!즉'솔 루 션 3'은'솔 루 션 2'로 충분히 대체 할 수 있다.솔 루 션 4:로 딩 을 사용 하여 다운로드 합 니 다.즉,JavaScript 스 크 립 트 는 페이지 로 딩 이 끝 난 후 onload 이벤트 로 동적 으로 다운로드 합 니 다.(CSS 도 통용)장점:HTML 페이지 의 표현 을 막 지 않 을 뿐만 아니 라 자바 스 크 립 트 스 크 립 트 의 재 활용 도 실현 할 수 있 습 니 다(스 크 립 트 는 브 라 우 저 에 캐 시 됩 니 다).단점:이 기능 을 실현 하기 위해 추가 자 바스 크 립 트 코드 를 생 성하 여 프로그램의 복잡 도 를 증가 시 켰 다.문제:두 번 불 러 올 수 있 습 니 다.IFrame 에 페이지 를 끼 워 넣 고 자 바스 크 립 트 스 크 립 트 를 불 러 와 서 해결 할 수 있 습 니 다.예:4.567915.해결 방안 5:동적 내 연.쿠키 에 따라 표시 기 를 만 들 고 코드 로 판단 하여 외부 JS 를 페이지 에 연결 합 니 다.동적 내 연 은'불 러 온 후 다운로드'에 대한 보완 이다.절차 복잡 도 를 다시 높 였 다.자 바스 크 립 트 스 크 립 트 는 페이지 아래쪽 에 두 는 것 을 추천 하지만 CSS 스타일 시트 는 페이지 상단 에 두 어야 합 니 다!JavaScript 에 대한 간소화(Minification)는 코드 에서 불필요 한 문자,주석,공백 을 제거 하여 JavaScript 코드 의 크기 를 줄 이 고 JavaScript 의 다운로드 길이 와 로드 속 도 를 개선 하 는 것 입 니 다.간소화 도구:JSminhttp://stevesouders.com/hpws/post-onload.phpJSmin 은 javascript 파일 의 모든 불필요 한 문자,주석,공백 을 제거 하 는 데 사 용 됩 니 다.cmd 사용 방법:C:\\Documents and Settings\\xugang>jsminjsrerurn.js 1.jsmin.exe 폴 더 2.openWin.js 를 원본 파일 로 지정 합 니 다 3.jsrerurn.js 대상 파일 간소화 도구:ShrinkSafe(본명:Dojo Compressor)http://dojotoolkit.org/docs/shrinksafe ShrinkSafe 는 javascript 파일 의 공백 을 제거 하 는 데 사용 되 며,변 수 를 교체 하 는 방식 으로 줄 였 습 니 다.cmd 사용 방법:자바-jar shrinksafe.jar infile.js>outfile.js shrinksafe.jar 는 도구 이름 infile.js 를 원본 파일 outfile.js 로 대상 파일 입 니 다.주의:콘 솔 에서 실 행 될 때 shrinksafe.jar 와 js.jar 가 같은 디 렉 터 리 에 있 는 지 확인 하고 입력 한 JS 원본 파일 과 출력 한 JS 대상 파일 도 같은 디 렉 터 리 에 있 습 니 다.(기본 값 은 CD 루트 디 렉 터 리)일반적으로 자바 스 크 립 트 파일 을 JSmin 과 ShrinkSafe 두 도 구 를 동시에 사용 하여 간소화 할 수 있 습 니 다.구성 요 소 를 압축 하 는 동시에 HTTP 의 머리 설명 을 통 해 스 크 립 트,스타일 시트,HTML 문 서 를 압축 하여 응답 시간 을 줄 이 는 것 을 잊 지 마 세 요.브 라 우 저 클 라 이언 트 의 요청:Accept-Encoding:gzip,deflate 웹 서버 의 응답:Content-Encoding:gzip gzip 는 현재 유행 하고 이상 적 이 며 효과 적 인 압축 방법 으로 deflate 효과 가 약간 떨 어 지고 유행 하지 않 습 니 다.

좋은 웹페이지 즐겨찾기