프런트엔드 질문 - Java script 섹션 #프론트엔드 #Front-end

디더링 방지와 스로틀링의 차이점 1.

깜박임 방지: 이벤트를 연속으로 트리거할 때 트리거 간격이 설정 시간보다 짧으면 마지막 트리거의 이벤트 핸들러 기능만 실행되고, 이벤트가 트리거될 때마다 타이머가 다시 시작됩니다. 타이머를 유지하면서 지연 시간 이후에 트리거되도록 설정하는 것이 원칙이지만, 지연 시간 내에 다시 트리거되면 타이머가 취소되고 초기화됩니다. 이러한 방식으로 마지막 작업만 트리거할 수 있습니다.

스로틀링: 이벤트가 연속적으로 트리거되면 특정 시간에 한 번만 함수가 실행되고, 함수가 실행된 후 타이밍이 다시 시작됩니다. 타임스탬프를 사용하여 함수를 트리거할 특정 시간에 도달했는지 여부를 판단하는 것이 원칙입니다.

2. V8 쓰레기 수집

v8의 메모리 제한은 64비트 시스템에서 1.4G입니다.

v8의 가비지 수집 정책

v8의 메모리 구조는 크게 신세대와 구세대로 나뉘며, 대부분의 오브젝트는 처음에 신세대에 할당되고 잠시 살아남은 후 구세대로 이동하게 됩니다.
새로운 세대는 메모리는 적지만 쓰레기 수집이 빈번하고 공간과 시간을 맞바꾸는 청소 알고리즘을 사용합니다.
이전 세대는 마크 제거 및 마크 정렬 알고리즘을 사용하여 수집된 쓰레기입니다.

메모리 누수를 방지하는 방법

전역 변수를 사용하지 않도록 하세요.
타이머 수동 지우기
이벤트 리스너 수동으로 지우기
DOM 참조 수동으로 지우기
폐쇄를 아껴서 사용하세요
약한 참조 사용

WeakMap 예제:

typescript
// 객체가 키, 값 또는 다른 객체의 자식 요소 등으로 여러 번 참조되는 경우 참조가 null로 설정되어도 객체는 회수되지 않고 여전히 존재합니다.
 let a = {};
 let arr = [a];

 a = null;
 console.log(arr); // [{}] {}재활용되지 않음

 let a = {}; 
 let map = new WeakMap();
 map.set(a, '111')
 map.get(a)

 a = null;

4. 이벤트 루프

4.1. 브라우저 환경

js 엔진은 비동기 이벤트가 발생하면 비동기 이벤트를 중단하고 실행 스택에서 다른 작업을 계속 실행합니다.
비동기 이벤트가 결과를 반환하면 비동기 이벤트가 해당 이벤트 대기열에 추가됩니다.
실행 스택의 모든 작업이 실행되고 메인 스레드가 유휴 상태가 되면 마이크로태스크 이벤트 큐에 있는 이벤트가 제거되고 해당 콜백이 실행 스택에 배치되어 실행됩니다.
마이크로 작업 대기열의 모든 이벤트를 실행한 후에는 매크로 작업 대기열의 이벤트를 차례로 꺼내 실행 스택에 넣어 실행합니다.

4.2. node 환경

sql
  ──────────────────────┐
┌─>  타이머  
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O 콜백 │ │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ 유휴, 준비 │ │
│ └──────────┬────────────┘ ┌───────────────┐
│ ┌──────────┴────────────┐ │ 들어오는: │
│ │ poll │<──연결─── │ │
│ └──────────┬────────────┘ │ 데이터, etc. │
│ ┌──────────┴────────────┐ └───────────────┘
│ │ 확인 │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
콜백 닫기 └──┤ 콜백 닫기 │
 └───────────────────────┘

폴링 단계는 모든 콜백이 실행되거나 노드 실행 제한이 초과될 때까지 폴링 대기열에서 이벤트를 실행하는 것으로 시작됩니다.
I/O 이벤트가 반환되면 I/O 콜백 단계로 진입하여 해당 이벤트에 대한 콜백을 즉시 실행합니다.

setImmediate()와 setTimeout()이 실행되는 순서는 가변적이지만, I/O 이벤트 콜백에서 setImmediate()는 항상 setTimeout()보다 먼저 실행됩니다.

이벤트 대상에 이벤트 리스너 추가()

지정된 리스너를 이벤트 대상에 등록하고 해당 객체에 의해 지정된 이벤트가 트리거될 때 콜백을 실행합니다. 이벤트 대상은 엘리먼트, 문서, 창 또는 이벤트를 지원하는 다른 모든 객체일 수 있습니다.

