Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

711 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 프론트엔드 개발자를 위한 Layer Model 이한
  2. 2. 주의 이 슬라이드의 내용은 웹 표준이 아닙니다. 정확히는 특별한 표준이 없습니다. 브라우저 구현에 많이 의존 하며, 서로 차이점이 있을 수 있습니다. 브라우저의 변화에 따라 달라질 수 있습니다.
  3. 3. 웹 브라우저 웹 서버에서 쌍방향 통신하는 HTML 문서나 파일과 연동하고 출력하는 응용소프트웨어
  4. 4. 브라우저는 기본적으로 DOM을 한장의 비트맵으로 출력
  5. 5. 한장의 비트맵을 위해 복잡한 과정을 거칩니다
  6. 6. 웹 브라우저는 DOM Tree를 그대로 그리지 않습니다
  7. 7. 오늘 다룰 Layer는 이곳 입니다
  8. 8. Layer Model은 표준이 아닙니다 왜냐면 표준 지침이 없기 때문입니다
  9. 9. 그래도 비슷비슷 합니다
  10. 10. 같은 문제를 겪다보니 비슷하게 발전했습니다
  11. 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. 12. 아래를 먼저그리고 위를 그린다
  13. 13. 각각 그리고 합친다
  14. 14. 레이어 각각의 독립된 비트맵 레이어는 GPU에서 하나의 화면으로합쳐진다
  15. 15. 브라우저 마다 조금씩 다릅니다
  16. 16. RenderLayer, GraphicsLayer PaintLayer, GraphicsLayer Safari Webkit Chromium, Chrome Blink Firefox Gecko Edge EdgeHTML 미확인2 미확인1
  17. 17. 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
  18. 18. RenderLayer 브라우저의 엔진이 하드웨어 가속 등을 처리하기 위해사용하는 논리적인 레이어
  19. 19. • 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가 만들어집니다
  20. 20. 1.자바스크립트를 읽고, 해석하고 2.CSS를 읽고 CSSOM을 생성하고 3.읽어온 DOM의 적합한 위치에 배치한후 4.특성에 맞게 그려 이미지를 만들고 5.GPU에 넘긴다 렌더링 절차
  21. 21. 업데이트가 발생하면 Reflow(Relayout) Repaint(Redraw)
  22. 22. Repaint 발생
  23. 23. Reflow, Repaint 모두 발생
  24. 24. Reflow, Repaint는 비싼 비용을 치룬다 비용을 줄일 수 없을까?
  25. 25. GraphicsLayer 하드웨어 가속 처리를 위한 물리적인 레이어 레이어별 RenderObject를 GraphicsLayer 단위로 렌더링한 뒤 최종적으로 GPU를 통해 합성된다.
  26. 26. • 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
  27. 27. GraphicsLayer 실제 비트맵에 대응 GPU에 텍스처로 업로드 됨 Reflow, Repaint도 레이어 안에서
  28. 28. z-index: 2 z-index: 1 RenderLayer GraphicsLayer Display 암묵적 레이어 생성 레이어2 레이어1 비트맵1
  29. 29. RenderLayer GraphicsLayer Display 암묵적 레이어 생성 transform: translateX(n); 레이어2 레이어2 비트맵1 레이어 승격
  30. 30. RenderLayer GraphicsLayer Display 암묵적 레이어 생성 transform: translateX(n); 레이어2 레이어? 비트맵1 레이어 승격직접 규칙 X
  31. 31. RenderLayer GraphicsLayer Display 암묵적 레이어 생성 transform: translateX(n); 레이어2 레이어2 비트맵1 레이어 승격암묵적으로 생성
  32. 32. 하드웨어 가속(Hardware acceleration) 컴퓨팅에서 일부 기능을 CPU에서 구동하는 소프트웨어 방식보다 더 빠르게 수행할 수 있는 하드웨어의 사용
  33. 33. 일부 속성은 CPU에서 레이아웃 재계산 없이 GPU에서 처리 가능합니다 합성(compositing) transform, opacity 레이아웃 계산 없이 GPU에서 처리 되므로 빠르게 렌더링됩니다 특히 애니메이션에 유리합니다
  34. 34. transform: translateZ(0); transform: translate3d(0, 0, 0); 레이어를 만들어보자 - Hack
  35. 35. will-change: transform; 레이어를 만들어보자 ‒ will-change
  36. 36. *, *::after, *::before { will-change: transform; transform: translateZ(0); } 그럼 이렇게 해보면 어떨까요?
  37. 37. Build FestRun Fest ≠ 컴파일 언어 (보통) 하드웨어 가속 인터프리터 언어 (경우에 따라서) 소프트웨어 렌더링 빌드 시간을 잊어버리지 마세요
  38. 38. GPU는 다른 컴퓨터와 같습니다
  39. 39. 서로 다른 메모리를 사용하기 때문에 정보를 동기화 해야 합니다
  40. 40. 하드웨어 가속은 좋지만, 신중하게 사용해야 합니다
  41. 41. Reflow/Repaint와 레이어 비용을 비교해서 선택 일반적으로 많은 Reflow/paint작업을 가지는 애니메이션은 레이어 활용 너무 큰 레이어, 중복레이어는 최대한 안생기도록 (특히 리스트같이 반복되는 경우 엄청난 성능 하락이 있을 수 있음) 너무 많은 레이어도 X 암묵적 컴포징을 피하자 Blink는 Squashing 이라고 부르는 방식으로 레이어를 병합하기도 함
  42. 42. 한 가지 더
  43. 43. .header { background: rgba(255, 255, 255, .5); }
  44. 44. header { width: 100%; height: 90px; } header > nav > ul > li > nav { position: absolute; z-index: 100; ... } <header> <ul> <li> <nav> ... </nav> </li> </ul> </header> 레이어 생성!
  45. 45. .header { background: rgba(255, 255, 255, .5); filter: blur(30px); }
  46. 46. .header { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(30px); }
  47. 47. .header { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(30px); }
  48. 48. 레이어와 스타일 레이어를 만드는 스타일중 일부는 레이어 전체에 적용 구현자나 사용자 모두 유의할 것!
  49. 49. • 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 다음 글을 참고해서 작성하였습니다

×