2018년 최신 프론트엔드 면접 질문 10가지

이번에는 2018년 최신 프론트엔드 면접 질문을 가져왔습니다. 면접은 프론트엔드 업무에 있어서 빼놓을 수 없는 부분이라는 것을 알고 있습니다. 자주 묻는 프론트엔드 면접 질문을 분류하고 요약한 목적은 여러분의 극복을 돕기 위한 것입니다. 프론트 엔드 인터뷰의 주요 어려움. 살펴보겠습니다.

【관련 추천사항: 프론트엔드 면접질문(2020)】

1. 쿠키, sessionStorage, localStorage의 차이점을 설명해 주세요.

소프트웨어 프로그래밍은 어떤 수단을 통해 유용한 데이터를 지속적으로 저장하기를 원합니다. 네트워크 프로그래밍의 경우 이 작업은 일반적으로 서버 측 데이터베이스 또는 브라우저 측 쿠키로 전달됩니다. HTML5의 출현으로 웹 개발에는 웹 저장소와 웹 SQL 데이터베이스라는 두 가지 옵션이 있습니다.

WebStorage는 LocalStorage(로컬 저장소)와 sessionStorage(세션 저장소)의 두 가지 형태로 제공됩니다. 두 가지 방법 모두 개발자가 js에서 설정한 키-값 쌍으로 작업하고 다른 페이지를 다시 로드할 때 이를 읽을 수 있도록 합니다. 이는 쿠키와 유사합니다.

1: 쿠키 데이터는 항상 동일한 출처의 http 요청에 전달됩니다(필요하지 않은 경우에도). 즉, 쿠키는 브라우저와 서버 간에 앞뒤로 전달됩니다. SessionStorage와 localStorage는 자동으로 데이터를 서버로 보내지 않고 로컬에만 저장합니다. 쿠키 데이터에는 쿠키가 특정 경로에만 속하도록 제한할 수 있는 경로 개념도 있습니다.

2: 저장 크기 제한도 다릅니다. 동시에 쿠키 데이터는 4K를 초과할 수 없습니다. 동시에 각 http 요청은 쿠키를 전달하므로 쿠키는 세션 식별자와 같은 매우 작은 데이터를 저장하는 데에만 적합합니다. sessionStorage와 localStorage에도 저장 크기 제한이 있지만 쿠키보다 훨씬 크고 5M 이상에 도달할 수 있습니다.

3: 데이터 유효 기간이 다릅니다. sessionStorage: 현재 브라우저 창을 닫을 때까지만 유효하며 당연히 영구적으로 유지되지 않습니다. localStorage: 항상 유효하며 창이나 브라우저를 닫아도 저장됩니다. 영구 데이터로 사용됩니다. 쿠키만 해당 쿠키는 창이나 브라우저가 닫혀도 설정된 만료 시간까지 유효합니다.

4: 범위가 다르면 sessionStorage는 동일한 페이지에서도 다른 브라우저 창에서 공유되지 않습니다. localStorage는 모든 동종 창에서 공유됩니다.

5: 웹 저장소는 데이터 업데이트 알림을 리스너에게 보낼 수 있는 이벤트 알림 메커니즘을 지원합니다.

6: Web Storage의 API 인터페이스가 사용하기 더 편리합니다.

2. <script>, <script async> 및 <script defer></strong>의 차이점을 설명해 주세요. </p> <p>html 페이지에 <a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a> 코드를 삽입하는 주요 방법은 스크립트 태그를 이용하는 것입니다. 두 가지 형태가 있는데, 첫 번째는 스크립트 태그 사이에 직접 js 코드를 삽입하는 방식이고, 두 번째는 src 속성을 통해 외부 js 파일을 도입하는 방식입니다. js 코드를 구문 분석하고 실행하는 동안 인터프리터가 나머지 페이지의 렌더링을 차단하므로 js 코드가 많은 페이지에서는 브라우저에 오랜 시간 동안 공백이 발생하고 지연이 발생합니다. 모든 js 참조를 </body> 태그 앞에 두는 것이 좋습니다. </p> <p>script 태그에는 defer와 async라는 두 가지 속성이 있으므로 script 태그의 사용은 세 가지 상황으로 구분됩니다. </p> <p>1.<script src="example.js"></script>
No defer 또는 비동기 속성을 사용하면 브라우저는 해당 스크립트를 즉시 로드하고 실행합니다. 즉, 스크립트 태그 이후에 문서를 렌더링하기 전에 이후에 로드된 문서 요소를 기다리지 않고 읽자마자 로드 및 실행을 시작합니다. 이렇게 하면 후속 문서의 로드가 차단됩니다. .

async 속성을 사용하면 후속 문서의 로드 및 렌더링과 js 스크립트의 로드 및 실행이 병렬로 수행된다는 의미입니다. , 비동기 실행

3.

defer 속성을 사용하면 후속 문서를 로드하는 프로세스와 js 스크립트를 로드하는 프로세스(로드만 가능하고 실행은 아님) 현재)은 병렬(비동기)로 수행되며, 요소 구문 분석이 완료된 후 DOMContentLoaded 이벤트가 트리거되어 실행되기 전에 js 스크립트 실행을 기다려야 합니다.

3. 일반적으로 사이에 CSS 를 배치하는 것이 좋습니다. 예외가 무엇인지 아시나요?

헤드에 자바스크립트를 넣으면 먼저 파싱이 되는데, 현재는 아직 바디가 파싱되지 않은 상태입니다. (기존 HTML 구조는 head가 앞에, body가 뒤에 있습니다.) head의 js 코드가 매개변수를 전달해야 하는 경우(메소드가 body에서 호출될 때만 매개변수가 전달됩니다), 매개변수는 다음과 같습니다. 일련의 작업을 수행하기 위해 호출되면 함수의 매개 변수가 정의되지 않았기 때문에 이때 확실히 오류가 보고됩니다.

