모질라는 JavaScript를 GPU의 리소스를 이용하여 과속화 시도를 하고 있습니다.  Firefox의 Jetpack 프로젝트 일원인 Aza Raskin 은 “Elevating JavaScript Performance Through GPU Power” 글을 통해 GPU를 이용한 가속화에 대한 가능성과 방법을 제시하고 있습니다.

1. 고품질의 디지털 동영상이나 음악
2. 복잡한 이미지나 음성인식
3. 자연이나 우주와 관련된 큰 사진 처리
4. 브라우저에서 대용량 로컬 데이터 처리
5. DirectX 또는 OpenGL 을 이용한 DOM 엘리먼트의 복잡한 에니메이션
6. SecondLifeOpenSim Grid와 같은 3차원 탐험
7. 실시간 오디오 및 비디오 편집
8. 브라우저에서 실행되는 통합 개발 환경

또한 이 기술을 통해 JavaScript는 웹 시장에서 더 큰 기대치를 가질 수 있을지 모르겠습니다.

이러한 웹 브라우저의 고급 처리 요구에 부응하기 위해 NVIDIA가 추진하는 GPU를 이용한 병렬 처리 아키텍쳐의 CUDA runtime 환경을 JavaScript에서 사용하는 방법을 검토하고 있다는 것입니다.


GPU 화된 JavaScript

JavaScript확장하는 방법으로 API를 확장하는 방법과 JavaScript 구문을 확장하는 방법 2가지를 제시하고 있습니다. 다음의 소스들은 CPU에서 동일한 계산 sqrFun의 복잡도 및 컬렉션의 크기에 따라 많은 시간이 걸릴 수 있는 가능성을 통해 알아 봅니다.

일반화된 코드이긴 하나 실무에서는 이러한 처리에 추가적으로 CPU의 자바스크립트 해석, 페이지 렌더링, 응용 프로그램에서 운영체제 루틴 등등 기타 잡다한 처리를 동반합니다. 

During all of these CPU cycles, what is the GPU doing?


API 확장
var numbers = new Array(), size = 1000;
for (var i  = 0; i < size; ++i)
numbers[i] = i;

var sqrFun = function(v) { return  v * v; }
for (var i  = 0; i < size; ++i)
numbers[i] = sqrFun(numbers[i]);


Jetpack.toGPU() 를 사용하여 GPU 프로세스를 명시
var resNumbers = Jetpack.toGPU( function(nums, numsSize) {
  var sqrFun = function(v) { return  v * v; }
  for (var i  = 0; i < size; ++i)
    numbers[i] = sqrFun(numbers[i]);
  }, numbers,  size);

// some job here

document.write(resNumbers);

var sqrFun = function(v) { return v * v; }
map(sqrFun, numbers);

Functional
var sqrFun = function(v) { return  v * v; }
map(sqrFun, numbers);

var resNumbers = Jetpack.toGPU(function(nums,  numsSize) {
return  map(sqrFun, numbers);  }, numbers, size);

Microsoft LINQ
var resNumbers = Jetpack.Linq.toGPU().from(numbers).map(sqrFun);

jQuery
$("div.test"). add("p.quote").addClass("blue").slideDown("slow").toGPU();


멀티코어 CPU가 일반화되어 가고 GPU도 iPhone과 같은 모바일을 포함하여 대부분의 장치에 탑재되며 클라우드의 등장으로 분산 처리가 일반적으로 되어 왔으나 현재 JavaScript뿐만 아니라 모든 프로그래밍 언어에서는 병렬처리를 효과적으로 작성하고 실행하는 방법을 모색하고 있습니다.

현재로서는 위의 예시 코드와 달리 일반적으로 프로그래밍을 하면 컴파일러와 인터프리터가 그것 자동으로 최적의 병렬처리 방식으로 처리할 수 있는 이상적인 시스템은 없기 때문에 개발할 때에 어떤 부분을 병렬 처리할지에 대한 선택권은 전적으로 개발자에게 있다는 것입니다.


