JavaScript 지식 포인트 요약:performance_javascript 기술을 향상하는 방법

JavaScript의 성능 문제는 과소평가할 수 없습니다. 따라서 개발자는 JavaScript 프로그램을 작성할 때 몇 가지 세부 사항에 더 많은 주의를 기울여야 합니다. 이 기사에서는 JavaScript 성능 최적화에 대한 지식 포인트를 매우 자세하게 소개하며 이는 확실히 유용한 정보입니다.

먼저 javascript의 기본 구문을 통합하겠습니다.

자바스크립트 기본 구문

var 키워드를 사용하여 변수를 정의하세요

구문: var 변수 이름=변수 값

식별자: ① 문자, 숫자, 밑줄로 구성됩니다. 숫자로 시작할 수 없습니다. 대소문자를 엄격하게 구분합니다.

데이터 유형:

숫자 유형: 숫자

문자열: 문자열

부울 유형: 부울

특수 데이터 유형: 정의되지 않음 비어 있음 정의되지 않음

Null 값: null

참조형 객체 함수

매개변수의 데이터 유형 감지: typeof()는 데이터 유형에 해당하는 문자열을 반환합니다

등호 2개 == 및 등호 3개 ===

==: 비교값은 데이터 유형에 관계없이 동일합니다

===: 합동 비교는 숫자 값과 데이터 유형 모두와 관련이 있습니다

Boolean 환경: if를 만나면 자동으로 Boolean 값으로 변환

문자열 string의 부울 환경: 비어 있으면 false, 비어 있지 않으면 true

숫자의 불리언 환경: 0은 거짓, 0이 아닌 것은 참

숫자와 문자열의 관계

①.접합작업을 수행합니다

②. 연산을 수행해야 하는 경우 문자열을 숫자 값으로 변환해야 합니다

변환방법 1, 문자열*1을 숫자형으로

변환방법 2: 숫자(문자열)를 숫자형으로 변환

1: js 파일 로딩 위치

HTML 파일에서는 93f0f5c25f18dab9d176bd4f6de5d30e 영역에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 추가할 수 있습니다. JavaScript 실행 및 UI 렌더링의 단일 스레드 이유를 고려하여 js 파일이 로드되면 페이지는 js 파일이 완전히 로드되어 실행될 때까지 기다렸다가 계속 수행합니다. 작업. 그런 다음 문제가 발생합니다. 페이지가 비어 있거나 멈춰 있을 수 있습니다. 프론트엔드 개발자로서 요구사항을 실현하는 것뿐만 아니라 고품질의 사용자 경험을 제공하는 것도 중요합니다. 그렇다면 이 문제를 해결하기 위해 제가 생각한 두 가지 해결책은 다음과 같습니다.

1. 페이지가 렌더링되기 전에 js 파일을 로드하고 컴파일해야 한다는 특별한 요구 사항이 없으면 js 파일을 36cc49f0c466276486e50c850b7e4956 콘텐츠가 페이지에 표시됨) CSS 파일은 여전히 ​​93f0f5c25f18dab9d176bd4f6de5d30e 영역에 배치됩니다(아무도 지저분한 레이아웃이 있는 페이지를 보고 싶어하지 않습니다). 이렇게 하면 사용자는 빈 페이지 대신 레이아웃 페이지를 볼 수 있습니다. 그러면 일부 사람들은 다음과 같이 지적할 것입니다. 데이터는 js 요청을 통해 로드되어야 합니다. 데이터 로딩을 정렬할 수 있으며, 긴급하게 필요한 인터페이스는 먼저 실행하고, 필요하지 않은 인터페이스는 동시에 간단한 로딩 애니메이션이나 프롬프트를 만들 수 있습니다.

2. 이러한 js 파일이 페이지 콘텐츠를 더 잘 표시하기 위해 먼저 실행되어야 한다고 지정하는 경우 첫 번째 js 또는 페이지에 흥미롭거나 귀여운 애니메이션 장면을 추가할 수 있습니다. 이는 또한 사용자를 기다리는 지루함을 더 잘 피할 수 있으며, 아마도 사용자는 로딩 애니메이션에 더 관심을 갖게 되어 프로젝트의 사용자 경험을 향상시킬 수 있습니다.

최종 권장사항: 사용자 경험을 향상하려면 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 36cc49f0c466276486e50c850b7e4956 태그 앞에 배치하세요.

2: js 파일 병합

많은 팀 개발에서는 개발 과정에서 모두가 공동으로 코드를 작성하는 것이 더 편리하도록 다양한 기능을 가진 코드 블록을 다양한 js 파일에 배치할 수 있습니다. 결국 해당 폴더만 찾으면 됩니다. 또는 파일. 긴 파일에서 메소드를 찾고 있지 않습니다. 이는 실제로 팀 개발 효율성을 향상시키고 새로운 사람들이 합류한 후 2차 개발 및 유지 관리를 더 쉽게 수행할 수 있게 해줍니다. 그렇다면 이 문제를 페이지 성능에 적용하는 것은 어떨까요? 이것이 바로 책에 명시된 문제입니다. 각 HTTP 요청은 추가적인 성능 오버헤드를 가져오므로 단일 100KB 파일을 다운로드하는 것이 4개의 25KB 파일을 다운로드하는 것보다 빠릅니다.

100KB 파일 1개를 다운로드하는 것이 25KB 파일 4개를 다운로드하는 것보다 빠르며, 개발 과정에서 각 파일을 구분하는 데 큰 이점이 있으므로 병합 문제는 개발이 완료된 후에 처리될 것으로 믿습니다. 지금은 프론트엔드 도구가 너무 많으니 익숙한 압축을 사용하세요~

