프런트 엔드 인터뷰 (4) 요약 문서의 가장 완벽한 세트

인터뷰를 참고 :

특히 웹 프런트 엔드 기술로, 약 3 분 가장 적합한, 너무 짧은, 너무 오래하지하지 자신을 소개

인터뷰의 양상은 점에 더 말을, 나는 학습, 프로젝트 관행이 미래의 계획에서 설정

세 자기 소개 웹 프런트 엔드 인터뷰를 기록합니다.

출처 : https://www.yinxiangit.com

프런트 엔드 개발자 인터뷰는 지식의 포괄적 인 모음 개요 :

HTML + CSS :
레이아웃, 박스 모델, 우선 순위 선택과 사용, HTML5, CSS3, 모바일 단말 적응 : 웹 표준, 핵심 브라우저의 차이, 호환성, 해킹, CSS의 기본 이해

자바 스크립트 :
데이터 타입, 객체 지향, 상속, 폐쇄, 플러그인, 범위, 크로스 도메인, 프로토 타입 체인, 모듈, 사용자 정의 이벤트, 메모리 누수, 이벤트 메커니즘, 비동기 콜백로드 템플릿 엔진, Nodejs, JSON, 아약스 등 .

다른 지식 :
HTTP, 안전, 규칙, 최적화, 재건, 세 개의 프레임, 팀워크, 유지 보수, SEO, UED, 건축, 경력의 반응, 모바일 측면을 이해, 프런트 엔드

프런트 엔드 엔지니어로,에 관계없이 지식 포인트를 파악해야한다 년 작업의 길이 :

본 방법 및 임의의 두 노드들 사이의 노드 사이의 관계를 이동할 수있다 - 1 DOM 구조.
2, DOM 작업 - 등등, 추가, 복사, 삭제 이동, 생성 및 노드를 찾을 수있는 방법에 대해 설명합니다.
3 이벤트 - IE의 표준 DOM 이벤트 모델의 차이뿐만 아니라 이벤트를 사용하는 방법에 대해 설명합니다.
4, XMLHttpRequest의 -이 무엇 완전한 GET 요청을 수행하는 방법, 오류를 감지합니다.
5, 엄격 모드와 혼합 모드 - 요점이 무엇인지 구별이 두 모델을 트리거하는 방법에 대해 설명합니다.
6 박스 모델 - 마진, 패딩과 테두리 및 IE8 브라우저의 다음 버전 사이의 관계의 박스 모델
(7), 블록 수준 요소와 인라인 요소 - 어떻게 CSS로 제어하는 방법과 합리적인하기 그들이 사용하는
요소를 부동, 8 - 사용 방법, 그들이 어떻게 이러한 문제를 해결하는 문제하고 있습니다.
(9), HTML과 모두 XHTML--의 차이점은 무엇입니까, 당신은 사용 이유를 말할 수있는 하나의 생각.
10, JSON - 효과, 사용, 설계 구조.

HTML (인터뷰)

문서 타입의 역할은? 어떻게 엄격 모드와 무차별 모드를 구별하는 방법? 그 의미는 무엇인가?

1, 에, 전면에 위치한 <! DOCTYPE> 선언 문서 < 전에 HTML> 태그입니다. 그것은이 사양 문서를 해결하기 위해 문서의 유형을 파서 브라우저를 알려줍니다.

브라우저가 지원의 2, 엄격 모드 및 운영 JS 레이아웃 모드는 최고 수준으로 실행됩니다.

3, 무차별 모드로, 느슨한 페이지는 이전 버전과 호환 방법을 표시합니다. 사이트가 작동하지 않습니다 방지하기 위해 이전 버전의 브라우저의 동작을 시뮬레이션합니다.

4, DOCTYPE가 존재하지 않거나 잘못 포맷은 무차별 모드에 제시된 문서에서 발생합니다.

인라인 요소는 무엇인가? 블록 레벨 요소가있다? 빈 (무효) 요소들을입니까?

1, CSS 규격은, 각 표시 소자의 속성은 요소의 타입을 결정을 가지며, 각 표시 소자는 기본 표시 속성 값 DIV "블록"은 "블록 레벨"요소와 같은 디폴트 값을 가지고, 스팬 기본적 디스플레이 속성 값 "인라인"는 "로우"요소.

제 2 라인 소자가 가지고 AB 스팬 IMG 입력 강한 선택 (강조 톤) 블록 레벨 요소 가지고 DIV UL 올 리 하향 DT의 DD의 H1, H2의은 H3 H4 ... P

