2019前端面试准备

时间 2019-11-09

原文原文链接

1.html
　　1）什么是html
　　　　超文本标记语言，一个网页文件
　　2）DOCTYPE有什么做用
　　　　告诉浏览器使用哪一个版本的HTML规范来渲染文档
　　3）介绍一下你对浏览器内核的理解，常见的浏览器内核有哪些
　　　　主要分红两个部分：渲染引擎和JS引擎。
　　　　渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，而后输出到显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不一样。
　　　　JS引擎：解析和执行JavaScript来实现网页的动态效果。
　　　　常见的浏览器内核：
　　　　Trident：IE，360，搜过浏览器；
　　　　Gecko：Firefox
　　　　Blink：Opera；
　　　　Webkit：Safari，Chrome
　　4）html5的新特性
　　　　01 添加语义标签 header footer
　　　　02 加强型表单 placeholder required
　　　　03 视频和音频
　　　　04 canvas绘图
　　　　05 svg绘图
　　　　06 地理定位
　　　　07 web storage
　　　　08 websocket
　　　　09 拖放api
　　　　10 web workerjavascript

　　5）简述一下src与href的区别css

　　　　01 href 是指向网络资源所在位置，创建和当前文档之间的连接，用于超连接。html

　　　　02 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。vue

　　2.css
　　　　1）垂直居中几种方式
　　　　　　01.display: flex
　　　　　　　　.outer {
　　　　　　　　　　display: flex;
　　　　　　　　　　align-items: center;
　　　　　　　　　　justify-content: center;
　　　　　　　　}
　　　　　　02.absolute + transform
　　　　　　　　.outer {
　　　　　　　　　　position: relative;
　　　　　　　　}
　　　　　　　　.inner {
　　　　　　　　　　position: absolute;
　　　　　　　　　　top: 50%;
　　　　　　　　　　left: 50%;
　　　　　　　　　　transform: translate(-50%, -50%);
　　　　　　　　}
　　　　　　03.absolute + margin: auto
　　　　　　　　.outer {
　　　　　　　　　　position: relative
　　　　　　　　}
　　　　　　　　.inner {
　　　　　　　　　　position: absolute;
　　　　　　　　　　top: 0;
　　　　　　　　　　left: 0;
　　　　　　　　　　bottom: 0;
　　　　　　　　　　right: 0;
　　　　　　　　　　margin: auto;
　　　　　　　　}
　　　　2）常见布局
　　　　　　body {
　　　　　　　　display: flex;
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.left {
　　　　　　　　background: blue;
　　　　　　　　flex: 200px 0 0;
　　　　　　}
　　　　　　.middle {
　　　　　　　　background: red;
　　　　　　　　flex: 1;
　　　　　　}
　　　　　　.right {
　　　　　　　　background: green;
　　　　　　　　flex: 0 0 200px;
　　　　　　}
　　　　3）css3的新特性
　　　　　　01 动画 animation
　　　　　　02 过渡 transition
　　　　　　03 多媒体查询
　　　　　　04 多背景图
　　　　　　05 阴影
　　　　　　06 圆角
　　　　　　07 渐变
　　　　　　08 字体 @font-face
　　　　　　09 转换（旋转缩放）
　　　　　　10 flex
　　　　4）动画
　　　　　　01 用keyframes建立动画
　　　　　　02 用animation绑定到某个选择器，设置名称和时长
　　　　　　　　div
　　　　　　　　　　{
　　　　　　　　　　　　width:100px;
　　　　　　　　　　　　height:100px;
　　　　　　　　　　　　background:red;
　　　　　　　　　　　　animation:myfirst 5s;
　　　　　　　　　　}html5

　　　　　　　　@keyframes myfirst
　　　　　　　　{
　　　　　　　　　　0% {background:red;}
　　　　　　　　　　100% {background:yellow;}
　　　　　　　　}
　　　　5）清除浮动
　　　　　　01 设置父元素overflow属性为hidden
　　　　　　02 使用clear：both
　　　　　　03 在浮动元素后面添加一个空标签
　　　　　　04 使用伪元素：after
　　　　6）px，em，rem 的区别
　　　　　　px像素相对长度单位。像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　　　　　rem也是相对长度单位，但相对的是HTML根元素。只修改根元素就成比例地调整全部字体大小java

　　　　7）盒子模型react

　　　　　　盒子模型包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分
　　　　　　webpack

3.js
　　1）基本类型和引用类型
　　　　基本类型：
　　　　　　01 类型：number string undefined null boolean
　　　　　　02 基本类型的值是不可变得
　　　　　　03 基本类型的比较是值的比较
　　　　　　04 基本类型的变量是存放在栈内存的
　　　　引用类型：
　　　　　　01 引用类型的值是可变的
　　　　　　02 引用类型值可添加属性和方法
　　　　　　03 引用类型存储的是地址（指针）。当你建立了一个引用类型的时候，计算机会在堆内存中帮咱们开辟一个空间来存放值，栈区内存保存变量标识符和指向堆内存中该对象的指针，也能够说是该对象在堆内存的地址。复制对象时，会在栈内存中添加一个指针，跟被复制的指针指向堆内存中相同的一个值，因此修改其中一个对象，另外一个都会受到影响
　　　　　　04 引用类型的比较是引用地址的比较
　　2）typeof和instanceof的区别
　　　　typeo
　　　　　　01 检测变量是字符串、数值、布尔值仍是undefined的最佳工具。
　　　　　　02 typeof 来获取一个变量是否存在，若是要去使用 if 判断（未声明）则会出错。
　　　　instanceof
　　　　　　01 instanceof运算符用来判断用于判断左侧参数是否属于右侧的实例
　　　　　　　　obj instanceof Object 检测Object.prototype是否存在于参数obj的原型链上。
　　　　　　02 typeof 对于对象来讲，除了函数都会显示 object，因此说 typeof 并不能准确判断变量究竟是什么类型。若是咱们想判断一个对象的正确类型，这时候能够考虑使用 instanceof
　　　　　　　　([1,2.3]) instanceof Array // true
　　　　　　　　({}) instanceof Object // true
　　　　　　　　(new Date) instanceof Date // true
　　　　　　　　(function(){}) instanceof Function // true
　　3）typeof null 为何等于object
　　　　原理是这样的，不一样的对象在底层都表示为二进制，在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0，天然前三位也是 0，因此执行 typeof 时会返回“ object ”。100：字符串，数据是字符串。110：布尔类型，数据是布尔值。
　　4）怎么检测对象类型
　　　　Object.prototype.toString.call(obj).slice(8, -1)
　　5）this
　　　　this是对应执行环境。this是在调用时被绑定的，取决于函数的调用方法。
　　　　默认绑定、隐式绑定、显示绑定、new 绑定。优先级从低到高。
　　　　01.默认绑定：
　　　　　　最经常使用也是函数调用类型，当只有一个独立函数时，this指向的是window对象
　　　　02.隐式绑定
　　　　　　函数调用的位置有上下文环境（对象调用模式，函数是一个对象的方法）
　　　　03.显示绑定
　　　　　　显示绑定就是经过apply，call，bind，直接将函数中的this绑定到想要的对象上
　　　　04.构造函数模式
　　　　　　建立一个构造函数的实例，构造函数中的this会绑定到这个实例对象上
　　　　6）做用域链和闭包
　　　　　　做用域链
　　　　　　　　做用域分为全局做用域和局部做用域，全局做用域在代码中的任何地方均可以被访问，局部做用域只在固定的代码片断中能够访问到。
　　　　　　　　每次进入一个新的执行环境，都会建立一个用于搜索变量和函数的做用域链。做用域链是函数被建立的做用域中对象的集合。做用域链能够保证对执行环境有权访问的全部变量和函数的有序访问。标识符解析是沿着做用域一级一级的向上搜索标识符的过程，直到找到标识符（找不到报错）。
　　　　　　　　做用域优先级：变量 > 普通函数 > 参数 > 提高
　　　　　　闭包
　　　　　　　　函数 A 内部有一个函数 B，函数 B 能够访问到函数 A 中的变量，那么函数 B 就是闭包。
　　　　　　　　优势：当全局变量使用，避免全局污染
　　　　　　　　缺点：容易形成内存泄漏
　　7）原型与原型链css3

　　　　原型是一个普通的对象，原型对象是构造函数的一个实例，主要用于继承。
　　　　在建立对象的时候，都有一个叫作__proto__ 的内置属性，用于指向建立它的构造函数的原型对象，__proto__ 将对象和原型链接起来组成了原型链
　　　　对象拥有这样一个原型链之后，当访问对象的属性时，先查找自身是否有该属性，当找不到该属性时，该对象就沿着原型链依次去查找，找不到返回undefined
　　　　Object.prototype.__proto__ 是 null，表示 obj 对象原型链的终结
　　　　在原型对象上定义方法和属性，是为了被子类继承和使用
　　　　Object 是全部对象的爸爸，全部对象均可以经过 __proto__ 找到它
　　　　Function 是全部函数的爸爸，全部函数均可以经过 __proto__ 找到它nginx

　　8）继承
　　　　01 原型链继承
　　　　function Parent() {
　　　　　　this.name = 'mike';
　　　　}
　　　　function Child() {
　　　　　　this.age = 12;
　　　　}
　　　　Child.prototype = new Parent();
　　　　var child = new Child();
　　　　alert(child.name) // 'mike'
　　　　02 原型式继承
　　　　　　function obj(o) {
　　　　　　　　function F() { }
　　　　　　　　F.prototype = o;
　　　　　　　　return new F();
　　　　　　}
　　　　　　var box = {
　　　　　　name: 'trigkit4',
　　　　　　arr: ['brother', 'sister', 'baba']
　　　　　　};
　　　　　　var b1 = obj(box);
　　　　　　alert(b1.name);//trigkit4;
　　9）JS执行底层略
　　10）浅拷贝和深拷贝
　　浅拷贝
　　　　let a = {
　　　　　　age: 1
　　　　}
　　　　let b = Object.assign({}, a) // 或者 let b = { ...a }
　　　　浅拷贝只解决了第一层的问题，若是接下去的值中还有对象的话，二者享有相同的地址，会相互影响
　　深拷贝
　　　　01 JSON.parse(JSON.stringify(object))
　　　　缺陷：
　　　　　　会忽略 undefined
　　　　　　会忽略 symbol
　　　　　　不能序列化函数
　　　　　　不能解决循环引用的对象
　　　　02 递归

    function deepCopy(params) {
      var obj;
      if (typeof params === 'object') {
        if (Array.isArray(params)) {
          obj = [];
          for (var i = 0; i < params.length; i++) {
            obj.push(arguments.callee(params[i]))
          }
        } else {
          obj = {};
          for (var c in params) {
            obj[c] = arguments.callee(params[c]);
          }
        }
      } else { return params; }
      return obj;
    }

　　11）es6的经常使用方法
　　　　01.let和const var
　　　　　　var：有变量提高，可重复生命，var 在全局做用域下声明变量会致使变量挂载在 window 上
　　　　　　let和const：没有变量提高，不能重复声明
　　　　02.箭头函数的 this
　　　　　　001 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
　　　　　　002 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
　　　　　　003 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替
　　　　03.promise
　　　　　　Promise是一个对象，有then()方法的对象,Promise 是异步编程的一种解决方案。有三种状态
　　　　　　等待中（pending）
　　　　　　完成了（resolved）
　　　　　　拒绝了（rejected）
　　　　　　这个承诺一旦从等待状态变成为其余状态就永远不能更改状态了，也就是说一旦状态变为 resolved 后，就不能再次改变
　　　　　　优势：Promise 的写法是回调函数的改进，使用then方法之后，异步任务的两段执行看得更清楚了。then将原来异步函数的嵌套关系转变为链式步骤,很好地解决了回调地狱的问题
　　　　　　缺点：Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，无论什么操做，一眼看去都是一堆 then，原来的语义变得很不清楚。
　　　　04.async await
　　　　　　一个函数若是加上 async ，那么该函数就会返回一个 Promise对象
　　　　　　await等待右侧表达式的结果，这个结果是promise对象或者其余值。
　　　　　　若是它等到的不是一个 promise 对象，那 await 表达式的运算结果就是它等到的东西。
　　　　　　若是它等到的是一个 promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 promise 对象 resolve，而后获得 resolve 的值，做为 await 表达式的运算结果。
　　　　　　优势：代码简洁、几乎和同步代码同样，可读性好
　　　　　　缺点：滥用 await 可能会致使性能问题，由于 await 会阻塞代码
　　　　05.字符串模板
　　　　　　let time = `now time is ${new Date}`
　　　　06.new Set 数组去重
　　　　　　[...new Set([1,2,3,4,2,3,3])]//[1,2,3,4]
　　12）ts
　　　　支持es6；支持类型检测，减小你在开发阶段犯错误的概率
　　13）call apply bind
　　　　改变this的指向
　　　　call 第二个参数接受的是若干个参数列表
　　　　apply 第二参数接收的是一个包含多个参数的数组
　　　　bind 返回一个函数，须要手动去调用
　　14）类型转换略
　　15）new的原理
　　　　在调用 new 的过程当中会发生以上四件事情：
　　　　　　新生成了一个对象
　　　　　　连接到原型
　　　　　　绑定 this
　　　　　　返回新对象
　　　　　　代码实现以下
　　　　　　function create(Con, ...args) {
　　　　　　　　let obj = {}
　　　　　　　　Object.setPrototypeOf(obj, Con.prototype)
　　　　　　　　let result = Con.apply(obj, args)
　　　　　　　　return result instanceof Object ? result : obj
　　　　　　}
　　16）js垃圾回收机制
　　　　js中的内存管理是自动执行的，并且是不可见的。咱们建立基本类型、对象、函数……全部这些都须要内存。
　　　　按期执行如下“垃圾回收”
　　　　　　01.垃圾回收器获取根并“标记”(记住)它们。
　　　　　　02.而后它访问并“标记”全部来自它们的引用。
　　　　　　03.而后它访问标记的对象并标记它们的引用。全部被访问的对象都被记住，以便之后再也不访问同一个对象两次。
　　　　　　04.以此类推，直到有未访问的引用(能够从根访问)为止。
　　　　　　05.除标记的对象外，全部对象都被删除。
　　17）事件机制
　　　　001.window 往事件触发处传播，遇到注册的捕获事件会触发
　　　　002.传播到事件触发处时触发注册的事件
　　　　003.从事件触发处往 window 传播，遇到注册的冒泡事件会触发
　　　　事件代理：
　　　　　　由于冒泡机制，好比既然点击子元素，也会触发父元素的点击事件，那咱们彻底能够将子元素的事件要作的事写到父元素的事件里，也就是将子元素的事件处理程序写到父元素的事件处理程序中，这就是事件委托。
　　　　　　每当将事件处理程序制定给元素时，运行中的浏览器代码与支持页面交互的JS代码之间就会创建一个链接，而这种链接越多，页面执行起来就越慢。考虑内存和性能问题，为了解决事件处理程序过多的问题，采用事件委托变得颇有必要。
　　18）数组经常使用方法
　　　　01. concat() //链接多个数组，并返回结果
　　　　02. join() //把数组分割成字符串如[1,2].join(',') => "1,2"
　　　　03. pop() // 删除并返回数组的最后一个元素
　　　　04. pusp() //向数组的末尾添加一个或更多元素，并返回新的长度
　　　　05. unshift() //向数组的开头添加一个或更多元素，并返回新的长度
　　　　06. shift() // 删除并返回数组的第一个元素
　　　　07. sort() // 对数组进行排序
　　　　08. reverse() // 颠倒数组
　　　　09. toString() // 把数组转为字符串
　　　　010. slice(start, [end]) // 返回数组指定元素
　　　　011. splice(index, count, [add]) // 从数组中删除指定元素，并返回被删除内容(数组格式) index: 位置；count：删除数量；add：添加元素可选
　　　　012. map filter forEach reduce find some every includes
　　19）字符串经常使用方法
　　　　01 slice(start, [end]) // 截取字符串
　　　　02 substring(start, [stop]) // 截取字符串，与slice类似，但不容许负的参数；若是参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。若是 start 比 stop 大，那么该方法在提取子串以前会先交换这两个参数。
　　　　03 substr(start, length) // 截取字符串
　　　　04 charAt() // 返回在指定位置的字符
　　　　05 concat() //拼接字符串
　　　　06 indexOf() // 检索字符串
　　　　07 lastIndexOf() // 从后向前检索
　　　　08 match() // 找到与正则的匹配 ('match1match2').match(/\d+/g) => [1,2];
　　　　09 replace() // 替换与正则相匹配的值 ('match1match2').replace(/\d/g, '||') => ('match||match||')
　　　　010 search() // 检索与正则匹配的值 ('match1match2').search(/\d/g) => 5
　　　　011 toUpperCase() // 把字符串转为大写
　　　　012 toLowerCase() // 把字符串转为小写
　　　　013 split('&') 字符串按‘&’进行分割
　　20）对象经常使用方法
　　　　01 Object.keys 获取对象的全部keys值为数组形式
　　　　02 Object.values 获取对象的全部values 为数组形式
　　　　03 {}.hasOwnproperty('key') 判断对象是否有key属性
　　　　04 for(let x in obj) 循环对象
　　　　05 Object.assign() 复制并克隆对象,并返回合并后的对象，若是是多个对象参数，那么相同的属性，后边的属性值会覆盖前边的属性值；例如 Object.assign({} , obj)
　　　　06 Object.entries() 遍历对象，并返回一个数组，数组的每个元素是由对象的属性以及属性值组成的数组；
　　　　07 Object.create() 建立对象
　　　　08 obj.hasOwnProperty('name') 判断对象自身属性中是否具备指定的属性。

　　21）es5和es6去重

　　　　es5　

[1,1,2,1,2].filter((item, i, arr) => {
    return arr.indexOf(item) === i
})

　　　　es6: [...new Set([1,2,3,3,2])]　

　　22）判断一个字符串中出现次数最多的字符，统计这个次数

var str = 'asdfssaaasdddddddaa';
var json = {};
for (var i = 0; i < str.length; i++) {
    if(!json[str.charAt(i)]){
       json[str.charAt(i)] = 1;
    }else{
       json[str.charAt(i)]++;
    }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
    if(json[i]>iMax){
         iMax = json[i];
         iIndex = i;
    }
}

　　23）求数组的最值
　　　　Math.max.apply(null, [1,2,3,4]); Math.max.apply(null,[1,2,3,4]);

　　24）数组的翻转（非reverse()）

var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
    var num = arr.pop();
    arr2.push(num);
}
console.log(arr2);