typescript
// 인터페이스 프로토콜
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

type type = string; // 이벤트 유형
type listener = Function; // 이벤트를 수신하고 Event 객체를 매개변수로 받는 핸들러 함수입니다.

/**
 * 기본값은 false입니다.
 * 리스너는 수신할 때 세 단계가 있습니다.，
 * 캡처 단계 -> 대상 단계 -> 버블링 단계，
 * useCapture 참으로 설정하면 리스너는 캡처 단계의 이벤트를 처리하고, 거짓으로 설정하면 대상 또는 버블 단계의 이벤트를 처리합니다.
 */
type useCapture = boolean;

type options = {
 capture: boolean; // 기본값은 위와 같이 이벤트가 캡처 단계에서 처리될지 버블 단계에서 처리될지를 지정하는 false입니다.
 once: boolean; // 기본값은 false이며, 이는 리스너가 한 번만 호출된 후 자동으로 제거됨을 의미합니다.
 passive: boolean; // 기본값은 false이며, true로 설정하면 리스너는 preventDefault()를 호출하지 않습니다.
};
// 패시브를 사용하여 스크롤 성능을 개선하려면 터치무브 이벤트 리스너를 추가할 때 패시브를 true로 설정하여 리스너가 페이지 스크롤을 차단하지 못하도록 하세요.

6. typeof

함수를 제외한 모든 참조 유형에 typeof를 사용하면 'object'가 됩니다.
null typeof를 사용하면 'object'가 됩니다.

7. instanceof

typescript
Object instanceof Function === !false;
Function instanceof Object === !false;
Object instanceof Object === !false;
Function instanceof Function === !false;

Object.prototype.toString.call()

참조 유형은 typeof로 'object'와 'function'만 가져올 수 있고 객체, 배열, 날짜, 수학 등을 구분할 수 없으므로 변수 유형을 확실하지 않은 경우 Object.prototype.toString.call()을 사용하여 변수의 유형을 식별할 수 있습니다. Object.prototype.toString()은 '[object XXX]'와 같은 문자열을 반환합니다.

typescript
Object.prototype.toString.call({}) === '[object\x20Object]';
Object.prototype.toString.call([]) === '[object\x20Array]';
Object.prototype.toString.call(null) === '[object\x20Null]';
Object.prototype.toString.call(new Date()) === '[object\x20Date]';

9. 프로토타입 체인

모든 JavaScript 객체는 생성될 때 다른 객체와 연결됩니다. 이 객체를 프로토타입이라고 하며, 모든 객체는 프로토타입으로부터 속성을 "상속"받습니다. 모든 객체는 프로토타입으로부터 속성을 "상속"합니다. 프로토타입 체인은 결국 프로토타입 객체가 없는 null(Object.prototype .proto === null)로 이어집니다.

상속을 실현하는 방식

기생 조합 상속

typescript
function Parent() {
 this”.name = 'parent';
}
function Child() {
 Parent.call(this”);
}
Child.prototype = Object.create(Parent.prototype) // 또는 Child.prototype = new Parent();
Child.prototype.constructor = Child;

// Object.create(proto: 프로토타입 객체) 들어오는 프로토 객체를 따라 프로토타입화된 새 객체를 만듭니다.

10. Promise

10.1. Promise

"약속"은 대기 중, 실행 중, 거부 중 세 가지 상태 중 하나에 있어야 합니다. '프라미스'가 해결되거나 거부되면 다른 상태로 이동할 수 없습니다.

"약속" 기본 실행 프로세스

프로미스 상태 초기화
Promise에서 전달된 fn 함수를 즉시 실행합니다.
그때 실행(...) 콜백 등록

참고: 그때 메서드에 전달된 onFulfilled 매개변수는 그때 메서드가 호출된 이벤트 루프 이후 새 실행 스택에서 실행되어야 합니다.Promise 내부의 함수는 여전히 매크로 작업이며, .then() 메서드에 등록된 콜백 함수만 마이크로 작업입니다.해결 또는 거부 값은 .then() 및 .catch()의 매개 변수입니다.

범위 및 실행 컨텍스트

11.1. 범위

js는 어휘적으로 범위가 지정되며 변수의 범위는 선언된 영역에 의해서만 결정됩니다.

javascript
var obj = 0xa;
function c() {
    return obj + 0xa;
}
function bar() {
    var B = 0x14;
    return c();
}
console.log(bar());
var C = 0x3;
function Foo() {
    var Obj = Obj || 0x5;
    console.log(Obj);
}
Foo();

11.2. 실행 컨텍스트

