커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
내 서비스에서 가장 많은 사용자를 가지고 있는 네이버 서비스. 다양한 브라우저 환경에서 쾌적한 서비스를 제공하기 위해 노력했던 많은 개발자들의 경험을 여러분에게 소개해드립니다. 이 발표에서는 전통적인 웹 성능 개선방법부터 모던 브라우저 성능 개선 사례를 두루 살펴보고 실제 서비스에서 필요한 성능 개선 포인트를 어떻게 찾고, 개선할 수 있는지에 대한 이야기를 합니다.
이 발표를 듣는 당신은 오늘부터 FE 성능분석가 1일차!
How I learned to stop worrying and love UX metricsTammy Everts
This talk at the 2018 performance.now() conference (Amsterdam) walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.
커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
내 서비스에서 가장 많은 사용자를 가지고 있는 네이버 서비스. 다양한 브라우저 환경에서 쾌적한 서비스를 제공하기 위해 노력했던 많은 개발자들의 경험을 여러분에게 소개해드립니다. 이 발표에서는 전통적인 웹 성능 개선방법부터 모던 브라우저 성능 개선 사례를 두루 살펴보고 실제 서비스에서 필요한 성능 개선 포인트를 어떻게 찾고, 개선할 수 있는지에 대한 이야기를 합니다.
이 발표를 듣는 당신은 오늘부터 FE 성능분석가 1일차!
How I learned to stop worrying and love UX metricsTammy Everts
This talk at the 2018 performance.now() conference (Amsterdam) walks through a brief history of UX and web performance research, highlighting landmark studies that helped connect the dots between performance and user experience. I also demystify the current state of performance metrics and help you understand what you need to focus on for your site and your users.
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxEunsu Kim
Chrome DevTools를 활용하여 Javascript 메모리 누수(Memory leak)를 디버깅하는 방법을 소개합니다.
Chrome DevTools에서 제공하는 Task Manager, Performance Profile, Memory Heap Snapshot, Memory Allocation Timline 기능을 사용하는 방법을 소개하고, 메모리릭을 진단하고 해결하는 몇 가지 경험적 노하우를 소개합니다.
위 슬라이드는 Grepp의 사내 세미나 불금개에서 활용하는 발표 자료입니다. CCL 라이센스를 따릅니다. 사용시 필수로 저작자를 명시하고, 영리적 사용을 금하며, 내용 변경이 불가합니다.
스피커덱에서 더 편하게 보실 수 있습니다: https://subl.ee/~gokr1808
https://hangulize.org/
〈한글라이즈〉는 외국어 단어를 외래어 표기법에 따라 한글로 옮겨 적어주는 도구입니다. "Espresso"를 "에스프레소"로, "東京"을 "도쿄"로 변환할 수 있죠. 본래 Python으로 구현했던 한글라이즈를 Go로 재구현하면서 겪은 경험과 느낀점을 공유합니다.
고랭코리아 2018년 8월 밋업에서 발표했습니다.
슬라이드셰어에 슬라이드 300장 제한이 있어서 부득이하게 2부로 나눠서 올렸습니다. 보는 데 불편하시겠지만 양해를 부탁드립니다.
- 1부: https://subl.ee/~gokr1808
- 2부: https://subl.ee/~gokr1808.2
관계형 인공지능 챗봇을 만드는 Scatterlab(https://pingpong.us/)에서 출시한 일상대화 챗봇 '드림이' 제작과 관련된 내용입니다.
- 카카오 챗봇 '드림이봇'을 제작한 과정과 그 과정에서 고려한 기획 요소들을 간단하게 공유합니다.
- 카카오 챗봇 '드림이' 사용해보기: https://pf.kakao.com/_SgLqj
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
This Next.js slide is for the short introduction.
Next.js is a react framework for projection. Some people call it as a full stack react framework. Because we can write both client and server side code on it.
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxEunsu Kim
Chrome DevTools를 활용하여 Javascript 메모리 누수(Memory leak)를 디버깅하는 방법을 소개합니다.
Chrome DevTools에서 제공하는 Task Manager, Performance Profile, Memory Heap Snapshot, Memory Allocation Timline 기능을 사용하는 방법을 소개하고, 메모리릭을 진단하고 해결하는 몇 가지 경험적 노하우를 소개합니다.
위 슬라이드는 Grepp의 사내 세미나 불금개에서 활용하는 발표 자료입니다. CCL 라이센스를 따릅니다. 사용시 필수로 저작자를 명시하고, 영리적 사용을 금하며, 내용 변경이 불가합니다.
스피커덱에서 더 편하게 보실 수 있습니다: https://subl.ee/~gokr1808
https://hangulize.org/
〈한글라이즈〉는 외국어 단어를 외래어 표기법에 따라 한글로 옮겨 적어주는 도구입니다. "Espresso"를 "에스프레소"로, "東京"을 "도쿄"로 변환할 수 있죠. 본래 Python으로 구현했던 한글라이즈를 Go로 재구현하면서 겪은 경험과 느낀점을 공유합니다.
고랭코리아 2018년 8월 밋업에서 발표했습니다.
슬라이드셰어에 슬라이드 300장 제한이 있어서 부득이하게 2부로 나눠서 올렸습니다. 보는 데 불편하시겠지만 양해를 부탁드립니다.
- 1부: https://subl.ee/~gokr1808
- 2부: https://subl.ee/~gokr1808.2
관계형 인공지능 챗봇을 만드는 Scatterlab(https://pingpong.us/)에서 출시한 일상대화 챗봇 '드림이' 제작과 관련된 내용입니다.
- 카카오 챗봇 '드림이봇'을 제작한 과정과 그 과정에서 고려한 기획 요소들을 간단하게 공유합니다.
- 카카오 챗봇 '드림이' 사용해보기: https://pf.kakao.com/_SgLqj
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
This Next.js slide is for the short introduction.
Next.js is a react framework for projection. Some people call it as a full stack react framework. Because we can write both client and server side code on it.
2022년 11월 18일 코엑스에서 개최한 공공솔루션마켓에서 발표한 강연 자료입니다.
디지털 전환이 가속화됨에 따라 더욱 중요해진 디지털 경험 모니터링과 장애 및 병목 등 성능을 개선한 실 사례를 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/_Cdms2TxO3M
Flutter로 글로벌앱 출시를 위한 꿀팁 - Droidknights2020Bansook Nam
Droidknighs2020에서 유튜브로 발표한 슬라이드입니다.
https://www.youtube.com/watch?v=gTYou3Ru1QM
[Speaker소개]
안드로이드 개발 7년차, Flutter 개발 2년차 개발자입니다. 현재 스타트업 Lawfully에서 182개국 약 7만명의 유저가 사용중인 글로벌앱을 개발/관리 하고 있습니다. 프론트엔드 개발에 관심이 많아 그 외에 React 프로젝트도 참여하였고, 각 플랫폼과 언어의 장단점을 잘 녹여서 개발에 적용중입니다.
이번 발표는 Flutter에 관심이 있는 개발자, 혹은 Flutter앱을 처음 런칭하시는 분들이 참고하시면 좋은 내용으로 준비했습니다.
[이런 분이 들으시면 좋습니다]
Flutter 관심 있으신분. Flutter로 앱을 출시하고 싶으신분. Native Platform 앱과 Flutter 앱을 비교해보고 싶으신분.
2015년 HTML5 기반 모바일 웹 어플리케이션 기술 개발 동향 정리 및 2016년 기술 변화 예측합니다. Ionic/Angularjs 기반 상용 앱 개발 사례도 상세하게 소개 합니다. 본 자료를 통해서 HTML5 기반 모바일 어플리케이션을 개발시 활용가능한 Framework 및 최적화 분야에 대해서 이해할수 있습니다.
2. Email : sculove@gmail.com
Blog : http://sculove.pe.kr
Linked :
http://me2.do/G7dQOWOy
손찬욱
네이버 공통플랫폼개발랩
LG CNS 공공 S/W 아키텍처팀
Jindo Mobile Component 개발
네이버 모바일웹 기술지원
“쉽고 빠른 모바일 웹 UI 개발” 저자
3. 시스템 스크롤
(Scroll)
보이는 영역보다 정보량이 많을 경우
정보를 보기 위해 움직이는 것
무한
(Infinite)
헤아릴 수 없는 개수
즉, N개의 정보
반응형
(Responsive)
디스플레이 종류, 화면의 크기에 따라
자동으로 최적화되는
반응형 무한 스크롤 ???
무한
(Infinite)
시스템 스크롤
(Scroll)
4. 1. 반응형 무한 스크롤 어떻게 만들었나?
http://www.youtube.com/watch?v=Si1InWf4JMo
http://www.youtube.com/watch?v=NSPL7j9r6Og
5. 5 / 반응형 무한 스크롤 개발 및 성능 튜닝
1) 구조적인 문제
…
컨텐츠의 양이
늘어날수록
마크업도 늘어나는
구조적 문제
6. 6 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
단말기 화면
컨텐츠의 양이
늘어나더라도
마크업의 수는 고정
7. 7 / 반응형 무한 스크롤 개발 및 성능 튜닝
화면에 표현 할 컨텐츠 정보컨텐츠를 표현한 고정 마크업
…
2) DOM Recycle 구조
8. 8 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
고정좌표
(position:absolue)
좌표기준점
(position:relative)
단말기 화면
각 DOM의 좌표 계산은?
9. 9 / 반응형 무한 스크롤 개발 및 성능 튜닝
3) DOM의 좌표는 어떻게 계산하는가?
Height1
Height2
Height
…
X2, Y2
X1, Y1 x1,y1 = (0px, 0px)
x2,y2 = (0px, DOM1 까지의 높이합)
…
xn,yn = (0px, DOM(n-1) 까지의 높이합)
DOM1
DOM2
Height
= 총 컨텐츠의 높이
= 사용자에 의해 스크롤 될 수 있는 크기
= Wrapper의 크기
10. 10 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
???
이미지 로딩 중
height
Img태그의 onload 이벤트
- 비동기식 방식
- 순차적인 DOM의 높이 구하기에는 적합하지 않음
이미지 로딩 이후에 계산
• 이미지와 같은 외부 요소의
로딩이 완료되지 않은 경우
11. 11 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
IMG태그의 complete 의 사용
Complete 속성 : Img태그의 로딩 여부 확인
- 정상 로딩 및 에러(404 Error) 여부가 결정 된 경우 true
- 로딩 중 일 경우 false
13. 13 / 반응형 무한 스크롤 개발 및 성능 튜닝
1) 웹에서 성능 향상이란?
브라우저 성능 향상
브라우저 성능 최대화
브라우저 랜더링 방식 이
해
브라우저 성능 최대화
14. 14 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) 브라우저 랜더링 과정
계산 반영
Render
Layer
대상 추출
15. 15 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) 브라우저 랜더링 과정
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)div
(DOM5)
div
(DOM6)
body
html
DOM Tree
16. 16 / 반응형 무한 스크롤 개발 및 성능 튜닝
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM5)
div
(DOM6)
body
html
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM6)
body
html
DOM Tree Render Tree
RenderTree는 화면에 보여지는 영역을 기준으로 구성
2) 브라우저 랜더링 과정
17. 17 / 반응형 무한 스크롤 개발 및 성능 튜닝
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM6)
body
html
Render Tree
div
(DOM4)
RenderLayer Tree
Div(DOM4는 transform 3d)로 레이어가 구성되는 영역
div
(DOM4)
GraphicLayer Tree
2) 브라우저 랜더링 과정
18. 18 / 반응형 무한 스크롤 개발 및 성능 튜닝
크롬의 Timeline으로 본 브라우저 랜더링 과정
Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생
Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생
2) 브라우저 랜더링 과정
19. 19 / 반응형 무한 스크롤 개발 및 성능 튜닝
동적인 동작이 필요한 경우에, 실제 변경되는 부분은 이동하는 물체의 주변만 변
경
3) Layer
20. 20 / 반응형 무한 스크롤 개발 및 성능 튜닝
Composite Layer 는 레이어 병합(composite)을 통해
새로운 화면을 구성하여 실제 화면에 출력하는 기능을 한다.
Shape layer
back layer
모든 페이지는 Root layer를 가진다. (링크)
3d, perspective transform, CSS Animation, CSS filter를 사용하는 경우 (링크)
VIDEO, CANVAS 태그를 사용하는 경우
Flash나 ActiveX를 사용하는 경우
자식 엘리먼트가 layer로 구성되어 있을 경우
z-index가 낮은 형제 엘리먼트가 layer로 구성되어 있을 경우, 대상 엘리먼트도 layer로 구성됨
3) Layer
21. 21 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 성능 끌어올리기
DOM을 이동하는 작업
Layout 작업으로
Reflow 발생
Layout이 아닌 Composite Layer를 활용
22. 22 / 반응형 무한 스크롤 개발 및 성능 튜닝
A. Layout 변경을 유발하는 속성
5) Composite Layer 활용하기
23. 23 / 반응형 무한 스크롤 개발 및 성능 튜닝
B. Paint 변경을 유발하는 속성
5) Composite Layer 활용하기
24. 24 / 반응형 무한 스크롤 개발 및 성능 튜닝
C. Composite Layers 를 유발하는 속성
transform
- translate(3d)
- sale(3d)
- rotate(3d)
- …
opacity
5) Composite Layer 활용하기
25. 25 / 반응형 무한 스크롤 개발 및 성능 튜닝
Left, top, right, bottom 변경 안하면….
어떻게 DOM을 이동하라는 거지?
5) Composite Layer 활용하기
26. 26 / 반응형 무한 스크롤 개발 및 성능 튜닝
style 대신 transform과 opacity를 사용하세요.
위치 변경
display 변경
transform : translate(nPx,nPx);
transform : translate3d(nPx,nPx,nPx);
transform : translateX(nPx);
transform : translateY(nPx);
transform : translateZ(nPx);
opacity : 0 … 1
5) Composite Layer 활용하기
27. 27 / 반응형 무한 스크롤 개발 및 성능 튜닝
5) Composite Layer 활용하기
28. 28 / 반응형 무한 스크롤 개발 및 성능 튜닝
OpenGL
texture
texture
texture
GraphicLayersRenderLayers
Video Memory
CPU GPU
6) 하드웨어 가속 활용하기
29. 29 / 반응형 무한 스크롤 개발 및 성능 튜닝
하드웨어 가속은 다음과 같은 속성을 사용할 경우 적용된다.
TRANSFORM 3D
• -webkit-transform : translate3d(n,n,n)
• -webkit-transform : translateZ(n)
• -webkit-transform : rotateX(angle)
• -webkit-transform : rotateY(angle)
• -webkit-transform : rotate3d(n,n,n,angle)
• -webkit-transform : scaleZ(n)
• -webkit-transform : scale3d(n,n,n)
• -webkit-transform : perspective(n)
opacity
…
6) 하드웨어 가속 활용하기
30. 30 / 반응형 무한 스크롤 개발 및 성능 튜닝
데모 – 애니메이션 화면 튜닝하기
7) 데모를 통한 성능 향상 기법 확인
Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다.
Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다.
31. 31 / 반응형 무한 스크롤 개발 및 성능 튜닝
경험적으로
8) 하드웨어 가속 주의점
하드웨어 가속을 남용하지 말자
• S/W 가속을 지원하는 안드로이드 2.x는 하드웨어를 사용할 경우 더 느려짐
• Android 4.0 은 단말기 별로 선별적으로 하드웨어 가속을 주어야 함
• Android 4.1 이상, iOS는 하드웨어 가속을 적용하는 것이 효과적임