💸원 and beyond

자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다. 브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화 같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함) reflow와 repaint에 대한 설명은 아래 글 참고 브라우저 렌더링 : reflow & repaint // 전 var width = do..

nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음 바로 활용할 수 있는 부분을만 추려서 요약한다. 코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 변수, 객체 생성 및 접근정규표현식반복문 변수, 객체 생성 및 접근 1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름 2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름 3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름 4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름 5) 문자열 생성 : var str = "test";..

렌더링 과정 1) DOM 트리 생성 2) 스타일 구조체 생성 3) 렌더 트리 생성 4) 레이아웃 처리 5) Paint 6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생 reflow 생성된 DOM 노드의 레이아웃(너비, 높이 등) 변경 시, 영향받은 모든 노드(자식, 부모 등)의 수치를 다시 계산하여 렌더 트리를 재생성하는 작업 function reflow() { document.getElementById('test').style.width = '100px'; return false; } repaint Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 작업. 수치와 상관없는 background-color, visibillty, outline 등의 스타일 변경 시에는 Reflo..

1. 기본문법1.1. 자바스크립트 특징1.1.1. 함수자바스크립트 함수는 어휘적 유효범위를 가진 일급 객체입니다. 즉, 함수는 변수에 대입되거나 인수로 넘길 수도 있고, 반환 값으로 사용하거나 연산 등에 사용하는데 전혀 제약이 없는 객체입니다.1.1.2. 느슨한 타입 체크자바스크립트 컴파일러는 타입 오류를 찾을 수 없습니다. 복잡한 클래스 계층을 구성할 필요도가 없고, 타입 캐스팅을 신경 쓰지 않아도 됩니다.1.1.3. Object Literal콜론으로 구별되는 프로퍼티 이름/값 쌍들이 다시 쉼표로 분리된 목록을 사용할 수 있습니다. Json에 기초가 되며, 필요한 요소들을 열거하는 방법으로 객체를 만들 수 있습니다.1.1.4. prototype에 의한 상속클래스 기반 언어가 아니기 때문에 모든 객체에 ..

1장 자바스크립트에 익숙해지기 __아이템 1 어떤 자바스크립트를 사용하고 있는지 알아야 한다​애플리케이션이 지원할 자바스크립트의 버전을 정하라항상 스트릭트 모드 확인을 수행하는 최신 브라우저 환경에서 스트릭트 코드를 테스트하라 __아이템 2 자바스크립트의 부동 소수점 숫자 이해하기​자바스크립트의 숫자는 double 정확도의 부동 소수점 숫자다자바스크립트의 정수는 별개의 데이터형이 아니라 double의 부분집합이다비트단위 연산자는 숫자를 32비트의 부호가 있는 integer처럼 처리한다부동 연수점 산술 연산의 정확도의 한계가 있음을 주의해야 한다 __아이템 3 암묵적인 형변환을 주의하라​데이터형 에러는 암묵적인 강제 형변환에 의해 은밀하게 감춰질 수 있다+ 연산자는 인자의 데이터형에 따라 덧셈이나 문자형 ..

1. 자료구조 / 알고리즘 모음 자바스크립트로 구현한 자료구조 - codeKINwiki.codekin.com 2. 해쉬 맵 (HashMap)www.ppomppu.co.kr[출처] [자바스크립트] 자료구조 모음|작성자 쪼쪼

FullScreen API? PPT 프리젠테이션 모드와 같은 화면으로 변경시켜주는 API임 Demo Ex) https://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/crossBrowserCentre.htmlhttps://dl.dropboxusercontent.com/u/444684/OpenWebDemos/fullscreen/slideshow.html FullScreen API 업데이트 MS IE v11 에서부터 FullScreen API가 지원이 됨 API는 FullScreen이 Fullscreen으로 소문자로 변경되고 cancelFullScreen에서 cancel이 exit으로 변경됨 Pre-spec Spec Change fullScreen..

var sidebarurl = "http://www.kara.or.kr"; // Change as required var sidebartitle = "(사)한국자동차경주협회"; // Change as required var url = this.location; var title = document.title; function bookmarksite() { if (window.sidebar && window.sidebar.addPanel){ // Firefox window.sidebar.addPanel(sidebartitle, sidebarurl,""); } else if ( document.all ) { // IE Favorite window.external.AddFavorite(url, title);..

두가지 입니다. 위 두가지 소스도 문제가 있는데 도메인을 사용하신분의경우 문제가 될수있습니다. 일단, 이경우 head 상단에 붙을경우 소스가 보여지게되는데

Click here to toggle visibility of element #foo This is foo 클릭해서 보여주고, 다시 클릭하면 숨기는게 가능한 js 출처 :: http://blog.movalog.com/a/javascript-toggle-visibility/