집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 실행 효율성에 대한 간략한 소개

JavaScript 실행 효율성에 대한 간략한 소개

黄舟원래의: 2017-03-15 17:25:511528검색

Javascript는 매우 유연한 언어입니다. 다양한 스타일의 코드는 필연적으로 실행 효율성의 차이로 이어지며 개발 프로세스도 분산됩니다. 코드 성능을 향상시키는 다양한 방법, 일반적이고 피하기 쉬운 문제를 정리

Javascript 자체의 실행 효율성

Javascript의 범위 체인,클로저, 프로토타입 상속, 평가 등은 다양한 마법 기능을 제공하는 동시에 다양한 효율성 문제를 야기하므로 실행 효율성이 저하됩니다.

1. 전역 가져오기

전역

변수(창, 문서, 사용자 정의 전역 변수 등)를 사용합니다. JavaScript 범위 체인은 로컬 범위의 전역 변수에 액세스하려면 최상위 범위까지 전체 범위 체인을 계층별로 순회해야 한다는 것을 알고 있습니다. 반면 지역 변수의 액세스 효율성은 더 빠르고 높아집니다. 따라서 일부 전역 객체 은 로컬 범위에서 자주 사용되며 다음과 같이 로컬 범위로 가져올 수 있습니다.

  //1、作为参数传入模块
  (function(window,$){
      var xxx = window.xxx;
      $("#xxx1").xxx();
      $("#xxx2").xxx();
  })(window,jQuery);

  //2、暂存到局部变量
  function(){
     var doc = document;
     var global = window.global;
 }

2, eval 및 eval과 유사한 문제

우리 모두는 eval이 가능하다는 것을 알고 있습니다.

문자열 을 js 코드로 처리합니다. eval을 사용하여 실행한 코드는 eval을 사용하지 않은 코드보다 100배 이상 느리다고 합니다. (구체적인 효율성은 테스트하지 않았으며 관심 있는 학생들은 테스트해 볼 수 있습니다.)

JavaScript 코드는 실행 전에 유사한 "사전 컴파일" 작업을 수행합니다. 먼저 현재 실행 환경에서 활성 개체가 생성되고 var로 선언된 해당 변수가 활성
속성 객체의 🎜>이지만 현재 이러한 변수에 대한 할당은 모두 정의되지 않았으며 function으로 정의된 함수도 활성 객체의 속성으로 추가되며 해당 값은 정확히 함수 정의입니다. . 그러나 "eval"을 사용하면 "eval"(실제로는 문자열)의 코드가 해당 컨텍스트를 미리 인식할 수 없고 사전에 구문 분석 및 최적화할 수 없습니다. 즉, 미리 컴파일된 작업을 수행할 수 없습니다. 따라서 성능도 크게 저하됩니다
사실 지금은 eval을 거의 사용하지 않는 사람들이 많습니다. 제가 여기서 이야기하고 싶은 것은 eval과 유사한 두 가지 시나리오(

. 3)입니다. .클로저 종료 후 더 이상 참조되지 않는 변수를 해제하세요 new Function{}

setTimtout("alert(1)",1000);

setInterver("alert(1)",1000);

(new Function("alert(1)"))();

setTimeout 위 코드에서 변수 f의 반환 값은 즉시 실행되는 함수로 구성된 클로저에서 반환되는 메소드 res입니다. 이 클로저의 모든 변수(a, b, c 등)에 대한 참조이므로 이 두 변수는 항상 메모리 공간에 상주합니다. 특히 DOM 요소에 대한 참조는 많은 메모리를 소비하며 우리는 res에 있습니다. a 변수의 값만 사용하므로 클로저가 반환되기 전에 다른 변수를 해제할 수 있습니다setInterver

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    var res = function(){
        alert(a.name);
    }
    return res;
})()

Js 운영 돔의 효율성

웹 개발 과정에서 , 프론트 엔드 실행 효율성의 병목 현상은

dom 작업

에서 자주 발생합니다. DOM 작업은 성능을 많이 소모하는 작업입니다. DOM 작업 중에 성능을 최대한 절약할 수 있는 방법은 무엇입니까?

1. 리플로우를 줄인다

리플로우란?

DOM 요소의 속성(예: 색상)이 변경되면 브라우저는 해당 요소를 다시 그리도록 렌더링에 알립니다. 이 프로세스를 다시 그리기라고 합니다. 변경 사항에 요소 레이아웃(예:

너비

)이 포함된 경우 브라우저는 원래 속성을 삭제하고 결과를 다시 계산하여 렌더링하여 페이지 요소를 다시 그립니다. 이 프로세스를 리플로우라고 합니다.