3, 빈 요소를 잘 알려진 :

<br> <hr> <img> <input> <link> <meta>

리틀 알려져있다 :

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

링크 및 @import의 차이는 무엇입니까?

1, 링크가 속한 XHTML 태그를, 그리고 @의 가져 오기 CSS가 제공됩니다;

페이지가로드 될 때 2, 링크도로드와 @됩니다 가져 오기 페이지가 로딩되기 전에로드가 완료 될 때까지 CSS가 대기 인용;

3, 가져 오기는 IE5 이상에서 인식하고 XHTML 링크 태그, 호환성 문제되는;

4, @ 위 리 · 스타일 링크의 올바른 방법으로 권리를 가져 오기 무게.

어떤 브라우저 커널입니까?

* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；

일반적인 호환성 문제?

1, PNG24 비트 사진 이 솔루션은 만들어, 배경 IE6 브라우저에 표시 PNG8합니다.

2 브라우저의 기본 마진과 다른 패딩,이 솔루션은 글로벌을 추가하는 것입니다

{* 여백 : 0; 패딩 : 0;} 화합.

3, 6으로 양측으로부터 버그 : 블록 속성 태그 플로트 만연있다 마진,

디스플레이는 6으로의 여백 설정보다 큽니다.

(4) 부동 로부터 제조 더블 즉 #box { 플로트는 : 왼쪽; 폭 : 10px; 마진 : 0 0 0 100 픽셀을}

도 5는 이러한 상황 하에서 IE (20)가 생성하는 거리 PX를, 용액된다 첨가 --_ 라벨 스타일 제어 플로트에 표시 인라인 상기 속성 로우로 전환시켰다. (_이 기호는 6으로 인식됩니다)

6 프로그레시브 식별 방법은 점차 지역 인구에서 제외.

(7)은, 첫째, 영리 "9"마크의 사용은 IE의 브라우저는 모든 경우에서 분리. 다음에, 다시 "+"를 사용한다 IE8 및 IE7은 6으로 분리되도록 IE8 독립적으로 확인되었다.

어떤 새로운 HTML5는 이러한 요소를 제거해야이야? 어떻게 새 레이블 HTML5 브라우저 호환성 문제를 해결하기 위해? 어떻게 HTML과 HTML5를 구별하는 방법?

1 HTML5 이제 주로 이미지 위치, 저장, 멀티 태스킹 및 다른 기능에 대해 증가시키기 위해, SGML의 일부분이 아니다.

2, 그리기 캔버스

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

데이터가 손실되지 후 데이터의 장기 저장을위한 로컬 저장 로컬 오프라인 스토리지는 브라우저가 닫혀;

브라우저를 닫을 때 sessionStorage 데이터는 자동으로 삭제됩니다

같은 기사, 바닥 글, 헤더, 탐색, 섹션으로 더 나은 콘텐츠 요소의 의미

폼 컨트롤, 달력, 날짜, 시간, 이메일, URL, 검색

새로운 기술 webworker, websockt, 위치 정보

3 요소 삭제

순수 성능 요소 : BASEFONT, 큰, 센터, 글꼴, S, 파업, TT, U;

요소는 음의 가용성에 영향을 프레임, 프레임, NOFRAMES을;

4, 새로운 HTML5 태그를 지원합니다

document.createElement의 방법에 의해 제조 IE8 / IE7 / IE6 지원 라벨, 당신은 새로운 브라우저가 HTML5 태그를 지원하기 위해이 기능을 사용할 수 있습니다,

브라우저가 새 레이블을 지원하기 위해 후, 라벨은 기본 스타일을 추가해야합니다 :

5 물론, 가장 좋은 방법은 직접 성숙한 프레임 워크를 사용하는 것입니다, 가장 많이 사용의 프레임 워크는 html5shim입니다

<!--[if lt IE 9]>  <scriptsrc="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

시맨틱 이해?

올바른 레이블이 옳은 일을 할!
HTML 의미 론적 구조는 페이지의 콘텐츠를 만들기 위해 브라우저, 검색 엔진 해결에 용이하다;
또한 CCS 스타일의 케이스없이 하나의 문서 형식으로 제공하고 읽기 쉽다.
검색 엔진 크롤러는 SEO 도움이 될 것입니다 각 키워드의 문맥과 무거운의 무게를 결정하기 위해 마커에 의존하고 있습니다.
그래서 웹 사이트의 소스 코드를 읽을 유지 보수 이해 읽기 더 많은 사이트를 차단할 가능성이 쉽다.