4.http
　　1）状态码
　　　　1XX 用于指定客户端相应的某些动做
　　　　2XX 用于表示成功
　　　　3XX 用于已经移动的文件而且被包含在定位头信息中指定心的地址信息(重定向，为了完成请求，必须进一步执行的动做)
　　　　4XX 用于指出客户端错误
　　　　5XX 用于支持服务器错误

　　　　100 继续；101 分组交换协议
　　　　200 ok；201 被建立；202 被采纳；203 非受权信息；204 无内容；205 重置内容；206 部份内容；
　　　　300 多选项；301 永久地传递；302 找到；303 参见其余；304 未改动；305 使用代理；307 暂时重定向；
　　　　400 错误请求(多是get请求写成post请求)；401 未受权；402 要求付费；403 禁止；405 不容许的方法；406 不被采纳；407 要求代码受权；408 请求超时；409 冲突；410 过时的；411 要求的长度；412 前提不成立；413 请求实例太大；414 请求url太大；415 不支持的媒体类型；416 没法知足的请求范围；417 失败的预期；
　　　　500 内部服务器错误；501 未被使用；502 网关错误；503 不可用的服务；504 网关超时；505 HTTP版本未被支持；
　　2）解决跨域方法
　　　　当协议、子域名、主域名、端口号中任意一个不相同时，都算做不一样域。不一样域之间相互请求资源，就算做“跨域”。
　　　　同源策略限制从一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
　　　　01 jsonp
　　　　　　利用<script>元素的这个开放策略，网页能够获得从其余来源动态产生的 JSON 数据。JSONP请求必定须要对方的服务器作支持才能够。
　　　　　　JSONP优势是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具备局限性。
　　　　02 CORS
　　　　　　CORS要求浏览器和服务器的同时支持，是跨域的根本解决方法，由浏览器自动完成。
　　　　　　优势在于功能更增强大支持各类HTTP Method，缺点是兼容性不如JSONP。
　　　　03 websocket
　　　　　　WebSocket和HTTP都是应用层协议，都基于 TCP 协议。可是 WebSocket 是一种双向通讯协议，在创建链接以后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在创建链接时须要借助 HTTP 协议，链接创建好了以后 client 与 server 之间的双向通讯就与 HTTP 无关了。
　　　　04 postMessage
　　　　　　若是两个网页不一样源，就没法拿到对方的DOM。HTML5为了解决这个问题，引入了一个全新的API：跨文档通讯 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，容许跨窗口通讯，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也能够设为*，表示不限制域名，向全部窗口发送。
出处：https://blog.csdn.net/liangjielaoshi/article/details/83786388
　　3）三次握手四次挥手
　　　　三次握手：
　　　　　　首先 Client 端发送链接请求报文，Server 段接受链接后回复 ACK 报文，并为此次链接分配资源。Client 端接收到 ACK 报文后也向 Server 段发生 ACK 报文，并分配资源，这样 TCP 链接就创建了。
　　　　四次挥手：
　　　　　　因为TCP链接是全双工的，所以每一个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的链接。收到一个 FIN只意味着这一方向上没有数据流动，一个TCP链接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭，而另外一方执行被动关闭。
　　4）请求方式有哪些 Post 和 Get 的区别
　　　　请求方式
　　　　01. GET 方法：发送一个请求来取得服务器上的某一资源
　　　　02. POST 方法：向 URL 指定的资源提交数据或附加新的数据
　　　　03. PUT 方法：跟 POST 方法很像，也是想服务器提交数据。可是，它们之间有不一样。PUT 指定了资源在服务器上的位置，而 POST 没有
　　　　04. HEAD 方法：只请求页面的首部
　　　　05. DELETE 方法：删除服务器上的某资源
　　　　06. OPTIONS 方法：它用于获取当前 URL 所支持的方法。若是请求成功，会有一个 Allow 的头包含相似“GET,POST”这样的信息
　　　　07. TRACE 方法：TRACE 方法被用于激发一个远程的，应用层的请求消息回路
　　　　08.CONNECT 方法：把请求链接转换到透明的 TCP/IP 通道
　　5）http和https的区别
　　　　01. Http 协议运行在 TCP 之上，明文传输，客户端与服务器端都没法验证对方的身份；Https 是身披 SSL(Secure Socket Layer)外壳的 Http，运行于 SSL 上，SSL 运行于 TCP 之上，是添加了加密和认证机制的 HTTP。两者之间存在以下不一样：
　　　　02. 端口不一样：Http 与 Http 使用不一样的链接方式，用的端口也不同，前者是 80，后者是 443；
　　　　03. 资源消耗：和 HTTP 通讯相比，Https 通讯会因为加减密处理消耗更多的 CPU 和内存资源；
　　　　04. 开销：Https 通讯须要证书，而证书通常须要向认证机构购买；
　　　　05. Https 的加密机制是一种共享密钥加密和公开密钥加密并用的混合加密机制。
　　6）请求过程
　　　　折中后的五层协议
　　　　　　01 应用层(dns,http) DNS解析成IP并发送http请求
　　　　　　02 传输层(tcp,udp) 创建tcp链接（三次握手）
　　　　　　03 网络层(IP,ARP) IP寻址
　　　　　　04 数据链路层(PPP) 封装成帧
　　　　　　05 物理层(利用物理介质传输比特流) 物理传输（而后传输的时候经过双绞线，电磁波等各类介质）
　　　　简括：
　　　　　　从应用层的发送http请求，到传输层经过三次握手创建tcp/ip链接，再到网络层的ip寻址，再到数据链路层的封装成帧，最后到物理层的利用物理介质传输。

