Successfully reported this slideshow.
Your SlideShare is downloading. ×

Deview2013 track1 session7

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 46 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Deview2013 track1 session7 (20)

Advertisement

Recently uploaded (20)

Deview2013 track1 session7

  1. 1. Desktop Application에 도전하는 JavaScript 권병철 SynapSoft WebOffice Team
  2. 2. 네이버 오피스는 어떻게 만들었나요?
  3. 3. 그러게요.... 어떻게 만들었을까요?
  4. 4. Naver Office 개발 뒷담화
  5. 5. SynapSoft? • 문서 처리 솔루션의 히든 챔피 언 • 문서 필터, HTML 변환기 제작
  6. 6. WebOffice? 웹오피스, 만들지 않겠는가?
  7. 7. 그까이꺼 대~충 HTML 변환기 + 편집기능
  8. 8. 모든 게 잘 되는 것 같았다
  9. 9. But...
  10. 10. Performance Tuning JavaScript에 날개를 달자
  11. 11. Dynamic Rendering
  12. 12. Dynamic Rendering • Rendering 도중 브라우저 사망
  13. 13. Dynamic Rendering • render 대상을 chunk • 브라우저 '응답 없음'의 기준 • 실행 시간(×) • Function call 내 명령 수 • setInterval, setTimeout • 뻗는 것보다 조금 느린 게 낫 다!
  14. 14. Dynamic Rendering • Rendering 이후 • 스크롤 안돼! • 메뉴 클릭 안돼!! • 편집도 안돼!!! • DOM 객체가 많다 = DOM Tree가 무겁다 = 리소스를 많이 먹는다
  15. 15. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 whole contents browser window
  16. 16. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 • 사용자 경험을 고려해 buffer 영역 설정 whole contents buffer browser window
  17. 17. 그래도 안 돼요! • DOM element를 삽입/소거하 는 과정에서 reflow 발생!! • 적게는 성능 하락 • 많게는 ◀ 보시다시피 -_-;;
  18. 18. Reflow & Repaint repaint bgColor reflow visibility insert / delete node reposition resize font border
  19. 19. Reflow & Repaint // bad var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // good el.style.cssText += "; left: " + left + "px; top: " + top + "px;"; • reflow가 일어날 상황은 한 번 에 몰아서 처리
  20. 20. Reflow & Repaint // bad function setStyle(oStyle) { // move if needed // resize if needed // set color if.... } // good function move(x, y) {...} function resize(x, y) {...} function setColor(c) {...} • paint 함수를 세분화하여 repaint만 가능할 때는 repaint 만 하도록 유도
  21. 21. Dynamic CSS Styling
  22. 22. Dynamic CSS Styling • • hello, again :-P 모든 node의 CSS style 재정의 loop 돌다 브라우저 사망
  23. 23. Dynamic CSS Styling // Internet Explorer document.styleSheets .addRule(sel, idx); document.styleSheets .rules[idx].style.cssText = "..."; // FireFox & Chrome document.styleSheets .insertRule(sel, idx); document.styleSheets .deleteRule(idx); • document.styleSheets 객체 • 스타일 시트 정의 • script level에서 임의로 추 가/수정/삭제 가능
  24. 24. Exploits 브라우저의 한계를 회피하는 꼼수(?) 들
  25. 25. Local Font Detection
  26. 26. Local Font Detection • 임의의 DIV에 문자열 삽입 • 글꼴 적용 • 높이/너비가 변경되는지 확인! hello, world! hello, world! not installed hello, world! installed
  27. 27. Clipboard Handling • 외부 클립보드 데이터가 브라 우저와 호환되지 않음 • 브라우저 clipboard 객체에서 접근 불가능한 정보도 존재 • [office Object]
  28. 28. Clipboard Handling • 브라우저간/제품간 클립보드 정보 공유 • 각 process별로 독립된 클립보 드 제어 • 제품간 적절한 문서 모델로 변 경
  29. 29. Clipboard Handling • hidden iframe to hook Ctrl+C/V
  30. 30. Clipboard Handling • pic? text? typ e obj? encode model ↔ html strip tags 객체의 type에 따라 • base64 인코딩 • html로 변환 • 태그 정렬 등등...
  31. 31. Vector Element Events • <SVG> or <VML>, whatever it is... click! BOOO~! selected ? 이벤트의 기본은 직교 영역 • 사용자 직관을 벗어남
  32. 32. Vector Element Events(Non-IE) • pointer-events property • SVG 전용 속성 • "그려진 부분"만 이벤트가 적 용되게 할 수 있음 • mouseDown • mouseOver • mouseUp pointerEvents == "auto"? click! selected!
  33. 33. Vector Element Events(IE) • 특정 클래스명을 검사 • 실제 path와 상위 VML 클 래스명이 다름 • 이벤트가 적절하지 않으면 • document .elementFromPoint() • nextElement.fireEvent() className=="manipulable" ? click! selected!
  34. 34. Conclusion 단언컨대, JavaScript는 가장 hot한 언어입니다.
  35. 35. JavaScript Rules! Toy Trash
  36. 36. JavaScript Rules! Trend
  37. 37. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  38. 38. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  39. 39. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
  40. 40. 하지만 실제론... Just another Community app with bootstrap!
  41. 41. 우린 아직 배고프다! • 워드 : 인쇄 결과물과 동일한 편집 페이지 분할(pagination) • 공동 편집 • 오프라인 캐시 • 더욱 강력한 기능들 • 문서 효과(그림자, 반사 등) • 글머리 기호 • 애니매이션 • 겹선 테두리 • 기타등등...
  42. 42. 도전하세요!
  43. 43. Thank You! overock@synapsoft.co.kr twitter.com/overockaffe facebook.com/overockaffe Any Questions?

×