2011/01/28 11:29
Goole Tech Talks "Speed Up Your JavaScript
JavaScript Performance Issues
JavaScript Performance Issues
- Scope management
유효범위관리 - Scope Chains
유효범위 체인 - When a Function Executes
언제 함수를 실행하는가 - An execution context is created
컨텍스트가 생성되었을때 실행 - The context's scope chain is initialized with the members of the function's [[Scope]] collection
컨텍스트의 범위 체인은 함수의 [[범위]] 컬렉션의 멤버가 초기화됩니다 - An activation object is created containing all local variables
활성 개체는 모든 지역 변수를 포함해서 만들어집니다 - The activation object is pushed to the front of the context's scope chain
정품 인증 개체 컨텍스트의 범위 체인의 전면에 밀려있다 ???
- Execution Context
컨텍스트 실행 - Identifier Resolution
식별자 분해 - Start at scope chain position 0
범위 체인 위치 0부터 시작 - If not found go to position 1
만약 없을 경우 1번으로 간다. - Rinse, repeat
반복 - Scope Chain Augmentation
범위 연결 요소(확대?) - The with statement
with 상태 - The catch clause of try-catch
try-catch 절을 잡았을때 - Both add an object to the front of the scope chain
양쪽 모두 범위 체인의 전면에 개체를 추가 - Inside of Global Function
전역함수 내부 - Inside of with/catch Statement
with/catch 상태 내부 - "with statement considered harmful" -Douglas Crockford
with 상태를 해로운것으로 간주했다. - 더글라스 크록포드 - Closures
클로저 - The [[Scope]] property of closures begins with two objects
클로저의 [[범위]] 속성이 두 개체로 시작 - Calling the closure means three objects in the scope chain (minimum)
폐쇄를 호출하면 범위 체인 (최소) 세 개체를 의미 - Recommendations
추천 - Store out-of-scope variables in local variables
지역 변수에 저장 밖에서 범위 변수 - Especially global variables
특히 전역 변수 - Avoid the with statement
with 상태를 피한다. - Adds another object to the scope chain, so local function variables are now one step away
범위 체인에 다른 개체를 추가한다, 그래서 로컬 함수 변수는 이제 한 걸음 거리에 있습니다 - Use local variables instead
지역 변수를 대신 사용하라 - Be careful with try-catch
try-catch 조심하라 - The catch clause also augments the scope chain
cache 조항도 스코프 체인을 증가시키다 - Use closures sparingly
클로저를 아껴서 사용하라 - Don't forget var when declaring variables
변수를 선언시 var를 잊지 마세요 - Data access
데이터 액서스 - Places to Access Data
테이스 액서스 장소 - Literal value
리터럴 값 - Variable
변수 - Object property
개체 속성 - Array item
배열 항목 - Data Access Performance
데이터 액서스 성능 - Accessing data from a literal or a local variable is fastest
데이터 액서스는 리터럴, 로컬 변수가 가장 빠른다 - The difference between literal and local variable is negligible in most cases
리터럴과 지역 변수의 차이는 대부분의 경우 무시할 수있다 - Accessing data from an object property or array item is more expensive
개체 속성 또는 배열 항목이 데이터에 접근이 더 비싸다 - Which is more expensive depends on the browser
브라우저에 따라 더 비싼거나 달라집니다 - Recommendations
추천 - Store these in a local variable:
지역 변수 스토어: - Any object property accessed more than once
한 번 이상 액세스한 어떤 개체 속성 - Any array item accessed more than once
두 번 이상 액세스한 모든 배열 항목 - Minimize deep object property/array item lookup
깊은 개체 속성 / 배열 항목 조회 최소화 - Loops
루프 - Loops
푸트 - ECMA-262, 3rd Edition:
- for
for-in- do-while
- while
- ECMA-357, 2nd Edition:
fro each- Which loop?
어떤 루프 - It doesn't matter!
그것 중요한게 아니다 - What Does Matter?
문제가 뭔가? - Amount of work done per iteration
반복되는 일은 비용이 든다. - Includes terminal condition evaluation and incrementing/decrementing
터미널 상태 평가가 포함되며 증가/감소 - Number of iterations
반복 수 - These don't vary by loop type
이것은 루프 타입에 따라 차이 없어 - Fixing Loops
고정 루프 - Decrease amount of work per iteration
반복 당 작업의 양을 감소 - Decrease number of iterations
반복의 수를 줄이십시오 - Easy Fixes
쉽게 수정 - Eliminate object property/array item lookups
개체 속성 / 배열 항목 조회 제거 - Combine control condition and control variable change
제어 조건과 제어 변수 변경 결합 - Work avoidance!
일을 회피!
[code javascript]
var len = e.length;
var k = len;
while(k--){ process(e[k]); }
[/code] - Things to Avoid for Speed
속도 피하기 위해 상황 - ECMA-262, 3rd Edition:
- for-in
- ECMA-357, 2rd Edition:
- for each
- ECMA-262, 5th Edition:
- array.forEach()
- Function-based iteration:
- JQuery.each()
- Y.each()
- $each
- Enumerable.each()
- [code javascript]
values.forEach(function(value, index, array){
process(value)
});
[/code] - Introduces additional function
도입 부가 기능 - Function requires execution (execution context create, destroyed)
기능 실행 (실행 컨텍스트를 생성, 파괴)가 필요합니다 - Function also creates additional object in scope chain
함수는 또한 범위 체인에 추가 개체를 만듭니다 - DOM
- HTML Collection Objects
- Look like arrays, but aren't
배열처럼 보이지만 아니다 - Bracket notation
브래캣 표기법 - length property
length 속성 - Represent the results of a specific query
특정 쿼리의 결과를 나타낸다 - The query is re-run each time the object is accessed
검색어가 다시 개체에 액세스할 때마다 실행됩니다 - Include accessing length and specific items
길이와 특정 항목 액세스 포함 - Much slower than accessing the same on arrays
대부분 배열에 동일한 액세스보다 느리다 - Exceptions: Opera, Safari
예외: 오페라, 사파리
- [code javascript]
var items = [{}, {}, {}, {}, {}, {}, {}];
for (var i=0; i < items.length; i++){
}
var divs = documents.getElementByTagName("div");
for (var i=0; i < divs.length; i++){
}
[/code]
실행시간 FireFox 15x, Chrome 53x, IE 68x
[code javascript]
var items = [{}, {}, {}, {}, {}, {}, {}];
for (var i=0, len=items.length; i < len; i++){
}
var divs = documents.getElementByTagName("div");
for (var i=0, len = divs.length; i < len; i++){
}
[/code]
실행시간 FireFox =, Chrome =, IE = - HTML Collection Object
HTML 컬렉션 개체 - Minimize property access
최소화 속성 액세스 - Store length, items in local variables if used frequently
스토어 길이는 지역 변수의 항목은 자주 사용하는 경우
[code javascript]
function array(items){
try{ return Array.prototype.concat.call(items); }catch(ex){
var i = 0, len = items.length, result = Array(len); while(i < len){ result[i] = items[i]; i++; } return result;
}
}
[/code] - document.images, document.forms, etc.
- getElementsByTagName()
- getElementsByClassName()
- Reflow
리플로우
Reflow is the process by which the geometry of the layout engine's formatting objects are computed. - Chris Waterson, Mozilla
리플로우는 레이아웃 엔진의 포맷 개체의 지오메트리를 계산하는 과정입니다. - When Reflow?
언제 리플로우 하는가? - Initial page load
초기 페이지 로드 - Browser window resize
브라우즈 창 크기를 변경 - DOM nodes added or removed
DOM 노드 추가 또는 제거
[code javascript]
var list = document.getElementById("list");
for (var i=0; i < 10; i++){
var item = document.createElement("li"); list.appendChild(item); // reflow
}
[/code]
- DocumentFragment
문서조각 - A document-like object
문서 같은 개체 - Not visually represented
시각적으로 보이지 않는다 - Considered a child of the document from which it was created
어느것으로부터 만들어진 문서의 자식으로 간주 - When passed to addChild(), appends all of its children rather than itself
addChild() 을 전달하면 그 자체보다는 그 아이들이 전부를 추가합니다
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
var item = document.createElement("li"); fragment.appendChild(item); // no reflow!
}
list.appendChild(fragment); // reflow
[/code] - DocumentFragment
- Layout styles applied
레이아웃 스타일 적용
[code javascript]
element.style.height = "100px"; element.style.display = "block"; element.style.fontSize = "130%";
[/code]
[code css]
.active {
height: 100px; display: block; font-size: 130%;
}
[/code]
[code javascript]
element.className = "active";
[/code] - Layout information retrieved
레이아웃 정보를 검색 - What to do?
어떻게해야 하죠? - Minimize access to layout information
레이아웃 정보를 최소화 액세스 - If a value is used more than once, store in local variable
두 번 이상 사용하는 경우 값을 로컬 변수에 저장 - Speed Up Your DOM
DOM 속도 올려라 - Be careful using HTML Collection objects.
HTML을 컬렉션 개체를 사용에 주의하십시오. - Perform DOM manipulations off the document
문서에서 DOM 조작 수행을 하지마세요. - Change CSS classes, not CSS styles
CSS 스타일을 수정하지 말고, CSS 클래스를 변경하세요. - Be careful when accessing layout information
레이아웃 정보를 액세스 할때 조심하세요. - Browsers With Optimizing Engines
- Chrome (V8)
- Safari 4+ (Nitro)
- Firefox 3.5+ (TraceMonkey)
- Opera 10? 11? (Carakan)
All use native code generation and JIT compiling to achieve faster JavaScript execution.
모든 네이티브 코드 생성 하여 사용 및 빨리 자바 스크립트 실행을 달성하기 위해 JIT 컴파일. - Summary
개요 - Mind your scope
당신의 범위를 확인하라(조심하라) - Local variables are your friends
지역변수는 당신의 친구다 - Function execution comes at at cost
함수 실행은 비용이 든다 - Keep loops small
루프는 별거아니다 - Avoid doing work whenever possible
가능한 일을 피하라 ( 프로그램이 하는 일을 작게 만드라는 의미인가? ) - Minimize DOM interaction
DOM 관련 작업은 최소화 하라 - Use a good browser and encourage others to do the same
좋은 브라우저를 사용하고 다른 사람들이 같은 행동을 할 것을 권해드립니다 - Questions?
- 이후 영어로 된 질문은 영어가 짦아서... ㅡ.ㅡa
'IT > HTML+JS+CSS+' 카테고리의 다른 글
| Google Tech Talks "Speed Up Your JavaScript" (0) | 2011/01/28 |
|---|---|
| Building a JavaScript-Based Game Engine for the Web (0) | 2011/01/20 |
| IE "Error: 800a03e8 오류가 발생하여 작업을 완료할 수 없습니다." (0) | 2011/01/18 |
| IE html5 파싱문제 (0) | 2011/01/13 |
| CSS odd & even rules (0) | 2010/08/11 |
| 리눅스용 텍스트 브라우즈 w3m (0) | 2010/08/05 |
