前端面试(上)

一：HTML篇

1. HTML5新特性
拖拽释放(Drap and drop) API；语义化标签（header nav footer article等）；视频、音频（audio、video）API；画布（Canvas）； 地理(Geolocation)定位 ；存储(localStorage，sessionStorage)；表单控件（date、time、email、url、search等)；新的技术(多任务webworker、全双工通信协议 websocket)

2.cookie与sessionStorage和localStorage的区别

相同点：都是保存在浏览器端且同源
不同点：
	cookie 数据始终在同源的http 请求中携带（即使不需要），即cookie 在浏览器和服务器间来回传递。
	而sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。
	cookie 数据还有路径（path）的概念，可以限制cookie 只属于某个路径下。
 	存储大小不同：cookie数据不超过4K ，localStorage和sessionStorage可以达到5M或更大；
 	数据有效期不同：sessionStorage关闭当前页面或浏览器后失效；
 			      localStorage除非手动清除否则永久保存；
 			      cookie只在设置的cookie 过期时间之前有效;
 	作用域不同： sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；
 			   localstorage，cookie在所有同源窗口中都是共享的； 					 

3.如何让一个盒子水平垂直居中

1. 定位(子绝父相)
2. 利用margin:auto
3. 利用display:table-cell 
4. 利用display：flex;设置垂直水平都居中

二：CSS篇

1.CSS3新特征

圆角（border-radius） 阴影（box-shadow） 文字特效(text-shadow)
线性渐变（gradient）   变换(transform)    媒体查询（@media）
盒子模型（box-sizing） 图片边框（border-image）

2.介绍一下盒子模型

1. 盒模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。
2. 盒模型分为IE盒模型和W3C标准盒模型。
3. W3C标准盒模型又叫content-box，元素宽度/高度由border+padding+content组成。
（属性width,height只包含内容content，不包含border和padding）
4. IE盒模型又叫border-box，元素宽度/高度由content组成。
（属性width,height包含border和padding，指的是content+padding+border。

3.CSS中有哪些长度单位

绝对长度单位：px  百分比: %  相对父元素字体大小单位: em
相对于根元素字体大小的单位: rem
相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw
相对于视口*高度的百分比（100vh即视窗高度的100%）: vh

4.CSS 中link 和@import 的区别

1. 适用范围不同： @import 可以在网页页面中使用，也可以在CSS 文件中使用，
用来将多个CSS 文件引入到一个CSS 文件中；而link 只能将CSS 文件引入到网页页面中;
2. 功能范围不同: link 属于XHTML 标签，而@import 是CSS 提供的一种方式，
link 标签除了可以加载CSS 外，还可以定义RSS，定义rel 连接属性等，@import 就只能加载CSS;
3. 加载顺序不同: 当一个页面被加载的时候，link 引用的CSS 会同时被加载，而@import引用的CSS 会
等到页面全部被下载完再被加载;
4. 兼容性： 由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，
而link 标签无此问题;
5.权重区别link 引入的样式权重大于@import 引入的样式

5.display:none和visibility:hidden的区别

display:none：隐藏元素，布局中不在给它分配空间（从文档中移除），会引起回流（重排）。
visibility:hidden: 隐藏元素,布局中仍保留原来的空间（还在文档中），不会引起回流（重绘）。

7.BFC是什么？

全称：Block Formatting Context（块级格式化上下文）
含义：独立的渲染区域，规定了在该区域中，常规流块盒的布局。
`哪些元素会生成BFC`
根元素  float属性不为none;  position 为absolute 或fixed; overflow 不为visible;
display 为inline-block， table-cell， table-caption， flex， inline-flex;

8.清除浮动的方法

1.父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）
2.给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）
3.伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table; clear: both;）

三：JS篇

1.JS基本数据类型

 基本数据类型： Number String Undefined NUll Boolean Symbol
 引用数据类型： Object Array Function
 基本数据类型储存在栈中，引用类型的对象存储在堆中

2.ES6的新特性？

1.新增块级作用域let定义变量和const定义常量
2.变量的解构赋值
3.模板字符串
4.箭头函数
5.扩展运算符（…）
6.模块（import/export）
7.类（class/extends）
8.Promise
9.Proxy
10.Symbol

3.什么是闭包

