PYRASIS.COM: 이재홍의 GitHub 탐험기 2014/08/03

책 또는 웹사이트의 내용을 복제하여 다른 곳에 게시하는 것을 금지합니다.
책 또는 웹사이트의 내용을 발췌, 요약하여 강의 자료, 발표 자료, 블로그 포스팅 등으로 만드는 것을 금지합니다.

jquery-pjax - pushState + ajax = pjax

HTML5의 history.pushState 함수를 사용한 웹 페이지 로딩 기술이며, jQuery 플러그인 형태로 되어 있습니다.

기존 AJAX는 동적으로 페이지를 생성하기 때문에 구글 크롤러가 데이터를 가져갈 수가 없었습니다. 그래서 Hashbang(#!)을 이용하여 다양한 꼼수들을 사용해왔습니다.

pjax는 다른 HTML 파일의 내용을 지정한 div안에 표시하는 기능입니다. 웹 브라우저의 URL은 가져온 HTML 파일 이름으로 표시되고, 뒤로가기 기능도 정상 동작합니다(HTML5를 지원하지 않는 브라우저는 그냥 전체 페이지를 로딩하므로 호환성 문제는 없습니다).

웹 브라우저의 URL이 바뀌었지만 history.pushState 함수로 히스토리를 조작했기 때문에 전체 페이지 로딩을 하지 않은 상태입니다. 즉 HTML 부분 로딩이 되는 것이죠.

http://pjax.heroku.com 예제 사이트를 보면 링크를 클릭할 때마다 시간이 바뀝니다. 이것은 전체 페이지가 매번 로딩되고 있다는걸 뜻합니다. pjax를 체크하면 링크를 클릭해도 시간이 바뀌지 않습니다. 아래 내용만 바뀌죠. 전체 페이지를 로딩하지 않고 내용만 가져왔기 때문에 시간이 바뀌지 않은 것입니다. 웹 브라우저의 URL은 가져온 HTML 파일을 표시하고 있습니다. 뒤로가기 기능도 잘 동작하지요.

AJAX로 웹사이트를 만들 때 구글 크롤러 문제 때문에 골머리를 썪었는데, 이걸로 한번에 해결되었습니다.

emscripten - An LLVM-to-JavaScript Compiler

https://github.com/kripken/emscripten

emscripten은 LLVM 중간언어를 JavaScript로 변환해주는 컴파일러입니다. 현재 C/C++을 지원합니다. 이렇게 되면서 C/C++ 프로그램을 웹에서 간단하게 돌릴 수 있게 되었습니다. Cocos2d-x도 예전에 emscripten용으로 포팅되어 웹에서 돌리는게 가능했습니다.

그냥 C/C++로된 소스를 바로 변환할 수는 없고, 플랫폼 의존적인 부분은 emscripten으로 수정해주어야 합니다.

asm.js - A low-level, extraordinarily optimizable subset of JavaScript

https://github.com/dherman/asm.js

emscripten로 변환된 JavaScript 코드를 더 빨리 실행하는 JavaScript Subset입니다(용도는 다르지만 TypeSript 같은건 Superset). asm.js는 사람이 코딩하는게 아니라 컴파일이 생성해내는 코드입니다.

emscripten으로 변환된 JavaScript는 정적타입 언어를 변환한 것이기 때문에 이걸 웹브라우저에서 그대로 돌리면 성능이 안나옵니다. 그래서 파이어폭스는 이런류의 코드("use asm")를 더 빨리 실행하기 위해 asm.js와 JavaScript 엔진 OdinMonkey를 개발했습니다.

기존 JavaScript 엔진은 JavaScript 코드를 실행할 때 JIT(Just-In-Time) 컴파일만 했지만, asm.js용으로 생성된 JavaScript는 AOT(Ahead-Of-Time, 실행 전) 컴파일을 하기 때문에 실행 속도가 빨라집니다.

지금은 asm.js가 파이어폭스에 최적화되어 있기 때문에 크롬에서는 파이어폭스보다 느립니다.

현재 언리얼과 유니티 엔진이 emscripten과 asm.js를 이용하여 웹 브라우저에서 실행되고 있습니다.