웹 프런트 엔드 인터뷰 지식 통합

A, HTML5의 새로운 기능

로컬 저장소 webStorage 웹 소켓 webworkers
새로운 지리적 위치 API 용
의 CSS3에 대한 지원
캔버스
멀티미디어 레이블을
새로운 형태의 요소 형
구조 태그 : 헤더 탐색 문서를 따로 바닥 글
form 태그 : 이메일 URL 범위 날짜
미디어 태그 : 비디오 오디오를
......

두, CSS3의 새로운 기능

필렛 : 경계 반경
그림자 : 상자 그림자
배경 농도 기울기 : HTTPS : //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
가요 성 파우치 레이아웃 : HTTPS : //www.jianshu.com / P / 5856c4ae91f2
전환
애니메이션
2D / 3D 변환
새로운 속성과 선택기
......

세 차이, webstorage 및 쿠키

1. 용량 : 쿠키 4K, webStorage 5M.
2, 장기간 저장이 : 하나의 세션 저장소를 기반으로 로컬 스토리지 장기 보관, sessionStorage는 쿠키 때 가게 긴 설정해야합니다.
3, 서버 상호 작용 : 쿠키 정보는 기본적으로 서버에 때 서버를 보내와 상호 작용 할 수있다; webStorage는 로컬로 저장.

넷째, 여러 가지 방법으로 반응 레이아웃을 달성하기 위해

레이아웃 여러 가지 방법 : 정적 레이아웃, 적응 레이아웃, 레이아웃 흐름 반응 레이아웃은 탄성 레이아웃.

네이티브 코드 응답 레이아웃, 미디어 쿼리 : HTTPS : 같은 //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries 설명 응용 프로그램 프레임 워크 부트 스트랩.

다섯, JSONP 원칙

그 고객이 자유롭게 자동으로 반환 된 데이터를 처리하기 위해 그 기능을 사용자 정의 할 수 있도록 서버 이름에서 반환 된 데이터의 함수로이 콜백 매개 변수는 JSON 데이터를 포장 할 때 다음 서버에 콜백 매개 변수를 전달 할 수 있습니다.

참조 : https://www.cnblogs.com/soyxiaobi/p/9616011.html "철저하게 원칙과 JSONP 이해"

여섯째, 폐쇄

함수는 다른 함수의 변수에 액세스 할 수있다. 반환 값은 다른 함수의 함수 인 경우 내부 상위 함수의 변수, 리턴이 기능은 외부 폐쇄 생성을 수행하는 경우,이 함수 호출을 리턴한다.
참조 :
1, 폐쇄 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
2, JS GET 다양한 구덩이의 전체 폐쇄 https://www.jianshu.com/p/을 알고 26c81fde22fb

세븐, 가비지 컬렉션 메커니즘을 JS

라는 기본 가비지 컬렉션 알고리즘 "마크 - 스윕은"정기적으로 다음과 같은 "쓰레기 수집"단계를 수행합니다 :

1, 가비지 컬렉터는 루트와 "마크"(기억)을 얻을 수 있습니다.
이 다음은 그들에서 "표시"모든 참조에 액세스 할 수 있습니다.
도 3은, 다음 오브젝트 태그와 라벨 참조들을 액세스한다. 모든 개체는 그래서 더 이상 두 번 같은 개체에 액세스 것, 기억하는 액세스되지 않습니다.
네, 접근이 참조되지 때까지 지금까지 (루트에서 액세스 할 수 있습니다)에 있도록.
도 5는 표시된 오브젝트에 더하여 모든 개체가 제거된다.

참조 : HTTPS : //segmentfault.com/a/1190000018605776

여덟, 브라우저 캐시 메커니즘

기존의 방법을 제어하기위한 헤더 캐싱 메커니즘의 필드가 새로운 기록 방법 더 많은 옵션의 무리에 비해 캐시 제어의 절대 값을 만료, 녹화 시간은 만료 된 캐시를하지 않으면 캐시는 캐시가 만료 감지 얻기 위해 상대 값은 우선 순위에서,이다 인수를 사용할 수없는 경우 메모리 만료 된 경우 둘째, 서버 캐시와 협상 하드 디스크는 계속 사용할 수, 버퍼를 가져올 수 있습니다.

