[10분 테코톡] ☕️ 체프의 브라우저 렌더링

[@심문성]

안녕하세요, 발표자입니다.
발표에서 소개드렸던 CSS Triggers 사이트는 2022년 9월 10일자 이후로 Archived되어 더 이상 접속할 수 없는 상태입니다. Layout, Paint, Composite 여부는 브라우저가 업데이트되면서 언제든지 달라질 수 있기 때문에 브라우저 개발자 도구에서 직접 테스트하시는 것이 가장 정확하다는 점 참고 부탁드립니다. 발표 들어주셔서 감사드립니다 😃

[@코박죽-z9w]

너무 좋은데요 렌더에 관련해서 이거보다 이해가 쉽고 명확하게 전달된다고 느낀 영상이 없었습니다
너무 감사합니다

[@예빈박-r6m]

브라우저 렌더링 과정도 재밌게 들었지만 마지막 최적화 과정은 진짜 흥미롭네요. 사용자가 보기엔 같은 움직임이지만 성능 차이가 발생한다니 너무 신기해요. 좋은 영상 감사합니다!!

[@likepeppermint]

목소리 너무 좋다...

[@matzip_saga]

개발자 도구를 활용한 방법이 특히 관심이 갔습니다 잘 보았습니다

[@pungsan2490]

이런 귀한 영상이 💕

[@leobang2308]

영상 잘 봤어요 감사합니다

[@김지은-b9u]

좋은 강연 정말 감사드립니다! 블로그글만으로는 이해하기 힘들었는데 이제 훨씬 정리가 되는 것 같아요.

[@jh-dh6hi]

영상 감사합니다!

[@배고파-q9y]

너무좋고

[@라나7]

좋은 강의 감사합니다
최적화:) 성능 상 렌더링탭에서 페인팅플래쉬를 키면 브라우저 화면에서 어떤 부분이 다시 페인팅 일어나는지 볼 수 있다.
트랜스폼 속성 변경하면 컴포지트(레이어의 합성)만 일어남 페인팅 과정없이 애니메이션 업데이트된다.
따라서 Left 말고 transform 주면 성능 최적화 가능!

[@88arusia]

좋네요

[@gukhae1596]

브라우저 애니메이션 성능 측정에 대한 설명 잘 들었습니다.
궁금한 점이 있는데, 브라우저별로 엔진이 다르면 동일한 코드여도 브라우저에 따라 최적화 코드가 다를 수 있을까요?

[@심문성]

안녕하세요 :) 발표자입니다
브라우저별로 최적화해야 하는 방식이 다를 수는 있습니다
하지만 브라우저 별로 렌더 성능의 차이가 극단적으로 발생하는 경우는 거의 없다고 봅니다. 브라우저 별로 코드를 다르게 작성하는 것 또한 지양하는 것이 좋구요. 따라서 정말 특별한 경우가 아니면 브라우저 별로 최적화 코드를 다르게 작성하는 일은 거의 없을 것이라고 생각합니다.

[@gukhae1596]

@@심문성 그렇군요. 답변 감사합니다.

[@devdance95]

이거다...