스타트업 테크 챌린지, 프론트엔드 개발자를 위한 Layer Model

1. 프론트엔드 개발자를 위한
Layer Model
이한

2. 주의
이 슬라이드의 내용은 웹 표준이 아닙니다.
정확히는 특별한 표준이 없습니다.
브라우저 구현에 많이 의존 하며, 서로 차이점이 있을 수 있습니다.
브라우저의 변화에 따라 달라질 수 있습니다.

3. 웹 브라우저
웹 서버에서 쌍방향 통신하는
HTML 문서나 파일과 연동하고 출력하는 응용소프트웨어

4. 브라우저는 기본적으로 DOM을 한장의 비트맵으로 출력

5. 한장의 비트맵을 위해 복잡한 과정을 거칩니다

6. 웹 브라우저는 DOM Tree를 그대로 그리지 않습니다

7. 오늘 다룰 Layer는 이곳 입니다

8. Layer Model은 표준이 아닙니다
왜냐면 표준 지침이 없기 때문입니다

9. 그래도 비슷비슷 합니다

10. 같은 문제를 겪다보니 비슷하게 발전했습니다

11. .bottom {
width: 300px;
height: 300px;
background-color: #E24594;
}
.top {
position: fixed;
z-index: 2;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #57BFD2;
}

12. 아래를 먼저그리고 위를 그린다

13. 각각 그리고 합친다

14. 레이어
각각의 독립된 비트맵
레이어는 GPU에서
하나의 화면으로합쳐진다

21. 브라우저 마다 조금씩 다릅니다

22. RenderLayer, GraphicsLayer
PaintLayer, GraphicsLayer
Safari
Webkit
Chromium, Chrome
Blink
Firefox
Gecko
Edge
EdgeHTML
미확인2
미확인1

23. https://wiki.mozilla.org/Gecko:Layers
https://msdn.microsoft.com/ko-kr/library/jj680148(v=vs.85).aspx
https://trac.webkit.org/wiki/Accelerated rendering and compositing
https://www.chromium.org/developers/design-documents/gpu-
accelerated-compositing-in-chrome

24. RenderLayer
브라우저의 엔진이
하드웨어 가속 등을 처리하기 위해사용하는
논리적인 레이어

25. • It's the root object for the page
• It has explicit CSS position properties (relative, absolute or a transform)
• It is transparent
• Has overflow, an alpha mask or reflection
• Has a CSS filter
• Corresponds to <canvas> element that has a 3D (WebGL) context or an accelerated 2D
context
• Corresponds to a <video> element
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
다음 특성을 가지면 새로운 RenderLayer가 만들어집니다

26. 1.자바스크립트를 읽고, 해석하고
2.CSS를 읽고 CSSOM을 생성하고
3.읽어온 DOM의 적합한 위치에 배치한후
4.특성에 맞게 그려 이미지를 만들고
5.GPU에 넘긴다
렌더링 절차

27. 업데이트가 발생하면
Reflow(Relayout)
Repaint(Redraw)

28. Repaint 발생

29. Reflow, Repaint 모두 발생

30. Reflow, Repaint는 비싼 비용을 치룬다
비용을 줄일 수 없을까?

31. GraphicsLayer
하드웨어 가속 처리를 위한 물리적인 레이어
레이어별 RenderObject를
GraphicsLayer 단위로 렌더링한 뒤
최종적으로 GPU를 통해 합성된다.

32. • Layer has 3D or perspective transform CSS properties
• Layer is used by <video> element using accelerated video decoding
• Layer is used by a <canvas> element with a 3D context or accelerated 2D context
• Layer is used for a composited plugin
• Layer uses a CSS animation for its opacity or uses an animated webkit transform
• Layer uses accelerated CSS filters
• Layer has a descendant that is a compositing layer
• Layer has a sibling with a lower z-index which has a compositing layer (in other words the
layer overlaps a composited layer and should be rendered on top of it)
다음 특성을 가지면 GraphicsLayer로 승격됩니다
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