참조 : HTTPS : //juejin.im/entry/5ad86c16f265da505a77dca4

나인, 내장 된 객체와 호스트 오브젝트, 로컬 객체를 JS

객체, 함수, 문자열, 배열 : 로컬 객체는 다음을 포함 , 부울, 번호.
내장 객체 : 수학을.
호스트 개체 : BOM / DOM 객체입니다.

텐, HTTP 요청 처리

대답 밖으로 참조 : HTTPS : //blog.csdn.net/wolf_love666/article/details/93600904

일레븐, VUE과 차이점은 장점과 단점이 반응

참조 : HTTPS : //segmentfault.com/a/1190000016344599

열두, VUE 방식으로 결합 원리

데이터 바인딩을 수행하는 VUE 방법을 납치 데이터를 통해 배운 핵심은의 Object.defineProperty (), 모니터 데이터 변경의 목적으로 재산의 하이재킹을 달성하는 방법은,이 방법은 의심 할 여지없이이 문서입니다입니다 하여 가장 기본적인 내용 중 하나가, 양방향 바인딩 MVVM을 달성하기 위해, 가장 중요한, 다음을 달성 할 필요가있다 :

모든 속성 데이터 객체를 수신 할 수있는 관찰자 청취자 데이터를 구현, 최신 값이 변화와 통지 가입자 될 수 있습니다 얻을 수 있습니다.
커맨드 파서는 각 명령의 요소 노드 스캐닝, 컴파일을 달성 교체 지시 템플릿에 따라서 데이터를 분석하고, 대응하는 바인딩 업데이트 함수.
와쳐가 컴파일 옵저버를 연결하는 다리와 같이 가입 할 수있는 각각의 속성의 변화를 통지 달성 콜백 함수는 뷰를 갱신하는 결합 된 대응 명령을 실행한다.
MVVM 입력 기능, 세 위의 통합.

defineProperty 참조 : HTTPS : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

열세, HTTP 일반적인 상태 코드

상태 코드	의미
1**	정보, 서버는 요청을 받으면 요청자는 작업을 계속해야합니다
이 **	성공적인 작업을 성공적으로 수신 및 처리
삼**	리디렉션, 추가 작업이 요청을 완료하는 데 필요한
4 **	클라이언트 오류, 요청에 구문 오류가 있습니다 또는 요청을 수행 할 수
5 **	서버 오류 서버에 오류가 요청을 처리하는 동안 발생

열네, JS 클래스 상속 방법

그래서 생성자 상속 프로토 타입 상속 고전 상속 기생 상속 및 함께 프로토 타입 상속 체인.

여러 지점을 가지고이 다섯,

: 사가지이 점
하나, 지구 환경 : 윈도우
2, 개체 환경 : 개체
3, 생성자 환경 : 객체의 인스턴스를
발신자 : 4, 이벤트 객체
요약 : 감독 누가 호출합니다.
지시하는 방법은 두 가지 변형 :
1 호 / 실시 예에 적용한다.
(2), 로컬 변수의 정의 방법이 = VAR;

열 여섯, ES6 어떤 새로운 기능이 있습니다

CONST, 기능, 확장 문자, 해체 할당 개체 구문 설탕, 문자열 템플릿을 화살표하자

세븐틴, 웹팩 관련 구성 특성

입구 수출 서류 :

entry: {
    index: __dirname + '/src/main.js',  // __dirname表示当前项目的根路径。
    goods: __dirname + '/src/goods.js'
}, 
output: {
    path: __dirname + '/dist',
    filename: '[name].js'
},

HTTP 프록시 :

devServer: {
    contentBase: __dirname + '/dist',
    port: 3000,
    inline: true,
    // 每当我们访问/a地址的时候，就把请求转发给target地址的服务器。
    proxy: {
        '/a': {
            target: 'http://xushanxiang.com:3000',
            secure: false,
            changeOrigin: true
        }
    }
}

