SlideShare a Scribd company logo
웨일 브라우저의
성능 및 메모리 최적화
이성원, 조명진
NAVER
CONTENTS
1. JavaScript Optimizing AOT
2. 웨일 시동 성능 개선
3. 메모리 프로파일링
4. 메모리 세이버
JavaScript Optimizing AOT
자바스크립트 성능의 진화
수년에 걸친 자바스크립트 가속화 경합
JIT 컴파일러에 다양한 최적화를 추가하여 지속적인 벤치마크 성능 향상

Recommended for you

목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue

GDG WebTech 발표자료

angularreact.jsvue.js
Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!

Microservices and containers are now influencing application design and deployment patterns. Sixty percent of all new applications will use cloud-enabled continuous delivery microservice architectures and containers. Service discovery, registration, and routing are fundamental tenets of microservices. Kubernetes provides a platform for running microservices. Kubernetes can be used to automate the deployment of Microservices and leverage features such as Kube-DNS, Config Maps, and Ingress service for managing those microservices. This configuration works fine for deployments up to a certain size. However, with complex deployments consisting of a large fleet of microservices, additional features are required to augment Kubernetes.

kubernetesistiomicroservices
Websocket + Redis pubsub
Websocket + Redis pubsubWebsocket + Redis pubsub
Websocket + Redis pubsub

This document discusses using WebSockets and Redis pub/sub to create a real-time dashboard. It proposes an architecture where a client connects to a WebSocket server via WebSockets, which is connected to a Redis server that publishes and subscribes to channels, allowing real-time data transfer from an API server to update the dashboard in real-time. References are provided to learn more about WebSockets, Redis pub/sub, and building real-time applications.

web designrealtime
V8의 자바스크립트 가속화
FullCodeGen + Crankshaft pipeline
1. FullCodeGen: baseline JIT 컴파일러
2. Crankshaft: 최적화 JIT 컴파일러
3. FullCodeGen에 의해 빠르게 생성된 native code를 실행
4. 실행 빈도가 높은(Hot Spot) 자바스크립트는 Crankshaft로 최적화하여 다시 컴파일
V8 JIT 컴파일 Pipeline
Parser FullCodeGen
Crankshaft
*.js Native
Code
Optimized
Native
Code
Code Cache
Hot Spot
FullCodeGen으로 startup의 response를 빠르게,
Crankshaft로 hot spot의 throughput은 크게.
AST
V8 JIT 컴파일러의 구조적 한계
Parser FullCodeGen
Crankshaft
*.js Native
Code
Optimized
Native
Code
Code Cache
Hot Spot
FullCodeGen: depth first traversal 기반 AST 처리의 비효율성
Crankshaft: target ISA에 독립적인 최적화의 추가가 어려운 layer
AST
V8 6.0 이후 자바스크립트 실행
Ignition + Turbofan pipeline
1. Ignition: 바이트코드 인터프리터, FullCodeGen의 컴파일 과정 제거
2. Turbofan: 최적화 JIT 컴파일러, 더욱 최적화된 native code 생성
3. 소스코드를 변환한 바이트코드를 Ignition으로 실행
4. 실행 빈도가 높은 자바스크립트는 Turbofan으로 다시 컴파일

Recommended for you

