SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
웹페이지
 메모리
 분석과
 관리
ABC
 Talk
 /
 Steve
 Ahn
오늘은,
-
 메모리
 분석
 도구의
 상세한
 사용법을
 파악해서,
-
 웹페이지의
 메모리를
 정확히
 분석하고,
-
 안정적인
 페이지를
 만들
 수
 있도록
 준비해두자!
목차
-
 페이지의
 메모리
 현황
 파악
-
 인터랙션에
 따른
 메모리
 변화
 분석
-

Contenu connexe

Tendances

응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angularredribbon1307
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5Taegon Kim
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridappNAVER D2
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)JinKwon Lee
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기Han Jung Hyun
 
Service Worker 101 (한국어)
Service Worker 101 (한국어)Service Worker 101 (한국어)
Service Worker 101 (한국어)Chang W. Doh
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.jsJinKwon Lee
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기Hyeonjin Cho
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기우영 주
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복sung hwan Park
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Jeado Ko
 
Service Worker 201 (한국어)
Service Worker 201 (한국어)Service Worker 201 (한국어)
Service Worker 201 (한국어)Chang W. Doh
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page ApplicationSangmin Yoon
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민NAVER D2
 
스프링 프레임워크로 블로그 개발하기
스프링 프레임워크로 블로그 개발하기 스프링 프레임워크로 블로그 개발하기
스프링 프레임워크로 블로그 개발하기 라한사 아
 

Tendances (20)

응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular응답하라 반응형웹 - 4. angular
응답하라 반응형웹 - 4. angular
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Cooking jquery
Cooking jqueryCooking jquery
Cooking jquery
 
오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5오늘 당장 시작하는 HTML5
오늘 당장 시작하는 HTML5
 
Deview2013 track1 session7
Deview2013 track1 session7Deview2013 track1 session7
Deview2013 track1 session7
 
[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp[D2 오픈세미나]3.web view hybridapp
[D2 오픈세미나]3.web view hybridapp
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
HTML5로 만드는 데스크탑 어플리케이션 (Node-Webkit)
 
Polymer따라잡기
Polymer따라잡기Polymer따라잡기
Polymer따라잡기
 
Service Worker 101 (한국어)
Service Worker 101 (한국어)Service Worker 101 (한국어)
Service Worker 101 (한국어)
 
자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js자바스크립트의 또다른 발전, Backbone.js
자바스크립트의 또다른 발전, Backbone.js
 
최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기최전방 생존법 - 프론트엔드 개발자로 살아가기
최전방 생존법 - 프론트엔드 개발자로 살아가기
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
하이브리드앱 성능 극복
하이브리드앱 성능 극복하이브리드앱 성능 극복
하이브리드앱 성능 극복
 
Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션Polymer, lego같이 만드는 웹어플리케이션
Polymer, lego같이 만드는 웹어플리케이션
 
Service Worker 201 (한국어)
Service Worker 201 (한국어)Service Worker 201 (한국어)
Service Worker 201 (한국어)
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
[125]react로개발자2명이플랫폼4개를서비스하는이야기 심상민
 
스프링 프레임워크로 블로그 개발하기
스프링 프레임워크로 블로그 개발하기 스프링 프레임워크로 블로그 개발하기
스프링 프레임워크로 블로그 개발하기
 

Similaire à JavaScript Memory Profiling

웨일브라우저 성능 및 메모리 최적화
웨일브라우저 성능 및 메모리 최적화웨일브라우저 성능 및 메모리 최적화
웨일브라우저 성능 및 메모리 최적화NAVER D2
 
Chrome DevTools로 JS 메모리릭 디버깅하기.pptx
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxChrome DevTools로 JS 메모리릭 디버깅하기.pptx
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxEunsu Kim
 
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기YoungSu Son
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기YoungSu Son
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기Miyu Park
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
JMI Techtalk : Backend.AI
JMI Techtalk : Backend.AIJMI Techtalk : Backend.AI
JMI Techtalk : Backend.AILablup Inc.
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST_NHNent
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In ProductionMooYeol Lee
 
(120616) #fitalk web browser forensics - part iii
(120616) #fitalk   web browser forensics - part iii(120616) #fitalk   web browser forensics - part iii
(120616) #fitalk web browser forensics - part iiiINSIGHT FORENSIC
 
(120616) #fitalk web browser forensics - part iii
(120616) #fitalk   web browser forensics - part iii(120616) #fitalk   web browser forensics - part iii
(120616) #fitalk web browser forensics - part iiiINSIGHT FORENSIC
 
과정 커리큘럼
과정 커리큘럼과정 커리큘럼
과정 커리큘럼John Seo
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjsJae Sung Park
 
김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15Chanwoong Kim
 
쇼핑검색 React 전환 경험 공유
쇼핑검색 React 전환 경험 공유쇼핑검색 React 전환 경험 공유
쇼핑검색 React 전환 경험 공유NAVER SHOPPING
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018devCAT Studio, NEXON
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용중선 곽
 

Similaire à JavaScript Memory Profiling (20)

웨일브라우저 성능 및 메모리 최적화
웨일브라우저 성능 및 메모리 최적화웨일브라우저 성능 및 메모리 최적화
웨일브라우저 성능 및 메모리 최적화
 
Chrome DevTools로 JS 메모리릭 디버깅하기.pptx
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxChrome DevTools로 JS 메모리릭 디버깅하기.pptx
Chrome DevTools로 JS 메모리릭 디버깅하기.pptx
 
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
 
Mem shrink
Mem shrinkMem shrink
Mem shrink
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
JMI Techtalk : Backend.AI
JMI Techtalk : Backend.AIJMI Techtalk : Backend.AI
JMI Techtalk : Backend.AI
 
Html5
Html5 Html5
Html5
 
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)TOAST Meetup2015 - 구름 Cloud IDE (류성태)
TOAST Meetup2015 - 구름 Cloud IDE (류성태)
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
(120616) #fitalk web browser forensics - part iii
(120616) #fitalk   web browser forensics - part iii(120616) #fitalk   web browser forensics - part iii
(120616) #fitalk web browser forensics - part iii
 
