Google Tech Talks "Speed Up Your JavaScript"

Goole Tech Talks "Speed Up Your JavaScript





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() 을 전달하면 그 자체보다는 그 아이들이 전부를 추가합니다
  [code javascript]
  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]
• 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