[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기

기존에 저희 회사에서 사용하던 모니터링은 Zabbix 였습니다. 컨테이너 모니터링 부분으로 옮겨가면서 변화가 필요하였고, 이에 대해서 프로메테우스를 활용한 모니터링 방법을 자연스럽게 고민하게 되었습니다. 이에 이영주님께서 테크세션을 진행하였고, 이에 발표자료를 올립니다. 5개의 부분으로 구성되어 있으며, 세팅 방법에 대한 내용까지 포함합니다. 01. Prometheus? 02. Usage 03. Alertmanager 04. Cluster 05. Performance

container monitoringprometheusopensourceconsulting
WebAssembly Demystified
WebAssembly DemystifiedWebAssembly Demystified
WebAssembly Demystified

Presented at Jazoon, April 28th, 2017 A revolution is about to begin. WebAssembly (aka wasm) is shipping in all modern browsers, but since it’s (intentionally) very low level, it can be difficult to understand how it will be critical to future web applications–and definitely not just games and C++! In this talk, Jay will demystify stack assembly languages like WebAssembly, even if you have zero experience with assembly and linear memory.

wasmweb assemblywebassembly
DevOps - Interview Question.pdf
DevOps - Interview Question.pdfDevOps - Interview Question.pdf
DevOps - Interview Question.pdf

This document contains questions and answers related to DevOps concepts. It begins with definitions of DevOps and explains that DevOps aims to automate infrastructure and integrate development and operations teams. Key DevOps principles like infrastructure as code, continuous integration, deployment and monitoring are outlined. Popular DevOps tools like Git, Jenkins, Ansible, Docker and Nagios are listed. The document also includes questions on version control systems, Git, Ansible, Docker, Scrum methodology and more DevOps related topics.

fsdfsd
V8 6.0 이후 JIT 컴파일 Pipeline
Ignition에 의한 응답성 개선 및 메모리 사용량 감소 (5~10%)
Turbofan의 최적화된 native code로 벤치마크 성능 향상 (5~10%)
Parser Ignition
Turbofan
*.js
Optimized
Native
Code
Code Cache
Hot Spot
Bytecode
자바스크립트 성능은 여전히 문제인가?
웹페이지 로딩 시간의 제 1 요소
- 뚜렷한 hot spot이 없는 자바스크립트 로딩 (다량의 객체 생성 및 초기화)
- 따라서 Crankshaft나 Turbofan에 의한 최적화는 가성비가 낮음
- 하지만 자주 방문하는 웹페이지라면?
HTTP Cache 기반 JS AOT 컴파일
HTTP Cache
자주 방문하는 URL에 포함된 resource(js, css, img, ...)를 disk cache에 저장 후 재사용
자바스크립트 Ahead-of-Time (AOT) 컴파일
- 자바스크립트를 JIT 컴파일한 native code를 HTTP cache에 저장 후 재사용함
- 동일한 자바스크립트를 매번 JIT 컴파일하는 부담을 버릴 수 있음
V8의 AOT 컴파일
FullCodeGen 기반 AOT
1. FullCodeGen으로 native code 생성
2. Serializer가 native code를 snapshot 형태로 변환
3. Http cache에 의해 snapshot이 disk에 저장
4. Cache hit된 자바스크립트의 snapshot을 disk로 부터 로드
5. Deserializer가 snapshot의 native code 복원

Recommended for you

Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기

2019년 6월 22일 JAVASCRIPT IS EVERYWHERE에서 발표한 자료입니다. Nuxt 앱을 보통 일반서버위에 배포를 하는 경우가 많은데, Serverless Framework를 이용하여 AWS Lambda위에 쉽게 배포하는 방법에 대해 소개합니다.

awslambdalambdanuxt
Installing and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command lineInstalling and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command line

This document provides instructions for installing and running Postfix within a Docker container from the command line. It describes starting a container from the base image, updating system packages, installing Postfix, committing the image, running a new container from the image to check that Postfix is installed, and pushing the image to the Docker registry.

dockerpostfix
Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners

HubSpot Software Engineer Meghan Nelson created this intro to git and GitHub for a Women Who Code meetup.

software developmentgithubgit
V8 JIT / AOT Pipeline
Parser FullCodeGen
Crankshaft
*.js
Disk Cache
Native
Code
Serializer
Deserializer
Snapshot
Annotated
Native
Code
Optimized
Native
Code
Code Cache
Snapshot
Native
Code
Http Cache Hit
AST
캐시된 자바스크립트를 더 빠르게
Crankshaft로 AOT 컴파일한다면...
1. FullCodeGen에 포함되지 않은 다양한 코드 최적화 기법 적용
- e.g. loop 최적화, 코드 배치 최적화, 번복 연산 제거, ...
2. AOT 컴파일시 추가적인 최적화 비용 1회 발생
2. 그러나 이후 로딩 시간에 실행되는 캐시된 자바스크립트를 매번 최적화 비용 없이 가속화
웨일의 V8 JIT/ AOT Pipeline
Parser FullCodeGen
Crankshaft
*.js
Disk Cache
Native
Code
Serializer
Deserializer
Snapshot
Annotated
Native
Code
Optimized
Native
Code
Code Cache
Snapshot
Native
Code
Optimized
Native
Code
AST
일부 제한 및 Backup Plan
Crankshaft로 AOT 컴파일이 가능하려면...
1. Crankshaft로 재활용 가능한 neutral native code를 생성
- Runtime profiling을 바탕으로 type에 특화된 최적화 제외
- 실행 환경에 종속적인 정보 제거 (e.g. V8 context)
2. 오류 발생 시 FullCodeGen의 native code로 전환될 수 있는 deoptimization 지원
3. 다양한 AOT failure에 대한 대처
- Crankshaft 컴파일, Serialization, Deserialization 실패

Recommended for you

Microservices architecture
Microservices architectureMicroservices architecture
Microservices architecture

A introduction to Microservices Architecture: definition, characterstics, framworks, success stories. It contains a demo about implementation of microservices with Spring Boot, Spring cloud an Eureka.

architecturemicroservices patternsnetflix
Kubernetes in Docker
Kubernetes in DockerKubernetes in Docker
Kubernetes in Docker

1. Docker EE will include an unmodified Kubernetes distribution to provide orchestration capabilities alongside Docker Swarm. 2. When running mixed workloads across orchestrators, resource contention is a risk and it is recommended to separate workloads by orchestrator on each node for now. 3. Docker EE aims to address the shortcomings of running mixed workloads to better support this in the future.

dockercondockercon2017dockerconeu
Introduction to Git and Github
Introduction to Git and Github Introduction to Git and Github
Introduction to Git and Github

This is a short presentation about git and github. This document describes some good points to work with git and the common commands used on git.

control versiongithubgit
웨일의 V8 JIT/ AOT Pipeline
Parser FullCodeGen
Crankshaft
*.js
Disk Cache
Native
Code
Serializer
Deserializer
Snapshot
Annotated
Native
Code
Optimized
Native
Code
Code Cache
Snapshot
Native
Code
Neutral
Native
Code
Optimized
Native
Code
Crankshaft AOT Fail
Deoptimization
AST
개발 중 가장 큰 시련은...
첫째도, 둘째도, 셋째도 최적화된 native code debugging
Source level debugging 불가능
- assembly code, memory dump, register value를 열심히 trace할 수 밖에…
1. JavaScript test에서 발생하면 다행!
2. 100% 재현 가능한 crash면 해볼 만 하고...
3. 간헐적으로 발생하거나 웹페이지 기능에 문제가 생기면 좌절ㅠㅠ
- 페이지 로딩이 완료되어도 불규칙한 시간이 지난 후 뻗는다던지,
- Smart Editor 3.0 웹페이지의 로딩 후 글이 안 써지기도...
Crankshaft AOT의 성능
웹페이지 로딩 시간 단축
실제 실행 여부에 상관없이 적극적으로 AOT를 적용할(eager AOT) 때 더욱 효과적
92%
93%
94%
95%
96%
97%
98%
99%
100%
101%
OnLoad FirstMeaningfulPaint
w/o AOT w/ AOT w/ eager AOT
Loding Time Breakdown
Whale Vs. Chrome

Recommended for you

도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!

도커 무작정 따라하기 - 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다! 도커의 기본 개념부터 설치와 사용 방법까지 설명합니다. 더 자세한 내용은 가장 빨리 만나는 도커(Docker)를 참조해주세요~ http://www.pyrasis.com/private/2014/11/30/publish-docker-for-the-really-impatient-book

docker
REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!

JavaLand 2022, März, Brühl, Mario-Leander Reimer (@LeanderReimer, Principal Software Architect bei QAware). == Dokument bitte herunterladen, falls unscharf! Please download slides if blurred! == This session focuses on modern and efficient Inter Process Communication (IPC) for microservices. We start with a REST API, built using JAX-RS and Quarkus to briefly discuss the pros and cons of this approach. Then, we will extend the API with an efficient Protobuf payload representation in order to finally transform the API into a fully fledged high-performance gRPC interface definition. But that's not all! To put some extra icing on the cake, this talk will demonstrate how to consume the gRPC service from a JavaScript web client and also how to completely generate a matching REST API from an enhanced gRPC interface definition to ensure full interoperability in a microservice architecture.

restcloudcloud computing
svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드

사내 공유를 위해 제작한 문서입니다만, 혹시 도움이 되실 분이 있을까 싶어서 공유합니다. 혹여 오류가 있을 수 있습니다. 관대한 마음으로 이해 부탁드리며 글 남겨주시면 참고하여 수정하겠습니다.

svnsubversiondvcs
웨일 시동 성능 개선
브라우저에게 시동 시간이란?
아이콘 클릭해도 아무것도 안 뜨고 시계만 돌고 있다면
“뭐, 이리 느려... 빨리 좀 떠라...”
아이콘 클릭과 동시에 창이 뜨고 첫페이지 로딩이 시작돼야
“오~ 빠릿하네! ㅋ”
브라우저 성능의 첫 인상을 좌우하는 지표
초기 웨일은 크롬과 동일하게 창이 뜨기 까지 1초 이상 걸림
브라우저 시동 Tracing
렌더러와 GPU 프로세스의
시작 순차적 지연
브라우저 프로세스의
구동까지 1초 소모
무엇이 발목을 잡고 있나?
whale.exe --trace-startup
whale://tracing
Load whaletrace.log
Crashpad 프로세스의 생성 시간
Crashpad 프로세스
타 프로세스에서 크래시가 발생하면 stack trace와 여러 metadata를 갈무리하여 저장
브라우저 프로세스의 생성부터 시동 사이에 Crashpad 프로세스 생성
500ms 소모
그래서 Lazy Crashpad
Crashpad 프로세스의 생성을 지연시킴으로써 웨일의 시동 시간 단축
브라우저 프로세스의 process launcher thread에서 렌더러와 GPU 이후에 생성

Recommended for you

gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!

The document summarizes a presentation given by Alex Borysov and Mykyta Protsenko comparing gRPC and REST. It provides an overview of gRPC, describing it as a high performance RPC framework. It then discusses some issues with REST including heterogeneous data formats and service discovery. Examples are given of implementing a sample aggregator service using both REST and gRPC to illustrate their differences.

grpcrestmicroservices
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)