HTML5의 오프라인 저장소?

데이터가 손실되지 않는 한 후에 로컬 스토리지 데이터의 장기 보존이 브라우저가 폐쇄되고;

브라우저를 닫을 때 sessionStorage 데이터는 자동으로 삭제됩니다.

이러한 단점을하면 iframe?

iframe에서 메인 페이지의 온로드 이벤트를 차단합니다;
iframe을 공유 연결 풀과 메인 페이지, 브라우저가 동일한 도메인을 연결로 제한됩니다, 그것은 병렬 부하에게 페이지에 영향을 미칠 것입니다.
이 두 가지 단점은 iframe을 사용하기 전에 고려해야 할 필요가있다. 당신은 바람직하게는 자바 스크립트를 통해,은 iframe을 사용해야하는 경우
이 두 가지 문제를 우회 할 수 있도록 동적으로, src 속성은 iframe에 가치를 추가 할 수 있습니다.

쿠키, sessionStorage와 로컬 스토리지의 차이점을 설명?

쿠키는 앞뒤로 브라우저와 서버 사이에 통과했다. sessionStorage하지 로컬 스토리지
로컬 저장 sessionStorage 큰 저장 공간;
sessionStorage와 localStorage를 더 풍부 사용 인터페이스;
sessionStorage 로컬 저장소와 별도의 저장 공간;

CSS (인터뷰)

하나의 CSS 박스 모델에 대해 말씀해?

이, IE 박스 모델, W3C 표준 박스 모델이있다; 컨텐츠 부분이 IE의 테두리와 pading를 포함
박스 모델 : 컨텐츠 (내용), 충전 (패딩), 경계 (마진), 프레임 (테두리)

2, CSS3의 새로운 기능이?

: CSS3 모서리 (국경 - RADIUS 반올림 : 그림자 (그림자 상자 - 8px) , 10px를)
텍스트 효과에 추가 (텍스트 그림자) 선형 구배 (기울기), 회전 (변환)
변형 :이 회전 ( 9deg) (스케일 0.85, 0.90)을 번역 ( 0 픽셀, -30px) 스큐 ( -9deg, 0deg) // 회전, 스케일링, 위치, 기울기
추가 더 CSS 선택기 및 더 많은 배경 RGBA

3. 왜 CSS 스타일을 초기화 할 않습니다.

온되지 않은 경우 브라우저 호환성 문제 때문에, 다른 브라우저는 일부 라벨의 디폴트 값은, 다른 항상 브라우저 화면의 차이가 될 것입니다 CSS 페이지 초기화.

물론, 초기화합니다 스타일 SEO는 어떤 영향력을 가지고 있지만, 모두 물고기와 곰의 앞발을 가질 수 있지만, 경우에 최소한의 영향을 초기화하기 위해 노력했다.

가장 쉬운 방법은 초기화 할 수 있습니다 : * { 패딩 : 0; 여백 : 0;} (권장하지 않음)

도 4는 자신의 역할을 나타내는 표시 값을 나열. 위치 값, 상대 및 절대 위치 결정 원점이 있습니까?

1.
블록 형 디스플레이 소자와 동일한 블록.
없음 기본. 표시 소자 행의 형식과 동일.
인라인 블록 디스플레이와 동일한 행 내의 요소이지만, 블록 형 디스플레이 소자와 동일한 콘텐츠.
리스트 항목의 표시 소자로서 착안 블록의 유형 및 스타일 태그 목록을 추가한다.
2.
순수한
절대 위치에 생성 요소에 대하여 상기 제 부모 요소는 고정 위치의 외측에 배치된다.
고정 (오래된 IE를 지원하지 않습니다)
브라우저 창의 위치에 대하여 소자 절대 위치를 생성한다.
상대적인
정상 위치로의 상대 위치, 상대 위치 요소를 발생시킨다.
정적 기본. 어떤 위치 요소는 정상 스트림에 표시되지 않습니다
(위쪽, 아래쪽, 무시 좌, 우측 Z-INDEX 문).
부모 요소의 위치 속성을 상속에서 지정된 값을 상속.

5, 어떻게 전체 화면 "제품"워드 레이아웃을 설계?

간단한 방법 :

100 % 위 DIV 폭
플로트와 다음의 두 가지 넓은 DIV 각각 50 %, 선 또는 인라인을 변경하지 않도록.

자바 스크립트 (인터뷰)

