개발자로서 우리는 항상 코드를 더 빠르고 더 좋게 할 방법을 생각한다.
그러나 그 전에 고성능 코드를 작성하는 데는 세 가지가 필요하다.

이 언어와 그 작업 원리 이해

용례

을 바탕으로 한 디자인

디버깅!수리하다되풀이

이 점을 기억하고,

Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler

JavaScript 코드를 더 빠르게 실행하는 방법을 살펴보겠습니다.

게으르다

A lazy algorithm defers computation until it is necessary to execute and then produces a result.

const someFn = () => {
    doSomeOperation();
    return () => { 
      doExpensiveOperation();
    };
}


const t = someArray
             .filter(x => checkSomeCondition(x))
             .map(x => someFn(x)); 

// Now execute the expensive operation only when needed.
t.map(x => t());

TL;DR; The fastest code is the code that is not executed. So try to defer execution as much as possible.

객체 링크 주의

JavaScript는 prototype inheritance을 사용합니다.JavaScript 세계의 모든 객체는 Object의 인스턴스입니다.
MDN은 다음과 같이 말합니다.

When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.

각 속성에 대해 JavaScript 엔진은 일치하는 항목을 찾을 때까지 전체 개체 체인을 반복해야 합니다.이것은 대량의 자원을 필요로 하는데, 만약 잘못 사용하면 응용 프로그램의 성능에 영향을 줄 수 있다.
그러니까 그러지 마세요.

const name = userResponse.data.user.firstname + userResponse.data.user.lastname;

이렇게 하는 거예요.

const user = userResponse.data.user;
const name = user.firstname + user.lastname;

TL;DR; Use temporary variable to hold the chained properties. Rather than repeatedly going through the chain.

Transpiler를 사용하기 전에 먼저 고려해야 합니다.

상기 상황에서 userResponse은 data의 대상이 없을 수도 있다.data 객체에는 user 속성이 있거나 없거나 있을 수 있습니다.
우리는 이런 값을 받았을 때 검사를 진행할 수 있다

let name = '';
if (userResponse) {
    const data = userResponse.data;
    if (data && data.user) {
        const user = data.user;
        if (user.firstname) {
             name += user.firstname;
        }
        if (user.lastname) {
             name += user.firstname;
        }
    }
}

좋아, 그건 너무 지루해.코드가 많을수록 오류가 많아진다.우리가 그것을 줄일 수 있습니까?물론 자바스크립트는 Optional chaining, destructuring assignment으로 내용의 지루함을 줄인다.

const user = userResponse?.data?.user;
const {firstname = '', lastname = ''} = user;
const name = firstname + lastname;

이거 미끄럽지 않아요?현대적그러나 이런 물건을 사용할 때 조심해야 한다. 바벨은 다음과 같이 전송한다.

"use strict";

var _userResponse, _userResponse$data;

var user = (_userResponse = userResponse) === null || _userResponse === void 0 ? void 0 : (_userResponse$data = _userResponse.data) === null || _userResponse$data === void 0 ? void 0 : _userResponse$data.user;
var _user$firstname = user.firstname,
    firstname = _user$firstname === void 0 ? '' : _user$firstname,
    _user$lastname = user.lastname,
    lastname = _user$lastname === void 0 ? '' : _user$lastname;
var name = firstname + lastname;

TL;DR; When using transpiling, make sure you choose the one that is more optimal for your use case.

SMI 및 스택 수 이해

숫자가 이상하다.ECMAScript는 숫자를 64비트 부동 소수점 값으로 표준화하여 double precision floating-point 또는 Float64이라고 합니다.
만약 자바스크립트 엔진이 숫자를 Float64 표시에 저장한다면 커다란 성능 저하를 초래할 것이다.JavaScript 엔진은 Float64와 완벽하게 일치하도록 숫자를 추상화합니다.float64 작업에 비해 JavaScript 엔진은 정수 작업을 훨씬 빨리 수행합니다.
자세한 내용은 this을 참조하십시오.

TL;DR; Use SMI (small integers) wherever possible.

국부 변수 평가

때때로 사람들은 이런 값을 제공하는 것이 읽을 만하다고 생각한다.

const maxWidth = '1000';
const minWidth = '100';
const margin = '10';
getWidth = () => ({
    maxWidth: maxWidth - (margin * 2),
    minWidth: minWidth - (margin * 2),
});

