집 > 기사 > 웹 프론트엔드 > JS 성능 최적화 기술 사례 공유

JS 성능 최적화 기술 사례 공유

小云云원래의: 2018-03-13 15:58:191283검색

스크립트는 페이지 요소 코드 뒤에 배치되어야 합니다.

현재 JavaScript 코드가 내장되어 있든 외부 링크 파일에 있든 상관없이 페이지 다운로드와 렌더링은 중지하고 스크립트 실행이 완료될 때까지 기다려야 합니다. JavaScript 실행 프로세스가 길어질수록 브라우저가 사용자 입력에 응답하기 위해 기다리는 시간도 길어집니다. 스크립트를 다운로드하고 실행할 때 브라우저가 차단되는 이유는 스크립트가 페이지의 네임스페이스나 JavaScript를 변경하여 후속 페이지의 내용에 영향을 미칠 수 있기 때문입니다.

전체 조회 방지

    function search() {
        //当我要使用当前页面地址和主机域名
        alert(window.location.href + window.location.host);
    }
    //最好的方式是如下这样  先用一个简单变量保存起来
    function search() {
        var location = window.location;
        alert(location.href + location.host);
    }

유형 변환

般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" +) > String() > .toString() > new String() "

"
    var myVar = "3.14159",
    str = "" + myVar, //  to string  
    num=+myVar,       // to number
    i_int = ~ ~myVar,  //  to integer  
    f_float = 1 * myVar,  //  to float  
    b_bool = !!myVar,  /*  to boolean - any string with length 
                            and any number except 0 are true */
    array = [myVar];  //  to array
"

다중 유형 선언

JavaScript에서는 전체 스크립트의 실행 시간을 줄이기 위해 결합된 문인 단일 var 문을 사용하여 모든 변수를 선언할 수 있습니다. 위 코드 형식도 상당히 표준화되어 있어 쉽게 사용할 수 있습니다.
createElement 대신 템플릿 요소를 복제하세요

많은 사람들이 페이지 콘텐츠를 생성하기 위해 document.write를 선호합니다. 실제로 이는 덜 효율적입니다. HTML을 직접 삽입하려면 p 또는 범위를 지정하고 innerHTML을 설정하여 페이지에 HTML을 직접 작성하는 등의 컨테이너 요소를 찾을 수 있습니다. 1: 코드의 유효성을 보장할 수 없음, 2: 문자열 연산 효율이 낮으므로 document.createElement() 메서드를 사용해야 함. 문서에 이미 만들어진 템플릿 노드가 있는 경우 cloneNode() 메서드를 사용해야 함. 왜냐하면 createElement() 메소드를 사용한 후에 여러 요소의 속성을 설정하려면 cloneNode()를 사용하여 속성 설정 개수를 줄여야 하기 때문입니다. 마찬가지로 많은 요소를 생성해야 하는 경우 템플릿 노드를 먼저 준비해야 합니다.
```
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var el = document.createElement(&#39;p&#39;);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
    //替换为：
    var frag = document.createDocumentFragment();
    var pEl = document.getElementsByTagName(&#39;p&#39;)[0];
    for (var i = 0; i < 1000; i++) {
        var el = pEl.cloneNode(false);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
```

클로저 사용 시 주의하세요

클로저 사례

document.getElementById(&#39;foo&#39;).onclick = function(ev) { };

루프 시 제어 조건과 제어 변수를 결합하세요
```
for ( var x = 0; x < 10; x++ ) {};
```
이 루프에 무엇이든 추가하기 전에 JavaScript에서 수행해야 하는 몇 가지 작업이 있음을 알 수 있습니다. 1: x가 존재하는지 확인 2: x가 10보다 작은지 확인 3: x를 1만큼 늘림

Improvement
```
var x = 9;
do { } while( x-- );
```
null과의 비교를 피하세요

JavaScript는 약한 형식이므로, 자동 유형 검사를 수행하지 않으므로 null과 비교되는 코드를 발견하면 다음 기술로 대체해 보십시오.

1. 값이 참조 유형이어야 하는 경우 인스턴스of 연산자를 사용하여 생성자를 확인합니다. 2 . 값이 기본 유형이어야 하는 경우 typeof를 사용하여 해당 유형을 확인하십시오. 3. 객체에 특정 메소드 이름이 포함되도록 하려면 typeof 연산자를 사용하여 지정된 이름의 메소드가 객체에 있는지 확인하세요
객체의 소유권을 존중하세요

JavaScript는 언제든지 모든 객체를 수정할 수 있으므로 기본 동작은 예측할 수 없는 방식으로 재정의될 수 있으므로 객체, 해당 객체 또는 해당 메서드를 유지 관리할 책임이 없다면 다음을 수행해야 합니다. 특히:

1. 인스턴스 또는 프로토타입에 속성을 추가하지 마십시오. 2. 인스턴스 또는 프로토타입에 메소드를 추가하지 마십시오. 3. 기존 메소드를 재정의하지 마십시오. 4. 구현된 메소드를 반복적으로 정의하지 마십시오. 자신이 소유하지 않은 개체는 절대로 수정하지 마십시오. 개체에 대한 새 기능을 만드는 방법은 다음과 같습니다. 1. 필요한 기능이 포함된 새 개체를 만들고 이를 사용하여 관련 개체와 상호 작용합니다. 사용자 정의 유형을 생성하고 수정해야 하는 유형을 상속한 다음 사용자 정의 유형에 추가 기능을 추가합니다.

리터럴 사용

    var aTest = new Array(); //替换为
    var aTest = [];
    var aTest = new Object; //替换为
    var aTest = {};
    var reg = new RegExp(); //替换为
    var reg = /../;
    //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
    var oFruit = new O;
    oFruit.color = "red";
    oFruit.name = "apple";
    //前面的代码可用对象字面量来改写成这样：
    var oFruit = { color: "red", name: "apple" };

부정 감지 단축

    if (oTest != &#39;#ff0000&#39;) {
        //do something
    }
    if (oTest != null) {
        //do something
    }
    if (oTest != false) {
        //do something
    }
    //虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
    if (!oTest) {
        //do something
    }

Javascript 개체 릴리스

随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。对象：obj = null 对象属性：delete obj.myproperty 数组item：使用数组的splice方法释放数组中不用的item

巧用||和&&布尔运算符

    function eventHandler(e) {
        if (!e) e = window.event;
    }
    //可以替换为：
    function eventHandler(e) {
        e = e || window.event;
    }
    
    
    
    if (myobj) {
        doSomething(myobj);
    }
    //可以替换为：
    myobj && doSomething(myobj);

switch语句相对if较快
每条语句末尾须加分号

JS 성능 최적화 기술 사례 공유

관련 기사