안녕하세요 lovefield 입니다.
오늘은 Front end가 할 수 있는 최적화에 대해서 설명을 해드리려 합니다.
우선 Front end 작업은 Designer의 영향을 어마어마하게 받습니다.
그렇기에 정말로 최적화를 하기 위해서는 Designer의 협력이 필요하며, Designer가 Front end에 대해서, 나의 디자인이 어떻게 표현되는지에 대해서 알고 있어야 한다고 생각합니다.
기본적으로 저는 플렛 디자인을 선호하며 css로 표현하기 가장 쉽기 때문입니다.
아, 그리고 IE는 브라우저 취급을 안 해줍니다. 하하하하IE 사라져버려
2017-03-28
HTML
최대한 불필요한 요소의 사용을 줄입니다.
HTML 요소가 많을수록 시스템 적으로 느려지기 때문인데요.
실제로 유저가 체감할 수 있는 정도는 아니지만, 1000개, 10000개 의 불필요한 요소가 있다면?
소규모 사이트의 경우는 몰라도 대규모라면 랜더링 하는 속도는 차이가 날 수 밖에 없겠죠.
다음 탭 구조를 예로 들어보죠.
이야..정말 불필요한 게 많은 코드입니다.
좀더 시맨틱 하게 바꿔보죠.
정확한 디자인이 없어서 예시이므로 자잘 한 것들은 넘어가겠습니다.
먼저 해당 탭 영역에 대한 캡션은 heading태그로 변경합니다.
탭 버튼 영역은 리스트가 아니므로 div하나로만 감싸며 ul>li구조는 버립니다. a태그는 페이지 이동에만 쓰여야 하며 href 에는 javascript가 들어갈 수 없으므로 버리고 button으로 대체합니다.
그리고 컨트롤을 위한 data-day 값을 사용합니다.
실질적으로 보여지는 부분에도 공통적인 뷰이므로 ul>li 구조를 버리고 공통 클래스를 가져갑니다.
그리고 역시 컨트롤을 위한 data-day 값을 사용합니다.
자 간결해졌죠?
CSS
css에는 less, sass 와 같은 전처리기와 OOCSS, SMACSS, BEM와 같은 방법론이 존재합니다.
그 중 저는 SMACSS를 조금 변형 해서 사용하고 있습니다.
방법은 다음과 같습니다.
Base(Reset)
제 블로그의 reset css 입니다.
Layout
제 블로그의 layout css 입니다.
블로그가 단순해서 8줄정도로 다 사용 중입니다.
Module
모듈입니다, 각각의 모듈을 클래스 단위로 묶어서 사용하며 중복코드가 상당수 사집니다.
타입이나 색상 등 조금씩 다른 부분인 추가 클래스로 만들어줍니다.
Active도 있지만 저는 Module안에 포함시키는 편입니다.
다음은 렌더링입니다.
전역선택자 * 는 모든 태그를 선택합니다. 즉 HTML상에서 태그가 하나 추가될 때마다 시스템적으로는 느려집니다.
!important 는 강제 스타일 적용입니다. 셀렉트 우선순위에 의한 상속을 무시해 유지보수와 확장성에 방해가 됩니다. 또한 렌더링 방식에 있어서 안 좋은 것으로 알고 있습니다.
IE핵의 사용은 비표준 브라우저인 IE를 지원하기 위한 것으로 CSS3와 웹 표준을 지향해 불필요한 렌더링 방식을 줄여야 할 것 같습니다.
vendor prefix 는 구버전 브라우저를 지원하기 위한 코드입니다 현재는 어쩔 수 없이 사용하는 상태입니다.
Javascript
javascript 는 HTML과 CSS에 비해 가장 용량을 많이 차지하는 녀석이죠?
역시 CSS와 같은 맥락으로 모듈화를 합니다.
위와 같은 코드는
이렇게 해 재사용성을 높여줍니다.
네이티브로도 가능한 코드들이니 특별한 설명은 생략하겠습니다.
불필요한 depth 도 제거해줍니다.
는 아래와 같이
이벤트 바인딩은 확실한 요소만 걸어줍니다.
여러 요소에 바인딩 하는 것과 사용할 요소에만 바인딩 하는 것은 다릅니다.
는 아래와 같이
이벤트를 바인딩할 요소가 너무 많거나 동적 요소에 대해 바인딩할 때. 즉, 이벤트 바인딩 시점에는 해당 요소가 존재하지 않고 나중에 추가될 때 이벤트 위임방식(delegate)을 사용합니다.
Animation 은 setTimeout 이나 setInterval 보다는 requestAnimationFrame 을 사용합니다.
브라우저에게 2만건의 데이터를 처리하라고 하면 당연히 뻗을 것입니다.
특수한 상황에서 큰 데이터를 처리할 때는 Web Worker를 사용하시면 됩니다.