Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee
This document discusses the Blink rendering engine used in Chromium and Chrome. It begins with an overview of web browser basics, including the rendering engine flow, DOM, CSS, parsing, and layout/rendering. It then covers the evolution from KHTML to WebKit to Blink. Key aspects of Blink covered include its multi-process architecture with separate browser and renderer processes, inter-process communication (IPC), multi-process resource loading, and the rendering path including software rendering, hardware acceleration using the GPU process, and threaded compositing.
NHN NEXT 게임 서버 프로그래밍 강의 자료입니다. 최소한의 필요한 이론 내용은 질문 위주로 구성되어 있고 (답은 학생들 개별로 고민해와서 피드백 받는 방식) 해당 내용에 맞는 실습(구현) 과제가 포함되어 있습니다.
참고로, 서버 아키텍처에 관한 과목은 따로 있어서 본 강의에는 포함되어 있지 않습니다.
Mobile Browser Internal (Blink Rendering Engine)Hyungwook Lee
This document discusses the Blink rendering engine used in Chromium and Chrome. It begins with an overview of web browser basics, including the rendering engine flow, DOM, CSS, parsing, and layout/rendering. It then covers the evolution from KHTML to WebKit to Blink. Key aspects of Blink covered include its multi-process architecture with separate browser and renderer processes, inter-process communication (IPC), multi-process resource loading, and the rendering path including software rendering, hardware acceleration using the GPU process, and threaded compositing.
NHN NEXT 게임 서버 프로그래밍 강의 자료입니다. 최소한의 필요한 이론 내용은 질문 위주로 구성되어 있고 (답은 학생들 개별로 고민해와서 피드백 받는 방식) 해당 내용에 맞는 실습(구현) 과제가 포함되어 있습니다.
참고로, 서버 아키텍처에 관한 과목은 따로 있어서 본 강의에는 포함되어 있지 않습니다.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
This presentation gives an introduction and high level overview to web development with WebAssembly (WASM). At the time of this presentation WebAssembly had been recently released in all the major browsers for production. The presentation was given during a Chicago Ruby session for developers.
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...Amazon Web Services Korea
클라우드 기반의 게임 스트리밍은 플랫폼과 디바이스에 제한받지 않고 플레이할 수 있는 등 여러 가지 뛰어난 장점을 가진 게임 체인저로 관심받는 기술입니다. 그러나 네트워크 이슈와 높은 서버 비용 등으로 인해 구현하는 데 어려움을 겪는 경우가 많습니다. 본 세션에서는 게임스트리밍 서비스를 AWS에서 어떻게 구현할 수 있을지에 대해 간단한 아키텍처와 데모를 통해 소개해드립니다.
Building a World in the Clouds: MMO Architecture on AWS (MBL304) | AWS re:Inv...Amazon Web Services
Firefall is a free-to-play cooperative online shooter game with a "shardless" world and instance-based maps. The developers chose to build the game infrastructure in the cloud to handle unpredictable player numbers and development changes, and to take advantage of cost savings from cyclical player behavior. Their goals were quick regional expansion, on-demand scalability, minimal downtime disaster recovery, and self-healing systems. Over time they evolved their AWS architecture to expand globally and improve platform features like zero downtime updates and global player mobility. They utilize both third-party and custom tools to monitor and manage the cloud infrastructure.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
NHN NEXT 게임 서버 프로그래밍 강의 자료입니다. 최소한의 필요한 이론 내용은 질문 위주로 구성되어 있고 (답은 학생들 개별로 고민해와서 피드백 받는 방식) 해당 내용에 맞는 실습(구현) 과제가 포함되어 있습니다.
참고로, 서버 아키텍처에 관한 과목은 따로 있어서 본 강의에는 포함되어 있지 않습니다.
오픈 소스 Actor Framework 인 Akka.NET 을 통해 온라인 게임 서버를 어떻게 구현할 수 있는지를 설명합니다. Actor Model 에 대한 기본 이해부터 Scale-out 가능한 게임 서버 구축까지 전반적인 내용에 대해 알 수 있습니다. 설명을 위해 클라이언트는 Unity3D 를 사용할 예정입니다.
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
This presentation gives an introduction and high level overview to web development with WebAssembly (WASM). At the time of this presentation WebAssembly had been recently released in all the major browsers for production. The presentation was given during a Chicago Ruby session for developers.
7. 게임 스트리밍 서비스를 위한 아키텍처 - 언리얼 엔진을 중심으로! [레벨 300] - 발표자: 하흥수, 솔루션즈 아키텍트, AWS :...Amazon Web Services Korea
클라우드 기반의 게임 스트리밍은 플랫폼과 디바이스에 제한받지 않고 플레이할 수 있는 등 여러 가지 뛰어난 장점을 가진 게임 체인저로 관심받는 기술입니다. 그러나 네트워크 이슈와 높은 서버 비용 등으로 인해 구현하는 데 어려움을 겪는 경우가 많습니다. 본 세션에서는 게임스트리밍 서비스를 AWS에서 어떻게 구현할 수 있을지에 대해 간단한 아키텍처와 데모를 통해 소개해드립니다.
Building a World in the Clouds: MMO Architecture on AWS (MBL304) | AWS re:Inv...Amazon Web Services
Firefall is a free-to-play cooperative online shooter game with a "shardless" world and instance-based maps. The developers chose to build the game infrastructure in the cloud to handle unpredictable player numbers and development changes, and to take advantage of cost savings from cyclical player behavior. Their goals were quick regional expansion, on-demand scalability, minimal downtime disaster recovery, and self-healing systems. Over time they evolved their AWS architecture to expand globally and improve platform features like zero downtime updates and global player mobility. They utilize both third-party and custom tools to monitor and manage the cloud infrastructure.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
NHN NEXT 게임 서버 프로그래밍 강의 자료입니다. 최소한의 필요한 이론 내용은 질문 위주로 구성되어 있고 (답은 학생들 개별로 고민해와서 피드백 받는 방식) 해당 내용에 맞는 실습(구현) 과제가 포함되어 있습니다.
참고로, 서버 아키텍처에 관한 과목은 따로 있어서 본 강의에는 포함되어 있지 않습니다.
오픈 소스 Actor Framework 인 Akka.NET 을 통해 온라인 게임 서버를 어떻게 구현할 수 있는지를 설명합니다. Actor Model 에 대한 기본 이해부터 Scale-out 가능한 게임 서버 구축까지 전반적인 내용에 대해 알 수 있습니다. 설명을 위해 클라이언트는 Unity3D 를 사용할 예정입니다.
This document discusses providing immersive sound for virtual reality. It notes that sound is half the experience of immersion. While VR technology allows immersion in digital worlds, truly immersive sound requires binaural 3D audio rendering or recording. Binaural audio uses head-related transfer functions to simulate the sound reaching each ear, allowing localization of sounds in 3D space. However, interactive binaural recording and matching sounds to visual content in real-time pose technical challenges. The document demonstrates an implementation of immersive 3D binaural audio for VR.
REEF is a meta-framework for big data analytics that eases development atop resource managers like YARN and Mesos. It provides a reusable control plane for coordinating data processing tasks and an adaptation layer for different resource managers. REEF decouples applications from cluster resources and handles common control plane functions like fault tolerance and configuration management. The framework is implemented in Java and C# and supports local, YARN, Mesos, and HDInsight execution environments. Future work includes graduating REEF from the Apache Incubator and using it to build new data processing frameworks and systems.
MIT researchers have developed highly efficient quadruped robots like the Cheetah that can run at speeds up to 6m/s. The Cheetah uses a proprioceptive actuation system with high torque density motors to achieve high force control bandwidth over 120Hz. Its parallelized control system with multicore CPUs and FPGAs allows control frequencies up to 4kHz. Design principles for efficient legged locomotion include energy regeneration, low transmission impedance, and low leg inertia. The researchers are continuing their work with robots like Cheetah 2 and Hermes.
This document summarizes lessons learned from developing the Realm Android library. It discusses challenges such as setting up an Android library project, API design, testing, distribution methods, and issues like annotation processing, bytecode weaving, and native code support. Key points covered are how to start a library project, the importance of testing libraries extensively, and distribution options like Bintray.
This document summarizes a presentation about Packetbeat and monitoring distributed systems. It discusses how Packetbeat passively captures network packets, decodes protocols, and matches requests and responses to create JSON objects. It then sends this data to Elasticsearch for analysis. Aggregations like histograms, percentiles, and moving averages are used to analyze latency, identify slow methods, and detect anomalies in metrics over time. Other Beats like Topbeat, Filebeat, and Metricsbeat are also briefly introduced.
The document describes how to build a data science team and systems. It discusses establishing data collection and management systems, developing metrics and dashboards to analyze business data, creating predictive models using machine learning algorithms, and providing data science services like information retrieval to internal customers. The goal is to move from static, uncollected data to a fully realized big data platform and data science team that supports business analytics and decision making.
DRC-HUBO is Rainbow Robotics' humanoid robot that competed in the DRC Finals. It uses a modular, lightweight exoskeletal design with effective cooling and power systems. PODO-RT is the real-time framework that controls DRC-HUBO. It uses a distributed architecture with independent processes communicating over shared memory for high-speed control. DRC-HUBO demonstrated a variety of autonomous tasks at the DRC Finals, including driving, opening doors, using tools, and traversing rough terrain.
커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
Progressive Web App(PWA) 테코톡 발표자료 - 마르코(장원석)Wonseok Jang
우아한테크코스 4기 마르코(장원석) 테코톡 발표자료
Progressive Web App의 service worker, manifest, push notifcation, cache 등을 중심으로
장원석
nextjws@gmail.com
https://wonsss.github.io/
Cloud-Barista 제4차 오픈 컨퍼런스 : CB-Spider / CB-Tumblebug : 멀티클라우드 인프라 서비스 (Multi-...Cloud-Barista Community
[ CB-Spider : 멀티클라우드 인프라 연동 ]
- CB-Spider 기술 개요
- CB-Spider 기능 및 인터페이스
- CB-Spider 개발 로드맵
- CB-Spider 선행 PoC
[ CB-Tumblebug : 멀티클라우드 인프라 서비스 통합 운용/관리 ]
- CB-Tumblebug 개요
- CB-Tumblebug 주요 기능 및 특징
- CB-Tumblebug 주요 개선 포인트 및 로드맵
# 발표영상(YouTube) : https://youtu.be/6vEWpH9pYJA
----------------------------------------------------------------------------------------------------------
# Cloud-Barista Community Homepage : https://cloud-barista.github.io
# Cloud-Barista Community GitHub : https://github.com/cloud-barista
# Cloud-Barista YouTube channel : https://cloud-barista.github.io/youtube
# Cloud-Barista SlideShare : https://cloud-barista.github.io/slideshare
글로벌 향 서비스 구축 시, 네이버 클라우드 플랫폼에서 사용할 수 있는 서비스들과 인프라단에서 고려해야 할 사항들에 대해서 자세히 소개해 드립니다 | Let me introduce you in detail the services available on the Naver cloud platform and what the infrastructure needs to consider when building a global service.
Cloud-Barista 제1차 오픈세미나 : CB-Dragonfly-멀티 클라우드 통합 모니터링 프레임워크(1st Open Seminar...Cloud-Barista Community
멀티 클라우드 서비스 공통 프레임워크 기술(Multi-Cloud Service Common Framework)
- 커뮤니티 사이트(Community Site) : https://github.com/cloud-barista
주요 내용 : 멀티 클라우드 통합 모니터링 기술(CB-Dragonfly)
- CB-Dragonfly 개요 및 차별성
- CB-Dragonfly 주요 기능 및 모듈
- CB-Dragonfly 개발 추진 방향
The document discusses various machine learning clustering algorithms like K-means clustering, DBSCAN, and EM clustering. It also discusses neural network architectures like LSTM, bi-LSTM, and convolutional neural networks. Finally, it presents results from evaluating different chatbot models on various metrics like validation score.
The document discusses challenges with using reinforcement learning for robotics. While simulations allow fast training of agents, there is often a "reality gap" when transferring learning to real robots. Other approaches like imitation learning and self-supervised learning can be safer alternatives that don't require trial-and-error. To better apply reinforcement learning, robots may need model-based approaches that learn forward models of the world, as well as techniques like active localization that allow robots to gather targeted information through interactive perception. Closing the reality gap will require finding ways to better match simulations to reality or allow robots to learn from real-world experiences.
[243] Deep Learning to help student’s Deep LearningNAVER D2
This document describes research on using deep learning to predict student performance in massive open online courses (MOOCs). It introduces GritNet, a model that takes raw student activity data as input and predicts outcomes like course graduation without feature engineering. GritNet outperforms baselines by more than 5% in predicting graduation. The document also describes how GritNet can be adapted in an unsupervised way to new courses using pseudo-labels, improving predictions in the first few weeks. Overall, GritNet is presented as the state-of-the-art for student prediction and can be transferred across courses without labels.
[234]Fast & Accurate Data Annotation Pipeline for AI applicationsNAVER D2
This document provides a summary of new datasets and papers related to computer vision tasks including object detection, image matting, person pose estimation, pedestrian detection, and person instance segmentation. A total of 8 papers and their associated datasets are listed with brief descriptions of the core contributions or techniques developed in each.
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지NAVER D2
This document presents a formula for calculating the loss function J(θ) in machine learning models. The formula averages the negative log likelihood of the predicted probabilities being correct over all samples S, and includes a regularization term λ that penalizes predicted embeddings being dissimilar from actual embeddings. It also defines the cosine similarity term used in the regularization.
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기NAVER D2
The document discusses running a TensorFlow Serving (TFS) container using Docker. It shows commands to:
1. Pull the TFS Docker image from a repository
2. Define a script to configure and run the TFS container, specifying the model path, name, and port mapping
3. Run the script to start the TFS container exposing port 13377
The document discusses linear algebra concepts including:
- Representing a system of linear equations as a matrix equation Ax = b where A is a coefficient matrix, x is a vector of unknowns, and b is a vector of constants.
- Solving for the vector x that satisfies the matrix equation using linear algebra techniques such as row reduction.
- Examples of matrix equations and their component vectors are shown.
This document describes the steps to convert a TensorFlow model to a TensorRT engine for inference. It includes steps to parse the model, optimize it, generate a runtime engine, serialize and deserialize the engine, as well as perform inference using the engine. It also provides code snippets for a PReLU plugin implementation in C++.
The document discusses machine reading comprehension (MRC) techniques for question answering (QA) systems, comparing search-based and natural language processing (NLP)-based approaches. It covers key milestones in the development of extractive QA models using NLP, from early sentence-level models to current state-of-the-art techniques like cross-attention, self-attention, and transfer learning. It notes the speed and scalability benefits of combining search and reading methods for QA.
4. /594
0. VSync & 브라우저
•서로 다른 계층의 이 두 요소는 어떤 관계를 맺고 있을까
•VSync(Vertical synchronization) - 하드웨어 시그널
•브라우저 - 유저레벨 애플리케이션
•VSync 는 브라우저의 이 API 들과 어떤 연관이 있을까
•requestIdleCallback
•requestAnimationFrame
6. /596
1.1 모니터는 어떻게 화면을 업데이트 할까
•모니터의 화면 업데이트는 그래픽 드라
이버를 통해 이루어짐
•그래픽 드라이버는 그래픽 버퍼에 저장
된 픽셀 데이터(이미지)로 모니터 화면
업데이트
Graphic Driver
Buffer
7. /597
1.1 모니터는 어떻게 화면을 업데이트 할까
•어플리케이션은 새 픽셀 데이터 생성
을 위한 데이터 또는 커맨드를 그래픽
드라이버에 전달 (ex, OpenGL API)
•그래픽 드라이버는 새 픽셀 데이터를
그래픽 드라이버 메모리 영역에 생성 Graphic Driver
Applications
Buffer
데이터/커맨드
8. /598
1.1 모니터는 어떻게 화면을 업데이트 할까
•그래픽 드라이버는 애플리케이
션이 만든 데이터를 Back
buffer 메모리 영역에 구성
•모니터 화면은 Front buffer 에
저장된 데이터를 이용하여 업데
이트 (Double buffering)
8
Graphic Driver
Applications
Back
Buffer
데이터/커맨드
Front
Buffer
9. /599
1.1 모니터는 어떻게 화면을 업데이트 할까
•애플리케이션이 화면을 완성하면 화
면 업데이트를 그래픽 드라이버에
요청
•Back buffer와 Front buffer를 스
왑(swap)합니다
Graphic Driver
Applications
Back
Buffer
Swap
Front
Buffer
10. /5910
1.1 모니터는 어떻게 화면을 업데이트 할까
•모니터는 화면은 일정한 시간 간격으로 변경됨 (ex, 60Hz)
•모니터 화면을 업데이트 해야할 때 드라이버는 그래픽 메모리의
front buffer에 저장된 프레임으로 화면 업데이트
•다음 모니터 화면 업데이트 때 새로운 이미지를 보여주고 싶을때는
리프레시 전에 화면 업데이트(Swap) 요청을 해야함
12. /5912
1.3 Tearing 방지 - VSync
•Tearing 이 일어나지 않으려면 Monitor
refresh 동안 Front buffer 의 데이터가
변경되지 않아야 함
•VSync (Vertical Synchronization) 동
안 Monitor refresh 가 진행됨 vsync pulse vsync
Monitor
refresh
vertical
blank
interval
13. /5913
1.3 Tearing 방지 - VSync
•60hz 모니터의 경우 1/60 초 마다
VSync pulse 가 발생
•Tearing 을 방지하기위해 VSync pulse
동안 버퍼 스왑을 금지
•VSync 정보를 통해 Monitor refresh 가
언제 일어나는지 알 수 있음
vsync pulse vsync
Monitor
refresh
vertical
blank
interval
14. /5914
1.3 Tearing 방지 - VSync
•VSync 를 사용하지 않는 것의 의미
•Monitor refresh 를 신경쓰지 않고 원할 때 버퍼 스왑을 하겠
다는 뜻
•Tearing 이 발생할 수 있음
15. /5915
1.4 추가 읽기
•“The Illusion of Motion” by Paul Bakaus
• https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/
22. /5922
2.4 Smooth 애니메이션 프레임 타이밍
Monitor
refresh
시간
Frame 2Frame 1 Frame 3 Frame…Idle
•일정한 프레임 간 시간 간격 으로 매끄러운 애니메이션 구현이 가능
•자원 절약 & Idle 타임 활용
23. /5923
2.3 Janky 애니메이션의 프레임 타이밍
Monitor
refresh
시간
Frame 2Frame 1 Frame 3 Frame 4 Frame 5 Frame 6
X X
•사용자에게 보여지지 않을 프레임 생성으로 인한 자원 낭비
•고르지 않는 프레임 간 시간 간격(Δt)으로 부자연스러운 애니메이션으로 보여질 수 있음
Δt2Δt1
26. /5926
3.1 타이머 사용
•16.6ms 주기의 타이머
•Monitor refresh interval 과 align 이 안되어 프레임 드랍 발생
타이머
시간
Frame 2Frame 1 Frame 3 Frame…
refresh
16.6ms
frame drop
27. /5927
3.2 Refresh 주기에 맞추려면
•VSync 정보가 필요
• 프레임 시작 시간 (frame time)
• 프레임간 시간 차이(frame interval)
Monitor
refresh
시간
Frame 2Frame 1 Frame 3 Frame…
frame
time
frame
interval
28. /5928
3.3 VSync 정보 알아내기 - Windows
•DWM 이 사용되는 경우
•Desktop Window Manager (vista 부터 가능)
•DwmGetCompositionTimingInfo()
•DWM 이 사용되지 않는 경우
•MonitorFromWindow()
•GetMonitorInfo()
29. /5929
3.3 VSync 정보 알아내기 - Android
•Choreographer (since API Level16)
•시스템의 VSync 를 기반으로 animation, input, drawing
task 들의 타이밍을 컨트롤
•프레임 타임의 시작 시점을 알기 위해서는
Choreographer.FrameCallback 을 구현하여 등록
•Choreographer.postFrameCallback()
•등록한 callback 은 새 프레임 타임 시작 시점에 호출
30. /5930
3.3 VSync 정보 알아내기 - OSX
•CVDisplayLink - Core Video display link
•CVDisplayLinkSetOutputCallback()
•콜백함수는 DisplayLink 가 새 프레임을 원할때 호출됨
•콜백함수에 전달되는 파라미터를 통해 다음 프레임 타임과 인
터벌을 알 수 있음
•별도의 high-priority 쓰레드에서 동작
31. /5931
3.3 VSync 정보 알아내기 - iOS
•CADisplayLink
•OS 에서 제공하는 타이머로 디스플레이의 refresh rate 와 동기
화가 필요할 때 사용
•등록한 selector 는 프레임 타임 시작시 호출
•+ displayLinkWithTarget:selector:
•duration/frameInterval 속성을 통해 다음 프레임 타임 시간을
예측할 수 있음
32. /5932
3.3 vsync 정보 알아내기 - Linux
•X window 그래픽 서버를 이용
•GLX extension- GLX_OML_sync_control,
GLX_SGI_video_sync
•Frame time, frame interval
•XRandR - Resize and Rotate protocol
•신뢰성있는 refresh rate 제공
•정확한 frame interval 을 구할 수 있음
33. /5933
3.4 VSync 활용하여 프레임 타이밍 구성
•Callback 방식
•안드로이드/iOS/OSX
•시스템에서 프레임 시작시간에 callback 을 호출
•Callback 호출 시 프레임 타이밍을 잡을 수 있음
34. /5934
3.4 VSync 활용하여 프레임 타이밍 구성
•Querying 방식
•Windows/Linux
•시스템을 통해 VSync 정보를 가져옴
•타이머를 활용하여 예상되는 시간에 프레임 구성 시작
35. /5935
3.4 VSync 활용하여 프레임 타이밍 구성
•Callback 방식
•Callback 이 호출될 때 interval 을 예측하여 정확한 프레임 타
임을 계산
Callback 실행
시간
Frame 2Frame 1 Frame 3 Frame…
refresh
36. /5936
3.4 VSync 활용하여 프레임 타이밍 구성
타이머
시간
Frame 2Frame 1 Frame 3 Frame…
refresh
•Querying 방식
•프레임 마다 VSync 정보를 갱신하여 정확한 주기의
타이머 설정
Fetch vsync info &
adjust timer
37. /5937
3.4 VSync 활용하여 프레임 타이밍 구성
•VSync query 오버헤드
•OSX (CVDisplayLink)는 high-priority thread 가 생성됨
•GPU driver 마다 오버헤드가 다를 수 있음 - 측정이 필요
•일정 주기마다 갱신하는것도 한가지 방법 (ex, 5초에 한번씩)
38. /5938
3.5 Summary
•브라우저는 VSync 정보를 활용하여 Display refresh 와 매칭되
는 프레임 타이밍을 구성하고 있음
•여러분이 사용하는 툴킷들은 어떻게 프레임 타이밍을 잡고 있을까
요?
•사용중인 다양한 GUI 툴킷/프레임워크들이 어떤 타이밍에 frame
callback 을 호출시키주는 지 알아보는 것도 재밌을것 같습니다.
40. /5940
4.1 브라우저 내부 태스크 스케줄링
•브라우저는 한번의 프레임 생성을 위해 많은 일을 수행
•정확한 프레임 타임과 deadline 을 통해 효율적으로 처리하도록
노력
Frame Frame
JS
LayoutPaint
CompositeRaster
Input
Raster
deadline
Input
42. /5942
4.2 웹 애플리케이션 스케줄링
•제 때 호출되는 draw callback 이 있어야 매끄러운 애니메이션
구현이 가능 (타이머로는 힘듬)
•제 때 호출 되는 idle callback 이 제공되면 중요한 일들을 방해하
지 않으면서 idle task 수행이 가능
43. /5943
4.2 웹 애플리케이션 스케줄링
•브라우저에서의 draw callback
•window.requestAnimationFrame
•브라우저에서의 idle callback
•window.requestIdleCallback (new API)
44. /5944
4.2 window.requestAnimationFrame
•Animation task 는 언제 실행되고, 화면에 나타나게 될까?
function animate(time) {
document.getElementById("animated").style.left =
(time - animationStartTime) % 2000 / 4 + "px";
window.requestAnimationFrame(animate);
}
(function() {
animationStartTime = window.performance.now();
requestId = window.requestAnimationFrame(animate);
})();
45. /5945
4.2 window.requestAnimationFrame
“
The expectation is that the user agent will run tasks
from the animation task source at a regular interval
matching the display's refresh rate.
Running tasks at a lower rate can result in animations
not appearing smooth.
Running tasks at a higher rate can cause extra
computation to occur without a user-visible benefit.
“
http://w3c.github.io/animation-timing/
49. /5949
4.3 window.requestIdleCallback
function myNonEssentialwork(deadline) {
while (deadline.timeRemaining > 0 && tasks.length > 0)
doWorkIfNeeded();
if (tasks.length >0 )
window.requestIdleCallback(myNonEssentialWork);
}
window.requestIdleCallback(myNonEssentialWork);
https://developers.google.com/web/updates/2015/08/27/using-requestidlecallback
•Idle task 는 언제 실행이 될까?
50. /5950
4.3 window.requestIdleCallback
“
Cooperatively schedule background tasks such
that they do not introduce delays to other high
priority tasks that share the same event loop,
such as input processing, animations and
frame compositing
“
http://w3c.github.io/requestidlecallback
51. /5951
4.3 window.requestIdleCallback
•Idle task 가 high-priority task 를 방해하지 않으려면 현재 프레
임 타임 내에서 정확한 Idle time 이 계산되어야 함
•즉, 다음 프레임이 언제 시작될 지가 정확히 파악이 되어야 Idle
task에게 timeRemaining 정보를 줄 수 있음
•그렇지 않으면 Idle task 로 인해 다른 중요한 task 가 지연 될 수
있음
56. /5956
5. Summary
•VSync 란 무엇인가
•애플리케이션에서 VSync 정보는 어떻게 얻을 수 있나
•VSync 정보를 활용하여 Display refresh rate 와 align 되는 프
레임 타이밍을 구성
•브라우저의 requestAnimationFrame, requestIdleCallback
API 는 VSync 를 기반으로 동작