33. GraphicsLayer
실제 비트맵에 대응
GPU에 텍스처로 업로드 됨
Reflow, Repaint도 레이어 안에서

34. z-index: 2
z-index: 1
RenderLayer GraphicsLayer Display
암묵적 레이어 생성
레이어2 레이어1 비트맵1

35. RenderLayer GraphicsLayer Display
암묵적 레이어 생성
transform: translateX(n);
레이어2 레이어2 비트맵1
레이어 승격

36. RenderLayer GraphicsLayer Display
암묵적 레이어 생성
transform: translateX(n);
레이어2 레이어? 비트맵1
레이어 승격직접 규칙 X

37. RenderLayer GraphicsLayer Display
암묵적 레이어 생성
transform: translateX(n);
레이어2 레이어2 비트맵1
레이어 승격암묵적으로 생성

38. 하드웨어 가속(Hardware acceleration)
컴퓨팅에서 일부 기능을 CPU에서 구동하는 소프트웨어
방식보다 더 빠르게 수행할 수 있는 하드웨어의 사용

40. 일부 속성은 CPU에서 레이아웃 재계산 없이
GPU에서 처리 가능합니다
합성(compositing)
transform, opacity
레이아웃 계산 없이 GPU에서 처리 되므로 빠르게 렌더링됩니다
특히 애니메이션에 유리합니다

41. transform: translateZ(0);
transform: translate3d(0, 0, 0);
레이어를 만들어보자 - Hack

42. will-change: transform;
레이어를 만들어보자 ‒ will-change

43. *, *::after, *::before {
will-change: transform;
transform: translateZ(0);
}
그럼 이렇게 해보면 어떨까요?

44. Build FestRun Fest ≠
컴파일 언어
(보통) 하드웨어 가속
인터프리터 언어
(경우에 따라서) 소프트웨어 렌더링
빌드 시간을 잊어버리지 마세요

45. GPU는 다른 컴퓨터와 같습니다

46. 서로 다른 메모리를 사용하기 때문에
정보를 동기화 해야 합니다

47. 하드웨어 가속은 좋지만, 신중하게 사용해야 합니다

52. Reflow/Repaint와 레이어 비용을 비교해서 선택
일반적으로 많은 Reflow/paint작업을 가지는 애니메이션은 레이어 활용
너무 큰 레이어, 중복레이어는 최대한 안생기도록
(특히 리스트같이 반복되는 경우 엄청난 성능 하락이 있을 수 있음)
너무 많은 레이어도 X
암묵적 컴포징을 피하자
Blink는 Squashing 이라고 부르는 방식으로 레이어를 병합하기도 함

53. 한 가지 더

54. .header {
background: rgba(255, 255, 255, .5);
}

55. header {
width: 100%;
height: 90px;
}
header > nav > ul > li > nav {
position: absolute;
z-index: 100;
...
}
<header>
<ul>
<li>
<nav>
...
</nav>
</li>
</ul>
</header>
레이어
생성!

56. .header {
background: rgba(255, 255, 255, .5);
filter: blur(30px);
}

57. .header {
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(30px);
}

58. .header {
background: rgba(255, 255, 255, .5);
-webkit-backdrop-filter: blur(30px);
}

59. 레이어와 스타일
레이어를 만드는 스타일중 일부는 레이어 전체에 적용
구현자나 사용자 모두 유의할 것!

60. • http://d2.naver.com/helloworld/2061385
• http://cwdoh.com/workshop/2014/06/14/underst
anding-rendering-performance-matters-in-chrome/
• http://wit.nts-corp.com/2017/06/05/4571
• http://wit.nts-corp.com/2017/08/31/4861
• https://docs.google.com/presentation/d/1dDE5u7
6ZBIKmsqkWi2apx3BqV8HOcNf4xxBdyNywZR8
• https://docs.google.com/presentation/d/1WOhbW
LkhMyo4vZUaHq-FO-mt0B2sejXw-lMwohD5iUo
다음 글을 참고해서 작성하였습니다