[10분 테코톡] ☕️ 체프의 브라우저 렌더링
HTML-код
- Опубликовано: 1 июн 2021
- 🙋♀️ 우아한테크코스의 크루들이 진행하는 10분 테크토크입니다. 🙋♂️
'10분 테코톡'이란 우아한테크코스 과정을 진행하며 크루(수강생)들이 동료들과 학습한 내용을 공유하고 이야기하는 시간입니다. 서로가 성장하기 위해 지식을 나누고 대화하며 생각해보는 시간으로 자기 주도적인 성장을 지향하는 우아한테크코스의 문화 중 하나입니다.
🌕우아한테크코스란 🌕
우아한테크코스는 일반 사용자용 서비스를 개발하는 회사가 필요로 하는 역량을 가진 프로그래머를 양성하기 위한 교육입니다. 우리의 목표는 자기 주도적으로 학습하고 성장하고 싶은 개발자를 위한 교육을 만드는 것입니다.
*우아한테크코스 3기는 “온라인”으로 강의 및 발표를 진행하고 있습니다. 온라인 발표 화면인 점 참고 부탁드립니다 : )
*3기부터, 프론트엔드 과정이 추가되었습니다.
![[10분 테코톡] 🌳 나봄의 CORS](http://i.ytimg.com/vi/-2TgkKYmJt4/mqdefault.jpg)
![[10분 테코톡] 🌳 나봄의 CORS](/img/tr.png)
![[10분 테코톡] 🎡토니의 인증과 인가](http://i.ytimg.com/vi/y0xMXlOAfss/mqdefault.jpg)
안녕하세요, 발표자입니다.
발표에서 소개드렸던 CSS Triggers 사이트는 2022년 9월 10일자 이후로 Archived되어 더 이상 접속할 수 없는 상태입니다. Layout, Paint, Composite 여부는 브라우저가 업데이트되면서 언제든지 달라질 수 있기 때문에 브라우저 개발자 도구에서 직접 테스트하시는 것이 가장 정확하다는 점 참고 부탁드립니다. 발표 들어주셔서 감사드립니다 😃
이런 귀한 영상이 💕
영상 감사합니다!
영상 잘 봤어요 감사합니다
브라우저 렌더링 과정도 재밌게 들었지만 마지막 최적화 과정은 진짜 흥미롭네요. 사용자가 보기엔 같은 움직임이지만 성능 차이가 발생한다니 너무 신기해요. 좋은 영상 감사합니다!!
목소리 너무 좋다...
너무좋고
개발자 도구를 활용한 방법이 특히 관심이 갔습니다 잘 보았습니다
좋은 강연 정말 감사드립니다! 블로그글만으로는 이해하기 힘들었는데 이제 훨씬 정리가 되는 것 같아요.
너무 좋은데요 렌더에 관련해서 이거보다 이해가 쉽고 명확하게 전달된다고 느낀 영상이 없었습니다
너무 감사합니다
좋네요
좋은 강의 감사합니다
최적화:) 성능 상 렌더링탭에서 페인팅플래쉬를 키면 브라우저 화면에서 어떤 부분이 다시 페인팅 일어나는지 볼 수 있다.
트랜스폼 속성 변경하면 컴포지트(레이어의 합성)만 일어남 페인팅 과정없이 애니메이션 업데이트된다.
따라서 Left 말고 transform 주면 성능 최적화 가능!
이거다...
브라우저 애니메이션 성능 측정에 대한 설명 잘 들었습니다.
궁금한 점이 있는데, 브라우저별로 엔진이 다르면 동일한 코드여도 브라우저에 따라 최적화 코드가 다를 수 있을까요?
안녕하세요 :) 발표자입니다
브라우저별로 최적화해야 하는 방식이 다를 수는 있습니다
하지만 브라우저 별로 렌더 성능의 차이가 극단적으로 발생하는 경우는 거의 없다고 봅니다. 브라우저 별로 코드를 다르게 작성하는 것 또한 지양하는 것이 좋구요. 따라서 정말 특별한 경우가 아니면 브라우저 별로 최적화 코드를 다르게 작성하는 일은 거의 없을 것이라고 생각합니다.
@@user-wg7rk9nw5b 그렇군요. 답변 감사합니다.