여기서는 지연 로딩 및 비동기 로딩을 위해 파일을 로딩할 때 defer 및 async 속성을 사용할 수도 있다는 점을 간략하게 언급하고 싶습니다. 최신 브라우저에서는 대부분 이미 defer 속성을 지원하고 있는데 저는 이 속성을 사용하는 데 익숙하지 않습니다. 아직은 특별한 문제가 있을지는 모르겠습니다. 관심 있는 친구들은 이 지식 포인트를 스스로 구글에 검색해 볼 수 있는데 여기서는 간단히 언급하겠습니다.

현재 대부분의 프레임워크는 지연 로딩과 주문형 로딩도 지원합니다.

세 번째: 더 빠른 데이터 액세스

브라우저의 경우 식별자 위치가 깊을수록 읽고 쓰는 속도가 느려집니다(프로토타입 체인의 경우에도 마찬가지). 이해하기 어렵지 않을 겁니다. 간단한 비유는 다음과 같습니다. 식료품점이 집에서 멀수록 간장을 만드는 데 시간이 더 걸립니다... 장난꾸러기야, 간장을 만드는 데 시간이 너무 오래 걸리면 야채가 불타버릴거야 -.-~

현재 함수 내에서 변수 값을 여러 번 사용해야 하는 경우 먼저 로컬 변수를 사용하여 저장할 수 있습니다.

//修改前
function showLi(){
var i = 0;
for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document
console.log(i,document.getElementsByTagName("li")[i]); //三次访问document
};
};
//修改后
function showLi(){
var li_s = document.getElementsByTagName("li"); //一次访问document
var i = 0;
for(;i<li_s.length;i++){
console.log(i,li_s[i]); //三次访问局部变量li_s
};
}; 

4: DOM 작업 최적화

우리 모두 알고 있듯이 DOM 작업은 JavaScript 실행보다 훨씬 더 많은 성능을 소비합니다. DOM 작업을 피할 수는 없지만 이 작업의 성능 소비를 최대한 줄이려고 노력할 수 있습니다.

코드를 통해 설명해 보겠습니다.

function innerLi_s(){
var i = 0;
for(;i<20;i++){
document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
};
}; 

위 방법을 다시 작성하세요.

function innerLi_s(){
var content ="";
var i = 0;
for(;i<20;i++){
content += "A"; //这里只对js的变量循环了20次
};
document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值
}; 

5: Dom 다시 그리기 및 재배열 줄이기

요소 레이아웃 변경, 콘텐츠 추가, 삭제 또는 브라우저 창 크기 변경으로 인해 리플로우가 발생하고, 글꼴 색상이나 배경 색상이 변경되면 다시 그려집니다.
다음 코드와 유사한 작업에 대해서는 대부분의 최신 브라우저가 최적화되어 있다고 합니다(재배열 버전 1개로 최적화).

//修改前
var el = document.getElementById("div");
el.style.borderLeft = "1px"; //1次重排版
el.style.borderRight = "2px"; //又1次重排版
el.style.padding = "5px"; //还有1次重排版
//修改后
var el = document.getElementById("div");
el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版 

여러 작업의 경우 다음 세 가지 방법을 사용하면 리플로우 및 다시 그리기 횟수를 줄일 수도 있습니다.

1.Dom을 먼저 숨긴 후 2번 재배치 후 표시합니다(임시 표시:없음)

2.document.createDocumentFragment()는 문서 조각 처리를 생성하고 작업 후 페이지에 추가하며 한 번 재정렬합니다

3.var newDOM = oldDOM.cloneNode(true)는 Dom의 복사본을 생성합니다. 복사본을 수정한 후 oldDOM.parentNode.replaceChild(newDOM,oldDOM)는 원본 DOM을 덮어쓰고 이를 2번 재정렬합니다.

5: 루프 최적화

많은 분들이 알고 계시는 작성법이니 그냥 따라하시면 ​​됩니다(나중에 코드 주석으로 설명하겠습니다)~

//修改前
var i = 0;
for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length
console.log(arr[i]);
}
//修改后
var i = 0;
var len = arr.length; //获取一次数组arr的length 
for(;i<len;i++){
console.log(arr[i]);
}
//or
var i = arr.length;;
for(;i;i--){
console.log(arr[i]);
}

6: 바이너리의 올바른 사용

예: 모듈로 2를 사용하면 짝수 중 가장 낮은 비트가 0이고, 홀수 중 가장 낮은 비트가 0이고, 1을 사용한 비트 AND 연산의 결과가 0이고, 홀수 중 가장 낮은 비트가 1이고, 결과는 1을 사용한 비트별 AND 연산은 1입니다.

코드는 다음과 같습니다.

.odd{color:red}
.even{color:yellow} 
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul> 
var i = 0;
var lis = document.getElementsByTagName("li");
var len = lis.length;
for(;i<len;i++){
if(i&1){
lis[i].className = "even";
} else{
lis[i].className = "odd";
}
}; 

최신 브라우저가 좋은 역할을 했지만 이것이 제가 추구하는 코드 품질이라고 생각합니다. 그리고 어쩌면 한두 가지 점을 주의하지 않으면 성능에 큰 영향을 미치지 않을 수도 있지만, 여러 점에서 최적화를 하고 나면 가능한 결과는 질적인 도약이 될 것입니다~