5.webpack
　　1）什么是webpack，为何使用webpack // 工做原理；与gulp、grunt有什么区别
　　　　webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，经过loader转换文件，经过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专一构建模块化项目。
　　　　WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
　　2）优缺点
　　　　优势
　　　　　　01 专一于处理模块化的项目，能作到开箱即用，一步到位
　　　　　　02 可经过plugin扩展，完整好用又不失灵活
　　　　　　03 使用场景不局限于web开发
　　　　　　04 社区庞大活跃，常常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
　　　　　　05 良好的开发体验
　　　　缺点
　　　　　　只能用于采用模块化开发的项目
　　3）分别介绍什么是loader?什么是plugin
　　　　loader：模块转换器，用于将模块的原内容按照须要转成你想要的内容
　　　　plugin：在webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果，是用来自定义webpack打包过程的方式
　　4）经常使用的loader
　　　　file-loader：把文件输出到一个文件夹中，在代码中经过相对 URL 去引用输出的文件
　　　　url-loader：和 file-loader 相似，可是能在文件很小的状况下以 base64 的方式把文件内容注入到代码中去
　　　　source-map-loader：加载额外的 Source Map 文件，以方便断点调试
　　　　image-loader：加载而且压缩图片文件
　　　　babel-loader：把 ES6 转换成 ES5
　　　　css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
　　　　style-loader：把 CSS 代码注入到 JavaScript 中，经过 DOM 操做去加载 CSS。
　　　　eslint-loader：经过 ESLint 检查 JavaScript 代码
　　5）经常使用的plugin
　　　　define-plugin：定义环境变量
　　　　terser-webpack-plugin：经过TerserPlugin压缩ES6代码
　　　　html-webpack-plugin 为html文件中引入的外部资源，能够生成建立html入口文件
　　　　mini-css-extract-plugin：分离css文件
　　　　clean-webpack-plugin：删除打包文件
　　　　happypack：实现多线程加速编译
　　6）分别介绍bundle，chunk，module是什么
　　　　bundle：是由webpack打包出来的文件，
　　　　chunk：代码块，一个chunk由多个模块组合而成，用于代码的合并和分割。
　　　　module：是开发中的单个模块，在webpack的世界，一切皆模块，一个模块对应一个文件，webpack会从配置的entry中递归开始找出全部依赖的模块。
　　7）什么是模块热更新
　　　　模块热更新是webpack的一个功能，他可使得代码修改事后不用刷新浏览器就能够更新
　　8）经过webpack处理长缓存
　　　　在webpack中能够在output纵输出的文件指定chunkhash,而且分离常常更新的代码和框架代码。经过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
　　9）webpack-dev-server和http服务器如nginx有什么区别
　　　　webpack-dev-server使用内存来存储webpack开发环境下的打包文件，而且可使用模块热更新，他比传统的http服务对开发更加简单高效。
　　10）如何提升webpack的构建速度
　　　　01 经过externals配置来提取经常使用库
　　　　02 利用DllPlugin和DllReferencePlugin预编译资源模块经过DllPlugin来对那些咱们引用可是绝对不会修改的npm包来进行预编译，再经过DllReferencePlugin将预编译的模块加载进来。
　　　　03 使用Happypack 实现多线程加速编译
要注意的第一点是，它对file-loader和url-loader支持很差，因此这两个loader就不须要换成happypack了，其余loader能够相似地换一下
　　　　04 使用Tree-shaking和Scope Hoisting来剔除多余代码
　　　　05 使用fast-sass-loader代替sass-loader
　　　　06 babel-loader开启缓存
　　　　　　babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，形成代码体积大冗余，同时也会减慢编译效率
　　　　　　能够加上cacheDirectory参数或使用 transform-runtime 插件试试
　　　　07 不须要打包编译的插件库换成全局"script"标签引入的方式
　　　　　　好比jQuery插件，react, react-dom等，代码量是不少的，打包起来可能会很耗时
　　　　　　能够直接用标签引入，而后在webpack配置里使用 expose-loader 或 externals 或 ProvidePlugin 提供给模块内部使用相应的变量
　　　　08 优化构建时的搜索路径
　　　　　　在webpack打包时，会有各类各样的路径要去查询搜索，咱们能够加上一些配置，让它搜索地更快
　　　　　　好比说，方便改为绝对路径的模块路径就改一下，以纯模块名来引入的能够加上一些目录路径
　　　　　　还能够善于用下resolve alias别名这个字段来配置
　　　　　　还有exclude等的配置，避免多余查找的文件，好比使用babel别忘了剔除不须要遍历的
　　出处：https://www.jianshu.com/p/bb1e76edc71e

