프론트엔드 인터뷰 FAQ

프론트엔드 엔지니어 면접 시 자주 묻는 질문을 소개합니다. 그중에는 답이 없는 질문도 있습니다.

1. 테스트에 주로 사용되는 브라우저는 무엇인가요? 어떤 커널(레이아웃 엔진)이 있나요?

(Q1) 브라우저: IE, Chrome, FireFox, Safari, Opera.

(Q2) 커널: Trident, Gecko, Presto, Webkit.

2. 인라인 요소와 블록 수준 요소의 차이점을 알려주세요. 인라인 블록 요소의 호환성 사용? (IE8 이하)

(Q1) 인라인 요소: 가로 방향으로 배열되며 블록 수준 요소를 포함할 수 없습니다. 너비 설정이 유효하지 않고, 높이가 유효하지 않습니다(라인 높이 설정 가능). , 여백 위쪽 및 아래쪽이 유효하지 않으며 위쪽 및 아래쪽 패딩이 유효하지 않습니다.

블록 수준 요소: 각 요소는 한 줄을 차지하고 수직으로 배열됩니다. 새 줄에서 시작하고 줄 바꿈으로 끝납니다.

(Q2) 호환성: display:inline-block;*display:inline;*zoom:1;

3. 플로트를 지우는 방법은 무엇입니까? 어느 것이 더 좋은 방법인가요?

(Q1)

(1) 상위 div는 높이를 정의합니다.

(2) 끝에 빈 div 태그clear:both를 추가합니다.

(3) 상위 div는 의사 클래스(after 및 Zoom)를 정의합니다.

(4) 상위 div는 Overflow:hidden을 정의합니다.

(5) 상위 div는 Overflow:auto를 정의합니다.

(6) 상위 div도 부동 상태이므로 너비를 정의해야 합니다.

(7) 상위 div는 디스플레이:테이블을 정의합니다.

(8) 끝에 br 태그clear:both를 추가합니다.

(Q2) 더 좋은 방법은 많은 웹사이트에서 사용하는 세 번째 방법입니다.

4. 일반적으로 사용되는 박스 사이즈 속성은 무엇인가요? 각각의 기능은 무엇입니까?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box: 너비와 높이가 콘텐츠 상자에 적용됩니다. 요소는 각각. 너비와 높이 외부에 요소의 패딩과 테두리를 그립니다(요소의 기본 효과).

border-box: 요소에 지정된 패딩과 테두리는 설정된 너비와 높이 내에서 그려집니다. 콘텐츠의 너비와 높이는 각각 설정된 너비와 높이에서 테두리와 패딩을 뺀 값입니다.

5. Doctype의 역할은 무엇인가요? 표준 모드와 호환 모드의 차이점은 무엇입니까?

(Q1) 은 이 문서를 구문 분석하는 데 사용할 문서 표준을 브라우저의 구문 분석기에 알려줍니다. 존재하지 않거나 형식이 잘못된 DOCTYPE을 사용하면 문서가 호환 모드에서 렌더링됩니다.

(Q2) 표준 모드의 서식 및 JS 작업 모드는 브라우저에서 지원하는 최고 표준에 따라 실행됩니다. 호환 모드에서는 페이지가 느슨하게 이전 버전과 호환되는 방식으로 표시되어 사이트가 작동하지 않는 것을 방지하기 위해 이전 브라우저의 동작을 시뮬레이션합니다.

6. 왜 HTML5로 만 작성하면 되나요?

HTML5는 SGML을 기반으로 하지 않으므로 DTD를 참조할 필요는 없지만 브라우저 동작을 규제하려면 doctype이 필요합니다(브라우저가 원하는 방식으로 실행되도록 허용).

HTML4.01은 SGML을 기반으로 하기 때문에 문서에서 사용하는 문서 유형을 브라우저에 알려주려면 DTD를 참조해야 합니다.

7. 스타일을 페이지로 가져올 때 링크를 사용하는 것과 @import를 사용하는 것의 차이점은 무엇인가요?

(1) 링크는 CSS를 로드하는 것 외에도 RSS를 정의하고 관계 연결 속성을 정의하는 데 사용할 수 있으며 @import는 CSS에서 제공됩니다. ;

(2) 페이지가 로드되면 링크도 동시에 로드되며 @import가 참조하는 CSS는 페이지가 로드될 때까지 기다린 후 로드됩니다.

(3) 가져오기는 CSS2.1을 제안하고 IE5 이상에서만 인식 가능하며 링크는 XHTML 태그이므로 호환성 문제가 없습니다.

8. 브라우저 코어에 대한 이해를 소개해주세요.

주로 렌더링 엔진(레이아웃 엔지니어 또는 렌더링 엔진)과 js 엔진의 두 부분으로 나뉩니다.

렌더링 엔진: 웹페이지의 콘텐츠(HTML, XML, 이미지 등) 획득, 정보 정리(CSS 추가 등), 웹의 표시 방법 계산을 담당합니다. 페이지를 출력한 후 모니터나 프린터로 출력합니다.

브라우저 커널마다 웹페이지의 문법적 해석이 다르므로 렌더링 효과도 달라집니다. 웹 콘텐츠를 편집하고 표시하는 모든 웹 브라우저, 이메일 클라이언트 및 기타 애플리케이션에는 커널이 필요합니다.

JS 엔진: 자바스크립트를 구문 분석하고 실행하여 웹 페이지에 동적 효과를 얻습니다.

처음에는 렌더링 엔진과 JS 엔진 사이에 명확한 구분이 없었습니다. 나중에는 JS 엔진이 점점 독립적이 되어 커널은 렌더링 엔진만 참조하는 경향이 있었습니다.

9. html5의 새로운 기능은 무엇인가요? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

(Q1)

HTML5는 더 이상 SGML의 하위 집합이 아니며 주로 이미지 추가, 위치, 저장, 멀티태스킹 및 기타 기능에 관한 것입니다.

(1) 페인팅 캔버스

(2) 미디어 재생을 위한 비디오 및 오디오 요소

(3) 로컬 오프라인 저장소 localStorage 장기 데이터 저장, 브라우저 데이터

(4) 브라우저를 닫은 후 sessionStorage 데이터가 자동으로 삭제됩니다.

(5) 기사, 바닥글, 헤더, 탐색과 같은 의미가 더 나은 콘텐츠 요소. , 섹션;

(6) 양식 제어, 달력, 날짜, 시간, 이메일, URL, 검색;

(7) 신기술 webworker, websocket, Geolocation;

(Q2)

IE8/IE7/IE6은 document.createElement 메소드로 생성된 태그를 지원합니다.

이 기능을 사용하면 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다.

브라우저가 새 태그를 지원한 후에는 태그의 기본 스타일을 추가해야 합니다.

물론 html5shim과 같은 성숙한 프레임워크를 직접 사용할 수도 있습니다.