프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!

reacttypescript
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.

오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.

deview2017
시동 시간 개선 및 부작용
체감할 수 있는 웨일 시동 성능 개선
500ms 감소
Crashpad 생성 이전에 발생하는 crash dump를 생성할 수 없음
원격으로 해당 crash dump를 수집할 수 없어 재현 경로를 확보하지 못한 크래시의 해결이
어려움
메모리 프로파일링
문제 발생
메모리 모니터링을 해보자
우선 간단하게 브라우저의 메모리를 모니터링 하기로 함
최소 요구 사항
• 브라우저 웹 페이지 전환
• 지정된 프로세스의 메모리 모니터링
• 그래프로 시각화

Recommended for you

[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개

네이버랩스의 로보틱스 연구 소개

deview2017
밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어

밑바닥부터시작하는360뷰어

deview2017
[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동

open, share, enjoy 네이버의 오픈소스 활동

deview2017
메모리 모니터링 결과
메모리가 계속 증가하는 이유가 뭘까?
Cache의 크기가 무한히 늘어나는가?
Cache를 사용하지 않게 하여도 메모리가 증가
Memory Pressure가 제대로 동작하는가?
Memory Cache 및 Decoded Image 삭제, GC 등으로 꾸준히 메모리 확보
Garbage Collector가 제대로 동작하는가?
JavaScript가 없는 페이지에서도 여전히 메모리 증가
메모리 누수의 범인은 누구인가?
범인은 이 가운데 있어!!
WebCore
JavaScriptCore
Third-Party Library
WebCore와 JavaScriptCore 메모리 측정
총 메모리 = WebCore + JavaScriptCore + Third-Party Library
찬조출연 : 소년탐정 김전일
WebCore!!!!!!
TOTAL
WebCore
JS Engine
아..
안녕?
찬조출연 : 명탐정 코난 범인

Recommended for you

[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자

chromium binging 기술을 node.js에 적용해보자

deview2017
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기

Yong Jae Kim is a professor at KoreaTech who researches wearable, surgical, humanoid and mobile robots. His research interests include mechanism design and control of flexible robots. He has worked at Samsung Electronics and MIT. Some of his projects include a high-DOF robotic hand called RoboRay Hand, a power-assist glove called TATH Glove, and a soft parallel gripper. He aims to design robots with both flexibility and precision, like the human hand. He proposes using tendon-driven and compliant mechanisms inspired by biology to achieve this goal.

deview2017
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기

머신러닝으로 쏟아지는 유저 cs 답변하기

deview2017
WebCore를 모두 들여다 봐야하나?
코드 리딩의 한계
총 317만 라인, .CPP, .H 만 세어보아도 158만 라인
한정된 리소스
소스코드 분석에 너무 많은 인력과 시간이 필요
Document의 부재
분석에 도움이 될만한 상세한 문서가 없음
기존 메모리 프로파일링 기법
Dynamic Binary Instrumentation Framework
Valgrind (Memcheck), Pin, DynamoRio (Dr. Memory)
컴파일러 기반 Instrumentation
GCC Instrumentation, LLVM (Leak Sanitizer with ASan)
그 외
DLL Injection, CRT Debug Heap 등
윈도우에서 사용가능 한 기법은?
Dynamic Binary Instrumentation Framework
Valgrind (Memcheck), Pin, DynamoRio (Dr. Memory)
컴파일러 기반 Instrumentation
GCC Instrumentation, LLVM (Leak Sanitizer with ASan)
그 외
DLL Injection, CRT Debug Heap, WinDbg, UMDH 등
할 수 있는 건 다 해봤는데...
비정상 종료
안정적으로 실행이 되지 않아 데이터를 뽑을 수 없거나 크래시 발생
무의미할 만큼 많은 데이터 제공
어떤 것이 실제 문제인지 파악할 수 없어 로그 분석에 너무 많은 시간이 소요
너무 느린 속도
데이터 분석에 너무 오랜 시간이 걸려서 사용이 불가능
좌절하는 코이와이 씨 (요츠바랑! 4권 175쪽)

Recommended for you

[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기

14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기

deview2017
웨일 보안 이야기
웨일 보안 이야기웨일 보안 이야기
웨일 보안 이야기

웨일 보안 이야기

deview2017
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템 [143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템

[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템

하지만, 느린 건 빠르게 만들면 된다
WinDbg는 안정적이면서 매우 강력한 도구
분석에 필요한 다양한 명령어 지원, 그러나 수정 불가
User-Mode Dump Heap
Snapshot 기반으로 파일로 데이터 저장 및 결과 출력, 역시 수정 불가
하지만, UMDH Log 분석은 빠르게 할 수 있지 않을까?
로그 형식을 분석하여 보다 빠르게 프로파일링 결과 출력
로그 형식 분석
FastUMDH 구조
1. 파일 분석
3. 심볼 탐색
2. 유효한 데이터 추출
4. 결과 출력
Workload
Snapshot #1 (KB) Snapshot #2 (KB) Traces Pure Traces
LeakTest 80 80 239 10
PDF Viewer 662 668 2219 19
WebBrowser 2,835 3,076 7,003 1,685
WebBrowser 6,902 6,571 15,133 7,039

Recommended for you

[124]자율주행과 기계학습
[124]자율주행과 기계학습[124]자율주행과 기계학습
[124]자율주행과 기계학습

자율주행과 기계학습

deview2017
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래

웨일 브라우저 1년 그리고 미래

deview2017
what is_tabs_share
what is_tabs_sharewhat is_tabs_share
what is_tabs_share

what is_tabs_share

deview2017
측정 결과
UMDH FastUMDH Parse Extract Symbol Print
LeakTest 7.469 0.018 34.9% 0.4% 62.9% 1.8%
PDF Viewer 6.353 0.060 72.1% 1.2% 25.6% 1.0%
WebBrowser 777.296 3.668 5.3% 0.1% 92.6% 1.9%
WebBrowser 11,735.696 17.295 2.7% 0.1% 95.5% 1.7%
Symbol은 모두 디스크 캐싱이 된 상태에서 실행
Speed Up
0
100
200
300
400
500
600
700
800
LeakTest PDF Viewer WebBrowser WebBrowser
SpeedUp(times)
678배
106배
이제 문제를 찾아 볼까?
메모리 모니터링 도구에 포함
웹 사이트 이동 마다 Snapshot을 생성하여 결과 분석
어느 사이트가 메모리 누수를 유발하는지 탐색
메모리 할당을 많이 하고 해제하지 않는 로그 분석
주요한 콜 스택 분석
SVG 이미지 관련 로그가 다수 발견됨
SVG만 열심히 돌려보자
Leaky Image : http://static2.wikia.nocookie.net/__cb20100227155641/finalfantasy/images/9/94/Final_Fantasy_10_Sphere_Grid.svg

Recommended for you

[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까

[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까

deview2017
[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술

[112]clova platform 인공지능을 엮는 기술

deview2017
[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database

how can realm_make_efficient_mobile_database

deview2017
SVG 버그 수정 후
장시간 테스트 결과
Continuous Integration
빌드 봇 연동
개발 버전의 메모리를 모니터링하여 리그레션이 발생하는지 확인
다양한 메모리 누수 탐지
Cairo, Font, Translation 등 메모리 누수 탐지 및 해결
겨우 메모리를 안정화했는데...
전격! 크로미움 기반으로 변경!
http://cfile24.uf.tistory.com/image/210D9D40536F62892C826C
메모리 세이버

Recommended for you

[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법

neural machine translation (nmt) 동작의 시각화 및 분석 방법

deview2017
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라!   의도파악과 의미검색[216]네이버 검색 사용자를 만족시켜라!   의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색

네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색

deview2017
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼

nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼

만족
35%
ActiveX
27%
메모리
26%
속도
6%
오류
3%
배터리
3%
불만족
65%
사내 설문 조사 : “크롬 브라우저, 어떻게 생각하시나요?”, 2016년 7월, 모든 직군 대상, 651명 응답
크롬에 만족하시나요?
크로미움도 측정해봤더니...
1,000MB
800MB
600MB
400MB
200MB
Chromium 52
프로세스 모델이 다르네?
기본 프로세스 모델 : Process-per-site-instance
사용자가 방문한 사이트 인스턴스 별로 렌더러 프로세스가 할당됨
기존의 탭당 하나의 전담 렌더러 프로세스 구조인 Process-per-tab과 차이가 있음
“새 술은 새 부대에” : Cross-Process Navigations
한 탭에서 다른 사이트로 이동하는 경우 새로운 렌더러 프로세스로 교체됨
- 옴니박스에 새로운 도메인 입력
- 북마크 클릭
- 탭 내에서 링크를 통한 사이트 전환
언제 메모리가 부족할까?
물리 메모리 크기가 적은 경우
32bit 윈도우와 3GB 이하의 메모리를 사용하는 시스템
탭을 많이 사용하는 경우
검색, 쇼핑, 유튜브 등등 탭은 늘어나는데 닫지 않을 때
다른 프로그램이 메모리를 많이 사용하고 있는 경우
게임 같은 프로그램이 메모리를 많이 사용하여 브라우저가 사용할 메모리가 부족한 경우

Recommended for you

[242]open stack neutron dataplane 구현
[242]open stack neutron   dataplane 구현[242]open stack neutron   dataplane 구현
[242]open stack neutron dataplane 구현

open stack neutron dataplane 구현

deview2017
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기

Talk about H/W acc. and rendering performance of chrome, and one more short talk about ServiceWorker.

gdgdevfairperformancegdgkorea
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기

Open Stack Days 2017에서 발표한 자료입니다.

whatapcloud monitoringperformance
크래시 보다 나쁜 건 없다!
결국은 가용 메모리가 부족한 상황
가용 메모리의 부족으로 OOM 크래시를 만드는 것 보다는
성능을 떨어뜨리더라도 쓰지 않는 메모리를 ���수하자
- 물리 메모리 크기가 적은 경우
- 탭을 많이 사용하는 경우
- 다른 프로그램이 메모리를 많이 사용하고 있는 경우
메모리를 어떻게 회수하지?
우리는 정말 많은 탭을 쓴다
실제로 사용하는 탭은 몇 개 되지 않는다
그렇다면 안쓰는 Inactive 탭에서 메모리를 회수할 수 없을까?
메모리 세이버
놀고 있는 탭이 있다면 잠시 꺼 두셔도 좋습니다
Tab Discarding 기법을 이용하여 Inactive Tab의 프로세스를 제거하여 메모리 회수
다시 탭을 보고 싶으면 어떡해?
최대한 기존 데이터를 복원하여 불편함을 최소화
결제 중이거나 음악을 듣고 있다면?
결제, 미디어탭 등 중요한 사이트나 복원이 어려운 사이트는 대상에서 제외
메모리 세이버 레벨
레벨 조건 대상 반복 적용 유지 탭 수
1 (최소) 크래시 직전 10분 한번 최소 4개
2 (기본) 항시 2시간 한번 최소 3개
3 항시 1시간 (최대 4시간) 반복 최소 2개
4 항시 30분 (최대 4시간) 반복 최소 1개
5 (강력) 항시 10분 (최대 2시간) 반복 최소 4개
※ 사용자 피드백을 바탕으로 추후 변경될 수 있음

Recommended for you

장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초

Django와 웹 서비스에 대해 간략하게 설명해 놓은 자료입니다.

django
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기

클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기 클라우드 & 모바일의 제약사항과 공유자원이 가져오는 한계점을 설명.

cloudmobileapm
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018

메모리 사용량 비교
프로세스 사용량 (최소)
Browser Process 1개
Crashpad Handler 1개
GPU Process 1개
Default Extension Process 1개
PPAPI Process 1개
Renderer Process 17개
총 22개 프로세스, 1,654MB 소모
프로세스 사용량 (강력)
Browser Process 1개
Crashpad Handler 1개
GPU Process 1개
Default Extension Process 1개
Renderer Process 3개
총 7개 프로세스, 476MB 소모
Thank you

More Related Content

What's hot

Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For Beginners
Alice Phieu
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
우영 주
 
Janus & docker: friends or foe
Janus & docker: friends or foe Janus & docker: friends or foe
Janus & docker: friends or foe
Alessandro Amirante
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Gunhee Lee
 
Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!
Animesh Singh
 
Websocket + Redis pubsub
Websocket + Redis pubsubWebsocket + Redis pubsub
Websocket + Redis pubsub
Kai Hsu
 
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
Ji-Woong Choi
 
WebAssembly Demystified
WebAssembly DemystifiedWebAssembly Demystified
WebAssembly Demystified
Jay Phelps
 
DevOps - Interview Question.pdf
DevOps - Interview Question.pdfDevOps - Interview Question.pdf
DevOps - Interview Question.pdf
MinhTrnNht7
 
Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기
Changwan Jun
 
Installing and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command lineInstalling and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command line
dotCloud
 
Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners
HubSpot
 
Microservices architecture
Microservices architectureMicroservices architecture
Microservices architecture
Abdelghani Azri
 
Kubernetes in Docker
Kubernetes in DockerKubernetes in Docker
Kubernetes in Docker
Docker, Inc.
 
Introduction to Git and Github
Introduction to Git and Github Introduction to Git and Github
Introduction to Git and Github
Max Claus Nunes
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
pyrasis
 
REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!
QAware GmbH
 
svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드
Insub Lee
 
gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!
Alex Borysov
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
 

What's hot (20)

Alice Phieu - WordPress For Beginners
Alice Phieu - WordPress For BeginnersAlice Phieu - WordPress For Beginners
Alice Phieu - WordPress For Beginners
 
컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기컴포넌트 관점에서 개발하기
컴포넌트 관점에서 개발하기
 
Janus & docker: friends or foe
Janus & docker: friends or foe Janus & docker: friends or foe
Janus & docker: friends or foe
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!Microservices, Kubernetes and Istio - A Great Fit!
Microservices, Kubernetes and Istio - A Great Fit!
 
Websocket + Redis pubsub
Websocket + Redis pubsubWebsocket + Redis pubsub
Websocket + Redis pubsub
 
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
[오픈소스컨설팅] 프로메테우스 모니터링 살펴보고 구성하기
 
WebAssembly Demystified
WebAssembly DemystifiedWebAssembly Demystified
WebAssembly Demystified
 
DevOps - Interview Question.pdf
DevOps - Interview Question.pdfDevOps - Interview Question.pdf
DevOps - Interview Question.pdf
 
Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기Serverless 프레임워크로 Nuxt 앱 배포하기
Serverless 프레임워크로 Nuxt 앱 배포하기
 
Installing and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command lineInstalling and running Postfix within a docker container from the command line
Installing and running Postfix within a docker container from the command line
 
Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners Git 101: Git and GitHub for Beginners
Git 101: Git and GitHub for Beginners
 
Microservices architecture
Microservices architectureMicroservices architecture
Microservices architecture
 
Kubernetes in Docker
Kubernetes in DockerKubernetes in Docker
Kubernetes in Docker
 
Introduction to Git and Github
Introduction to Git and Github Introduction to Git and Github
Introduction to Git and Github
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
 
REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!REST in Peace. Long live gRPC!
REST in Peace. Long live gRPC!
 
svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드svn 능력자를 위한 git 개념 가이드
svn 능력자를 위한 git 개념 가이드
 
gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!gRPC vs REST: let the battle begin!
gRPC vs REST: let the battle begin!
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
 

Viewers also liked

[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
NAVER D2
 
[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개
NAVER D2
 
밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어
NAVER D2
 
[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동
NAVER D2
 
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
NAVER D2
 
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
NAVER D2
 
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
NAVER D2
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
NAVER D2
 
웨일 보안 이야기
웨일 보안 이야기웨일 보안 이야기
웨일 보안 이야기
NAVER D2
 
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템 [143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
NAVER D2
 
[124]자율주행과 기계학습
[124]자율주행과 기계학습[124]자율주행과 기계학습
[124]자율주행과 기계학습
NAVER D2
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리���ᅩ 미래
NAVER D2
 
what is_tabs_share
what is_tabs_sharewhat is_tabs_share
what is_tabs_share
NAVER D2
 
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
NAVER D2
 
[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술
NAVER D2
 
[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database
NAVER D2
 
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
NAVER D2
 
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라!   의도파악과 의미검색[216]네이버 검색 사용자를 만족시켜라!   의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색
NAVER D2
 
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
NAVER D2
 
[242]open stack neutron dataplane 구현
[242]open stack neutron   dataplane 구현[242]open stack neutron   dataplane 구현
[242]open stack neutron dataplane 구현
NAVER D2
 

Viewers also liked (20)

[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
[135] 오픈소스 데이터베이스, 은행 서비스에 첫발을 내밀다.
 
[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개[141]네이버랩스의 로보틱스 연구 소개
[141]네이버랩스의 로보틱스 연구 소개
 
밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어밑바닥부터시작하는360뷰어
밑바닥부터시작하는360뷰어
 
[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동[111]open, share, enjoy 네이버의 오픈소스 활동
[111]open, share, enjoy 네이버의 오픈소스 활동
 
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
 
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
[142] 생체 이해에 기반한 로봇 – 고성능 로봇에게 인간의 유연함과 안전성 부여하기
 
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
[125] 머신러닝으로 쏟아지는 유저 cs 답변하기
 
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
[115]14일만에 깃헙 스타 1,000개 받은 차트 오픈소스 개발기
 
웨일 보안 이야기
웨일 보안 이야기웨일 보안 이야기
웨일 보안 이야기
 
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템 [143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
[143]알파글래스의 개발과정으로 알아보는 ar 스마트글래스 광학 시스템
 
[124]자율주행과 기계학습
[124]자율주행과 기계학습[124]자율주행과 기계학습
[124]자율주행과 기계학습
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래
 
what is_tabs_share
what is_tabs_sharewhat is_tabs_share
what is_tabs_share
 
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
 
[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술[112]clova platform 인공지능을 엮는 기술
[112]clova platform 인공지능을 엮는 기술
 
[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database[113]how can realm_make_efficient_mobile_database
[113]how can realm_make_efficient_mobile_database
 
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
[222]neural machine translation (nmt) 동작의 시각화 및 분석 방법
 
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라!   의도파악과 의미검색[216]네이버 검색 사��ᅭᆼ자를 만족시켜라!   의도파악과 의미검색
[216]네이버 검색 사용자를 만족시켜라! 의도파악과 의미검색
 
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
[224]nsml 상상하는 모든 것이 이루어지는 클라우드 머신러닝 플랫폼
 
[242]open stack neutron dataplane 구현
[242]open stack neutron   dataplane 구현[242]open stack neutron   dataplane 구현
[242]open stack neutron dataplane 구현
 

Similar to 웨일브라우저 성능 및 메모리 최적화

프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
Chang W. Doh
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기
YoungSu Son
 
장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
Kwangyoun Jung
 
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
YoungSu Son
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
devCAT Studio, NEXON
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
Jae Sung Park
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
MooYeol Lee
 
The MongoDB Strikes Back / MongoDB 의 역습
The MongoDB Strikes Back / MongoDB 의 역습The MongoDB Strikes Back / MongoDB 의 역습
The MongoDB Strikes Back / MongoDB 의 역습
Hyun-woo Park
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
Chang W. Doh
 
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
Jaeseung Ha
 
Accelerate spring boot application with apache ignite
Accelerate spring boot application with apache igniteAccelerate spring boot application with apache ignite
Accelerate spring boot application with apache ignite
YEON BOK LEE
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
NAVER Engineering
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1
bingoori
 
[박민근] 3 d렌더링 옵티마이징_nv_perfhud
[박민근] 3 d렌더링 옵티마이징_nv_perfhud[박민근] 3 d렌더링 옵티마이징_nv_perfhud
[박민근] 3 d렌더링 옵티마이징_nv_perfhud
MinGeun Park
 
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
OnGameServer
 
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
Jay Park
 
김성훈 - 뛰어난 디버거가 되는 방법
김성훈 - 뛰어난 디버거가 되는 방법김성훈 - 뛰어난 디버거가 되는 방법
김성훈 - 뛰어난 디버거가 되는 방법
성훈 김
 
빌드 속도를 올려보자
빌드 속도를 올려보자빌드 속도를 올려보자
빌드 속도를 올려보자
KyeongWon Koo
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
Miyu Park
 

Similar to 웨일브라우저 성능 및 메모리 최적화 (20)

프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능인자 이해하기
 
클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기클라우드 환경에서 알아야할 성능 이야기
클라우드 환경에서 알아야할 성능 이야기
 
장고로 웹서비스 만들기 기초
장고로 웹서비스 만들기   기초장고로 웹서비스 만들기   기초
장고로 웹서비스 만들기 기초
 
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
클라우드 & 모바일 환경에서 알아야 할 성능 품질 이야기
 
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
이승재, 실버바인 서버엔진 2 설계 리뷰, NDC2018
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
AngularJS In Production
AngularJS In ProductionAngularJS In Production
AngularJS In Production
 
The MongoDB Strikes Back / MongoDB 의 역습
The MongoDB Strikes Back / MongoDB 의 역습The MongoDB Strikes Back / MongoDB 의 역습
The MongoDB Strikes Back / MongoDB 의 역습
 
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
프론트엔드 개발자를 위한 크롬 렌더링 성능 인자 이해하기
 
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
[NDC2015] 언제 어디서나 프로파일링 가능한 코드네임 JYP 작성기 - 라이브 게임 배포 후에도 프로파일링 하기
 
Accelerate spring boot application with apache ignite
Accelerate spring boot application with apache igniteAccelerate spring boot application with apache ignite
Accelerate spring boot application with apache ignite
 
NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황NAVER의 웹/HTML5환경 대응 현황
NAVER의 웹/HTML5환경 대응 현황
 
어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1어그로월드 Season1 - Aggro World season 1
어그로월드 Season1 - Aggro World season 1
 
[박민근] 3 d렌더링 옵티마이징_nv_perfhud
[박민근] 3 d렌더링 옵티마이징_nv_perfhud[박민근] 3 d렌더링 옵티마이징_nv_perfhud
[박민근] 3 d렌더링 옵티마이징_nv_perfhud
 
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
게임 개발에 도움을 주는 CruiseControl.NET과 Windows Terminal
 
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
 
김성훈 - 뛰어난 디버거가 되는 방법
김성훈 - 뛰어난 디버거가 되는 방법김성훈 - 뛰어난 디버거가 되는 방법
김성훈 - 뛰어난 디버거가 되는 방법
 
빌드 속도를 올려보자
빌드 속도를 올려보자빌드 속도를 올려보자
빌드 속도를 올려보자
 
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
HTML5/JSON 을 이용해 범용 2D 맵에디터 제작하기
 

More from NAVER D2

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
NAVER D2
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
NAVER D2
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
NAVER D2
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
NAVER D2
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
NAVER D2
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
NAVER D2
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
NAVER D2
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
NAVER D2
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
NAVER D2
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
NAVER D2
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
NAVER D2
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
NAVER D2
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
NAVER D2
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
NAVER D2
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
NAVER D2
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search
NAVER D2
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
NAVER D2
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
NAVER D2
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
NAVER D2
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
NAVER D2
 

More from NAVER D2 (20)

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
 

웨일브라우저 성능 및 메모리 최적화

  • 1. 웨일 브라우저의 성능 및 메모리 최적화 이성원, 조명진 NAVER
  • 2. CONTENTS 1. JavaScript Optimizing AOT 2. 웨일 시동 성능 개선 3. 메모리 프로파일링 4. 메모리 세이버
  • 4. 자바스크립트 성능의 진화 수년에 걸친 자바스크립트 가속화 경합 JIT 컴파일러에 다양한 최적화를 추가하여 지속적인 벤치마크 성능 향상
  • 5. V8의 자바스크립트 가속화 FullCodeGen + Crankshaft pipeline 1. FullCodeGen: baseline JIT 컴파일러 2. Crankshaft: 최적화 JIT 컴파일러 3. FullCodeGen에 의해 빠르게 생성된 native code를 실행 4. 실행 빈도가 높은(Hot Spot) 자바스크립트는 Crankshaft로 최적화하여 다시 컴파일
  • 6. V8 JIT 컴파일 Pipeline Parser FullCodeGen Crankshaft *.js Native Code Optimized Native Code Code Cache Hot Spot FullCodeGen으로 startup의 response를 빠르게, Crankshaft로 hot spot의 throughput은 크게. AST
  • 7. V8 JIT 컴파일러의 구조적 한계 Parser FullCodeGen Crankshaft *.js Native Code Optimized Native Code Code Cache Hot Spot FullCodeGen: depth first traversal 기반 AST 처리의 비효율성 Crankshaft: target ISA에 독립적인 최적화의 추가가 어려운 layer AST
  • 8. V8 6.0 이후 자바스크립트 실행 Ignition + Turbofan pipeline 1. Ignition: 바이트코드 인터프리터, FullCodeGen의 컴파일 과정 제거 2. Turbofan: 최적화 JIT 컴파일러, 더욱 최적화된 native code 생성 3. 소스코드를 변환한 바이트코드를 Ignition으로 실행 4. 실행 빈도가 높은 자바스크립트는 Turbofan으로 다시 컴파일
  • 9. V8 6.0 이후 JIT 컴파일 Pipeline Ignition에 의한 응답성 개선 및 메모리 사용량 감소 (5~10%) Turbofan의 최적화된 native code로 벤치마크 성능 향상 (5~10%) Parser Ignition Turbofan *.js Optimized Native Code Code Cache Hot Spot Bytecode
  • 10. 자바스크립트 성능은 여전히 문제인가? 웹페이지 로딩 시간의 제 1 요소 - 뚜렷한 hot spot이 없는 자바스크립트 로딩 (다량의 객체 생성 및 초기화) - 따라서 Crankshaft나 Turbofan에 의한 최적화는 가성비가 낮음 - 하지만 자주 방문하는 웹페이지라면?
  • 11. HTTP Cache 기반 JS AOT 컴파일 HTTP Cache 자주 방문하는 URL에 포함된 resource(js, css, img, ...)를 disk cache에 저장 후 재사용 자바스크립트 Ahead-of-Time (AOT) 컴파일 - 자바스크립트를 JIT 컴파일한 native code를 HTTP cache에 저장 후 재사용함 - 동일한 자바스크립트를 매번 JIT 컴파일하는 부담을 버릴 수 있음
  • 12. V8의 AOT 컴파일 FullCodeGen 기반 AOT 1. FullCodeGen으로 native code 생성 2. Serializer가 native code를 snapshot 형태로 변환 3. Http cache에 의해 snapshot이 disk에 저장 4. Cache hit된 자바스크립트의 snapshot을 disk로 부터 로드 5. Deserializer가 snapshot의 native code 복원
  • 13. V8 JIT / AOT Pipeline Parser FullCodeGen Crankshaft *.js Disk Cache Native Code Serializer Deserializer Snapshot Annotated Native Code Optimized Native Code Code Cache Snapshot Native Code Http Cache Hit AST
  • 14. 캐시된 자바스크립트를 더 빠르게 Crankshaft로 AOT 컴파일한다면... 1. FullCodeGen에 포함되지 않은 다양한 코드 최적화 기법 적용 - e.g. loop 최적화, 코드 배치 최적화, 번복 연산 제거, ... 2. AOT 컴파일시 추가적인 최적화 비용 1회 발생 2. 그러나 이후 로딩 시간에 실행되는 캐시된 자바스크립트를 매번 최적화 비용 없이 가속화
  • 15. 웨일의 V8 JIT/ AOT Pipeline Parser FullCodeGen Crankshaft *.js Disk Cache Native Code Serializer Deserializer Snapshot Annotated Native Code Optimized Native Code Code Cache Snapshot Native Code Optimized Native Code AST
  • 16. 일부 제한 및 Backup Plan Crankshaft로 AOT 컴파일이 가능하려면... 1. Crankshaft로 재활용 가능한 neutral native code를 생성 - Runtime profiling을 바탕으로 type에 특화된 최적화 제외 - 실행 환경에 종속적인 정보 제거 (e.g. V8 context) 2. 오류 발생 시 FullCodeGen의 native code로 전환될 수 있는 deoptimization 지원 3. 다양한 AOT failure에 대한 대처 - Crankshaft 컴파일, Serialization, Deserialization 실패
  • 17. 웨일의 V8 JIT/ AOT Pipeline Parser FullCodeGen Crankshaft *.js Disk Cache Native Code Serializer Deserializer Snapshot Annotated Native Code Optimized Native Code Code Cache Snapshot Native Code Neutral Native Code Optimized Native Code Crankshaft AOT Fail Deoptimization AST
  • 18. 개발 중 가장 큰 시련은... 첫째도, 둘째도, 셋째도 최적화된 native code debugging Source level debugging 불가능 - assembly code, memory dump, register value를 열심히 trace할 수 밖에… 1. JavaScript test에서 발생하면 다행! 2. 100% 재현 가능한 crash면 해볼 만 하고... 3. 간헐적으로 발생하거나 웹페이지 기능에 문제가 생기면 좌절ㅠㅠ - 페이지 로딩이 완료되어도 불규칙한 시간이 지난 후 뻗는다던지, - Smart Editor 3.0 웹페이지의 로딩 후 글이 안 써지기도...
  • 19. Crankshaft AOT의 성능 웹페이지 로딩 시간 단축 실제 실행 여부에 상관없이 적극적으로 AOT를 적용할(eager AOT) 때 더욱 효과적 92% 93% 94% 95% 96% 97% 98% 99% 100% 101% OnLoad FirstMeaningfulPaint w/o AOT w/ AOT w/ eager AOT
  • 22. 브라우저에게 시동 시간이란? 아이콘 클릭해도 아무것도 안 뜨고 시계만 돌고 있다면 “뭐, 이리 느려... 빨리 좀 떠라...” 아이콘 클릭과 동시에 창이 뜨고 첫페이지 로딩이 시작돼야 “오~ 빠릿하네! ㅋ” 브라우저 성능의 첫 인상을 좌우하는 지표 초기 웨일은 크롬과 동일하게 창이 뜨기 까지 1초 이상 걸림
  • 23. 브라우저 시동 Tracing 렌더러와 GPU 프로세스의 시작 순차적 지연 브라우저 프로세스의 구동까지 1초 소모 무엇이 발목을 잡고 있나? whale.exe --trace-startup whale://tracing Load whaletrace.log
  • 24. Crashpad 프로세스의 생성 시간 Crashpad 프로세스 타 프로세스에서 크래시가 발생하면 stack trace와 여러 metadata를 갈무리하여 저장 브라우저 프로세스의 생성부터 시동 사이에 Crashpad 프로세스 생성 500ms 소모 그래서 Lazy Crashpad Crashpad 프로세스의 생성을 지연시킴으로써 웨일의 시동 시간 단축 브라우저 프로세스의 process launcher thread에서 렌더러와 GPU 이후에 생성
  • 25. 시동 시간 개선 및 부작용 체감할 수 있는 웨일 시동 성능 개선 500ms 감소 Crashpad 생성 이전에 발생하는 crash dump를 생성할 수 없음 원격으로 해당 crash dump를 수집할 수 없어 재현 경로를 확보하지 못한 크래시의 해결이 어려움
  • 28. 메모리 모니터링을 해보자 우선 간단하게 브라우저의 메모리를 모니터링 하기로 함 최소 요구 사항 • 브라우저 웹 페이지 전환 • 지정된 프로세스의 메모리 모니터링 • 그래프로 시각화
  • 30. 메모리가 계속 증가하는 이유가 뭘까? Cache의 크기가 무한히 늘어나는가? Cache를 사용하지 않게 하여도 메모리가 증가 Memory Pressure가 제대로 동작하는가? Memory Cache 및 Decoded Image 삭제, GC 등으로 꾸준히 메모리 확보 Garbage Collector가 제대로 동작하는가? JavaScript가 없는 페이지에서도 여전히 메모리 증가
  • 31. 메모리 누수의 범인은 누구인가? 범인은 이 가운데 있어!! WebCore JavaScriptCore Third-Party Library WebCore와 JavaScriptCore 메모리 측정 총 메모리 = WebCore + JavaScriptCore + Third-Party Library 찬조출연 : 소년탐정 김전일
  • 33. WebCore를 모두 들여다 봐야하나? 코드 리딩의 한계 총 317만 라인, .CPP, .H 만 세어보아도 158만 라인 한정된 리소스 소스코드 분석에 너무 많은 인력과 시간이 필요 Document의 부재 분석에 도움이 될만한 상세한 문서가 없음
  • 34. 기존 메모리 프로파일링 기법 Dynamic Binary Instrumentation Framework Valgrind (Memcheck), Pin, DynamoRio (Dr. Memory) 컴파일러 기반 Instrumentation GCC Instrumentation, LLVM (Leak Sanitizer with ASan) 그 외 DLL Injection, CRT Debug Heap 등
  • 35. 윈도우에서 사용가능 한 기법은? Dynamic Binary Instrumentation Framework Valgrind (Memcheck), Pin, DynamoRio (Dr. Memory) 컴파일러 기반 Instrumentation GCC Instrumentation, LLVM (Leak Sanitizer with ASan) 그 외 DLL Injection, CRT Debug Heap, WinDbg, UMDH 등
  • 36. 할 수 있는 건 다 해봤는데... 비정상 종료 안정적으로 실행이 되지 않아 데이터를 뽑을 수 없거나 크래시 발생 무의미할 만큼 많은 데이터 제공 어떤 것이 실제 문제인지 파악할 수 없어 로그 분석에 너무 많은 시간이 소요 너무 느린 속도 데이터 분석에 너무 오랜 시간이 걸려서 사용이 불가능 좌절하는 코이와이 씨 (요츠바랑! 4권 175쪽)
  • 37. 하지만, 느린 건 빠르게 만들면 된다 WinDbg는 안정적이면서 매우 강력한 도구 분석에 필요한 다양한 명령어 지원, 그러나 수정 불가 User-Mode Dump Heap Snapshot 기반으로 파일로 데이터 저장 및 결과 출력, 역시 수정 불가 하지만, UMDH Log 분석은 빠르게 할 수 있지 않을까? 로그 형식을 분석하여 보다 빠르게 프로파일링 결과 출력
  • 39. FastUMDH 구조 1. 파일 분석 3. 심볼 탐색 2. 유효한 데이터 추출 4. 결과 출력
  • 40. Workload Snapshot #1 (KB) Snapshot #2 (KB) Traces Pure Traces LeakTest 80 80 239 10 PDF Viewer 662 668 2219 19 WebBrowser 2,835 3,076 7,003 1,685 WebBrowser 6,902 6,571 15,133 7,039
  • 41. 측정 결과 UMDH FastUMDH Parse Extract Symbol Print LeakTest 7.469 0.018 34.9% 0.4% 62.9% 1.8% PDF Viewer 6.353 0.060 72.1% 1.2% 25.6% 1.0% WebBrowser 777.296 3.668 5.3% 0.1% 92.6% 1.9% WebBrowser 11,735.696 17.295 2.7% 0.1% 95.5% 1.7% Symbol은 모두 디스크 캐싱이 된 상태에서 실행
  • 42. Speed Up 0 100 200 300 400 500 600 700 800 LeakTest PDF Viewer WebBrowser WebBrowser SpeedUp(times) 678배 106배
  • 43. 이제 문제를 찾아 볼까? 메모리 모니터링 도구에 포함 웹 사이트 이동 마다 Snapshot을 생성하여 결과 분석 어느 사이트가 메모리 누수를 유발하는지 탐색 메모리 할당을 많이 하고 해제하지 않는 로그 분석 주요한 콜 스택 분석 SVG 이미지 관련 로그가 다수 발견됨
  • 44. SVG만 열심히 돌려보자 Leaky Image : http://static2.wikia.nocookie.net/__cb20100227155641/finalfantasy/images/9/94/Final_Fantasy_10_Sphere_Grid.svg
  • 47. Continuous Integration 빌드 봇 연동 개발 버전의 메모리를 모니터링하여 리그레션이 발생하는지 확인 다양한 메모리 누수 탐지 Cairo, Font, Translation 등 메모리 누수 탐지 및 해결 겨우 메모리를 안정화했는데... 전격! 크로미움 기반으로 변경! http://cfile24.uf.tistory.com/image/210D9D40536F62892C826C
  • 49. 만족 35% ActiveX 27% 메모리 26% 속도 6% 오류 3% 배터리 3% 불만족 65% 사내 설문 조사 : “크롬 브라우저, 어떻게 생각하시나요?”, 2016년 7월, 모든 직군 대상, 651명 응답 크롬에 만족하시나요?
  • 51. 프로세스 모델이 다르네? 기본 프로세스 모델 : Process-per-site-instance 사용자가 방문한 사이트 인스턴스 별로 렌더러 프로세스가 할당됨 기존의 탭당 하나의 전담 렌더러 프로세스 구조인 Process-per-tab과 차이가 있음 “새 술은 새 부대에” : Cross-Process Navigations 한 탭에서 다른 사이트로 이동하는 경우 새로운 렌더러 프로세스로 교체됨 - 옴니박스에 새로운 도메인 입력 - 북마크 클릭 - 탭 내에서 링크를 통한 사이트 전환
  • 52. 언제 메모리가 부족할까? 물리 메모리 크기가 적은 경우 32bit 윈도우와 3GB 이하의 메모리를 사용하는 시스템 탭을 많이 사용하는 경우 검색, 쇼핑, 유튜브 등등 탭은 늘어나는데 닫지 않을 때 다른 프로그램이 메모리를 많이 사용하고 있는 경우 게임 같은 프로그램이 메모리를 많이 사용하여 브라우저가 사용할 메모리가 부족한 경우
  • 53. 크래시 보다 나쁜 건 없다! 결국은 가용 메모리가 부족한 상황 가용 메모리의 부족으로 OOM 크래시를 만드는 것 보다는 성능을 떨어뜨리더라도 쓰지 않는 메모리를 회수하자 - 물리 메모리 크기가 적은 경우 - 탭을 많이 사용하는 경우 - 다른 프로그램이 메모리를 많이 사용하고 있는 경우
  • 54. 메모리를 어떻게 회수하지? 우리는 정말 많은 탭을 쓴다 실제로 사용하는 탭은 몇 개 되지 않는다 그렇다면 안쓰는 Inactive 탭에서 메모리를 회수할 수 없을까?
  • 55. 메모리 세이버 놀고 있는 탭이 있다면 잠시 꺼 두셔도 좋습니다 Tab Discarding 기법을 이용하여 Inactive Tab의 프로세스를 제거하여 메모리 회수 다시 탭을 보고 싶으면 어떡해? 최대한 기존 데이터를 복원하여 불편함을 최소화 결제 중이거나 음악을 듣고 있다면? 결제, 미디어탭 등 중요한 사이트나 복원이 어려운 사이트는 대상에서 제외
  • 56. 메모리 세이버 레벨 레벨 조건 대상 반복 적용 유지 탭 수 1 (최소) 크래시 직전 10분 한번 최소 4개 2 (기본) 항시 2시간 한번 최소 3개 3 항시 1시간 (최대 4시간) 반복 최소 2개 4 항시 30분 (최대 4시간) 반복 최소 1개 5 (강력) 항시 10분 (최대 2시간) 반복 최소 4개 ※ 사용자 피드백을 바탕으로 추후 변경될 수 있음
  • 57. 메모리 사용량 비교 프로세스 사용량 (최소) Browser Process 1개 Crashpad Handler 1개 GPU Process 1개 Default Extension Process 1개 PPAPI Process 1개 Renderer Process 17개 총 22개 프로세스, 1,654MB 소모 프로세스 사용량 (강력) Browser Process 1개 Crashpad Handler 1개 GPU Process 1개 Default Extension Process 1개 Renderer Process 3개 총 7개 프로세스, 476MB 소모