6.正则
　　正则：也叫作规则，让计算机可以读懂人类的规则
　　1）经常使用方法
　　　　String对的方法
　　　　　　str.search(/表达式/) 返回匹配到的第一个位置
　　　　　　str.split(/表达式/)
　　　　　　str.match(/表达式/)
　　　　　　str.replace(/表达式/,'')
　　　　RegExp对象方法
　　　　　　/表达式/.test(str) 返回布尔值
　　　　　　/表达式/.exec(str) 返回一个数组，存放匹配的结果，若是未找到匹配，则返回值为null
　　2）匹配手机号、邮箱、汉字、千分位
　　　　验证手机号：/^1[345789]\d{9}/.test('15662173333')
　　　　验证邮箱：/^\w+@[a-z0-9]+\.[a-z]+$/i
　　　　验证汉字：^[\u4e00-\u9fa5],{0,}$
　　　　实现千分位：/\B(?=(\d{3})+(?!\d))/g

7.性能优化
　　1）经常使用的性能优化方法
　　　　01.减小HTTP请求数量
　　　　　　001 将多张图片合并成一张图片
　　　　　　002 合并css和js文件
　　　　02.压缩js和css
　　　　03.css放顶部，js放底部
　　　　　　浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应连接内容，为了第一时间展现页面给用户，就须要将 CSS 提早加载，不要受 JS 加载影响。
　　　　04.去除重复脚本
　　　　05.减小DOM操做
　　　　06.懒加载
　　　　07.减小重排（Reflow）
　　　　　　重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会从新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的全部其它结点的 visibility 属性，这也是 Reflow 低效的缘由。若是 Reflow 的过于频繁，CPU 使用率就会急剧上升。
　　　　08.图标使用iconFont替换
　　2）输入url的加载过程
　　　　01.解析html文件，建立DOM树
　　　　　　自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
　　　　　　001 css加载不会阻塞html文件的解析，但会阻塞dom的渲染
　　　　　　002 css加载会阻塞后面js语句的执行
　　　　　　003 js会阻塞html的解析和渲染
　　　　　　004 没有defer和async标签的script会当即加载并执行
　　　　　　005 有async标签的js，js的加载执行和html的解析和渲染并行
　　　　　　006 有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
　　　　　　007 DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面彻底加载完成后执行（包括样式和图片）
　　　　02.解析css，生成CSSOM，css对象模型
　　　　03.dom和css合并，构建渲染树（Render Tree）
　　　　04.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）
　　　　　　001 重绘：根据元素的新属性从新绘制，使元素呈现新的外观
　　　　　　002 重排：当渲染树中的一部分由于元素的规模尺寸，布局，隐藏等改变而须要从新构建
　　　　　　003 重排一定会引起重绘，但重绘不必定会引起重排
　　3）优雅降级和渐进加强
　　　　渐进加强：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
　　　　优雅降级：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

