실제 프론트엔드 면접 질문에 대한 기사를 공유하세요

고빈도 면접 질문을 모아서 도움이 필요한 학생들을 위해 녹음했습니다. 본 글은 기본 면접 질문에 초점을 맞춰 프론트엔드 기술의 기반이 탄탄한지, 프론트엔드 지식 시스템이 직렬로 연결될 수 있는지를 주로 테스트한다.

Q: 컴포넌트 캡슐화 설계 방법

1. 컴포넌트 캡슐화의 목적은 재사용, 개발 효율성 및 코드 품질 향상입니다
2. 낮은 결합도, 단일 책임, 재사용성, 유지 관리성

Q: js 비동기 로딩 방법

1. 스크립트 태그를 발견하면 렌더링 엔진이 중지되고, 스크립트가 실행될 때까지 기다린 다음 계속해서 아래쪽으로 렌더링합니다/
2. defer는 "렌더링 후 실행"을 의미하고, async는 "다운로드 후 실행"을 의미합니다. 다중 스크립트는 페이지에 나타나는 순서대로 로드됩니다. 3. es6 모듈을 로드할 때 type=module을 설정하면 페이지가 차단되지 않습니다. 실행하려면 async 속성을 동시에 추가하여 스크립트를 비동기식으로 실행할 수 있습니다(최상위 수준을 사용하면 정의되지 않은 구문 지점과 동일하므로 현재 코드가 ES6에 있는지 감지할 수 있습니다). 모듈)

Q: CSS 애니메이션과 js 애니메이션의 차이점

1. 코드 복잡도, js 애니메이션 코드는 상대적으로 복잡합니다.
2. 애니메이션이 실행 중일 때 js가 애니메이션을 제어하는 ​​정도에 따라 애니메이션이 일시 중지될 수 있습니다. , 취소, 종료, CSS 애니메이션에서는 이벤트를 추가할 수 없습니다.
3. 애니메이션 성능을 보면 js 애니메이션이 더 많습니다. js 구문 분석 프로세스의 성능이 CSS 애니메이션만큼 좋지 않습니다.

Q: 두 가지 크로스 사이트 공격, XSS 및 CSRF

1. 웹사이트 쿠키를 훔치거나 방지 방법: 모든 사용자 작업을 신뢰하지 않고, 사용자 입력을 피하고, js가 쿠키를 읽고 쓰는 것을 허용하지 않습니다.
2. csrf 교차 사이트 요청 위조, 귀하의 이름으로 악의적인 요청 보내기 , 쿠키 및 매개변수를 통한 필터링
3. 공격을 완전히 제거할 수는 없으며 공격 임계값을 높일 수만 있습니다.

Q: 이벤트 위임, 목적, 기능, 작성 방법

1. 상위 레이어 또는 외부 요소
2. 장점: 메모리 소비를 줄이고 이벤트를 동적으로 바인딩합니다
3. target은 이벤트를 트리거하는 가장 구체적인 요소이고 currenttarget은 이벤트가 바인딩되는 요소입니다(일반적으로 다음과 같습니다). 함수)

Q: 스레드, 프로세스

1. 스레드는 가장 작은 실행 단위이고, 프로세스는 가장 작은 자원 관리 단위입니다

2. 스레드는 하나의 프로세스에만 속할 수 있고, 프로세스는 여러 스레드를 가질 수 있습니다. 스레드가 하나 이상 있습니다

Q: 로드 밸런싱

시스템에 사용자 방문이 많아 로드가 너무 높을 때 일반적으로 수평 확장을 위해 서버 수를 늘리고 클러스터링 및 로드를 사용해야 합니다. 전체 시스템의 처리 용량을 향상시키기 위한 밸런싱

Q: CDN 캐싱이란

1. CDN은 nginx와 같은 서비스를 다양한 지역에 따라 배포하고 정적 리소스를 캐시하는 배포 전략입니다. 프런트엔드가 프로젝트를 최적화하는 경우 플랫폼 리소스에 해시 값을 추가하고 업데이트될 때마다 해시를 변경하는 것이 일반적입니다. 해시 값이 변경되면 서비스가 리소스를 다시 가져옵니다.

2. (CDN)은 경제적인 전략 분산 스토리지, 로드 밸런싱, 네트워크 요청 리디렉션 및 콘텐츠 관리의 4가지 요소를 포함하는 유연한 배포를 위한 전체 시스템

Q: 클로저 작성 방법, 클로저의 역할, 클로저의 단점

1. 클로저 사용 목적 - 변수를 숨기고, 변수에 간접적으로 액세스하고, 정의된 함수의 어휘 범위 외부에서 함수를 호출합니다.