요약
Jetpack 는 모질라 연구소에서 브라우저와 운영체제 Native API 연결을 통하여 브라우저의 효율과웹의 경험을 극대화 하기 위한 많은 실험과 성과를 내놓고 있습니다.  하지만 우려되는 것은 역시 표준과 동떨어진 기술이 특정 브러우저 밴더의 기술로만 활용된다면 과거의 IE의 히스토리를 그대로 반영하게 되지 않을까 하는 것이다.

하지만 현 시점에서 달리 생각해볼 문제는 HTML5를 포함한 웹 표준 기술들의 진화이다.  웹을 이루는 다양한 요소요소마다 발전된 웹 표준을 위해서 엄청난 실험과 시도들이 표준화에 참여하는 벤더들에 의해서 진행되어오고 있다.

그중 SVG, Canvas, Video, Audio 의 부분은 순수한 웹 기술만으로는 표현은 어떻게든 하겠지만 발전을 보장하지 않을 뿐더러 효율적이지도 못하다는 것이다.  점차적으로 웹에서 처리하는 정보는 하드웨어의 발전과 같이 엄청난 속도로 발전해 오고 있고 고도화 되어오고 있기 때문에 Jetpack과 같은 실험은 분명 빠른 미래에 필요한 기술이 되리라 예측해본다.



함께 읽어보세요.
JavaScript 필수 프로그래밍 언어로 !! - http://rhio.tistory.com/346
JavaScript in 2009 and 2010 - http://rhio.tistory.com/341

참고자료 : http://mozillalabs.com/jetpack/2010/01/25/elevating-javascript-performance-through-gpu-power/


신고
Posted by Rhio.kim
Chrome

  브라우저의 상태를 직접 볼 수 있도록 다양한 기능을 숨겨두었네요.
  about:crash or about:% 의 경우에는 "헉!" 함께 경고창이 뜨는데 왜 이런 기능을 만들었을까? 
  궁금해 지네요.
 
 1. about:stats
 2. about:dns
 3. about:memory
 4. about:version
 5. about:histograms
 6. about:network
 7. about:plugins
 8. about:cache
 9. about:crash (%)
사용자 삽입 이미지

10. about:internets



FireFox 3

  파이어 폭스는 몇개 없어서 직접 실행 봤습니다. 재미있네요.
  내용들을 보니 모질라 재단의 사상을 넣어 둔것이 아닐까? 생각이 듭니다.

1. about:robots ->  
사용자 삽입 이미지

2. about:mozilla
  맘몬이 잠든 때에 짐승이 다시 태어나 온 지구를 뒤덮고 군대를 이루리라. 이들이 시대를 휘어잡고 교활한 여우와 같이 소출을 불태워 없애 버리는 도다. 이제 곧 신성한 언약에 말씀 대로 그의 형상에 따라 신천지를 만들리니 짐승과 그 자식이 말씀에 따르니라. 보라 맘몬이 깨어났으나 따르는 자가 없도다

모질라서 11장 9절 (10판)

3. about kitchensink (콜론이 없는 상태로 입력하시면 됩니다.)
사용자 삽입 이미지


출 처 : Host Intruder blog
신고
Posted by Rhio.kim
John Resig 의 블로그에서 퍼온 사진입니다..
가끔.. 지하철 타고 가다보면 광고용 텔레비젼에 보면 광고 컴퓨터 에러 창이 떠있는걸 봤는데..

외국에서는 생방송 중에 FireFox 업데이트 소식을 전했다네요... ^-^
우리 소프트웨어도 저렇게 광고 할 수 있는 날이 와야하는데 말이죠..

오늘의 날씨는 "파이어폭스가 2.0.0.11로 업데이트 되어...."
참 재미있네요... 저걸 캡쳐했다는게 ..
생방송 중인데 대단한 순발력 아니라면 ㅋㅋ...

그건 그렇고...
영문은 2.0.0.11까지 업데이트가 됐나보네요.. 국내 버젼은 2.0.0.3인데...

그리고 30, 31를 화씨로 하면 몇도죠..??
파이어 폭스는 공짜로 전국 방송에 광고를 했네요.... ^^
사용자 삽입 이미지

신고
Posted by Rhio.kim
TAG Firefox
원본 출처 : http://developer.mozilla.org/en/docs/Storage

파이어 폭스 개발자 사이트에 있는 내용중에 하나 입니다.
우연찮게 모질라 계열 Active X 부분 검색하다가 Storage 기능이 있다는걸 알게 되었는데요.