1 JS 데이터 유형이 있습니까? 대해서 typeof의 결과는 데이터 유형이 무엇 연산자?

데이터 유형은 두 부분으로 구성되어 있습니다 :

기본 데이터 형식 : 정의되지 않은, 널, 부울, 숫자 및 문자열

참조 데이터 형식 : 배열, 객체

운영자 유형 대해서 typeof 결과 :

숫자, 문자열 정의 부울 객체 함수

2.null, 미정 차이?

널 객체, "NULL"의 값으로 정의된다 나타내고;

정의는이 값을 가지고 있지 않았다.

3. 변수가 정의되어 있지 않은 방법 분석

bianliang 대해서 typeof == "미등록"

4. 변수가 배열 도착하는 경우 (이 문제는 사용되지 대해서 typeof) 분석 방법

ARR instanceof를 배열

5. 이벤트 대표는 무엇입니까

이벤트가 이벤트를 처리하지 않습니다 자체를 대상으로하지만, 자신의 부모 또는 조상 요소, 또는 루트 요소 (문서)를 다루는 작업을 위탁하는 이벤트 위임한다.

매우 중요한 두 가지 방법 6. 설명 JSON 객체

JSON에 JSON.parse () // JSON 객체 문자열

JSON.stringify () 문자열로 // JSON 객체

7. 함수 getRandomNumber (startNum, endNum)를 작성 endNum에 StartNum 사이의 난수를 삭제

function getRandomNumber(startNum,endNum){
        var endRand = endNum - startNum + 1;
        //0~1中间的16位数字
        var randNum = Math.random();
        //随机取出来0~9之间的任意一个数字
        randNum = Math.floor(randNum * endRand);
        return randNum+startNum;
}

문자열에 공백을 제거하는 일반적인 함수를 작성 8.?

String.prototype.strim = function(){
return this.replace(/(^s|s$)/g,””);}

다른 문제 (인터뷰)

1, 프로세스가 자리를 차지하게 무엇을 페이지에 URL을 입력에서 디스플레이 페이지로드 완료?

查找浏览器缓存     
DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求    进行HTTP协议会话    客户端发送报头(请求报头)    
服务器回馈报头(响应报头)    html文档开始下载    文档树建立，根据标记请求所需指定MIME类型的文件    
文件显示浏览器这边做的工作大致分为以下几步： 加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

2, HTTP 상태 코드는 그이다? 그것은 무엇을 의미 하는가에 해당합니까?

100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。 
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
400-499 用于指出客户端的错误。
400   语义有误，当前请求无法被服务器理解。
401   当前请求需要用户验证 
403  服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。 
503 – 服务不可用

3, 정기적으로 신원 번호를 확인?

1、//身份证正则表达式(15位)
isIDCard1=/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/;
2、//身份证正则表达式(18位)
isIDCard2=/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$/;
身份证正则合并：(^d{15})|(d17([0−9]|X))

4 도메인 간 솔루션 개요

1 : JSONP 사용, 즉 JSON 패딩 (내부 기입)과는 이름에서 알 그것은 JSON 박스를 채우는 것이다
2 : 직접 요청 헤더 헤더 액세스 제어 - 허용 출처 지정된 데이터 도메인 얻을 수 제공 서버 측 도메인 간 리소스 액세스 CORS (크로스 - 리소스 공유)에 설치
3 : 직접 요청 픽처
하위 5 걸쳐 : 크로스 도메인 수신 데이터 window.name 의해 4 document.domain을 수정하여
6 : 사용 크로스 도메인 window.postMessage 방법 HTML5

5, TCP / IP 4 층 프로토콜 구조?

아래 순서대로 위에서부터 :

도 1을 참조하면, 애플리케이션 층 (FTP, 텔넷, SMTP, RIP, NFS, DNS)
(2), 전송 계층 (TCP, UDP)
(3), 인터넷 계층 (IP, ICMP, ARP, RARP)
(4), 네트워크 인터페이스 층

5 층 프로토콜 구조?

응용 프로그램 계층
전송 계층
네트워크 계층
데이터 링크 계층
물리 계층

OSI 일곱 계층 구조?

응용 프로그램 계층
프리젠 테이션 층
세션 계층
전송 계층
네트워크 계층
데이터 링크 계층
물리 계층

브라우저 출처 정책 :

브라우저 보안은 "동일 출처 정책"(동일 출처 정책)의 초석입니다. 소위 "상동"은 "3 개의 동일한"을 의미한다 :

같은 프로토콜
같은 도메인
같은 포트