getWidth 함수가 여러 번 호출되면 호출할 때마다 이 값을 계산합니다.위의 계산은 큰 문제가 아니기 때문에 당신은 어떠한 성능의 영향도 주의하지 않을 것입니다.
그러나 일반적으로 운행 시 평가가 적을수록 성능이 좋다.

// maxWidth - (margin * 2)
const maxWidth = '980';
// minWidth - (margin * 2)
const minWidth = '80';
const margin = '10';
getWidth = () => ({
    maxWidth,
    minWidth
});

lesser the evaluation (at runtime) better the performance.

전환/기타 조건 대신 매핑 사용

여러 조건을 확인하려면 Map 대신 switch/if-else 조건을 사용하십시오.map에서 원소를 찾는 성능은 평가 switch과 if-else보다 훨씬 빠르다.

switch (day) {
    case 'monday' : return 'workday';
    case 'tuesday' : return 'workday';
    case 'wednesday' : return 'workday';
    case 'thursday' : return 'workday';
    case 'friday' : return 'workday';
    case 'saturday' : return 'funday';
    case 'sunday' : return 'funday';
}

// or this

if (day === 'monday' || day === 'tuesday' || day === 'wednesday' || day === 'thursday' || day === 'friday') return 'workday';
else return 'funday';

둘 다 이걸 쓰는 게 아니라,

const m = new Map([
    ['monday','workday'],
    ['tuesday', 'workday'],
    ['wednesday', 'workday'],
    ['thursday', 'workday'],
    ['friday', 'workday'],
    ['saturday', 'funday'],
    ['sunday', 'funday']
];

return m.get(day);

TL; DR; Use Map instead of switch / if-else conditions

추가 주문 시

예를 들어, React 구성 요소를 작성하고 있다면, 이 모드를 따르는 것은 흔한 일입니다.

export default function UserList(props) {
    const {users} = props;

    if (users.length) {
        // some resource intensive operation.
        return <UserList />;
    }

    return <EmptyUserList />;
}

여기에서 사용자가 없을 때 <EmptyUserList /> 또는 <UserList />을 렌더링합니다.나는 어떤 사람이 우리가 먼저 모든 소극적인 상황을 처리한 후에 적극적인 상황을 처리해야 한다고 논쟁하는 것을 보았다.그들은 그것을 읽은 모든 사람에게 더 명확하고 효율도 높다는 논점을 자주 제기한다.즉, 아래의 코드가 앞의 코드보다 더 효과적이라는 것이다.

export default function UserList(props) {
    const {users} = props;

    if (!users.length) {
       return <EmptyUserList />;
    }

    // some resource intensive operation
    return <UserList />;
}

하지만 users.length이 항상 옳다면?우선 이 조건을 사용한 다음에 부정적인 조건을 사용한다.

TL;DR; While designing if-else condition, order them in such a way that the number of conditions evaluated is lesser.

단 사필😷
@ 단사필

당신은 어떤 것을 더 좋아합니까? if(x) {return "yes"}else {return "no"}orif(x) {return "yes"}return "no"
13:2020년 4월 22일 오후 27시
삼.
53

타입은 제일 친한 친구예요.

JavaScript는 해석 언어이자 컴파일 언어입니다.컴파일러는 더 효율적인 바이너리 파일을 만들기 위해 유형 정보를 필요로 한다.그러나 동적 유형 언어로서 컴파일러는 이 점을 하기 어렵다.
열 코드 (여러 번 실행된 코드) 를 컴파일할 때, 컴파일러는 약간의 가설을 하고 코드를 최적화할 것이다.컴파일러는 이 최적화 코드를 만드는 데 시간이 좀 걸릴 것이다.이러한 가설이 실패했을 때, 컴파일러는 최적화된 코드를 버리고 해석된 실행 방식으로 되돌아가야 한다.이것은 시간도 소모되고 값도 비싸다.

TL;DR; Use Monomorphic types always.

기타

귀속을 피하고, 그것들이 훌륭하고, 가독성이 더욱 강하다는 것을 확보해라.하지만 성능에도 영향을 미친다.
가능한 한 기억을 사용하다.
때때로 bitwise과 일원 연산자는 성능상 약간 우세하다.하지만 실적 예산이 빡빡할 때 정말 유용하다.
토론//💻 GitHub//✍️ Blog
만약 당신이 이 문장을 좋아한다면, 좋아하거나 평론을 남겨 주세요.❤️