理解：主要是为了设计私有的方法和变量。
优点：可以避免全局变量造成污染。
缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。
特征： 1）函数嵌套函数。
       2）在函数内部可以引用外部的参数和变量。
       3）参数和变量不会以垃圾回收机制回收。

4.原型，原型链

主要是还是实现继承与扩展对象。
每个函数对象都有一个 prototype 属性，这个属性就是函数的原型对象。
原型链是JavaScript实现继承的重要方式，原型链的形成是真正是靠__proto__ 而非prototype。

所有的引用类型（包括数组，对象，函数）都有隐性原型属性（proto）, 值也是一个普通的对象。
所有的引用类型的 proto 属性值都指向构造函数的 prototype 属性值。
构造函数 new 出来一个对象，而每个对象都有一个 constructor 属性，该属性指向创建该实例的构造函数。
实例对象通过__proto__或者 object.getPrototype 的方法获取原型。
原型链其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。
原型链：通过原型继承多个引用类型的属性和方法。
构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。

5.浅谈Promise

含义：异步编程的一种解决方案，它通过链式调用 then 、 catch 、finally方法来处理异步调用的结果。。
三种状态：pending（进行中）、resolved （已成功）和reject（已失败）
        Promise对象的状态改变，只有两种可能：从pending变为resolve和从pending变为reject。
        resolve：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved）。
reject：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected）。

Promise 可以通过链式调用的方式，让多个异步请求形成一个顺序执行的队列。

then: Promise 实例添加状态改变时的回调函数。可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为resolved时调用，
第二个回调函数是Promise对象的状态变为rejected时调用。
catch : 用于指定发生错误时的回调函数。
finally: 不管 Promise 对象最后状态如何，都会执行的操作。

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

6.JS中new操作符有什么用？

1. 创建临时对象，并将this指向临时对象
2. 将构造函数的原型属性和方法挂载到新对象的__proto__(原型指针)上
3. return 临时对象

**7. var、let、const 之间的区别 **

var 声明变量可以重复声明，而let 不可以重复声明
var 是不受限于块级的，而let 是受限于块级
var 会与window 相映射（会挂一个属性），而let 不与window 相映射
var 可以在声明的上面访问变量，而let 有暂存死区，在声明的上面访问变量会报错
const 声明之后必须赋值，否则会报错
const 定义不可变的量，改变了就会报错
const 和let 一样不会与window 相映射、支持块级作用域、在声明的上面访问变量会报错

8.防抖和节流使用场景和区别

防抖 （多次触发 只执行最后一次）代码实现重在清零 clearTimeout。
作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。

节流 （规定时间内 只触发一次）代码实现重在开锁关锁 timer = timeout; timer = null。
作用： 高频率触发的事件,在指定的单位时间内，只响应第一次。

9.介绍下 Set、Map的区别

应用场景：Set用于数据重组，Map用于数据储存
Set：　
　　（1）成员不能重复
　　（2）只有键值没有键名，类似数组
　　（3）可以遍历，方法有add, delete,has
Map:
　　（1）本质上是健值对的集合，类似集合
　　（2）可以遍历，可以跟各种数据格式转换

10.call()、apply()、bind（）的区别

相同点：call apply bind都可以改变函数调用的this指向；
不同点：都可以在函数调用时传递参数。call，bind方法需要直接传入，而apply方法需要以数组的形式传入。
	   call，apply方法是在调用之后立即执行函数，而bind方法没有立即执行，需要将函数再执行一遍。
	   三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。

11.this的指向问题

1. 作为函数调用时 this执行window 但是在严格模式下 全局上下文的this的值是undefined
2. 作为方法调用时 this指向调用该方法的对象
3. 当用new调用函数时，this指向构造函数返回的对象
4. 在箭头函数中，this指向上下文，即箭头函数所在父级作用域中的this

12.深拷贝与浅拷贝

1.浅拷贝适用于对象或数组的引用，而深拷贝适用于对象或数组的值。
2.浅拷贝拷贝前后是相同的对象.深拷贝拷贝前后是不同的对象.
3.浅拷贝改动拷贝的数组原数组也会变（慎用！项目中很多地方共用的数组都会变）。
   深拷贝修改新数组不会改到原数组