왜 문제에 대해 걱정하지 않고 js 스크립트를 머릿속에 집어넣는 사람들을 자주 볼 수 있나요? 왜냐하면 일반적으로 헤드에 자바스크립트를 넣으면 리스너를 바인딩하게 되기 때문입니다. 모든

html 문서
가 파싱된 후 코드가 실행됩니다.

4. HTML 프로그레시브 렌더링

가능한 한 빨리 HTML 바이트를 브라우저에 제공해야 합니다.
예: 요청이 들어오면 (이상적으로는) 데이터가 캐시되므로 서버가 빠르게 데이터를 얻을 수 있습니다. 그런 다음 브라우저는 데이터를 구문 분석하고 화면에 렌더링하기 시작합니다.
이번 WebPageTest에서는 1.5초 만에 첫 화면이 나왔지만, 보시다시피 모든 내용이 포함되지는 않았습니다. 여기에는 페이지 탐색을 시작하거나 휴가 상품을 확인하기에 충분한 콘텐츠가 포함되어 있습니다.
그런 다음 3.5초가 지나면 또 다른 섹션에서 더 많은 거래를 로드합니다. 6.5초가 지나도 뭔가가 여전히 로드 중입니다! 실제로 전체 페이지 로드를 완료하는 데 18초가 걸렸습니다. 그렇게 오래 기다릴 수 있나요? 나는 그것을 의심한다!
Amazon이 가장 느린 페이지 로딩에 초점을 맞춘다면 누군가는 화를 낼 것입니다. 그들은 가장 빠른 패킷에서 가장 중요한 바이트를 보내는 데 중점을 둡니다. 한 단계 더 나아가서 첫 번째 패킷을 가장 중요한 바이트로 채울 수도 있습니다. 나는 또한 가능한 한 빨리 해당 바이트를 귀하에게 전달하는 데 중점을 두고 있다고 확신합니다.

5. CSS에서 클래스와 ID의 차이점.

스타일 시트에서 스타일을 정의할 때 ID 또는 클래스를 정의할 수 있습니다.
CSS 파일을 작성할 때 ID 앞에는 "#"이 붙습니다. CLASS는 "."을 사용합니다.
id는 페이지에서 한 번만 사용할 수 있습니다.
ID는 이름처럼 서로 다른 구조와 내용을 구별하는 데 사용되는 레이블입니다. 같은 이름을 가진 두 사람이 방에 있으면 혼란이 생길 ​​수 있습니다. 클래스는 어떤 구조와 내용에도 적용할 수 있는 스타일입니다. , 옷과 마찬가지로;
현재 브라우저에서도 동일한 ID를 여러 개 사용할 수 있으며 일반적인 상황에서는 정상적으로 표시될 수 있습니다. 그러나 ID를 통해 div를 제어하기 위해 JavaScript를 사용해야 하는 경우 오류가 발생합니다.
개념적으로 말하면, id는 먼저 구조/콘텐츠를 찾은 다음 이에 대한 스타일을 정의하고, 클래스는 먼저 스타일을 정의한 다음 이를 여러 구조/콘텐츠에 적용합니다.

6. CSS "재설정"과 "표준화"의 차이점은 무엇인가요? 어떻게 선택하시겠습니까? 그리고 그 이유는 무엇입니까?

reset.css는 브라우저의 기본 속성을 재설정할 수 있습니다. 브라우저마다 스타일이 다르므로 재설정을 통해 통합할 수 있습니다. 예를 들어 ie 브라우저의 버튼 표시는 FF 브라우저의 버튼 표시와 다릅니다. 재설정을 통해 스타일을 통일하고 동일한 생각을 표시할 수 있습니다. 그러나 많은 재설정은 불필요합니다. 재설정을 너무 많이 작성하면 페이지 렌더링 시 브라우저의 부담이 늘어납니다. 예를 들어 인라인 요소에 잘못된 속성을 설정해서는 안 되며, 너비, 높이 및 범위에 대한 여백을 설정하면 적용되지 않습니다.
고정 크기의 절대 및 고정 위치 지정(너비 및 높이 속성이 설정됨)의 경우 위쪽 및 왼쪽 속성이 설정된 경우 아래쪽 및 오른쪽, 여백 및 부동 소수점은 효과가 없습니다.
나중에 설정된 속성은 이전에 반복적으로 설정된 속성을 덮어씁니다. 부정적인 영향을 지적하거나 "정규화"에 대한 더 나은 대체 방법을 언급하기를 기대합니다.
normalize.css는 다양한 브라우저에서 요소를 보다 균일하게 렌더링할 수 있는 사용자 정의 가능한 CSS 파일입니다.

7. Float와 작동 방식을 설명해주세요.

float 속성은 요소가 부동하는지 여부와 부동하는 방향을 정의합니다. CSS에서는 모든 요소가 부동할 수 있으며 부동 요소는 요소 종류에 관계없이 블록 수준 상자를 생성합니다. 그리고 상자의 너비는 더 이상 늘어나지 않고 상자 안의 콘텐츠 너비에 따라 결정됩니다. floating 속성을 사용하면 플로팅된 요소가 문서 흐름에서 벗어나므로 문서의 일반 흐름에 있는 블록 상자는 플로팅 상자가 존재하지 않는 것처럼 동작합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

2018년 최신 프론트엔드 면접 질문 9개

2018년 프론트엔드 면접 질문 9개

2018년 프론트엔드 면접 질문 7개

위 내용은 2018년 최신 프론트엔드 면접 질문 10가지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!