어떻게 하면 당신 의 WEB 앱 을 더욱 빨리 달 릴 수 있 습 니까?

어떻게 하면 WEB 응용 프로그램 을 더 빨리 달 릴 수 있 습 니까http://cyfgod.iteye.com/blog/290550키워드:css,웹 의 전형 적 인 WEB 응용 프로그램 은 많은 파일 내용 을 포함 할 수 있 습 니 다.J2EE 응용 프로그램 으로 볼 때 보통 class,jar,그리고 jsp/js/css/xml 등 파일 이 있 습 니 다.특히 절차 가 방대 해 지면 서 이 문서 들 도 배로 늘 었 다.어떻게 하면 당신 의 WEB 앱 을 더욱 빨리 달 릴 수 있 습 니까?백 엔 드 의 코드 최적화 와 응용 논리 가 매우 밀접 하 므 로 여기 서 설명 하지 않 고 여기 서 자주 사용 하 는 전단 코드 에 대한 최적화 방법 만 제시 합 니 다.보통 JS 와 CSS,그리고 image 이미지 파일 입 니 다.1)JS 파일 을 포장 하고 압축 처리 해 야 한다.흩 어 진 모든 JS 파일 을 JS 파일 로 포장 하고 일부 변수 와 형식 을 압축 하여 브 라 우 저 에서 차단 하 는 시간 을 줄 일 수 있 습 니 다.YUI 의 copressor 패키지 로 ant 스 크 립 트 를 작성 하여 처리 할 수 있 습 니 다.예 는 다음 과 같다.

<project name="JSCompress" basedir="." default="compress.all">  
    <property name="lib" value="WEB-INF/lib" />  
    <property name="jspath" value="js" />  
    <property name="yui-compressor.jar" location="${lib}/yuicompressor-2.3.4.jar" />  
  
    <target name="compress.all">  
        <concat destfile="${jspath}/allInOne.js">  
            <filelist dir=".">  
                <file name="${jspath}/prototype.js">  
                </file>  
                <file name="${jspath}/a.js">  
                </file>  
                <file name="${jspath}/b.js">  
                </file>                 
            </filelist>  
        </concat>  
        <java jar="${yui-compressor.jar}" fork="true" failonerror="true" logError="true">  
            <arg value="--nomunge" />  
            <arg value="--disable-optimizations" />  
            <arg value="-o" />  
            <arg value="${jspath}/allInOne.js" />  
            <arg value="${jspath}/allInOneMerged.js" />  
        </java>  
    </target>  
</project>  

 
이 예 는 매우 간단 하 니,여러분 스스로 가서 시험 해 보고,약간의 파 라 메 터 를 조정 할 수 있 습 니 다.2)CSS 파일 에 대해 서도 하나의 CSS 파일 에 포장 할 수 있 으 며,위 스 크 립 트 의 concat 작업 을 참고 할 수 있 습 니 다.3)image 파일,특히 자주 사용 되 는 작은 icon 아이콘 을 각각 다운로드 하면 시간 이 낭비 되 는 것 이 어디 있 습 니까?CSS sprite 기술 이 필요 합 니 다.모든 아이콘 을 큰 그림 에 합성 하여 CSS 제어 로 필요 한 작은 아이콘 을 표시 합 니 다.관련 CSS 예 시 는 다음 과 같다.

#container li {background: url(../images/toolbar/toolbar.gif) no-repeat top left;}  
  
.toorbarImageButton  
{  
    background: url(../images/toolbar/toolbar.gif);  
    background-color : transparent;   
    background-repeat: no-repeat;   
    border-style: none;  
    width: 16px;   
    height: 16px;  
}  
  
/* CSS Rules */  
.sprite-new { background-position: 0 -20px; }   
.sprite-save { background-position: 0 -56px; }   
.sprite-open { background-position: 0 -92px; }   
.sprite-Delete { background-position: 0 -164px; }   

 여기 에는 바보 카메라 처럼 큰 그림 과 CSS 파일 을 직접 만 들 수 있 는 좋 은 사이트 가 있 습 니 다.
http://spritegen.website-performance.org/