13.typeof与instanceof的区别

typeof 操作返回一个字符串 表示未经计算的操作数的类型
instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

typeof会返回一个变量的基本类型  instanceof返回的是一个布尔值
instanceof可以准确的判断复杂引用数据类型但不能正确判断基础数据类型

四：计算机网络篇

1. HTTP和HTTPS的区别

1. HTTP协议是超文本传输协议，信息是明文传输的，HTTPS则是具有安全性的SSL加密传输协议
2. HTTPS协议需要CA证书，费用高；而HTTP协议不需要
3. HTTP协议端口是80，HTTPS协议端口是443
4. http是明文传输，https则是具有安全性的ssl加密传输协议
5. http的是无状态的，
   HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议比http协议安全

2.如何解决跨域

跨域是因为浏览器的同源策略（Same Origin Policy）限制导致的。
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域
1. JSONP跨域（利用script标签）
2. 跨域资源共享（CORS）
3. 代理跨域 API 请求
4. WebSocket协议跨域
5. proxy 前端配置代理服务器（proxy）代替浏览器去发送请求到同一个后端 API，
   后端服务器再将请求转发到真正的目标域名服务器上。

3.网页从输入url到页面加载发生了什么

1. DNS解析 2.TCP连接 3. 发送HTTP请求  4. 服务器处理并返HTTP报文 
5.浏览器解析并渲染页面 6. 连接结束

4. HTTP 传输过程（三握手四挥手）

1.TCP 建立连接  2.浏览器发送请求命令 3.浏览器发送请求头 4.服务器应答
5.服务器回应信息 6.服务器发送数据 7.断开TCP连接

5.性能优化
前端性能优化手段从以下几个方面入手：加载优化、执行优化、渲染优化、样式优化、脚本优化
详情请看 性能优化的文章

五：VUE篇

1.双向数据绑定的原理

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，
通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。

2.Computed 和 Watch 的区别

Computed:
1.支持缓存，只有依赖的数据发生变化时，才会重新计算
2.不支持异步 当Computed中有异步操作时，无法监听数据的变化
3.若一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
4.computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的
5.如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。

Watch：
1.不支持缓存，数据变化时 它会触发相应的操作
2.支持异步监听
3.监听的函数接收两个参数，第一个参数是最新值，第二个是旧值
4.当一个属性发生变化时，就需要执行相应的操作
5.监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，
 
 使用场景：
 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特 性，避免每次获取值时都要重新计算
 当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

3.v-if和v-show的区别

  相同点 ：控制元素的显示与隐藏
  不同点： v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控    制显隐；
  v-if有更高的切换消耗；v-show有更高的初始渲染消耗
  v-if适合运营条件不大可能改变；v-show适合频繁切换

4. data为什么是一个函数而不是对象

JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。
数据以函数返回值的形式定义，这样当每次复用组件的时候，就会返回一个新的data，组件都有自己的私有数据空间，维护自己的数据，不会干扰其他组件的正常运行。

5.Vue的生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。

6.组件通信

1.父传子： 父组件通过props向子组件传递数据
2.子传父： 子组件通过$emit和父组件通信
3.兄弟组件间通信：eventBus 的方法
4.依赖注入（provide / inject）

7.路由的hash和history模式的区别

1. hash模式
简介： hash模式是开发中默认的模式，它的URL带着一个#
特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。
2.history模式
简介： history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理

8.$route和$router 的区别

$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等

9.如何定义动态路由？如何获取传过来的动态参数？

（1）param方式
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123
参数获取 通过 $route.params.userid 获取传递的值
（2）query方式
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/route?id=123
参数获取通过$route.query 获取传递的值

10.params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
注意：query刷新不会丢失query里面的数据 params刷新会丢失 params里面的数据

11.Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )
 state: 页面状态管理容器对象 
 getters∶ state对象读取方法
 mutations∶状态改变操作方法。是Vuex修改state的唯一推荐方法
 actions∶ 操作行为处理模块 
 modules => 模块化Vuex
 
 commit∶状态改变提交操作方法
 dispatch∶操作行为触发方法

12. Vue3

3.0 将带来基于代理 Proxy的 observer 实现，提供全语言覆盖的反应性跟踪。
消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制
只能监测属性，不能监测对象