웹 프론트엔드 깊게 이해하기(29)
-
객체 및 프로토타입
이 글은 아래 링크의 영상들의 내용을 기반으로 작성되었습니다. https://opentutorials.org/module/4047 New 연산자의 이해 자바스크립트에서 'new' 연산자의 구체적인 역할은 잘 모르는 사람이 많습니다. 저 또한 그러한 사람 중 한명이구요. 이번엔 그 구체적인 역할에 대해 알아봅시다. 우리는 함수를 실행했을 때, 해당 함수에서 return 하는 무엇인가가 출력됨을 알고 있을 것입니다. 하지만 위와 같은 Person 함수의 경우, return 하는게 아무 것도 없기 때문에 콘솔에는 undefined 가 찍힙니다. 그러나 똑같은 함수에 new 연산자를 쓰면, 신기하게도 객체가 하나 리턴된 것을 볼 수 있을 것입니다. new 연산자는 옆의 함수를 '생성자(constructor)'로..
2020.11.26 -
페인트와 합성과정에서의 최적화
(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 페인트 성능 추적 방법 *페인트 성능을 추적하기 위해, performance 탭 뿐만 아니라 개발자 도구의 'Show pain rectangle' 기능을 활용할 수도 있습니다. 이를 사용하면 단순히 paint 가 일어나고 있다는 것 뿐만 아니라 일어나지 않아야할 영역에서 일어나고 있는 것은 아닌지도 체크해볼 수 있습니다. *페인트 프로파일링은 퍼포먼스 탭에서 Enable Advanced Paint Instrumentation 을 체크하면 수행할 수 있습니다. 체크가 된 상태라면 녹색 페인트 flame 을..
2020.11.18 -
스타일과 레이아웃 과정 최적화
(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 스타일 과정에서의 처리 시간 증가 곡선 자바스크립트나 css 를 통해서 애니메이션 등을 발생시킬 때, 단순히 하나의 요소가 아니라 여러개의 요소의 스타일이 바뀌도록 만들 수 있을 것입니다. 그렇다면 이렇게 스타일 과정에서 변경사항을 반영해야 할 요소들이 많아지면 과연 스타일 과정의 전체 처리시간에 얼마나 큰 영향을 끼치게 될까요? 정답은 '선형적으로 처리시간을 증가시킨다' 입니다. 어떤 스타일 변경을 수행했느냐에 따라 어느 정도는 달라질 수 있습니다. 어쨌든 더 많은 요소의 스타일이 변경되도록 만드는 것..
2020.11.17 -
자바스크립트를 활용한 인터랙션 성능 최적화
(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 자바스크립트는 아주 근본적인 문제를 가지고 있습니다. 그것은 바로 우리가 쓰는 자바스크립트와, 실제 브라우저가 수행하는 코드가 100% 일치하지 않는다는 것입니다. 자바스크립트는 브라우저의 엔진을 통해 컴파일됩니다. 이때 이 컴파일러를 JIT(Just In Time)이라 통칭합니다. 그러므로 자바스크립트는 근본적으로 저수준 레벨에서의 최적화는 불가능합니다. 따라서 어떤 제어문이 더 좋은 성능을 내는지 등은 고려하지 않아도 됩니다. 하지만, 꼭 저수준 레벨에서 최적화를 하지 않더라도 다른 방법으로 엄청난 ..
2020.11.17 -
웹 성능 최적화의 척도(RAIL)
(이 글은 아래의 영상 시리즈 속 내용을 바탕으로 제작되었습니다.) www.youtube.com/watch?v=yJo9lZAEqb0&list=PLAwxTw4SYaPl09X4Rljhy7dZinRCzbHz6 RAIL 이란? 웹 성능 최적화의 척도로 60fps 를 유지하는 것이 잘 소개되고는 하지만, 엄밀히 말해서 '매순간' 60fps 를 유지해야 하는 것은 아닙니다. 사실 그것은 불가능에 가깝습니다. 정확히 어느 순간을 최적화 해야 하는지를 판단하기 위한 척도로, 'RAIL' 이라는 개념이 대두됩니다. R (Response) Respond 는 이용자의 인터랙션에 얼마나 빨리 반응할 수 있느냐와 관련된 부분입니다. 즉, 이용자가 버튼을 클릭하거나 사이드바 토글을 수행할 때 이용자가 직접적으로 화면상에 그에 따..
2020.11.16 -
웹 프론트엔드 성능 최적화(2) - 리렌더링 과정의 이해
(리)레이아웃과 리페인트 그리고 리컴포짓 (참조 : https://developers.google.com/web/fundamentals/performance/rendering/?hl=ko) 일단 브라우저가 HTML을 한번 다 읽고 나서 파싱까지 모두 끝냈다면 DOM 과 CSSOM 트리를 처음부터 다시 만드는 작업은 일어나지 않습니다. 하지만 자바스크립트나 CSS(transition, animation 등)에 의해 DOM 트리나 CSSOM 트리가 변경되면 렌더 트리는 처음부터 끝까지 다시 만들어지고, 그 후의 모든 과정이 다시 수행됩니다. 스타일 과정을 포함한 모든 과정을 다 수행하는 것을 레이아웃, 혹은 리플로우라고 부릅니다. 그렇다면 이러한 리플로우 과정은 '어느 DOM 요소의 기하학적 속성을 변경하느..
2020.11.09