2. 클로저의 메모리 누수는 클로저 이후의 버그입니다. 사용하면 클로저에 대한 참조를 복구할 수 없습니다.

Q: 교차 도메인 문제, 누가 교차 도메인을 제한하는지, 그리고 어떻게 해결하는지

1. 브라우저의 동일 출처 정책이 교차 도메인으로 이어집니다. 2. 잠재적인 악성 파일을 격리하기 위한 중요한 보안 메커니즘

3.jsonp, 스크립트가 타사 리소스를 로드할 수 있도록 허용
4.nginx 서비스 내부 구성 Access-Control-Allow-Origin *)
5. 요청 헤더, Access-Control-Allow-Origin 및 기타 헤더를 ​​설정하기 위한 엔드 및 백엔드 협업 Information

Q: javascript

1의 일반적인 메모리 누수 트랩은 메모리 누수로 인해 다음과 같은 일련의 문제가 발생할 수 있습니다. , 충돌, 높은 대기 시간

2. 메모리 누수는 사용할 수 없는(접근할 수 없는) 변수를 의미합니다. 변수는 여전히 메모리 공간을 차지하고 다시 사용할 수 없습니다. 3. 예상치 못한 전역 변수는 재활용되지 않습니다. (null로 설정되거나 재할당되지 않는 한), 특히 대량의 정보를 임시로 저장하는 데 사용되는 변수

4. 주기적 기능은 항상 실행되며 jq는 노드를 제거하기 전에 이벤트 리스너를 제거하지 않습니다.
5. js 코드에 DOM 노드에 대한 참조가 있는데, dom 노드가 제거되어도 해당 참조는 그대로 유지됩니다.

Q: ES6를 ES5 또는 ES3로 변환하는 바벨의 원리는 무엇입니까? 컴파일러, 입력 언어는 ES6+, 컴파일 대상 언어는 ES5
2. 분석: 코드 문자열이 추상 구문 트리

3로 구문 분석됩니다. 변환: 추상 구문 트리를 변환합니다

4. 변환된 추상 구문 트리에서

Q: Promise 시뮬레이션이 종료됩니다

1. 객체가 "보류 중" 상태로 유지되면 원래 Promise 체인이 실행을 종료합니다.
2. return new Promise(()=>{}) // "보류 중" 상태의 Promise 객체를 반환합니다

Q: Try catch에 promise를 추가하면 어떤 결과가 발생하나요? 1. Promise 객체의 오류는 버블링 특성을 갖고 있어 catch될 때까지 뒤로 전달됩니다. 즉, 오류는 항상 다음 catch 문에 의해 포착됩니다. . Promise 체인에 오류가 발생하면 오류 정보가 캡처될 때까지 링크를 따라 역방향으로 전달됩니다.

Q: 웹사이트 성능 최적화

1. http 요청의 경우 요청 수, 요청량을 줄입니다. 및 해당 사례 예, 프로젝트 리소스 압축, 2~4개의 도메인 이름에서 프로젝트 리소스의 DNS 해상도 제어, 공지 스타일, 공개 구성 요소, 스프라이트 이미지, 캐시 리소스 추출,

2. 압축, CSS 추출, js 공개 방법

3. 이미지 크기 조정 안 함, 스프라이트 그래픽 사용, 글꼴 차트 사용(Alibaba 벡터 라이브러리)
4. CDN 사용, 쓸모 없는 쿠키 버리기
5. 읽기 및 쓰기 분리, 최고 스타일 수정, DOM 업데이트, 렌더링 전 이미지 크기 지정에 js를 사용하지 마세요.
6. js 코드 수준 최적화, 문자열 계산 감소, 합리적으로 클로저 사용 및 배치 하단 첫 화면의 js 리소스 로딩

Q : js 커스텀 이벤트 구현

1. 네이티브는 커스텀 이벤트를 구현하는 3가지 메소드를 제공합니다

2. createEvent, html 이벤트인지 마우스 이벤트인지 이벤트 유형을 설정합니다.

3.initEvent 초기화 이벤트, 이벤트 이름, 버블링 허용 여부, 맞춤 이벤트 차단 여부
4. dispatchEvent 트리거 이벤트

Q: 각도 양방향 데이터 바인딩

1. MVVM 패턴 개발의 전형적인 대표자

