고성능 WEB 개발을 위한 놀라운 HTML 압축_javascript 기술

일반적으로 gzip을 시작할 때 현재 html은 동적이고 브라우저 캐시를 사용하지 않기 때문에 html에 대해 gzip을 거의 시작하지 않습니다. gzip이 활성화되면 각 요청을 압축해야 하며 이로 인해 더 많은 서버 리소스가 소비되고 js 및 시작됩니다. css.js와 CSS 모두 캐싱을 사용하므로 Gzip이 더 좋습니다. 개인적으로 HTML 압축의 가장 큰 장점은 돈을 많이 벌 수 있다는 점이라고 생각합니다. 한 번만 작성하면 추가 개발 작업을 추가하지 않고도 향후 모든 프로그램에서 사용할 수 있습니다.
"JS와 CSS의 병합, 압축, 캐시 관리" 기사에서 JS와 CSS를 자동으로 병합, 압축하고 버전 번호를 추가하는 내가 작성한 구성 요소를 언급했습니다. 이번에는 html을 압축하는 기능도 이 구성 요소에 추가되었습니다. 즉, 프로그램이 시작될 때(contextInitialized 또는 Application_Start) 압축을 위해 모든 html 및 jsp(aspx)를 검색하는 과정이 매우 간단합니다.
압축 참고 사항:
구현 방법은 주로 정규식을 사용하여 검색하고 바꾸는 것입니다. HTML을 압축할 때 주로 다음 사항에 주의해야 합니다.
1. pre, textarea 태그의 콘텐츠 형식을 유지해야 하며 압축할 수 없습니다.
2. HTML 주석을 제거할 때 다음과 같은 일부 주석은 제거할 수 없습니다: . 포함된 js에서 주석을 압축할 때 주의하세요. 주석 기호가 문자열에 나타날 수 있기 때문입니다. 예: var url = "http://www.cnblogs.com" // 위의 // 주석은 아닙니다.
JS 줄 바꿈을 제거하는 경우 작업 내용을 직접 따를 수 없습니다. 다음 코드를 고려하세요.
else
return; 공백이 없으면 elsereturn이 됩니다.
4. jsp(aspx)에서는 일부 서버 코드를 삽입하는 데 사용될 가능성이 매우 높습니다. 이때 내부 주석 처리 방법도 별도로 필요합니다. js와 동일합니다.
소스 코드:
다음은 Java 구현의 소스 코드입니다. 여기를 클릭하면 코드를 다운로드할 수 있으며 누구나 쉽게 넷 코드로 변경할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