자원지도 : devtool '소스 맵'

지역 웹 서비스 구성 :

npm i [email protected] -g

// 安装的webpack-dev-server模块配置信息
devServer: {
    contentBase: __dirname + '/dist', // 指定本地web服务器根路径
    port: 3000,
    inline: true // 当源文件改变后，自动在浏览器页面刷新
}

CSS 파일의 압축을 풉니 다

npm i extract-text-webpack-plugin -D

// webpack.config.js
let Ext = require('extract-text-webpack-plugin');

module: {
    rules: [
        { test: /\.css$/, loader: Ext.extract('css-loader') },
        { test: /\.less$/, loader: Ext.extract('css-loader!less-loader') }
    ]
},
plugins: [
    new Ext('index.css')
],

웹팩 별칭을 구성

resolve:{
    //配置别名，在项目中可缩减引用路径
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '&': resolve('src/components'),
      'api': resolve('src/api'),
      'assets': resolve('src/assets')
    }
  }

여덟, 모듈 형

nodejs使用的是commonjs规范
注意:  nodejs虽然原生支持es6 但它并不支持 es6的import规范

导入:
let xx = require("xxx")

导出:
//一个文件内只能使用一次
module.exports = Object | Function | Array | String | Number | Boolean

//一个文件可以使用多次
exports.xxx = Object | Function | Array | String | Number | Boolean

下列写法不被允许  它会改变exports对象的引用导致程序运行出错
exports = {
    xxx : "text"
}

es6的import规范

方式1
导入:
    import XXX from "xxx"
导出:
    export default xxx
    该种方式一个文件内只能使用一次

方式2
导入:
    import {XXX} from "xxx"

    import {XXX as YYY} from "xxx" //将模块XXX给个别名为YYY
导出:
    export let | const | var | function | class | interface XXX = ....
    
    或者
    let(可以是其他声明符) XXX = ....
    export {XXX}

上述导出方式可以在同一个文件内使用多次
还有AMD规范和CMD规范

아홉 번째, 관찰자 패턴 무엇인가

게시 및 구독 모델 :라고도합니다.
객체들 간의 다양한 관계를 개체의 상태가 변경 자동 종속 객체 방송 통지를 통지 될 때.
예를 들어 값을 기준으로 상위 컴포넌트 VUE 중성자 성분 $를 사용하여 서브 어셈블리는 부모 구성 요소가 이벤트가 수신 될 수있는 사용자 정의 이벤트 이름을 방출한다. 에 중앙 이벤트 버스 개의 발광뿐만 아니라.

XX, 무엇 MVC MVP MVVM

M은 데이터 영역, V보기 층, C 층 로직이다.

MVP (모델 -보기 - 발표자) IBM 자회사 탈 리전트가 제안한 수정 된 MVC 모델이다. 그리고 MVC는 점에서 동일하다 : 비즈니스 로직, 모델 관리 데이터에 대한 컨트롤러 / 발표자 책임,보기 디스플레이는 통신의 방향을 변경하면서 컨트롤러, 발표자 이름 만 책임이 있습니다.

최우수 선수 (MVP)에서보기 직접 모델을 사용하지, 그들 사이의 통신은 발표자 (컨트롤러 MVC), 발표자 내부의 모든의 상호 작용 촬영 장소에 의해 수행된다.

MVVM = + MVP 새로운 기능 (결합 등)

브라우저 호환성 문제를 해결하는 방법 XXI

1、默认padding，margin不同
解决：自定义初始化css

2、在一个div中放一个img，但是img的下方和div之间有3px的间隔。
这是浏览器的解析问题，不同的浏览器间隔的还不同。
foxfire是5px，chrome是3px。
解决：/*方式一*/
div {font-size: 0;}
/*方式二*/
img{display: block;}
/*方式三*/
img{vertical-align: top;}

3、几个img标签放在一起的时候，有些浏览器会有默认的间距
解决：使用float属性为img布局

