Chrome browser & 확장 도구

Engine V8

chrome browser는 응용 프로그램이며

js 소스코드는 구글이 독자개발한 Javascript engine v8 상에서 수행된다.

Tab 별로 process를 할당한다.

TurboFan을 사용하여 기계어로 변환한다.

JavaScript Code → AST (parsed)

AST → Bytecode (Ignition interpreter)

Hot Code → Optimized Machine Code (TurboFan JIT)

Memory Cleanup (Orinoco GC)

성능 측정

chrome experiments에서 js engine에 과부하를 발생시키는 데모가 존재한다.

https://experiments.withgoogle.com/collection/chrome

개발자 도구 > 설정 > experiments

크롬 확장

page action

조건을 만족하는 페이지만을 대상으로 주소 바 아이콘에서 알림 생성

contents script

페이지 내용 조작

xmlhttprequest

임의의 도메인으로부터 웹 페이지 내용 가져오기

tab

탭 생성, 삭제, 배치 변경, css 삽입, script 실행 등

NPAPI
local file read가 가능한 plugin 이지만 chrome 보안을 무력화한다.

개발 시 샌드박스를 통해 보안을 강화해야한다.

웹 앱에서 허용되지 않는 기능이 있는데,

- 백그라운드 처리와

- 호출하는 domain과 호출받는 domain이 다른 cross-domain 통신이다.

확장 도구를 사용하면
이 제약사항을 넘어서 애플리케이션을 개발할 수 있다.

크롬 확장 개발

- html / css / js webstandards 사용

- xml 파일
  자동 update를 위한 업데이트 정보 기록

- manifest.json 파일
  크롬 확장 권한을 정의함으로서 보안에 관여한다.
  1. cross-domain 통신
  2. 탭 조작
  3. 북마크 조작

크롬 확장 개발 API

• 웹 표준 API
  안정, 표준.
  chrome 확장에서 사용하는 Program 라이브러리
  DOM, CSS ECMAScript,...
  
  
  
  
• 확장 API
  안정, 독자,
  
  
  
• 선행구축 API
  변동 많음.

Context & Script

• 확장 context <--- messages ---> content context
  
  
  
• 확장 context ------JS실행-------> Site script
  
  
  
• content context <---JS실행&문자열 형태 Response---> Site script

site script = 표시된 일반 사이트의 js

web worker

웹 앱의 응답 속도를 악화시키지 않기 위해

시간이 걸리는 처리를 백그라운드에서 처리하기 위한 기능.

• Foreground script = UI Script

• Background script = Worker

이 둘은 Global 변수를 공유하지 않으며

event를 통해 데이터를 교환한다.

• UIScript ----worker.postMessage()-----> worker

• UIScript <---postMessage()------ worker

독립된 js file에 worker의 로직을 작성한다.

var worker = new Worker("example.js")

example.js 에서는 XMLHttprequest를 동기 상태로 호출한다.

UIScript와 Worker는 병렬로 동작한다.

Worker에서 터리가 멈추더라도 UIScript에 영향은 없다.


AJAX를 많이 사용하는 애플리케이션은

callback호출을 많이 사용하게 되는데,

http 요청을 worker로 처리하면 callback을 다소 줄일 수 있다.

html5 API

• 캔버스
  
  
• DOM
  
  
• ECMA
  
  
• 웹 스토리지/Web sql db
  
  web sql database는 표준화가 중지되었다.

• 웹킷 CSS
  웹킷 = 크롬의 렌더링 엔진이다.

WebGL & programming

웹 표준 3D CG API
JS 기반 3D CG API

openGL ES 2.0 기반  (임베디드 디바이스용)

webgl 애플리케이션 개발

GLSL사용,

webgl context를 획득한 뒤

canvasMatrix.js라는 좌표 계산용 행렬 프로그램 라이브러리를 활용하여 계산을 수행한다.

webgl 렌더링 파이프라인 및 셰이더 프로그램은 범위를 벗어나므로 생략