이미 발표자료나 공유된 자료가 많긴 하지만 내가 알고 이해할려면 정리를 해봐야할거 같다.
1. 하드웨어 가속기 사용(css translate)
- css translate는 정말 마술같다고 할 수 있다. 안드로이드, ios 웹뷰에서 테스트 결과 정말 다르다.
- animation효과나 많은 양의 리스트에서 스크롤시 효과를 제대로 볼 수 있다.(쓰기 전과 쓰고 난 후는 Real)
- 하지만 밧데리 사용량이 늘어난다고 한다 ㅠㅠ 적당히 써야한다.
2. 이미지 사용의 최소화
- 디자이너와의 협의를 통하여 이미지 사용을 최소화하고 font-awesome에 있는 아이콘들로 대체하였다.
- 이미지를 썼을 때와 font를 쓰는 것은 네트워크가 느릴때 확연히 차이를 느낄 수 있다.
3. tag depth 최소화
- 의미있는 마크업을 고려했지만 리스트 같은 경우 table,ul,ol태그 등과 같이 뎁스를 늘리는 코딩은 지양
4. a태그 href="#none" 사용시 router의 hash(#) URL의 문제 발생으로 href="javascript:void(0);"로 대체
5. img태그 사용시 리스트 스크롤 시 버벅이는 문제 발생으로 인해 background사용으로 대체
- lazyloading 보다 background이미지를 쓰는게 훨씬 낫다.
6. loading 이미지 등 font로 표현하기 어려운 이미지는 svg로 대체
7. sass 사용
- mixin 공통화, compass등을 통한 css 코딩 속도 향상
8. namespace 및 기능 모듈화
9. promise방식을 이용한 함수 지옥 탈출
10. template파일 관리 데이터를 붙이는 부분과 아닌 부분 혹은 데이터를 붙이는 url에 따라 template을 나누었다.
11. 폴더 구조 정립
12. svn을 통한 형상관리
13. sass, jsx파일 컴파일 하기 전 dev폴더와 컴파일 후 release폴더로 구분
14. 구글지도 관련 크기에 맞춰 마커 이미지 삽입
15. 슬라이드 관련 plugin은 slick.js를 썼다.
- angular version, reactjs version등 jQuery 버전부터 다양한 버전을 지원하고 있다.(결국 업데이트가 잘되고 있단 얘기)
16. webview에서 클릭시 click이벤트를 걸면 android나 ios에서 한박자 느리다거나 하는 문제가 있어 tap이벤트로 교체
참고 :
- 개인적으로 will-change사용은 모바일에서 아직 지원하는 브라우져가 있지 않아서 주저하게 된다.
- 깊게 들어가지 않고 속도 향상을 할 수 있는 방안에 대해서 이해하기 쉽게 해놓았다.
3. google map jQuery version - google map : 맵이 잡아먹는 메모리 용량이 제일 크다. 맵이 있는 곳에서 ios webview 메모리 문제가 발생한다면 구글맵을 어디선가 중복 호출 될 가능성이 크다.
* 향후 js 스타일 가이드는 airbnb의 스타일 가이드를 참고하려고한다.
최근 덧글