google gears 에서는 자체 active x를 이용해 Open 라이브러리 sqlite 라는 로컬 DBMS 이용해서
로컬 스토리지를 Active X가 설치 가능한 모든 브라우저에서 사용하고 있습니다.

파이어 폭스에서는 자체적으로 이런 기능을 지원하고 있습니다.

이는 파이어폭스에서만 지원되기 때문에 다른 브라우저에서는 사용할 수 없습니다.

이를 이용하면 어떤 장점들이 있냐하면 Ajax 개발을 통해 서버측 리소스를 모두 클라이언트
스토리지에 저장할 수 있습니다. 리소스는 어떤 개체든 상관없습니다. sqlite에는 바이너리 파일까지 저장이
가능한걸로 알고 있습니다.

이를 이용한다면 경우에 따라서는 서버측으로 쿼리를 던지지 않아도 됩니다.
또한 사이트의 메인 페이지 HTML 소스를 로컬 스토리지에 담아놓게 되면 사이트의 재접속시에
서버측에 Request를 할 필요가 없게 됩니다.

또한 이미지 자체 swf 파일 자체도 Sqlite에 입력해 놓고 불러올 수도 있습니다.

좀더 웹 하드 기능까지 할 수 있습니다. 이는 Ajax 개발에 있어 좀더 강력한 웹 어플리케이션을 만들고
web2.0 시대가 아닌 web3.0 의 차새대 웹 기반을 닦을 수 있는 좋은 부분이라고 생각합니다.

IE에서도 차차 이런 부분을 지원하지 않을까 생각도 해봅니다.
이에 Ajax기술은 좀더 각광 받을꺼라.... 삼천포로 많이 빠졌네요..

아무튼 FF에서만 지원되기는 하지만 로컬 스토리지의 역활을 하는 녀석이 있다는걸 오늘 새롭게 알았습니다.

Storage is a database API in Firefox 2 and above backed by sqlite. It is available to trusted callers only, which means chrome code and extensions, and not web pages. It is currently "unfrozen," which means that the API is subject to change at any time. It is likely that the API will change somewhat between Firefox 2 alpha 2 and Firefox 2 final, and also sometime between Firefox 2 and Firefox 3.

Storage is sometimes confused with the WHATWG DOM storage feature in Firefox 2 which can be used by web pages to store persistent data. The Storage API is for extension authors and Firefox components only.

This document covers the mozStorage API and some peculiarities of sqlite. It does not cover SQL or "regular" sqlite. For this you should use your favorite SQL reference. You might also want to look at the sqlite documentation and especially the query language understood by sqlite. For mozStorage API help, you can post to mozilla.dev.apps.firefox on the news server news.mozilla.org. To report bugs, use Bugzilla (product "Toolkit", component "Storage").

See Storage:Performance for how to get your database connection performing well.

SQLite Database Browser is a capable free tool available for many platforms. It can be handy for examining existing databases and testing SQL statements.

Contents

[hide]

신고
Posted by Rhio.kim

Firefox가 IE에 비해 너무 느려 터져서 무슨 방법이 있나 인터넷을 검색해 보았습니다.

Firefox의 초기설정치는 전화모뎀에 맞게 설정되어 있읍니다.
초고속 인터넷을 쓰시는 분은 주소창에 about:config를 치고 설정을 바꾸면 Firefox가 대단히 빨라집니다. 

nglayout.initialpaint.delay -> 0
(nglayout.initialpaint.delay 항목이 없으면 마우스 오른쪽 클릭으로 새 항목을 만듭니다.)
network.http.pipelining -> true
network.http.proxy.pipelining -> true
network.http.pipelining.maxrequests -> 64 이상


browser.cache.memory.enable -> true
browser.cache.memory.capacity -> 65536
(메모리가 많으면 더 늘려 준다.)
plugin.expose_full_path -> true

이렇게 하니 제법 상당히 빨라 집니다.
더 좋은 팁이 있으시면 공개바랍니다.

'network.http.pipelining.maxrequests'의 값을 너무 높이면 서버에서 밴(ban)당할 경우가 있습니다.

신고
Posted by Rhio.kim