요소의
디스플레이
를 "로 설정합니다. none" 및 완료 수정 후 표시를 원래 값으로 변경
여러 스타일 속성을 수정할 때 스타일 속성을 여러 번 수정하는 대신 클래스 클래스를 정의합니다(

for

특정 학생에게 권장됨)

페이지에 많은 수의 요소를 추가하는 경우 documentFragment

예를 들어

var f = (function(){
    var a = {name:"var3"};
    var b = ["var1","var2"];
    var c = document.getElementByTagName("li");
    //****其它变量
    //***一些运算
    //闭包返回前释放掉不再使用的变量
    b = c = null;
    var res = function(){
        alert(a.name);
        }
    return res;
})()

위 코드는 dom을 여러 번 조작하므로 상대적으로 비효율적입니다. 다음 형식으로 documentFragment를 생성할 수 있으며 documentFragment에 모든 요소를 추가해도 dom 구조는 변경되지 않으며 최종적으로 페이지에 추가됩니다. , 단 한 번의 리플로우

var frag = document.createDocumentFragment();
for(var i=0;i<100:i++){
        var child = docuemnt.createElement("li");
        child.innerHtml = "child";
    frag.appendChild(child);
}
document.getElementById("parent").appendChild(frag);

2、暂存dom状态信息

当代码中需要多次访问元素的状态信息，在状态不变的情况下我们可以将其暂存到变量中，这样可以避免多次访问dom带来内存的开销，典型的例子就是：

var lis = document.getElementByTagName("li");
for(var i=1;i<lis.length;i++){
    //***
}
上述方式会在每一次循环都去访问dom元素，我们可以简单将代码优化如下
var lis = document.getElementByTagName("li");
for(var i=1,j=lis.length ;i<j;i++){
    //***
}

3、缩小选择器的查找范围

查找dom元素时尽量避免大面积遍历页面元素，尽量使用精准选择器，或者指定上下文以缩小查找范围，以jquery为例

少用模糊匹配的选择器：例如$("[name*='_fix']")，多用诸如id以及逐步缩小范围的复合选择器$("li.active")等
指定上下文：例如$("#parent .class")，$(".class",$el)等

4、使用事件委托

使用场景：一个有大量记录的列表，每条记录都需要绑定点击事件，在鼠标点击后实现某些功能，我们通常的做法是给每条记录都绑定监听事件，这种做法会导致页面会有大量的事件监听器，效率比较低下。

基本原理：我们都知道dom规范中事件是会冒泡的，也就是说在不主动阻止事件冒泡的情况下任何一个元素的事件都会按照dom树的结构逐级冒泡至顶端。而event对象中也提供了event.target（IE下是srcElement）指向事件源，因此我们即使在父级元素上监听该事件也可以找到触发该事件的最原始的元素，这就是委托的基本原理。废话不多说，上示例

$("ul li").bind("click",function(){
    alert($(this).attr("data"));
})

上述写法其实是给所有的li元素都绑定了click事件来监听鼠标点击每一个元素的事件，这样页面上会有大量的事件监听器。

根据上面介绍的监听事件的原理我们来改写一下

$("ul").bind("click",function(e){
    if(e.target.nodeName.toLowerCase() ==="li"){
        alert($(e.target).attr("data"));
    }
})

这样一来，我们就可以只添加一个事件监听器去捕获所有li上触发的事件，并做出相应的操作。

当然，我们不必每次都做事件源的判断工作，可以将其抽象一下交给工具类来完成。jquery中的delegate()方法就实现了该功能

语法是这样的$(selector).delegate(childSelector,event,data,function)，例如：

$("p").delegate("button","click",function(){
  $("p").slideToggle();
});

参数说明（引自w3school）

参数	描述
childSelector	必需。规定要附加事件处理程序的一个或多个子元素。
event	必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。

Tips:事件委托还有一个好处就是，即使在事件绑定之后动态添加的元素上触发的事件同样可以监听到哦，这样就不用在每次动态加入元素到页面后都为其绑定事件了

위 내용은 JavaScript 실행 효율성에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 효율성을 향상시키는 7가지 디버깅 도구에 대한 자세한 소개다음 기사：JavaScript 효율성을 향상시키는 7가지 디버깅 도구에 대한 자세한 소개