조회 수 7715 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

신박한 블로그 글 하나로 여러가지 재밌는 정보를 많이 얻었다.


http://davidwalsh.name/css-js-animation

CSS vs. JS Animation: Which is Faster? (영어)


-> 한줄 요약 : 

    CSS Animation보다 Javascript를 쓰는게 퍼포먼스 더 나음ㅋ


글의 요지는 CSS로 처리되는 애니메이션이 니들 상상만큼 그렇게 빠르지 않다고 한다. 되려 자바스크립트가 더 빠르다.

그래도 jQuery로 쓰는 animate보다는 css가 더 빠름ㅋ


근데 존나 빠른 라이브러리가 출동하면 어떨까?




2014-08-26 20;37;29.JPG

공식 홈페이지

http://julian.com/research/velocity/




벨! 로! 시! 티! .js

신통한 노릇이지만 8k밖에 안되는 이 라이브러리가 jQuery의 animate로 작성한 코드가 완벽스러울 정도로 호환되며 

브라우저에서 보여지는 애니메이션 처리가 훨씬 자연스럽고 고성능이라고 한다.


사용법은 그냥 읽어들인 다음 jQuery의 animate()를 velocity()로 고치는 간단한 짓만 해도 쓸 수 있다. 물론 이것저것 더 할 수 있는 잔기능도 +됨

(하지만 접었다 폈다 돌려먹는 3d-transform같은건 css 작성이 아니면 답이 없기 때문에 나눠 쓰셔야 됨)


이게 빠른 이유는 화면을 구성할때 requestAnimationFrame란걸 쓰고 있기 때문

프레임 단위로 타이밍을 잡아 그리기 때문에 자연스러운 움직임으로 느낄 수 있게 되며 그 외에도 효율적인 성능개선이 많다


쓰는법도 간단하고 되돌리기도 쉬우니 허세허세 헛짓에 유용함

실제로 스마트폰이나 타블렛 단말 고자스펙 안드로이드들의 안습 스펙을 생각하면 

이걸로 상당한 개선효과를 볼 수 있을 겁니다


세줄요약 :

움직이는 짓은 CSS보다 자바스크립트가 더 빠른데 jQuery는 처리가 좀 병신

Velocity.js라는 엔진이 장난아니게 효율이 좋음

jQuery말고 그냥 Velocity 합시다

Comment '1'
  • profile
    JONG 2017.04.14 23:38
    실제로는 안드로이드 브라우저 버전에도 영향을 받는 모양입니다. 고민거리로 넣어두는게 좋음.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
61 Zabbix Zabbix 아이템의 패시브와 액티브의 이해 JONG 2017.03.22 2160
60 Zabbix Zabbix 3.0에서 3.2로 업데이트하기 JONG 2016.10.03 2928
59 XpressEngine Rhymix에서 설치 화면이 나오지 않을 때 (CentOS7) 1 JONG 2016.03.25 3528
58 Zabbix CentOS7에 Zabbix 3.0.1 설치하기 JONG 2016.03.12 7453
57 Zabbix Zabbix의 각 프로세스가 하는 일 file JONG 2016.03.10 6581
56 Web 윈10에서 spartan이 localhost를 씹을때 JONG 2015.06.04 3862
» Web animate의 속도를 빠르게 해주시는 Velocity.js 소개 1 file JONG 2014.08.27 7715
54 Web jQuery를 이용한 테이블 셀병합 JONG 2013.11.01 18378
53 XpressEngine XE 1.5.4.2 BlogAPI 안되는거 수정하는 코드 2 JONG 2013.10.29 7801
52 Web Youtube 동영상 자동재생으로 퍼담기 & 파라메터 JONG 2013.03.19 11621
51 XpressEngine XE 1.5.4.2 추천 & 비추천 기능을 비회원도 사용가능하게 하기 1 file JONG 2013.03.06 10728
50 Web 문서의 앵커 이동을 Smooth하게 스크롤 해주는 jQuery의 animate함수 사용법 JONG 2012.12.26 18548
49 Web Google Maps API v3에서 기본 infowindow 정보 없애기 (poi) JONG 2012.12.26 11120
48 Web 셀렉트 태그 관련 jQuery코드 정리 1 JONG 2012.11.17 10194
47 Web 화면 최상단으로 움직이는 JS 소스 JONG 2012.10.15 10410
46 XpressEngine XE 모바일에서 유투브 동영상크기 고정하기 3 JONG 2012.09.07 10747
45 Web jQuery와 다른 라이브러리 (prototype 등) 를 함께 쓰는 방법 file JONG 2012.09.02 9713
44 Database MSSQL 스키마 비교 프로그램 Open DBDiff file JONG 2012.08.15 15148
43 XpressEngine Social XE 로그인을 모바일 레이아웃에 추가 file JONG 2012.08.15 9989
42 Web .htaccess 작성을 통한 이미지 펌 방지 file JONG 2012.05.04 13012
Board Pagination Prev 1 2 3 4 Next
/ 4