Ajax를 사용하여 Binary File 읽기

nagoon97님의 Reading binary files using Ajax 포스트에서는 Ajax를 이용하여 바이너리 파일에 접근하는 방법을 소개하고 있습니다.

1. function BinFileReader(fileURL) {...} 을 호출합니다.
   
2. 내부 변수들을 초기화 작업을 수행합니다.
   
3. Browser의 userAgent를 체크하여서 IE인 경우에는 BinFileReaderImpl_IE를 호출하고 그 외의 경우에는 BinFileReaderImpl을 호출합니다.
   
4. function BinFileReaderImpl(fileURL) {...} 에서는
   1. XMLHttpRequest를 생성한 다음에 mime type을 'text/plain; charset=x-user-defined' 설정한 다음에 file을 요청합니다.
      req.overrideMimeType('text/plain; charset=x-user-defined');
      
      
   2. 성공적으로 로딩한 다음에는 fileContents에 responseText를 저장하고
   3. fileSize를 responseText.length를 저장합니다.
   4. 이 때 readByteAt(index) 메소드를 생성하는데 charCodeAt(index) & 0xff 값을 리턴합니다.
      
      
5. function BinFileReaderImpl_IE(fileURL) {...}에서는 (VB코드로 구현)
   1. VB 코드를 사용하여 XMLHttp Request를 생성한 다음에
   2. 헤더에 "Accept-Charset", "x-user-defined"로 설정한 후 file을 요청합니다.
   3. file 로딩이 완료된 다음에는 responseBody를 통하여 byteArray를 얻어옵니다.
   4. 이 byteArray를 Array()로 변환한 다음에 fileSize를 생성 및 readByteAt()를 생성합니다.

내부에는 filePointer (private)변수를 가지고 있어서 readString()을 호출하여 읽어들이는 경우 해당하는 읽어들이는 위치로 파일 포인터(위에서 얻어온 Array 또는 String에 접근하기 위한 index)를 변경 시킨 다음에 읽어들이게 됩니다.

제공되는 API는 다음과 같습니다.

1. getFileSize() : 파일크기를 리턴
   
2. getFilePointer() : 파일을 읽어들일 위치를 지정하는 내부 포인터의 값
   
3. movePointerTo(iTo) : 포인터 위치 이동 (0 이상 fileSize 아래의 값으로 제한을 주는 것 외에는 값만 변경)
   
4. movePointer(iDirection) : 읽어들이는 방향의 변경
   
5. 그 외에 readNumber, readString, readUnicodeString을 사용하여 파일을 읽기 위해서 사용되는 메소드 제공

제공되는 예제에 BMP 파일의 헤더를 직접 읽어들여서 width/height/bits per pixel 값과 fileSize를 읽어들이는 것을 보실 수도 있습니다.

function showBmpInfo(oImg){
	var bmpFile = new BinFileReader(oImg.src);

	// bmpFile의 헤더에서 width/height 값을 직접 읽어들입니다.
	bmpFile.movePointerTo(18);
	var width = bmpFile.readNumber(4);
	var height = bmpFile.readNumber(4);

	// skip the number of color planes as it is always 1
	bmpFile.movePointer(2);
	var BitsPerPixel = bmpFile.readNumber(2);
	alert("Width: "+width+"\nHeight: "+height+"\nBits Per Pixel: "
		+BitsPerPixel+"\nSize: "+bmpFile.getFileSize()+" bytes");
}

출처: Reading binary files using Ajax(via)

Five Common Ajax Anti-Patterns

Ajax Pattern에 이어서 Ajax Anti-Pattern도 나왔군요. (빠르기도해라.. -_-;;)

1. 타이머가 필요 없음에도 불구하고 폴링을 위해서 타이머를 사용하는 경우
 - Polling on a timer when you don't need to.
타이머는 지정한 시간 단위마다 호출되는 기능을 가지고 있습니다. 이러한 기능들을 이용하여 애니메이션을 보여주는 기능에 사용할 수 있습니다.

그러나, 이러한 만들어진 목적을 벗어나서 많은 곳에 사용할 경우, 타이머의 기능이 원하는 시간에 호출되지 못할 수도 있습니다. (자바스크립트는 단일 스레드를 사용하기 때문입니다.)

1. XMLHttpRequest를 보낸 후 응답을 받기 위해서 타이머를 사용 - onreadystatechange의 callback 메카니즘을 사용
   
2. 사용자 입력단어에 따른 검색 결과(Auto-Complete)를 보여주기 위해서 타이머를 - onkeyup의 callback 메카니즘을 사용

2. Callback을 받을 때, 리턴 결과를 확인하지 않는 경우
 - Not inspecting the return results in the callback.
XMLHTTPRequest를 사용해서 응답을 받는 경우 (onreadystatechange의 callback으로 메소드가 호출될 때) readyState나 status를 확인해보지 않고 사용을 하는 경우, 응답이 전부 도착하지 않는 경우라도 계속하여 state가 변화되고, 따라서, onreadystatechange의 callback이 호출되게 됩니다.

따라서, 불완전한 데이터를 전송 받게되어서 에러가 발생할 수 있게 되는 것이죠.