각 컨텍스트에는 해당 컨텍스트에 정의된 모든 변수와 함수가 상주하는 연관된 변수 객체 VO가 있습니다.
컨텍스트의 코드는 실행될 때 변수 객체에 대한 범위 체인을 생성합니다.
컨텍스트가 함수인 경우 활성 객체 AO가 가변 객체로 사용되며 활성 객체에는 처음에 정의된 변수가 인수 하나만 있습니다.

12.

12.1. 개념

클로저는 다른 함수의 범위에서 변수를 참조하는 함수입니다. 일반적으로 중첩 함수에서 구현되는데, 그 이유는 내부 함수의 범위 체인에 외부 함수의 범위 체인이 포함되어 있기 때문입니다. 참고: 자유 변수는 함수가 정의된 곳에서 더 높은 범위로 조회됩니다. 실행 장소에서는 조회되지 않습니다.

javascript
// 인자로 전달된 함수
function print(fn) {
 const a = 200;
 fn();
}

const a = 100;
function fn() {
 console.log(a);
}

print(fn); // 100
// 반환값으로 반환되는 함수
function create() {
 const a = 100;

 return function () {
 console.log(a);
 };
}

const fn = create();
const a = 200;
fn(); // 100

12.2. 사용 시나리오

개인 속성, 게터 및 세터 메서드를 구현합니다.
이터레이터.
캐시.

13.

13.1. arguments객체

함수가 함수로 정의된 경우에만 존재하며, 함수가 호출될 때 전달된 모든 인수를 포함합니다.
인자 객체는 인터레이터 인터페이스를 가진 클래스의 배열입니다.

"본"은 다음을 의미합니다.

표준 함수에서 this는 함수가 실행되는 컨텍스트 객체를 가리킵니다.
화살표 함수에서 this는 함수가 정의된 컨텍스트 객체를 가리킵니다.

14. new 연산자 구현 절차

객체 생성)
생성자의 프로토타입을 생성된 객체의 프로토 프로퍼티에 할당합니다.
생성자를 실행하고 적용() 메서드를 사용하여 생성된 객체에 this를 가리키고 생성자의 인자 객체를 전달합니다.
생성자를 실행한 후 반환값을 가져오는데, 반환값 유형이 'object'인 경우 new 연산자는 생성자 반환값을 반환하고, 그렇지 않으면 생성된 객체를 반환합니다.

데이터 정렬 및 작성 기능

15.1 Currying

여러 인수를 받는 함수를 하나의 인수를 받는 함수로 변환하고 나머지 인수를 받는 새 함수를 반환하면 새 함수가 결과를 반환합니다.

typescript
add(0x1, 0x2, 0x3);
currying(0x1)(0x2)(0x3);

사용 시나리오: 매개변수 재사용, 조기 확인, 지연 실행 바인드 메서드는 커리링으로 구현됩니다.

typescript
// 다중 매개변수 전달 지원
function progressCurrying(fn, args) {
 const _this” = this”
 const len = fn.length;
 const args = args || [];

 return function() {
 const _args = Array.prototype.slice.call(arguments);
 Array.prototype.push.apply(args, _args);

 // 수집된 인자의 수가 원래의 fn보다 적은 경우.length，는 인수를 계속 수집하기 위해 재귀적으로 호출됩니다.
 if (_args.length < len) {
 return progressCurrying.call(_this”, fn, _args);
 }

 // 인수가 수집되면 fn을 실행합니다.
 return fn.apply(this”, _args);
 }
}

15.2 compose

작성 함수는 중첩된 함수의 계층 구조를 평평하게 만드는 기능입니다.

javascript
fn3(fn2(fn1(0x1, 0x2, 0x3)));
compose(fn1, fn2, fn3)(0x1, 0x2, 0x3);

구현 방법

javascript
const a = function (...foo) {
    let bar = foo.pop();
    return function (...b) {
        return foo.reverse().reduce(function (c, obj) {
            return c.then(function (Bar) {
                return obj.call(null, Bar);
            });
        }, Promise.resolve(bar.apply(null, b)));
    };
};

16. ES6 참고 사항

반복자 인터페이스를 정의하는 모든 객체는 for.... 루프를 사용할 수 있습니다.
위크셋과 위크맵의 요소와 키는 객체일 수 있으며, 약한 참조이므로 쓰레기 수집 메커니즘은 참조를 고려하지 않습니다.
기호 유형은 고유한 값을 나타냅니다), 동일한 매개변수를 가진 기호 함수는 여전히 동일한 값을 반환하지 않습니다.
배열 메서드:
- Array.flat(n)
- Array.reduce( => any)

프런트엔드 질문 - Java script 섹션