728x90 개발/HTML & CSS2 will-change를 이용한 하드웨어 가속 하드웨어 가속 하드웨어 가속은 GPU(그래픽 처리 장치)를 이용하여 CPU(중앙 처리 장치)의 처리량을 줄이고, 브라우저 렌더링을 효율화 하는 것을 말한다. 이미지, 영상 등 그래픽 처리에 대한 부분을 GPU로 분산을 하면 모바일 디바이스와 같은 환경에서 CPU에 부하를 줄일 수 있다. 하드웨어 가속을 이용하면 렌더링 될 엘리먼트만 가져와 빠르게 렌더링 처리를 할 수 있게 된다(3D transforms만 적용). CSS animation, transform, transition 속성에 자동으로 GPU 가속이 활성화 되지는 않지만 렌더링 처리 능력을 향상시킬 수 있는 몇가지 속성이 구현되어 있다. docs에 나와있듯 will-change css 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 .. 2022. 8. 29. jsp 페이지 로딩 순서 시작하기 전에(필자의 여담) 랜더링 순서? 랜더링 순서란 페이지를 로딩하며 코드가 실행되는 순서를 말한다. 그럼 이게 왜 중요할까? 회사에 입사해서 분명 코드에는 존재하는데 참조하지 못하는 경우를 경험한 적이 있다. 처음엔 내 코드가 잘못 된 줄 알았다. 아, 잘못 된 건 맞다. 하지만 코드를 작성한 위치가 잘못 되었었다... HTML 랜더링 순서 HTML, jsp 모두 인터프리터 언어이다. 따라서 위에서 아래대로 실행된다. Import 의 onload window.onload (스크립트는 각 상위태그 순서에 따라) 랜더링 순서를 이해하기 위한 DOM 포스팅과 그 밖의 Vue 포스팅은 다음을 참고하자.(게시글 추가 예정) 랜더링 관련하여 Vue.js 프레임워크를 사용할 당시 vue.$nextTick을 사.. 2021. 6. 23. 이전 1 다음 728x90