import java.io.StringReader;
java.io.StringWriter 가져오기;
java.util.* 가져오기;
java.util.regex.* 가져오기;
/*******************************************
* jsp, html 코드 압축 , 모든 공백 및 개행 문자 제거
* @author bearrui(ak-47)
* @version 0.1
* @date 2010-5-13
********* *** *********************************/
public class HtmlCompressor {
private static String tempPreBlock = "%%%HTMLCOMPRESS~PRE&&&";
비공개 정적 문자열 tempTextAreaBlock = "%%%HTMLCOMPRESS~TEXTAREA&&&";
private static String tempScriptBlock = "%%%HTMLCOMPRESS~SCRIPT&&&";
private static String tempStyleBlock = "%%%HTMLCOMPRESS~STYLE&&&";
private static String tempJspBlock = "%%%HTMLCOMPRESS~JSP&&&";
비공개 정적 패턴 commentPattern = Pattern.compile("", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
비공개 정적 패턴 itsPattern = Pattern.compile(">\s ?<", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
비공개 정적 패턴 prePattern = Pattern.compile("]*?>.*?", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
비공개 정적 패턴 taPattern = Pattern.compile("]*?>.*?", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
비공개 정적 패턴 jspPattern = Pattern.compile("<%([^-@][\w\W]*?)%>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
// <스크립트>
비공개 정적 패턴 scriptPattern = Pattern.compile("(?:|", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
비공개 정적 패턴 stylePattern = Pattern.compile("()]*?>(. )", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);
// 单行注释,
private static Pattern signleCommentPattern = Pattern.compile("//.*");
// 字符串匹配
private static Pattern stringPattern = Pattern.compile("("[^"\n]*?"|'[^'\n]*?')");
// 트리밍 작업 공간
private static Pattern TrimPattern = Pattern.compile("\n\s*",Pattern.MULTILINE);
private static Pattern TrimPattern2 = Pattern.compile("\s*\ r",Pattern.MULTILINE);
// 多行注释
private static Pattern multiCommentPattern = Pattern.compile("/\*.*?\*/", Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern. MULTILINE);
private static String tempSingleCommentBlock = "%%%HTMLCOMPRESS~SINGLECOMMENT&&&" // //位符
private static String tempMulitCommentBlock1 = "%%%HTMLCOMPRESS~MULITCOMMENT1&&&" // /*符
private static String tempMulitCommentBlock2 = "%%%HTMLCOMPRESS~MULITCOMMENT2&&&" // */·位符

public static String 압축(String html)에서 예외 발생 {
if(html == null || html.length() == 0) {
return html;
List preBlocks = new ArrayList(); 배열목록()
목록 scriptBlocks = new ArrayList();
목록 styleBlocks = new ArrayList();
목록 jspBlocks = new ArrayList();
문자열 결과 = html;
//인라인 자바 코드 유지
Matcher jspMatcher = jspPattern.matcher(result);
while(jspMatcher.find()) {
jspBlocks.add(jspMatcher.group(0));
}
결과 = jspMatcher.replaceAll(tempJspBlock);
//PRE 태그 유지
Matcher preMatcher = prePattern.matcher(result);
while(preMatcher.find()) {
preBlocks.add(preMatcher.group(0));
}
결과 = preMatcher.replaceAll(tempPreBlock);
//TEXTAREA 태그 유지
Matcher taMatcher = taPattern.matcher(result);
while(taMatcher.find()) {
taBlocks.add(taMatcher.group(0));
}
결과 = taMatcher.replaceAll(tempTextAreaBlock);
//SCRIPT 태그 유지
Matcher scriptMatcher = scriptPattern.matcher(result);
while(scriptMatcher.find()) {
scriptBlocks.add(scriptMatcher.group(0));
}
결과 = scriptMatcher.replaceAll(tempScriptBlock);
// 인라인 CSS를 처리하지 않음
Matcher styleMatcher = stylePattern.matcher(result);
while(styleMatcher.find()) {
styleBlocks.add(styleMatcher.group(0));
}
결과 = styleMatcher.replaceAll(tempStyleBlock);
//순수 HTML 처리
result = processHtml(result);
//보존된 블록 처리
result = processPreBlocks(result, preBlocks);
결과 = processTextareaBlocks(결과, taBlocks);
결과 = processScriptBlocks(결과, scriptBlocks);
결과 = processStyleBlocks(결과, styleBlocks);
결과 = processJspBlocks(결과, jspBlocks);
preBlocks = taBlocks = scriptBlocks = styleBlocks = jspBlocks = null;
결과 반환.trim();
}
private static String processHtml(String html) {
String result = html;
//댓글 제거
// if(removeComments) {
result = commentPattern.matcher(result).replaceAll("");
// }
//태그 간 공백 제거
// if(removeIntertagSpaces) {
result = itsPattern.matcher(result).replaceAll("><");
// }
//여러 공백 문자 제거
// if(removeMultiSpaces) {
result = result.replaceAll("\s{2,}"," ");
// }
결과 반환;
}
private static String processJspBlocks(String html, List 블록){
String result = html;
for(int i = 0; i blocks.set(i,compressJsp(blocks.get(i)));
}
//보존된 블록을 다시 넣기
while(result.contains(tempJspBlock)) {
result = result.replaceFirst(tempJspBlock, Matcher.quoteReplacement(blocks.remove(0)));
}
결과 반환;
}
비공개 정적 문자열 processPreBlocks(String html, List 블록)에서 예외 발생 {
String result = html;
//보존된 블록을 다시 넣기
while(result.contains(tempPreBlock)) {
result = result.replaceFirst(tempPreBlock, Matcher.quoteReplacement(blocks.remove(0)));
}
결과 반환;
}
비공개 정적 문자열 processTextareaBlocks(String html, List 블록)에서 예외 발생 {
String result = html;
//보존된 블록을 다시 넣기
while(result.contains(tempTextAreaBlock)) {
result = result.replaceFirst(tempTextAreaBlock, Matcher.quoteReplacement(blocks.remove(0)));
}
결과 반환;
}
비공개 정적 문자열 processScriptBlocks(String html, List 블록)에서 예외 발생 {
String result = html;
// if(compressJavaScript) {
for(int i = 0; i blocks.set(i,compressJavaScript(blocks.get(i)) );
}
// }
//보존된 블록을 다시 넣기
while(result.contains(tempScriptBlock)) {
result = result.replaceFirst(tempScriptBlock, Matcher.quoteReplacement(blocks.remove) (0)));
}
결과 반환;
}
비공개 정적 문자열 processStyleBlocks(String html, List 블록)에서 예외 발생 {
String result = html;
// if(compressCss) {
for(int i = 0; i blocks.set(i,compressCssStyles(blocks.get(i)) );
}
// }
//보존된 블록을 다시 넣기
while(result.contains(tempStyleBlock)) {
result = result.replaceFirst(tempStyleBlock, Matcher.quoteReplacement(blocks.remove) (0)));
}
결과 반환;
}
private static String 압축Jsp(String source) {
//블록이 비어 있지 않은지 확인
Matcher jspMatcher = jspPattern.matcher(source);
if(jspMatcher.find()) {
String result = 압축JspJs(jspMatcher.group(1));
return (new StringBuilder(source.substring(0, jspMatcher.start(1))).append(result).append(source.substring(jspMatcher.end(1)))).toString();
} else {
반환 소스;
}
}
private static String 압축JavaScript(String source) {
//블록이 비어 있지 않은지 확인
Matcher scriptMatcher = scriptPattern.matcher(source);
if(scriptMatcher.find()) {
String result = 압축JspJs(scriptMatcher.group(1));
return (new StringBuilder(source.substring(0, scriptMatcher.start(1))).append(result).append(source.substring(scriptMatcher.end(1)))).toString();
} else {
반환 소스;
}
}
private static String 압축CssStyles(String source) {
//블록이 비어 있지 않은지 확인
Matcher styleMatcher = stylePattern.matcher(source);
if(styleMatcher.find()) {
// 去掉注释,换行
String result= multiCommentPattern.matcher(styleMatcher.group(1)).replaceAll("");
결과 = TrimPattern.matcher(result).replaceAll("");
결과 = TrimPattern2.matcher(result).replaceAll("");
return (new StringBuilder(source.substring(0, styleMatcher.start(1))).append(result).append(source.substring(styleMatcher.end(1)))).toString();
} else {
반환 소스;
}
}
private static String extractJspJs(String source){
String result = source;
// 문자열에 주석이 나타날 수 있으므로 문자열의 특수 문자를 먼저 제거해야 합니다
Matcher stringMatcher = stringPattern. matcher(result);
while(stringMatcher.find()){
String tmpStr = stringMatcher.group(0)
if(tmpStr.indexOf("//") != -1 || tmpStr.indexOf("/*") != -1 || tmpStr.indexOf("*/") != -1){
String blockStr = tmpStr.replaceAll("//" , tempSingleCommentBlock).replaceAll( "/\*", tempMulitCommentBlock1)
.replaceAll("\*/", tempMulitCommentBlock2);
result = result.replace(tmpStr, blockStr)
}
}
// 주석 제거
result = signleCommentPattern.matcher(result).replaceAll("");
result = multiCommentPattern.matcher(result).replaceAll("")
result = TrimPattern2 .matcher(result) .replaceAll("");
result = TrimPattern.matcher(result).replaceAll(" ");
// 대체된 문자열 복원
result = result.replaceAll( tempSingleCommentBlock, "//") .replaceAll(tempMulitCommentBlock1, "/*")
.replaceAll(tempMulitCommentBlock2, "*/");
return result;
}
}

사용 시 참고 사항 :

위 방법을 사용하고 프로그램을 실행한 후, 각 페이지의 소스코드를 보면 1줄로 되어있는데, 사용해보면 그래도 비용을 지불해야 하는 경우가 있나요? 몇 가지 문제에 주의:
1. js를 삽입할 때 원래 yuicompressor를 호출하여 JS를 압축하려고 했습니다. 먼저 js를 컴파일하여 합법적인지 확인합니다. embed는 var now = <%=DateTime.now %>와 같은 일부 서버측 코드를 사용할 수 있으며, 이러한 코드는 컴파일에 실패하므로 yuicompressor를 사용할 수 없습니다.
결국 압축된 JS 코드를 제가 직접 작성해야 했습니다. 제 글이 상대적으로 거칠어서 아직 해결해야 할 문제가 있습니다. 즉, 개발자가 js 코드 문장 뒤에 세미콜론을 추가하지 않으면, 압축된 JS 코드가 한 줄의 질문으로 압축될 가능성이 매우 높습니다. 따라서 이것을 사용할 때 각 명령문 끝에 세미콜론이 있어야 함을 확인해야 합니다.

2. 프로그램 시작 시 모든 jsp(aspx)가 압축되기 때문에 동적으로 생성된 html은 사용자가 요청할 때 압축될 수 없습니다.