Deview2013 track1 session7
•Transferir como PPTX, PDF•
7 gostaram•4,006 visualizações
DEVIEW2013 - 네이버 오피스 삽질기
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Deview2013 track1 session7
Semelhante a Deview2013 track1 session7 (20)
Último
Último (7)
Deview2013 track1 session7
- 1. Desktop Application에 도전하는 JavaScript 권병철 SynapSoft WebOffice Team
- 7. Naver Office 개발 뒷담화
- 8. SynapSoft? • 문서 처리 솔루션의 히든 챔피 언 • 문서 필터, HTML 변환기 제작
- 11. 모든 게 잘 되는 것 같았다
- 12. But...
- 15. Dynamic Rendering • Rendering 도중 브라우저 사망
- 16. Dynamic Rendering • render 대상을 chunk • 브라우저 '응답 없음'의 기준 • 실행 시간(×) • Function call 내 명령 수 • setInterval, setTimeout • 뻗는 것보다 조금 느린 게 낫 다!
- 17. Dynamic Rendering • Rendering 이후 • 스크롤 안돼! • 메뉴 클릭 안돼!! • 편집도 안돼!!! • DOM 객체가 많다 = DOM Tree가 무겁다 = 리소스를 많이 먹는다
- 18. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 whole contents browser window
- 19. Dynamic Rendering • 보이는 부분만 렌더링하면? • 보이지 않는 부분은 소거 • 사용자 경험을 고려해 buffer 영역 설정 whole contents buffer browser window
- 20. 그래도 안 돼요! • DOM element를 삽입/소거하 는 과정에서 reflow 발생!! • 적게는 성능 하락 • 많게는 ◀ 보시다시피 -_-;;
- 21. Reflow & Repaint repaint bgColor reflow visibility insert / delete node reposition resize font border
- 22. 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가 일어날 상황은 한 번 에 몰아서 처리
- 23. 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 만 하도록 유도
- 25. Dynamic CSS Styling • • hello, again :-P 모든 node의 CSS style 재정의 loop 돌다 브라우저 사망
- 26. 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에서 임의로 추 가/수정/삭제 가능
- 27. Exploits 브라우저의 한계를 회피하는 꼼수(?) 들
- 29. Local Font Detection • 임의의 DIV에 문자열 삽입 • 글꼴 적용 • 높이/너비가 변경되는지 확인! hello, world! hello, world! not installed hello, world! installed
- 30. Clipboard Handling • 외부 클립보드 데이터가 브라 우저와 호환되지 않음 • 브라우저 clipboard 객체에서 접근 불가능한 정보도 존재 • [office Object]
- 31. Clipboard Handling • 브라우저간/제품간 클립보드 정보 공유 • 각 process별로 독립된 클립보 드 제어 • 제품간 적절한 문서 모델로 변 경
- 32. Clipboard Handling • hidden iframe to hook Ctrl+C/V
- 33. Clipboard Handling • pic? text? typ e obj? encode model ↔ html strip tags 객체의 type에 따라 • base64 인코딩 • html로 변환 • 태그 정렬 등등...
- 34. Vector Element Events • <SVG> or <VML>, whatever it is... click! BOOO~! selected ? 이벤트의 기본은 직교 영역 • 사용자 직관을 벗어남
- 35. Vector Element Events(Non-IE) • pointer-events property • SVG 전용 속성 • "그려진 부분"만 이벤트가 적 용되게 할 수 있음 • mouseDown • mouseOver • mouseUp pointerEvents == "auto"? click! selected!
- 36. Vector Element Events(IE) • 특정 클래스명을 검사 • 실제 path와 상위 VML 클 래스명이 다름 • 이벤트가 적절하지 않으면 • document .elementFromPoint() • nextElement.fireEvent() className=="manipulable" ? click! selected!
- 37. Conclusion 단언컨대, JavaScript는 가장 hot한 언어입니다.
- 40. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
- 41. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
- 42. JavaScript Rules! • HTML5 + CSS3 Standard • Plentiful API & Framework • Server-side Language
- 43. 하지만 실제론... Just another Community app with bootstrap!
- 44. 우린 아직 배고프다! • 워드 : 인쇄 결과물과 동일한 편집 페이지 분할(pagination) • 공동 편집 • 오프라인 캐시 • 더욱 강력한 기능들 • 문서 효과(그림자, 반사 등) • 글머리 기호 • 애니매이션 • 겹선 테두리 • 기타등등...
- 45. 도전하세요!