JavaScript 성능 팁

4157 단어 webdevprogrammingtipsjavascript
JavaScript는 다른 언어와 마찬가지로 특정 언어 기능을 신중하게 사용해야 합니다. 일부의 남용
기능을 사용하면 성능이 저하될 수 있지만 일부 기술을 사용하여 성능을 높일 수 있습니다.

팁 1


  • 성능이 중요한 경우 try/catch 방지
    함수

    • 일부 JavaScript *엔진(예: 현재 버전의 Node.js 및 이전 버전의 Chrome)
    Ignition+turbofan)은 *try/catch 블록을 포함하는 함수에서 옵티마이저를 실행하지 않습니다.
    성능이 중요한 코드에서 예외를 처리해야 하는 경우 경우에 따라 try/catch를 유지하는 것이 더 빠를 수 있습니다.
    별도의 기능.

    function myPerformanceCriticalFunction() {
 try {
 // do complex calculations here
 } catch (e) {
 console.log(e);
 }
}


    팁 2


  • DOM 업데이트 제한

    • 브라우저 환경에서 실행될 때 JavaScript에서 흔히 볼 수 있는 실수는 DOM을 더 자주 업데이트하는 것입니다.
    필요한.
    여기서 문제는 DOM 인터페이스의 모든 업데이트로 인해 브라우저가 화면을 다시 렌더링한다는 것입니다. 업데이트가 페이지의 요소 레이아웃을 변경하는 경우 전체 페이지 레이아웃을 다시 계산해야 합니다.
    가장 단순한 경우에도 성능이 높습니다. 페이지를 다시 그리는 프로세스를 리플로우라고 하며 브라우저가 느리게 실행되거나 심지어 응답하지 않을 수도 있습니다.

    요소를 포함하는 다음 문서를 고려하십시오.

    <!DOCTYPE html>
<html>
 <body>
 <ul id="list"></ul>
 </body>
</html>


    5000회 반복되는 5000개의 항목을 목록에 추가합니다(강력한 컴퓨터에서 더 큰 수로 시도하여
    효과를 높인다).

    var list = document.getElementById("list");
for(var i = 1; i <= 5000; i++) {
 list.innerHTML += `<li>item ${i}</li>`; // update 5000 times


    팁 3


  • 코드 벤치마킹 - 실행 측정
    시간

    • 대부분의 성능 팁은 JS 엔진의 현재 상태에 크게 의존하며 관련성만 있을 것으로 예상됩니다.
    주어진 시간에. 성능 최적화의 기본 법칙은 성능 최적화를 시도하기 전에 먼저 측정해야 한다는 것입니다.
    최적화하고 가정된 최적화 후 다시 측정합니다.
    코드 실행 시간을 측정하기 위해 다음과 같은 다양한 시간 측정 도구를 사용할 수 있습니다.

    1. Performance interface that represents timing-related performance information for the given page (only available in browsers). 


    let startTime, endTime;
function myFunction() {
 //Slow code you want to measure
}
//Get the start time
startTime = performance.now();
//Call the time-consuming function
myFunction();
//Get the end time
endTime = performance.now();
//The difference is how many milliseconds it took to call myFunction()
console.debug('Elapsed time:', (endTime - startTime));
The result in console will look something like this:
Elapsed time: 0.10000000009313226


    1. process.hrtime on Node.js gives you timing information as [seconds, nanoseconds] tuples. Called without argument it returns an arbitrary time but called with a previously returned value as argument it returns the difference between the two executions.
    2. Consoletimers console.time("labelName") starts a timer you can use to track how long an operation takes. You give each timer a unique label name, and may have up to 10,000 timers running on a given page. When you call console.timeEnd("labelName") with the same name, the browser will finish the timer for given name and output the time in milliseconds, that elapsed since the timer was started. The strings passed to time() and timeEnd() must match otherwise the timer will not finish.
    3. Date.now function Date.now() returns current Timestamp in milliseconds, which is a Number representation of time since 1 January 1970 00:00:00 UTC until now. The method now() is a static method of Date, therefore you always use it as Date.now(). 


    let t0 = Date.now(); //stores current Timestamp in milliseconds since 1 January 1970 00:00:00 UTC
let arr = []; //store empty array
for (let i = 0; i < 1000000; i++) { //1 million iterations
 arr.push(i); //push current i value
}
console.log(Date.now() - t0); //print elapsed time between stored t0 and now


    팁 4


  • 개체 속성을 null로 초기화

    • 개체를 예측 가능하게 만드는 가장 좋은 방법은 생성자에서 전체 구조를 정의하는 것입니다. 따라서 개체 생성 후 추가 속성을 추가하려는 경우 생성자에서 null로 정의하십시오. 이는 옵티마이저가 전체 수명 주기 동안 개체 동작을 예측하는 데 도움이 됩니다. 그러나 모든 컴파일러에는 서로 다른 옵티마이저가 있으며
    성능 향상은 다를 수 있지만 전반적으로 생성자에서 모든 속성을 정의하는 것이 좋습니다.
    그 가치가 아직 알려지지 않았을 때.

    오늘은 여기까지
    UIFocusGuide 사용법 - tvOS -
    나는 수학이 없을 것이라고 들었다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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