JS 학습 노트 12최적화 하 다.

6561 단어
유지 가능성 최적화
1. 주석 추가
주석 은 코드 의 가 독성 과 유지 가능성 을 강화 할 수 있 습 니 다. 물론 이상 적 인 상황 은 주석 이 가득 하지만 현실 적 이지 않 습 니 다.그래서 우 리 는 중요 한 부분 에 주석 을 달 아야 한다.
  • 함수 와 방법: 특히 반환 값 은 직접 알 아 볼 수 없 기 때문이다
  • 대형 코드 (기능 모듈): 설명 모듈 기능
  • 복잡 한 알고리즘: 관건 을 쓰 고 이해 하기 편리 하 다
  • 해 킹: 어떤 문 제 를 복구 하기 위해 현재 방안 이 완선 되 었 는 지, 개선 할 수 있 는 지 설명 합 니 다
    • 2. "암시" 변수 유형
    초기 값 을 통 해 암시 합 니 다. 예 를 들 어:
    var found = false;
var count = 1;
var name = '';
var student = null;

    3. 디 결합 (레이 어 링)
  • 구조 층: HTML
  • 행위 층: JS
  • 표현 층: CSS
    • 가능 한 한 '월권' 을 하지 말고, 실제 월권 을 원한 다 면 문서 나 주석 으로 설명해 야 한다.가능 한 한 긴밀 한 결합 이 나타 나 지 않도록 하 세 요. 예 를 들 어:
  • JS-HTML： 
    elem.innerHTML = '
    title
    content
    ';
//          （          ）
//elem.style.display = 'block';

  • JS-CSS： 
    elem.style.color = '#e0e0e0';
//          （   ，        ）
//elem.className = 'my_class';

  • JS-JS： 
    //    
elem.onclick = function(e){
  if(txt.value !== null && txt.value !== '' &&...){
    //DOM  
  }
}
//          （       ）
function isValid(){
  return txt.value !== null && txt.value !== '' &&...;
}
function display(){
  //DOM  
}
elem.onclick = function(e){
  if(isValid()){
    display();
  }
}

    논리 적 결합 을 피 하 는 몇 가지 원칙:
  • 이벤트 대상 을 전달 하지 말고 필요 한 데이터 만 전달
  • 트리거 사건 은 동작 을 수행 하 는 유일한 방식 이 아 닙 니 다
  • 이벤트 처리 기 는 이벤트 관련 데이터 만 처리 해 야 합 니 다 (이벤트 소스, 좌표 값 등 가 져 오기). 그리고 처 리 를 응용 논리
    • 에 전달 해 야 합 니 다.

    4. 인 코딩 원칙
  • 대상 의 소유권 을 존중 하고 다른 사람의 대상 을 함부로 수정 하지 말고 구체 적 인 요구:
  • 인 스 턴 스 / 원형 에 속성 이나 방법 을 추가 하지 마 십시오
  • 존재 하 는 방법 을 다시 쓰 지 마 세 요
    • 선택 가능 한 프로젝트:
  • 조합: 필요 한 기능 을 실현 하 는 새로운 대상 을 만 들 고 필요 한 대상 을 참조 합 니 다
  • 계승: 사용자 정의 형식 을 만 들 고 수정 해 야 할 유형 을 계승 한 다음 에 추가 기능 을 추가 합 니 다
  • 네 임 스페이스 로 전역 변 수 를 피한다. 예 를 들 어:
    var mySystem = {};
mySystem.mod1 = {...};

  • 상수 로 유지 가능성 을 높 인 다. 예 를 들 어:
    var Consts = {};
Consts.IMG_PATH = '../imgs/';

    메모: 상수 에는 자주 사용 되 는 CSS 클래스 이름과 유지 보수 에 영향 을 줄 수 있 는 모든 값
    • 이 포함 되 어 있 습 니 다.
    성능 최적화
    1. 긴 역할 도 메 인 체인 찾기 피하 기
    여러 번 인용 해 야 할 전역 변 수 를 국부 변수 로 저장 합 니 다.
    2. 되도록 with 문 구 를 사용 하지 마 세 요.
    with 문 구 는 역할 영역 을 연장 하고 긴 역할 영역 에서 찾 는 비용 이 존재 합 니 다. 다른 부분 변 수 를 저장 하여 대체 할 수 있 습 니 다 (with 가 편리 하지 않 지만 다소 좋 습 니 다)
    3. 불필요 한 속성 찾기 피하 기
  • 중복 사용 하 는 값 을 국부 변수 로 저장 합 니 다. 예 를 들 어:
    //        （6     ）
