Search results for '성능'

  1. 2011.03.01 -- About jsperf.com
  2. 2010.12.12 -- 일주일간 모은 링크 #1

About jsperf.com

2011.03.01 22:42
이번엔  jsperf.com 사이트를 소개할까 합니다. 자바스크립트 코드블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이 더 성능이 좋은가 테스트하는 것입니다. 자바스크립트 언어의 특성상(다른 언어도 마찬가지지만) 하나의 기능을 구현할 수 있는 코드는 다양합니다. 어떤 코드가 더 성능이 좋은지는 프로파일러를 이용하거나 직접 시작 끝 속도를 측정해서 비교하는 방법 등등 여러가지가 있는데, jsperf.com 을 이용해 보는것도 좋은방법일것 같습니다.


jsperf의 측정방법
  1. 내부적으로 Benchmark JS 라이브러리를 이용하고 있습니다.
  2. jsperf 사이트에서는 사용자가 테스트하고자하는 코드블럭들을 특정 시간동안 수행하면서 얼마나 완료시키는지 측정하는 방법을 사용합니다. 많이 완료하면 할수록 성능이 좋은 코드라고 판단합니다.
  3. 브라우저별 테스트도 가능합니다.
    측정하고자 하는 브라우저에서 수행을 시키면 브라우저를 판별후에 측정을 시작합니다.

사용방법
  1. http://jsperf.com 사이트에 접속합니다.
    미리 다른 개발자들이 어떻게 테스트를 했는지 보려면 http://jsperf.com/browse에 접속해보세요.
  2. Your Detail 작성
    이 영역은 옵션이지만 Name 부분이 중요한것 같습니다.
    자신이 작성한 Test Case들을 RSS Feed로 받아볼때 유용합니다.
    이름을 기준으로 Feed가 생성이 됩니다.
    예를들어 이름을 jkyang으로 적었다면 http://jsperf.com/browse/jkyang.atom 의 형식이 됩니다.
    이 기능은 자신이 관심있어 하는 개발자의 Feed를 볼때도 유용합니다.
  3. Test Case Details
    Slug(가제목) 부분이 중요합니다.
    Slug 부분이 곧 자신이 작성한 Test Case 의 고유 링크가 되는데요.
    이 부분의 중복검사를 해주지는 않으니 Slug를 입력하고 하단 주소를 긁어서 접속해보시기 바랍니다. 404가 나오면 고유 링크라고 생각하시면 됩니다.
  4. Preparation Code
    Test Case를 돌리기 위한 HTML Code와 JS Library 를 입력합니다.
    자바스크립트 부분에는 Test Case를 돌리기 위한 사전코드(전역변수)를 입력합니다.
  5. Code Snippets to Compare
    비교하고자 하는 코드블럭을 입력합니다. 기본은 2개이고 계속 추가가 가능합니다.
    이때 중요한것은 코드블럭내의 루프문을 자제해야 합니다. 왜냐면 테스트 수행시에 해당코드 블럭을 반복적으로 수행하면서 측정을 하기 때문입니다.

결과 보기
 

  1. UserAgent
    해당 Test Case를 수행한 브라우저를 보여줍니다.
  2. #Test
    테스트 수행 횟수 
  3. UserAgent, #Test 부분을 제외한 가운데 영역
    Test Case 등록시에 코드블럭별로 입력한 제목입니다.
    숫자가 클수록 성능이 좋은걸로 판단하시면 됩니다.
  4. 여기서 1차 목적인 코드별 성능을 보실수 있구요. 2차적으로 브라우저별 성능도 차이가 있다는걸 발견할 수 있습니다.
  5. 자신의 Test Case를 공개하면 다른 개발자들도 자유롭게 Test Case를 수행할 수 있어서 도움을 줄수도 있고 자신은 더 많은 테스트 정보를 이용해서 성능을 증명할 수 있습니다.
    (Test Case 공개여부는 등록시에 기본적으로 체크되어 있습니다.)

Tip
  1. 자세한 사용설명이나 취지는 http://jsperf.com/faq 를 참고하세요.
  2. 관심 있는 테스트를 Feed로 보려면 http://jsperf.com/browse/author-name.atom 기능을 이용하세요.
  3. Test Case 수행시에 버튼을 Run Tests 버튼을 클릭하지 않고 바로 수행하고 싶다면 
    http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run 처럼 링크 뒤에 #run을 붙여주세요.

다른 예제들도 많지만 이해를 도우려고 쉽게 작성한 예제를 소개 드립니다.
문자열을 합치는 방법중에서 + 연산자를 사용하는 방법고 배열의 Join()함수를 이용하는 방법을 테스트해봤습니다.



jkyang HTML5_JS_CSS jsperf, 성능, 자바스크립트, 테스트

일주일간 모은 링크 #1

2010.12.12 23:30

자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다.

iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모바일 웹 개발을 할 때 살펴봐야 할 공식 가이드를 한 곳에 모아둔 곳입니다. 글에서 모아둔 가이드가 완전하지 않고 때로는 틀리는 경우도 있다고 경고하고는 있지만 모바일 웹을 만들 때 가장 먼저 살펴봐야 할 자료들이라고 생각합니다.

HTML의 Canvas와 자바스크립트를 이용하여 누드 사진을 판독하는 자바스크립트 라이브러리입니다. 서버에서 누드 사진을 판독하는 기술은 이미 오래 전에 도입된 것으로 알고 있는데 이제 HTML을 이용한 이미지에 대한 처리가 가능해지면서 이런 재미있는(?) 코드도 나오는 듯 합니다. 현재 이 코드는 IE9, FF3.6 이상, 크롬, 사파리 (아이폰/아이패드 포함), 오페라 브라우저에서 사용할 수 있습니다. <video>를 사용한 동영상에서 누드 사진(동영상이라고 해야할까요?)을 판독하는 데모도 있습니다만 제 네트워크 속도가 문제인지 정상적으로 데모를 확인할 수는 없었습니다.

크롬 웹스토어가 오픈하면서 크롬 브라우저에서 애플리케이션을 실행시킬 수 있게 되었는데요 여기에 발표된 여러 앱들이 iPad의 디자인에서 얼마나 많은 영향을 받았는지에 대한 기사입니다. 저는 아직 설치를 해보지 않았는데 기사에 있는 이미지들을 보면 iPad앱과 거의 동일한 것을 알 수 있습니다. 기사 내에서 iPadification of the web (웹의 아이패드화)이라는 표현을 썼는데요 이런 방향이라면 내년 상반기에는 국내에서도 iPad 앱과 유사한 웹을 만나게 될 가능성이 높을 것 같습니다. 물론 이렇게 된다면 HTML5와 자바스크립트의 활용도가 더 커지겠지요.



nundefined HTML5_JS_CSS canvas, Detection, guideline, IPAD, javascript, Mobile Web, Performance, Web App, 누드사진판독, 모바일웹, 성능, 성능향상, 향상