2. ngular는 더티 감지 구현을 구현하며, 각도는 UI 이벤트, 요청 이벤트, settimeout 및 기타 지연된 개체를 이벤트 모니터링의 더티 큐에 넣습니다. 데이터가 변경되면 $diget 메서드가 트리거되어 업데이트됩니다. 3. Vue 패스 데이터 속성의 게시-구독 모델 구현은 대략적으로 세 가지 모듈로 구성되어 있다고 이해할 수 있습니다. 관찰자는 데이터 하이재킹을 완료하고, 컴파일은 템플릿 조각 렌더링을 완료합니다. 감시자는 데이터 변경 사항을 구독하고 뷰를 업데이트하는 브리지 역할을 합니다.

Q: get과 post 통신의 차이점
1. Get 요청은 캐시될 수 있지만 Post는 캐시될 수 없습니다.

2. Get보다 Get 요청이 URL에 포함되어 있고 브라우저에 기록이 저장되기 때문에 Post는 Yes가 되지 않지만 패킷 캡처의 경우에도 마찬가지입니다.

3. Post는 요청 본문을 통해 Get보다 더 많은 데이터를 전송할 수 있습니다.
4. URL에는 길이 제한이 있어 Get 요청에 영향을 주지만 이 길이 제한은 RFC가 아닌 브라우저에서 규정합니다. 5, Post는 더 많은 인코딩 유형을 지원하고 데이터 유형을 제한하지 않습니다

Q: webpack의 몇 가지 원리와 메커니즘 및 구현 방법을 연구해 보셨나요? 1. webpack 구성 매개변수를 구문 분석하고 셸에서 전달된 매개변수를 webpack과 병합합니다. config.js 파일에 구성된 매개변수는 최종 구성 결과를 생성합니다.
2. 플러그인이 웹팩 빌드 라이프사이클의 이벤트 노드를 모니터링하고 그에 따라 응답할 수 있도록 구성된 모든 플러그인을 등록합니다.
3. 구성된 항목 파일에서 파일 구문 분석을 시작하여 AST 구문 트리를 구축하고, 각 파일이 의존하는 파일을 찾아 재귀적으로 진행합니다.

4. 파일을 구문 분석하는 재귀 프로세스 중에 파일 형식 및 로더 구성에 따라 파일을 변환할 적절한 로더를 찾습니다.

5. 재귀가 완료된 후 각 파일의 최종 결과를 얻고 항목 구성에 따라 코드 블록 청크가 생성됩니다.
6. 모든 청크를 파일 시스템으로 출력합니다.

Q: ES6 모듈과 CommonJS 모듈의 차이점

1. CommonJs 모듈은 값의 복사본을 출력하는 반면 ES6 모듈은 값에 대한 참조를 출력합니다. 2. CommonJS 모듈은 런타임에 로드되지만 ES6 모듈은 런타임에 로드됩니다. 인터페이스
3. ES6에서 입력한 모듈 변수는 단지 심볼릭 링크이기 때문에 이 변수를 다시 할당하면 오류가 보고됩니다.

Q: 모듈이 AMD, CMD, CommonJS 모듈을 로드합니다. 2.0 사양

1. 이 사양의 목적은 특히 브라우저 측에서 JavaScript의 모듈식 개발을 위한 것입니다

2. 종속 모듈의 경우 AMD가 이를 미리 실행하고 CMD는 이를 연기하여 실행합니다
3. 그리고 AMD는 사전에 종속성을 촉진합니다

Q: 노드 이벤트 루프, js 이벤트 루프 차이점

1. Node.js의 이벤트 루프는 6단계로 나누어집니다
2. 브라우저와 노드에서 마이크로태스크 작업 대기열의 실행 타이밍이 다릅니다. 환경
Node.js에서는 이벤트 루프의 다양한 단계 사이에서 마이크로태스크가 실행됩니다.

브라우저 측에서는 이벤트 루프의 매크로태스크가 실행된 후에 마이크로태스크가 실행됩니다.

3 재귀 호출 process.nextTick()은 I/ O 배고픔. 공식적인 권장 사항은 setImmediate()를 사용하는 것입니다. b는 동일한 메모리를 가리키므로 그 안의 값을 수정하면 그에 따라 다른 A 값도 변경됩니다. 이는 얕은 복사입니다.

3. 얕은 복사, "값을 복사하는 데 Object.sign() 메서드가 사용됩니다. ​​하나 이상의 소스 객체에서 대상 객체로 모든 열거 가능한 속성을 반환합니다.

4. Deep copy, JSON.parse() 및 JSON.stringify()는 우리에게 기본적인 솔루션을 제공하지만 함수는 올바르게 처리되었습니다
.

위 내용은 실제 프론트엔드 면접 질문에 대한 기사를 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!