8.vue　　1）生命周期　　　　01 在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，由于这些数据的初始化都在 initState 中。而后会执行 created 钩子函数，在这一步的时候已经能够访问到以前不能访问到的数据，可是这时候组件还没被挂载，因此是看不到的。　　　　02 接下来会先执行 beforeMount 钩子函数，开始建立 VDOM，最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM而且渲染数据。组件中若是有子组件的话，会递归挂载子组件，只有当全部子组件所有挂载完毕，才会执行根组件的挂载钩子。　　　　03 接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated，分别在数据更新前和更新后会调用。　　　　04 另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated钩子函数，命中缓存渲染后会执行 actived 钩子函数。　　　　05 最后就是销毁组件的钩子函数 beforeDestroy 和destroyed。前者适合移除事件、定时器等等，不然可能会引发内存泄露的问题。　　2）经常使用指令　　　　v-if v-else v-show v-for v-model v-on v-bind v-html　　3）组件通　　　　父子间：prod emit　　　　祖父组件和孙组件：$attr和$listeners　　　　其余组件：bus或者vuex　　4）watch和computed和method的区别　　　　methods VS computed　　　　　　对于最终的结果，两种方式确实是相同的。不一样的是computed是基于它们的依赖进行缓存的。computed只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。相比而言，只要发生从新渲染，method 调用总会执行该函数。总之，从新计算开销很大的话请选computed，不但愿有缓存的请选methods。　　　　watch VS computed　　　　　　当你在模板内使用了复杂逻辑的表达式时，你应当使用computed。　　　　　　watch是一个对象，键是须要观察的表达式，值是对应回调函数。值也能够是方法名，或者包含选项的对象。　　　　　　当你有一些数据须要随着其它数据变更而变更时，或者当须要在数据变化时执行异步或开销较大的操做时，你可使用 watch　　　5）vue-router 原理传参模式　　　　原理：本质就是监听 URL 的变化，而后匹配路由规则，显示相应的页面，而且无须刷新页面。　　　　传参：query、params、prods、直接跟在URL后面　　　　模式：Hash 和 istory 　　　　　　Hash 模式只能够更改 # 后面的内容，History 模式能够经过 API 设置任意的同源 URL　　　　　　History 模式能够经过 API 添加任意类型的数据到历史记录中，Hash 模式只能更改哈希值，也就是字符串　　　　　　Hash 模式无需后端配置，而且兼容性好。History 模式在用户手动输入地址或者刷新页面的时候会发起 URL 请求，后端须要配置 index.html 页面用于匹配不到静态资源的时候　　6）vuex　　　　state getters mutations（应用于同步，commit触发） actions（应用于异步，dispatch触发）　　7）mixins　　　　mixins 应该是咱们最常使用的扩展组件的方式了。若是多个组件中有相同的业务逻辑，就能够将这些逻辑剥离出来，经过 mixins 混入代码。mixins 混入的钩子函数会先于组件内的钩子函数执行，而且在遇到同名选项的时候也会有选择性的进行合并　　8）keep-alive 组件有什么做用　　　　若是你须要在组件切换的时候，保存一些组件的状态防止屡次渲染，就可使用 keep-alive 组件包裹须要保存的组件。　　9）响应式原理　　　　01.vue将data初始化为一个Observer并对对象中的每一个值，重写了其中的get、set，data中的每一个key，都有一个独立的依赖收集器。　　　　02.在get中，向依赖收集器添加了监听　　　　03.在mount时，实例了一个Watcher，将收集器的目标指向了当前Watcher　　　　04.在data值发生变动时，触发set，触发了依赖收集器中的全部监听的更新，来触发Watcher.update　　10）NextTick 　　　　在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。　　11）vue react angular 的区别　　　　vue:　　　　　　优势：　　　　　　　　a.简单，容易上手　　　　　　　　b.轻量级的框架，且没有依赖　　　　　　　　c.能快速的更新dom　　　　　　　　d.对模块友好，能够经过npm、bower安装　　　　　　　　e.可复用的组件　　　　　　　　f.双向数据绑定　　　　　　缺点：　　　　　　　　a.没有angular那么成熟　　　　　　　　b.不支持IE8如下　　　　angular：　　　　　　优势：　　　　　　　　a.双向数据绑定　　　　　　　　b.模版动能强大，指令丰富　　　　　　　　c.能够复用的自定义指令　　　　　　　　d.比较完善，包含模版、模块化、路由、过滤器、依赖注入等　　　　　　　　e.组件化　　　　　　缺点：　　　　　　a.过于臃肿　　　　　　b.什么都要依赖注入　　　　react：　　　　　　优势：　　　　　　　　a.速度快，经过虚拟DOM更新实际DOM　　　　　　　　b.浏览器兼容性好　　　　　　　　c.组件化　　　　　　　　d.对SEO友好　　　　　　　　e.单向响应数据流　　　　　　缺点：　　　　　　　　a.只是个视图，并不完整，若是是大型项目须要配合其它框架，如react-router和readux　　12）vue虚拟dom原理　　　　Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用虚拟dom进行diff，算出最小差别，而后再修改真实dom。　　　　优势：　　　　　　01 将 Virtual DOM 做为一个兼容层，让咱们还能对接非 Web 端的系统，实现跨端开发。　　　　　　02 一样的，经过 Virtual DOM 咱们能够渲染到其余的平台，好比实现 SSR、同构渲染等等。　　　　　　03 实现组件的高度抽象化　　　　缺点：　　　　　　01. 代码更多，体积更大　　　　　　02. 内存占用增大　　　　　　03. 小量的单一的dom修改使用虚拟dom成本反而更高，不如直接修改真实dom快　　13）在vue中如何操做dom　　　　使用ref　　14）对MVVM的理解　　　　Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。　　　　ViewModel是Vue的核心，它是Vue的一个实例。Vue实例是做用在某个HTML元素上的，这个HTML元素能够是body，也能够是某个id所指代的元素。 DOM Listeners和DataBindings是实现双向绑定的关键。DOM Listeners监听页面全部View层DOM元素的变化，当发生变化，Model层的数据随之变化；DataBindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。