1. readyState와 status 체크함으로 해결할 수 있습니다. (req는 request입니다.)
   if (req.readyState == 4 && req.status == 200 ) {
   

   }

3. HTML만으로 될 일을 복잡한 XML로 하는 경우
 - Passing complex XML when HTML would be better.
서버사이드의 부하를 줄이기 위해서 클라이언트로 부하를 덜어오는 것 자체는 나쁘지 않습니다. 그러나, 클라이언트가 복잡해진다는 말은 많은 양의 자바스크립트(브라우져 호환성도 생각해야죠.)가 사용되어야 하는 의미이므로 항상 좋은 것은 아닙니다.

서버와 클라이언트 사이에서 잘 균형이 잡혀야되지 한 쪽에 부하를 주어서는 안됩니다. (정렬하거나 검색하거나,  추가, 삭제같은 동적인 작업이 필요하다면, 더 복잡한 클라이언트라도 괜찮습니다. 그러나, 단순하게 보여주는 즉, HTML로 대체될 수 있는 작업이라면 HTML로 작성하세요.)

4. JavaScript(JSON)를 사용하지 않고 XML 데이터를 주고 받는 경우
-  Passing XML when you should pass JavaScript code.
JSON을 쓰게되면,

1. 코드를 쉽게 짤 수 있습니다.
   
2. 전송하는 데이타의 양이 작아집니다. (실험한 데이터로는 52%까지 줄였다고 하네요.)
   
3. 데이터를 읽어들이는 속도가 빠릅니다. (실험했을 때는 9%정도 줄였다고 합니다만 정확하게는 데이터의 종류에 따라 달라질 수 있습니다. 복잡한 데이터의 경우는 XML이 더 빠릅니다.)

5. 서버에서 너무 많은 일을 하는 경우
 - Doing too much on the server
한 페이지의 테이블을 정렬하는 작업같은 경우는 서버에서 수행하는 것보다 JavaScript에서 처리하는게 더 빠르고 효율적입니다.

가장 중요한것은 치우치지 않는 균형감각이 아닐까 싶네요. ^^

출처 :

InfoQ의 Five Common Ajax Anti-Patterns와 원본기사인 IBM의 Ajax and XML의 Five Ajax anti-patterns

Ajax Optimization

1. Ajax Optimization 중 Souce 배포에 관련된 Optimization

1. Minifying

프로그램에서 불필요한 주석이나 공백을 삭제합니다. 프로그램의 크기를 반정도 줄이는 게 가능하며 JSMin, ShrinkSafe을 사용하여 줄일 수 있습니다. Minifying을 하기 전에는 JSLint같은 프로그램을 사용하여 ';'의 사용 등을 체크할 필요가 있습니다.
@개인적으로 JSMin으로 실험해봤을 때는 많은 경우 58%까지 줄일 수 있고, 평균 66%정도가 주는 것 같습니다.

2. Obfuscating

변수 이름(variable names)이나 함수(function), 등을 모두 다른 변수명으로 바꿔서 프로그램의 크기를 최소화 시키고 또한, 프로그램을 읽기 힘들게 만듭니다. Saltstorm, Memtronic에서 제공됩니다. Memtronic의 경우 js파일을 gzip 형태로 압축도 가능합니다.

3. Gzipping

Http Compression은 Server에서 Client로 html파일이나 JavaScript파일을 전송할 때 gzip으로 압축해서 전송하고, 브라우저에서는 이를 받아서 압축을 푼다음 실행하게 됩니다. [유경상님의 'HTTP 압축 작동 원리' 참고]
IIS에서는 이를 지원하고 있으며, Apache에서도 mod_gzip, mod_deflate을 통해서 지원이 되고 있습니다.

2. Code 상에서의 Optimization
Ajax Program이 사용되면서 페이지 갱신없이 리로딩하는 방식이 사용되었습니다. 이로인하여 페이지에 할당되어 있는 Object가 GC되지 않아서 메모리 누수가 발생하게 됩니다. 이를 해결하기 위해서는 다음의 방법이 필요합니다.

1. Object에 대해서 사용하지 않는다는 표시를 명확하게 해줘야 한다. (null처리가 들어가야 한다.)

2. 여러 파일들을 하나의 파일로 합침으로서 로딩타임을 최소화 시킬 수 있다.
(Prototype의 경우 여러 클래스 파일들을 하나의 파일로 합쳐서 배포하는 형태를 취하고 있습니다. - 필요 클래스만 묶을 수 있다는 장점이 있는 반면에 config파일을 통해서 묶을 파일을 항상 정해줘야 하는 단점도 있습니다.)

3. WebApp의 Profiling

1. WebApp의 Loading time 측정 - new Date().getTime()을 사용하면 됩니다. /측정시에는 Cache를 삭제함으로서 초기 로딩시간에 대한 측정이 되어야 합니다. /이 외의 Profiling에서도 기준이 되는 것은 time과 관련하여 측정할 수 있습니다.

2. Dojo의 profile kit을 사용하는 방법

3. Server단 에서의 메모리 측정

출처:

유경상님의 Http Compression
OSCON 2006: Ajax Optimization Techniques
Yahoo! user interface blog : Minifycation vs Obfuscation
On the Stre@m: Biggest AJAX Problem

참고:

How to Profile and Optimize your Ajax application