(120616) #fitalk web browser forensics - part iii
(120616) #fitalk   web browser forensics - part iii(120616) #fitalk   web browser forensics - part iii
(120616) #fitalk web browser forensics - part iii
 
과정 커리큘럼
과정 커리큘럼과정 커리큘럼
과정 커리큘럼
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15김찬웅_그룹웨어에 새 에너지를_NDC15
김찬웅_그룹웨어에 새 에너지를_NDC15
 
Showroom 2019-react
Showroom 2019-reactShowroom 2019-react
Showroom 2019-react
 
쇼핑검색 React 전환 경험 공유
쇼핑검색 React 전환 경험 공유쇼핑검색 React 전환 경험 공유
쇼핑검색 React 전환 경험 공유
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 

Plus de Ohgyun Ahn

호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다Ohgyun Ahn
 
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험Ohgyun Ahn
 
ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기Ohgyun Ahn
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기Ohgyun Ahn
 
JavaScript Minification
JavaScript MinificationJavaScript Minification
JavaScript MinificationOhgyun Ahn
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template EngineOhgyun Ahn
 
Github Usage Scenarios
Github Usage ScenariosGithub Usage Scenarios
Github Usage ScenariosOhgyun Ahn
 
Javascript hoisting
Javascript hoistingJavascript hoisting
Javascript hoistingOhgyun Ahn
 
diff output formats
diff output formatsdiff output formats
diff output formatsOhgyun Ahn
 
패키지 매니저의 요건
패키지 매니저의 요건패키지 매니저의 요건
패키지 매니저의 요건Ohgyun Ahn
 
BASH Guide Summary
BASH Guide SummaryBASH Guide Summary
BASH Guide SummaryOhgyun Ahn
 
Python Usage (5-minute-summary)
Python Usage (5-minute-summary)Python Usage (5-minute-summary)
Python Usage (5-minute-summary)Ohgyun Ahn
 
UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리Ohgyun Ahn
 
크롬익스텐션 맛보기
크롬익스텐션 맛보기크롬익스텐션 맛보기
크롬익스텐션 맛보기Ohgyun Ahn
 
재미있는 생산성 향상 도구
재미있는 생산성 향상 도구재미있는 생산성 향상 도구
재미있는 생산성 향상 도구Ohgyun Ahn
 
Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기Ohgyun Ahn
 
깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기Ohgyun Ahn
 
Recurrence relation
Recurrence relationRecurrence relation
Recurrence relationOhgyun Ahn
 

Plus de Ohgyun Ahn (18)

호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다
 
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
 
ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 
JavaScript Minification
JavaScript MinificationJavaScript Minification
JavaScript Minification
 
JavaSript Template Engine
JavaSript Template EngineJavaSript Template Engine
JavaSript Template Engine
 
Github Usage Scenarios
Github Usage ScenariosGithub Usage Scenarios
Github Usage Scenarios
 
Javascript hoisting
Javascript hoistingJavascript hoisting
Javascript hoisting
 
diff output formats
diff output formatsdiff output formats
diff output formats
 
패키지 매니저의 요건
패키지 매니저의 요건패키지 매니저의 요건
패키지 매니저의 요건
 
BASH Guide Summary
BASH Guide SummaryBASH Guide Summary
BASH Guide Summary
 
Python Usage (5-minute-summary)
Python Usage (5-minute-summary)Python Usage (5-minute-summary)
Python Usage (5-minute-summary)
 
UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리
 
크롬익스텐션 맛보기
크롬익스텐션 맛보기크롬익스텐션 맛보기
크롬익스텐션 맛보기
 
재미있는 생산성 향상 도구
재미있는 생산성 향상 도구재미있는 생산성 향상 도구
재미있는 생산성 향상 도구
 
Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기
 
깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기
 
Recurrence relation
Recurrence relationRecurrence relation
Recurrence relation
 

JavaScript Memory Profiling