var qs = window.location.href.substring(window.location.href.indexOf('?'));
//        （4 ，       ）
var url = window.location.href;
var qs = url.substring(url.indexOf('?'));

  • 순환 최적화
  • 감가 교체 가 빠르다 (i –)
  • 종료 조건 을 간소화 하고 매번 순환 할 때마다 종료 조건 을 검사 하 며 조건 을 간소화 하면 효율 을 높 일 수 있다
  • 순환 체 를 간소화 하고 순환 체 안의 계 산 량
    • 을 최대한 줄인다.
  • 사용 후 테스트 순환 (do... while), 첫 번 째 순환 전의 판단 을 피 할 수 있 습 니 다
  • 순환 을 전개 합 니 다. 순환 횟수 가 확정 되면 순환 을 사용 하지 않 는 것 이 좋 습 니 다. 순환 에 순환 을 만 들 고 종료 조건 을 처리 하 는 추가 비용 이 존재 하기 때 문 입 니 다. 예 를 들 어:
    for(i = 0;i < 2;i++){
  process(arr[i]);
}
//        
process(arr[0]);
process(arr[1]);
process(arr[2]);

    순환 횟수 가 확정 되 지 않 으 면 Duff 기술 (Tom Duff 가 발명 한) 로 일부 순환 을 전개 하여 효율 을 높 일 수 있다. 예 를 들 어:
    //credit: Jeff Greenberg for JS implementation of Duff’s Device
//   values.length > 0
var iterations = Math.ceil(values.length / 8);
var startAt = values.length % 8;
var i = 0;
do {
    switch(startAt){
        case 0: process(values[i++]);
        case 7: process(values[i++]);
        case 6: process(values[i++]);
        case 5: process(values[i++]);
        case 4: process(values[i++]);
        case 3: process(values[i++]);
        case 2: process(values[i++]);
        case 1: process(values[i++]);
    }
    startAt = 0;
} while (--iterations > 0);
//      ：http://www.cnblogs.com/kylindai/archive/2013/12/04/3458476.html

    혹은 더 빠 른 Duff 방법:
    //credit: Speed Up Your Site (New Riders, 2003)
var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var i = 0;
if (leftover > 0){
    do {
        process(values[i++]);
    } while (--leftover > 0);
}
do {
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
    process(values[i++]);
} while (--iterations > 0);
//      ：http://www.cnblogs.com/kylindai/archive/2013/12/04/3458476.html

  • 이중 해석 을 피 하 는 것 은 js 로 js 를 해석 하 는 것 을 말한다.구체 적 으로 eval () 함수 나 new Function (strCode) 또는 setTimeout (strCode) 을 이중 으로 해석 하 는 단점: 해석 기 를 하나 더 시작 해 야 합 니 다. 비용 이 많이 들 고 직접 해석 하 는 것 보다 훨씬 느 립 니 다
    • .
  • 원생 방법 이 빠 르 고 원생 방법 은 C / C + + 로 컴 파일 된 모듈 이기 때문에 훨씬 빠르다
  • switch 가 if - else 보다 빠 른 이 유 는 말 하기 어렵 습 니 다. CSDN
    • 을 참고 하 시기 바 랍 니 다.
  • 비트 연산 은 다른 언어 에서 수학 연산 을 비트 연산 으로 간략화 하면 계산 속 도 를 높 일 수 있 지만 js 에 서 는 이런 말 이 없다. js 내부 에 하나의 수치 유형 (double) 만 있 기 때문에 비트 연산 을 하려 면 더 블 – int – 비트 연산 – double, 성능 을 상상 할 수 있다
    • .
  • 문장 수량 감소
  • var 1 개 로 여러 변 수 를 설명 합 니 다
  • 교체 값 을 삽입 하고 arr [i + +] 한 문 구 를 해결 합 니 다. i + + 를 한 문장 으로 독립 하지 않 아 도 됩 니 다
  • 배열 / 대상 글자 의 양 으로 코드 줄 수가 현저히 줄 어 들 었 다
  • DOM 최적화
  • 현장 업 데 이 트 를 줄 이 고 DocumentFragment 로 최적화
  • innerHTML 로 DOM 노드 를 만 드 는 것 이 노드 를 만 드 는 것 보다 빨리 조립 되 지만 JS - HTML 결합 문제 가 존재 하여 신 중 히 고려 합 니 다
  • 사건 의뢰
  • 실시 간 으로 업 데 이 트 된 집합 (NodeList, NamedNodeMap, HTML Collection) 에 주의 하 십시오. 인용 을 국부 변수 로 저장 하 는 것 외 에 그 속성 에 접근 하 는 것 도 다시 조회 해 야 합 니 다. 예 를 들 어 var imgs = document. images;imgs. length 방문 도 한 번 더 확인 해 야 합 니 다

    • 발표 최적화
  • 검증 도구 (예 를 들 어 JSlint) 로 코드 를 검사 한 결과 문법 오류 이외 의 잠재 적 인 문제 발견
  • 주석 제거 (안전성 고려)
  • js 파일 을 통합 하여 외부 파일 수 를 최소 화 합 니 다
  • 압축 코드 (예 를 들 어 YUI 압축기) 는 코드 자체 의 크기 를 줄 이 고 코드 를 동시에 혼동 하여 안전성 을 높 일 수 있 으 나 코드 자 체 를 혼동 하 는 데 위험 이 있어 오류 가 발생 할 수 있다
  • 서버 압축 기능 을 엽 니 다. 예 를 들 어 gzip 모듈
    • Codeforces Round #160 (Div. 2)---A. Roma and Lucky Numbers
    자바스크립트에서 바둑 배우기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage