프론트엔드 인터뷰 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) 1a309583e26acea4f04ca31122d8c535은 이 문서를 구문 분석하는 데 사용할 문서 표준을 브라우저의 구문 분석기에 알려줍니다. 존재하지 않거나 형식이 잘못된 DOCTYPE을 사용하면 문서가 호환 모드에서 렌더링됩니다.

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

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

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과 같은 성숙한 프레임워크를 직접 사용할 수도 있습니다.

6fc79538f41ba7309e847292db36ab30

32e61bffab02d0270fa5334285b6797e

10. HTML 의미에 대해 간략하게 설명해주세요.

올바른 태그로 올바른 일을 하세요.

HTML 의미론은 페이지의 내용을 구조화하고 구조를 더 명확하게 만들어 브라우저와 검색 엔진이 더 쉽게 구문 분석할 수 있도록 합니다.

스타일 CSS가 없어도 문서 형식으로 표시됩니다. 읽기 쉽습니다.

검색 엔진 크롤러는 HTML 태그를 사용하여 각 키워드의 컨텍스트와 가중치를 결정하므로 검색 엔진 최적화에 도움이 됩니다.

웹사이트를 읽는 사람들이 더 쉽게 웹사이트를 이용할 수 있도록 합니다. 소스 코드 읽기, 유지 관리 및 이해를 더 쉽게 만들기 위해 웹 사이트를 여러 섹션으로 나눕니다.

JavaScript

1. js의 기본 데이터 유형 소개

정의되지 않음, Null, Boolean , Number , String

2. js에 내장된 객체는 무엇인가요?

데이터 캡슐화 클래스 객체: Object, Array, Boolean, Number 및 String

기타 객체: Function, Arguments, Math, Date, RegExp, Error

3. 이 개체에 대한 이해

이것은 항상 함수의 직접 호출자를 가리킵니다(간접 호출자가 아님).

새 키워드가 있으면 this는 다음을 가리킵니다. new.

이벤트에서 이는 이벤트를 트리거한 개체를 가리킵니다. 특히 IE의 attachmentEvent에서 this는 항상 전역 개체 Window를 가리킵니다.

4. eval은 어떤 일을 하나요?

해당 문자열을 JS 코드로 구문 분석하고 실행하는 기능입니다.

안전하지 않고 성능을 많이 소모하는 eval을 사용하지 않아야 합니다(두 번, 한 번 구문 분석). Node.js 문, 한 번 실행됨).

JSON 문자열을 JSON 객체로 변환할 때 eval, var obj =eval('('+ str +')')를 사용할 수 있습니다.

5. DOM에서 노드를 추가, 제거, 이동, 복사, 생성 및 찾는 방법

// 创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
// 添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
// 查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

6. ?

null은 "없음"을 나타내는 객체이고 숫자 값으로 변환하면 0입니다. undefound는 "없음"을 나타내는 원시 값이며 숫자 값으로 변환하면 NaN입니다.

정의되지 않음:

(1) 변수가 선언되었지만 값이 할당되지 않은 경우 정의되지 않은 것과 같습니다.

(2) 함수 호출 시 제공해야 할 매개변수가 제공되지 않고, 매개변수가 정의되지 않은 것과 같습니다.

(3) 객체에는 할당된 속성이 없으며 이 속성의 값은 정의되지 않습니다.

(4) 함수가 값을 반환하지 않으면 기본적으로 undefound를 반환합니다.

null:

(1) 함수의 매개변수로, 함수의 매개변수가 객체가 아니라는 뜻입니다.

(2)는 객체 프로토타입 체인의 끝점 역할을 합니다.

7. new 연산자는 정확히 무엇을 하나요?

(1) 빈 개체를 만들고 this 변수는 개체를 참조하며 함수도 상속합니다. 원기.

(2) 이것이 참조하는 객체에 속성과 메소드가 추가됩니다.

(3) 새로 생성된 객체는 this로 참조되며, 마지막에 this가 암시적으로 반환됩니다.

8. JSON을 아시나요?

JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. 이는 JavaScript의 하위 집합을 기반으로 합니다. 데이터 형식은 간단하고 읽고 쓰기 쉬우며 대역폭을 거의 차지하지 않습니다.

형식: 키-값 쌍 사용(예: {'age':'12', 'name':'back'}

9. () 차이점과 기능은 무엇인가요?

apply() 함수에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 컨텍스트이고 두 번째 매개변수는 매개변수 배열입니다. 컨텍스트가 null이면 전역 개체가 대신 사용됩니다.

예: function.apply(this,[1,2,3]);

call()의 첫 번째 매개변수는 컨텍스트이고 그 뒤에는 사례.

예: function.call(this,1,2,3);

10. UA를 얻는 방법은 무엇입니까?

function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}

기타

1. HTTP 상태 코드에 대해 무엇을 알고 있나요?

100 계속. 일반적으로 게시물 요청을 보낼 때 서버는 확인을 표시하기 위해 http 헤더를 보낸 후 이 정보를 반환한 다음 특정 매개변수 정보를 보냅니다.

200 OK 일반 반환 정보

201 생성됨 요청이 성공했고 서버가 새 리소스를 생성했습니다

202 수락됨 서버가 요청을 수락했지만 아직 처리하지 않았습니다

301 영구적으로 이동됨 요청한 웹페이지가 새 위치로 영구적으로 이동되었습니다.

302 임시 리디렉션을 찾았습니다.

303 기타 임시 리디렉션을 참조하고 항상 GET을 사용하여 새 URI를 요청하세요.

304 Not Modified 요청한 웹페이지는 마지막 요청 이후 수정되지 않았습니다.

400 잘못된 요청 서버는 요청 형식을 이해할 수 없으며 클라이언트는 동일한 콘텐츠를 사용하여 다시 요청을 시작하려고 시도해서는 안 됩니다.

401 Unauthorized 요청이 승인되지 않았습니다.

403 Forbidden 접근을 금지합니다.

404 Not Found URI와 일치하는 리소스를 찾을 수 없습니다.

500 내부 서버 오류 가장 일반적인 서버 측 오류입니다.

503 Service Unavailable 서버가 일시적으로 요청을 처리할 수 없습니다(과부하 또는 유지보수로 인해 발생할 수 있음).

2. 어떤 성능 최적화 방법이 있나요?

(1) http 요청 수 줄이기: CSS Sprites, JS, CSS 소스 코드 압축, 적절한 이미지 크기 제어 웹 페이지 Gzip, CDN 호스팅, 데이터 캐시, 이미지 서버.

(2) 프론트엔드 템플릿 JS + 데이터는 HTML 태그로 인한 대역폭 낭비를 줄여줍니다. 프론트엔드는 Ajax 요청 결과를 저장하기 위해 변수를 사용할 때마다 요청이 필요하지 않습니다. 요청 수

( 3) DOM 작업 대신 innerHTML을 사용하여 DOM 작업 수를 줄이고 자바스크립트 성능을 최적화합니다.

(4) 설정할 스타일이 많을 경우 스타일을 직접 조작하는 대신 className을 설정합니다.

(5) 전역 변수를 덜 사용하고 DOM 노드 검색 결과를 캐시합니다. IO 읽기 작업을 줄입니다.

(6) 동적 속성(동적 속성)이라고도 알려진 CSS 표현식(css 표현식)을 사용하지 마세요.

(7) 이미지 미리 로드, 스타일 시트를 상단에 배치하고 타임스탬프와 함께 하단에 스크립트를 배치합니다.

3. 우아한 저하와 점진적인 향상이란 무엇입니까?

우아한 저하: 웹사이트는 모든 최신 브라우저에서 잘 작동합니다. 사용자가 이전 브라우저를 사용하는 경우 코드는 브라우저가 제대로 작동하는지 확인합니다.

IE의 고유한 박스 모델 레이아웃 문제로 인해 다양한 IE 버전에 대한 해킹 관행이 우아하게 다운그레이드되어 기능을 지원할 수 없는 브라우저에 대한 후보가 추가되어 이전 브라우저에서 어떤 방식으로든 작동할 수 있게 되었습니다. 경험을 저하시키지만 완전히 무효화하지는 않습니다.

점진적 개선: 모든 브라우저에서 지원하는 기본 기능부터 시작하여 점차 새로운 브라우저에서만 지원되는 기능을 추가하고, 기본 브라우저에 유해하지 않은 스타일과 기능을 페이지에 추가합니다. 브라우저에서 지원하면 자동으로 렌더링되고 작동합니다.

4. 메모리 누수를 일으킬 수 있는 일반적인 작업은 무엇입니까?

메모리 누수란 더 이상 소유하지 않거나 필요하지 않은 객체가 지속되는 것을 말합니다.

가비지 수집기는 주기적으로 개체를 검색하고 각 개체에 대한 참조가 있는 다른 개체의 수를 계산합니다. 객체에 0개의 참조가 있거나(다른 객체가 이를 참조하지 않음) 객체에 대한 유일한 참조가 순환이면 객체의 메모리를 회수할 수 있습니다.

setTimeout의 첫 번째 매개변수가 함수 대신 문자열을 사용하는 경우 메모리 누수가 발생합니다.

클로저, 콘솔 로그, 루프(두 객체가 서로 참조하고 서로 유지할 때 루프가 발생함).

5. 스레드와 프로세스의 차이점

프로그램에는 하나 이상의 프로세스가 있고, 프로세스에는 하나 이상의 스레드가 있습니다.

스레드의 분할 규모는 프로세스의 분할 규모보다 작아서 멀티 스레드 프로그램의 동시성이 높습니다.

또한 프로세스는 실행 중에 독립된 메모리 단위를 가지며, 여러 스레드가 메모리를 공유하므로 프로그램의 실행 효율성이 크게 향상됩니다.

스레드는 실행 중인 프로세스와 여전히 다릅니다. 각각의 독립 스레드에는 프로그램 실행을 위한 진입점, 순차적 실행 시퀀스 및 프로그램 종료점이 있습니다. 그러나 스레드는 독립적으로 실행될 수 없으며 응용 프로그램 내에 존재해야 하며 응용 프로그램은 다중 스레드 실행 제어를 제공합니다.

논리적인 관점에서 볼 때 멀티스레딩의 의미는 애플리케이션에서 여러 실행 부분을 동시에 실행할 수 있다는 것입니다. 그러나 운영 체제는 프로세스 스케줄링 및 관리, 자원 할당을 구현하기 위해 다중 스레드를 다중 독립 응용 프로그램으로 간주하지 않습니다. 이것이 프로세스와 스레드의 중요한 차이점입니다.

HTML

1. Doctype의 역할은 무엇인가요? 엄격 모드와 혼합 모드를 구별하는 방법은 무엇입니까? 무슨 뜻인가요?

HTML5 왜 fef50554eca1a427827adaa329da8122만 작성하면 되나요?

인라인 요소란 무엇인가요? 블록 수준 요소란 무엇입니까? 공허한 요소는 무엇입니까?

페이지에서 스타일을 가져올 때 link를 사용하는 것과 @import를 사용하는 것의 차이점은 무엇인가요?

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

일반적인 브라우저 커널은 무엇인가요?

html5의 새로운 기능은 무엇이며 어떤 요소가 제거되었나요? HTML5 새 태그의 브라우저 호환성 문제를 어떻게 처리합니까? HTML과 HTML5를 구별하는 방법은 무엇입니까?

HTML 의미론에 대해 어떻게 이해하고 계시나요?

HTML5 오프라인 저장소를 사용하는 방법의 작동 원리를 설명해 주실 수 있나요?

브라우저는 HTML5 오프라인 저장소 리소스를 어떻게 관리하고 로드하나요?

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

iframe의 단점은 무엇인가요?

라벨의 기능은 무엇인가요? 어떻게 사용되나요? (추가 또는 패키지)

HTML5 형식에서 자동 완성 기능을 끄는 방법은 무엇입니까?

브라우저의 여러 탭 간 통신을 구현하는 방법은 무엇입니까?(Ali)

webSocket은 저사양 브라우저와 어떻게 호환되나요? (Alibaba)

페이지 가시성 API의 용도는 무엇입니까?

페이지에 원형 클릭 가능 영역을 구현하는 방법은 무엇입니까?

테두리를 사용하지 않고 1px 높이의 선 그리기를 달성하면 다양한 브라우저의 Quirksmode 및 CSSCompat 모드에서 동일한 효과를 유지할 수 있습니다.

웹페이지 인증코드는 어떤 보안 문제를 해결하는 데 사용되나요?

tite와 h1, b와 Strong, i와 em의 차이점은 무엇인가요?

CSS

표준 CSS 박스 모델을 소개하시나요? IE 하위 버전의 박스 모델과 어떻게 다릅니까?

CSS 선택자란 무엇입니까? 어떤 속성을 상속받을 수 있나요?

CSS 우선순위 알고리즘은 어떻게 계산되나요?

CSS3의 새로운 의사 클래스는 무엇입니까?

div를 중앙에 배치하는 방법은 무엇입니까? 부동 요소를 중앙에 배치하는 방법은 무엇입니까? 절대 위치에 있는 div를 중앙에 배치하는 방법은 무엇입니까?

디스플레이의 가치는 무엇인가요? 그들의 역할을 설명하십시오.

위치의 상대 위치 원점과 절대 위치 원점은 무엇인가요?

CSS3의 새로운 기능은 무엇인가요?

CSS3의 Flexbox(유연한 상자 레이아웃 모델)와 적용 가능한 시나리오를 설명해 주세요.

순수한 CSS를 사용하여 삼각형을 만드는 원리는 무엇인가요?

전체 화면 단어 레이아웃을 디자인하는 방법은 무엇입니까?

일반적인 호환성 문제는 무엇입니까?

리와 리 사이에 보이지 않는 공백이 생기는 이유는 무엇인가요? 해결책이 있나요?

흔히 접하는 브라우저의 호환성은 무엇인가요? 그 이유와 해결 방법, 흔히 사용되는 해킹 기법은 무엇인가요?

CSS 스타일을 초기화하는 이유.

절대 함유 블록의 계산 방법은 일반 흐름의 계산 방법과 어떻게 다릅니까?

CSS의 가시성 속성 중 축소 속성 값은 무엇에 사용되나요? 브라우저마다 차이점은 무엇입니까?

위치, 표시, 여백 축소, 오버플로, 부동 기능이 서로 겹쳐지면 어떻게 되나요?

BFC 사양(블록 서식 컨텍스트)에 대한 이해?

CSS 가중치 우선순위는 어떻게 계산되나요?

플로팅이 왜 발생하는지, 언제 클리어해야 하는지 설명해주세요. 부동 소수점을 지우는 방법

모바일 레이아웃에 미디어 쿼리를 사용해 본 적이 있나요?

CSS 전처리기를 사용하시겠습니까? 그거 좋아해?

CSS 성능을 최적화하고 개선하는 방법은 무엇입니까?

브라우저는 CSS 선택자를 어떻게 구문 분석하나요?

웹 페이지에 홀수 글꼴을 사용해야 하나요, 짝수 글꼴을 사용해야 하나요? 왜?

여백과 패딩은 어떤 시나리오에 적합합니까?

추상 스타일 모듈을 작성하는 방법에 대한 실제 경험이 있습니까? [알리바바 항공여행 인터뷰 질문] 요소의 세로 비율 설정은 컨테이너 높이에 비례하나요?

전체화면 스크롤의 원리는 무엇인가요? 어떤 CSS 속성이 사용됩니까?

반응형 디자인이란? 반응형 디자인의 기본 원칙은 무엇입니까? IE의 하위 버전과 어떻게 호환되나요?

시차 스크롤 효과, 페이지마다 다른 애니메이션을 만드는 방법은 무엇입니까? (맨 위로 돌아가서 아래로 슬라이드하면 다시 나타나게 할 것인지, 한 번만 나타나게 할 것인지?)

::before와 :after에서 이중 콜론과 단일 콜론의 차이점은 무엇인가요? 이 두 의사 요소의 기능을 설명하십시오.

Chrome이 비밀번호를 기억한 후 자동으로 채워지는 양식의 노란색 배경을 수정하는 방법은 무엇입니까?

줄 높이로 무엇을 이해하나요?

요소를 부동으로 설정한 후 요소의 표시 값은 어떻게 되나요? (자동으로 display:block이 됩니다.)

Chrome 지원 텍스트를 12px보다 작게 만드는 방법은 무엇인가요?

CSS를 사용하여 페이지의 글꼴을 더 선명하고 가늘게 만드는 방법은 무엇입니까? (-webkit-font-smoothing: antialiased;)

font-style 속성에 "oblique" 값을 할당할 수 있습니다. oblique는 무엇을 의미하나요?

위치:고정;은 Android에서 유효하지 않습니다. 어떻게 처리해야 하나요?

애니메이션을 수동으로 작성해야 한다면 최소 시간 간격은 얼마이며 그 이유는 무엇이라고 생각하시나요? (Ali)

display:inline-block 공백은 언제 표시되나요? (Ctrip)

overflow: 스크롤할 때 원활하게 스크롤되지 않는 문제는 어떻게 처리하나요?

내부에 두 개의 div가 있는 높이 적응형 div가 있는데 하나는 높이가 100px이고 다른 하나는 나머지 높이를 채워주면 좋겠습니다.

png, jpg, gif 이미지 형식과 이를 언제 사용하는지 설명하세요. webp에 대해 배운 적이 있나요?

쿠키 격리란 무엇인가요? (또는: 리소스 요청 시 쿠키를 방지하는 방법)

스타일 태그를 본문 뒤에 쓰는 것과 본문 앞에 쓰는 것의 차이점은 무엇인가요?

JavaScript

JavaScript의 기본 데이터 유형을 소개합니다.

JavaScript 작성을 위한 기본 사양을 알려주세요.

JavaScript 프로토타입, 프로토타입 체인의 특징은 무엇인가요?

자바스크립트에는 몇 가지 유형의 값이 있나요? (힙: 기본 데이터 유형 및 스택: 참조 데이터 유형), 메모리 다이어그램을 그릴 수 있습니까?

Javascript는 상속을 어떻게 구현하나요?

Javascript에서 객체를 생성하는 방법은 몇 가지입니까?

Javascript 범위 체인 도메인?

This 객체에 대한 이해에 대해 이야기해 보세요.

평가는 무엇을 하나요?

창 개체란 무엇인가요? 문서 개체란 무엇인가요?

null과 정의되지 않음의 차이점은 무엇인가요?

일반 이벤트 리스너 함수(컴퓨터 테스트 문제)를 작성합니다.

[“1”, “2”, “3”].map(parseInt) 답은 무엇입니까?

이벤트와 관련해 IE와 Firefox의 이벤트 메커니즘의 차이점은 무엇인가요? 거품을 멈추는 방법?

클로저란 무엇이며 왜 사용해야 하나요?

JavaScript 코드에서 "use strict"는 무엇을 의미하나요?

객체가 특정 클래스에 속하는지 어떻게 확인하나요?

new 연산자는 정확히 무엇을 합니까?

기본 JavaScript를 사용하여 구현된 기능이 있습니까?

Javascript에는 실행 중에 객체를 검색할 때 절대로 프로토타입을 찾지 않는 함수가 있습니다.

JSON을 아시나요?

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1< ;<24))).toString(16) }) 이 코드가 무엇을 의미하는지 설명해 주실 수 있나요?

JS 로딩을 지연시키는 방법은 무엇인가요?

Ajax란 무엇인가요? Ajax를 만드는 방법은 무엇인가요?

동기식과 비동기식의 차이점은 무엇인가요?

도메인 간 문제를 해결하는 방법

페이지 인코딩과 요청한 리소스 인코딩이 일치하지 않으면 어떻게 해야 하나요?

모듈 개발은 어떻게 하나요?

AMD(Modules/Asynchronous-Definition) 사양과 CMD(Common Module Definition) 사양의 차이점은 무엇인가요?

requireJS의 핵심 원칙은 무엇인가요? (동적으로 로드하는 방법? 다중 로드를 방지하는 방법? 캐시하는 방법?)

requireJS를 직접 설계하고 구현하려면 어떻게 하시겠습니까?

ECMAScript6에 대해 어떻게 이해하고 계시나요?

ECMAScript6에서 클래스를 작성하는 방법은 무엇인가요? 클래스는 왜 나타나는 걸까요?

비동기 로딩 방식은 무엇인가요?

document.write와 innerHTML의 차이점은 무엇입니까?

DOM 작업 - 노드를 추가, 제거, 이동, 복사, 생성 및 찾는 방법은 무엇입니까?

.call( ) 및 .apply()의 의미와 차이점은 무엇입니까?

배열과 객체의 기본 메소드는 무엇인가요?

JS에서 클래스를 구현하는 방법. 이 클래스를 인스턴스화하는 방법

JavaScript에서 범위 및 변수 선언 승격?

고성능 자바스크립트는 어떻게 작성하나요?

어떤 작업으로 인해 메모리 누수가 발생하나요?

JQuery 소스코드를 보셨나요? 구현 원칙에 대해 간략하게 설명해주실 수 있나요?

jQuery.fn의 init 메소드에서 반환되는 이 반환값은 어떤 개체를 참조합니까? 이것을 왜 반환합니까?

jquery에서 배열을 json 문자열로 변환한 다음 다시 되돌리는 방법은 무엇입니까?

jQuery의 속성 복사(확장) 구현 원리와 딥 카피 구현 방법은 무엇인가요?

jquery.extend와 jquery.fn.extend의 ​​차이점은 무엇인가요?

jQuery의 대기열은 어떻게 구현되나요? 대기열은 어디에 사용될 수 있나요?

Jquery에서 바인드(), 라이브(), 대리자() 및 on()의 차이점에 대해 이야기해 주세요.

JQuery는 동시에 여러 이벤트를 객체에 바인딩할 수 있습니다. 어떻게 구현되나요?

커스텀 이벤트에 대해 알고 계시나요? jQuery의 fire 함수는 무엇을 의미하며 언제 사용합니까?

jQuery는 Sizzle 선택기와 어떻게 결합되나요? (jQuery.fn.find() into Sizzle)

jQuery 성능 최적화 방법은?

Jquery와 jQuery UI의 차이점은 무엇인가요?

JQuery 소스코드를 보셨나요? 구현 원리에 대해 간략하게 말씀해 주실 수 있나요?

jquery에서 배열을 json 문자열로 변환한 다음 다시 되돌리는 방법은 무엇입니까?

jQuery와 Zepto의 차이점은 무엇인가요? 각각의 사용 시나리오는 무엇입니까?

jQuery 최적화 방법은?

Zepto에서 클릭연결 문제를 해결하는 방법은 무엇인가요?

jQueryUI 구성 요소를 어떻게 사용자 정의할 수 있나요?

요구 사항: 페이지 작업 중에 전체 페이지를 새로 고치지 않고 브라우저가 앞으로 또는 뒤로 이동할 때 올바르게 응답할 수 있는 웹사이트를 구현합니다. 기술 구현 계획을 알려주시겠습니까?

현재 스크립트가 브라우저 환경에서 실행되고 있는지, 노드 환경에서 실행되고 있는지 어떻게 확인하나요? (알리바바)

모바일 단말기의 최소 터치 면적은 얼마나 되나요?

jQuery의 SlideUp 애니메이션에서 대상 요소가 외부 이벤트에 의해 구동되는 경우 마우스가 외부 요소 이벤트를 빠르고 연속적으로 트리거하면 애니메이션이 지연되면서 반복적으로 실행됩니다.

스크립트 교체 본문을 닫기 전과 페이지를 닫은 후 페이지 하단에 태그를 배치하는 것의 차이점은 무엇인가요? 브라우저는 이를 어떻게 구문 분석합니까?

모바일 단말기에서 클릭 이벤트가 지연되는 이유는 무엇인가요? 이 지연을 해결하는 방법은 무엇입니까? (클릭에는 300ms의 딜레이가 있습니다. Safari의 더블클릭 이벤트 디자인을 구현하기 위해서는 브라우저가 더블클릭을 원하는지 알아야 합니다.)

다양한 JS 프레임워크(Angular, Backbone, Ember, React)를 알고 있습니다. , Meteor, Knockout ...) 각각의 장점과 단점을 알려주실 수 있나요?

Underscore는 어떤 JS 기본 개체를 확장하고 어떤 유용한 기능 메서드를 제공하나요?

JavaScript의 범위 및 변수 선언 호이스팅에 대해 설명하시겠습니까?

어떤 작업으로 인해 메모리 누수가 발생하나요?

JQuery는 동시에 여러 이벤트를 객체에 바인딩할 수 있습니다. 어떻게 구현되나요?

Node.js에 적용 가능한 시나리오는 무엇인가요?

(노드 사용법을 아신다면) 라우트, 미들웨어, 클러스터, nodemon, pm2, 서버사이드 렌더링을 아시나요?

Backbone의 MVC 구현에 대해 설명해주세요.

'프런트엔드 라우팅'은 언제 사용하는 것이 적절한가요? '프런트엔드 라우팅'의 장점과 단점은 무엇인가요?

웹킷이 뭔지 아세요? 브라우저 사용법을 아시나요?

프론트엔드 코드를 테스트하는 방법을 알고 계시나요? 프런트엔드 프로젝트(mocha, sinon, jasmin, qUnit...)를 테스트해 보세요.

프런트엔드 템플릿(콧수염, 밑줄, 핸들바)은 무엇이며 어떻게 사용하나요?

핸들바의 기본 사용법을 간략하게 설명해주세요.

Handlerbars의 기본 템플릿 처리 프로세스를 간략하게 설명합니다. 어떻게 캐시되나요?

js를 사용하여 천 단위 구분 기호를 구현하나요? (출처: 프론트엔드 이주 노동자, 팁: 일반 + 교체)

브라우저 버전을 감지하는 방법은 무엇인가요?

두 개의 클릭 이벤트를 동시에 DOM에 바인딩합니다. 하나는 캡처를 사용하고 다른 하나는 버블링을 사용합니다. 이벤트가 몇 번 실행될지, 버블링 또는 캡처가 먼저 실행될지 알려주세요.

기타 질문

회사의 원래 업무 프로세스는 무엇이며 다른 사람들과 어떻게 협업하나요? 부서간 협력에 대해 어떻게 칭찬하시나요?

가장 어려웠던 기술적 문제는 무엇이었나요? 어떻게 해결하셨나요?

디자인 패턴 싱글턴, 팩토리, 전략, 데크레이터가 무엇인지 아시나요?

흔히 사용되는 라이브러리는 무엇인가요? 일반적으로 사용되는 프런트엔드 개발 도구는 무엇입니까? 어떤 애플리케이션이나 구성 요소를 개발했습니까?

페이지를 재구성하는 방법은 무엇입니까?

IE를 다른 브라우저와 다르게 만드는 기능을 나열해 보세요.

웹사이트의 99%를 재구성해야 한다고 말하는 책은 무엇인가요?

우아한 저하와 점진적인 향상이란 무엇입니까?

공개키 암호화와 개인키 암호화를 이해하셨나요?

웹 애플리케이션이 서버에서 클라이언트로 데이터를 적극적으로 푸시하는 방법은 무엇입니까?

Node의 장점과 단점에 대한 자신만의 의견이 있나요?

어떤 프런트엔드 성능 최적화 방법을 사용해 보셨나요?

http 상태 코드란 무엇입니까? 무슨 뜻인가요?

URL 입력부터 페이지 로딩 완료, 페이지 표시까지의 과정에서 어떤 일이 발생하나요? (과정이 자세할수록 좋습니다.)

일부 지역의 사용자들이 웹사이트가 매우 멈춘다고 보고하고 있습니다. 가능한 원인과 해결 방법은 무엇입니까?

앱을 열고 콘텐츠를 새로 고치는 과정에서 어떤 일이 발생하나요? 느리다고 느껴진다면 문제를 찾는 방법과 해결 방법은 무엇인가요?

프런트엔드 외에도 다른 기술을 알고 있나요? 당신의 가장 큰 기술은 무엇입니까?

편하게 사용하는 에디터와 개발 환경은 무엇인가요?

프론트엔드 인터페이스 엔지니어의 입장을 어떻게 이해하시나요? 그 전망은 무엇입니까?

웹앱, 하이브리드앱, 네이티브앱에 대해 어떻게 생각하시나요?

모바일 프론트엔드 개발을 이해하시나요? (웹 프론트엔드 개발과 가장 큰 차이점은 무엇인가요?)

잔업에 대해 어떻게 생각하시나요?

평소 프로젝트 관리는 어떻게 하시나요?

최근 가장 인기 있는 것에 대해 말씀해 주세요. 어떤 웹사이트를 자주 방문하시나요?

갑자기 대규모 동시성 아키텍처를 설계하는 방법은 무엇입니까?

최근 가장 인기 있는 것에 대해 말씀해 주세요. 어떤 웹사이트를 자주 방문하시나요?

오픈소스 도구인 bower, npm, yeoman, Grunt, gulp, 그리고 npm 패키지의 package.json이 가지고 있는 필수 필드가 무엇인지 아시나요? (이름, 버전 번호, 종속성)

각 모듈의 코드 구조는 비교적 단순해야 하며, 각 모듈 간의 관계도 매우 명확해야 합니다. 이 상태를 유지?

Git은 분기, 비교, 병합을 알고 있나요?

갑자기 대규모 동시성 아키텍처를 설계하는 방법은 무엇입니까?

팀에 인력이 부족하고 기능 코드 작성을 완료하기 위해 초과 근무를 해야 할 때 프런트엔드 코드 테스트를 하시겠습니까?

최근 가장 인기 있는 것에 대해 말씀해 주세요. 주로 어떤 웹사이트를 방문하시나요?

SEO가 무엇인지, 어떻게 최적화하는지 아시나요? 다양한 메타데이터의 의미를 알고 계시나요?

모바일 단말(Android iOS)에서 사용자 경험을 개선하는 방법은 무엇인가요?

간략한 설명 모바일 APP 프로젝트 개발 과정에 대해 말씀해 주세요.

현재 팀에서 당신의 역할은 무엇이며, 어떤 중요한 역할을 하고 있나요?

풀스택 개발자란 무엇이라고 생각하시나요?

가장 자랑스러운 작품을 소개해주세요.

자신만의 기술 블로그가 있나요? 어떤 기술을 사용하시나요?

프론트엔드 보안에 대해 어떻게 생각하시나요?

웹 인젝션 공격에 대해 이해하셨나요? 가장 일반적인 두 가지 공격(XSS 및 CSRF)에 대해 어느 정도 이해하고 계시나요?

프로젝트에서 어떤 인상적인 기술적 문제가 발생했나요? 구체적인 문제는 무엇이고 어떻게 해결했나요? .

최근에는 무엇을 배우고 있나요?

당신의 장점은 무엇인가요? 단점은 무엇입니까?

프론트엔드 팀을 관리하는 방법은 무엇인가요?

최근에는 무엇을 배우고 있나요? 향후 3~5년 후의 계획에 대해 말씀해 주실 수 있나요?