4、解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
引入html5shiv.js文件

5、针对IE属性 css hack
6、-ms- -o- -webkit- -moz-
7、清除浮动 clearfix 
8、边距重叠
解决：加一个父元素，父元素使用overflow: hidden;

9、IE9不能使用opacity
opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

XXII는 성능을 최적화하는 방법, 페이지로드 시간을 단축

1, HTTP 요청 줄이기 위해
2를 사용하여 CDN 가속
추가 3 헤더 만료
4, 바닥에 머리 CSS의 패턴, 스크립트 스크립트
(5), CSS와 자바 스크립트, 외부의 사용
......

XXIII, 아약스를 달성하기위한 조치의 기본

let xhr = new XMLHTTPRequest();
xhr.open('get', 'xxx.php?id=1',true);
xhr.send()
xhr.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        console.log(this.response)
    }
}

, 가져 오기, Axios의를 jQuery를 아약스 비교

스물 넷, 뷰

글로벌 부품과 서브 어셈블리를 만드는 방법
소품을 정의하는 방법
소품의 종류를 확인하는 방법
재산의 계산 무엇입니까
데이터 모니터 (시계)
일반적인 명령의 V-경우 V 쇼 루프 반복
필터를 정의 (로컬 전역)
인터 조립 통신
슬롯 슬롯 콘텐츠
의 핵심적인 역할 V-에 대한
VUE 라우터
vuex
......

스로틀 XXV 및 손떨림 방지 기능

유형	개념	신청
스로틀	이벤트가 모든 너무 자주 트리거를 트리거 한 번 (여러 번 트리거 할 수 있습니다)	스크롤, 크기 조정 이벤트는 일정 기간을 여러 번 트리거
흔들	트리거 A와 일정 기간 동안 이벤트 트리거 조치, 후	스크롤, 크기 조정 이벤트는 트리거 이후의 일정 기간을 트리거

스로틀

// html 部分
<style>
*{padding:0;margin:0;}
.scroll-box{
    width : 100%;
    height : 500px;
    background:blue;
    overflow : auto;
}    
.scroll-item{
    height:1000px;
    width:100%;
}
</style>
<body>
<div class="scroll-box">
    <div class="scroll-item"></div>
</div>
</body>

// js 部分
let throttle = function (func, delay) {
let timer = null;
return function(){
  if (!timer) {
    timer = setTimeout(() => {
      func.apply(this, arguments);
      // 或者直接 func()
      timer = null;
    }, delay);
  }
};
};
  
  // 处理函数
  function handle() {
  console.log(arguments)
  console.log(Math.random());
  }
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle,3000));

흔들

// html 部分同上
// js 部分
let debounce = function (fn, wait) {
let timeout = null;
return function () {
  if (timeout !== null) clearTimeout(timeout);//如果多次触发将上次记录延迟清除掉
  timeout = setTimeout(() => {
    fn.apply(this, arguments);
    // 或者直接 fn()
    timeout = null;
  }, wait);
};
}
 // 处理函数

function handle() {
    console.log(arguments)
    console.log(Math.random());
}
// 测试用例
document.getElementsByClassName('scroll-box')[0].addEventListener("scroll", debounce(handle, 3000));

당신은 또한 아래에이 기사를 읽고 참조 할 수 있습니다 :

1 https://segmentfault.com/a/1190000020759924 "거의 1.5W [워드 의해 고급 초보자에서 기본면 JS"

2 "프론트 엔드 개발자 인터뷰 지식 강의"https://www.cnblogs.com/jill1231/p/jill1231_web_qianduankaifa.html

3, "인터뷰 (답변) 지식 마무리의 프론트 엔드"https://www.jianshu.com/p/0b2861bd2068

4, "고위 프런트 엔드 인터뷰 지식 요약"https://www.jianshu.com/p/fd742b49a25c

5, "프런트 엔드 인터뷰 지식"https://www.cnblogs.com/lvonve/p/11936026.html

전송 : https://xushanxiang.com/2019/12/web-front-end-interview-knowledge-points.html