2020-前端一年经验面试题整理

1,canvas (可忽略)

<canvas id="tes" h w ></canvas>

function draw(){

var canvas =document.getElementById( tes)

}

fillrect 创建矩形,参数分别是x,y  width,height

fillStyle :颜色   strokeRect绘制边框; 

beginPath 绘制路径, 

绘制线段  moveTo 1起点(x,y)

lineTo  终点  lineWidth  宽度

2,原型链(实现继承)

https://blog.csdn.net/weixin_44134588/article/details/108099392

3,深浅拷贝

浅拷贝:使用for key in 语法糖assign,只实现了基本数据类型的拷贝,引用类型只是对内存地址的引用, 修改后会影响到被拷贝的数据

深拷贝:实现对数据和地址的拷贝,相当于重新开辟内存空间存储数据;

法1:递归实现,

法2:现将对象通过json.stringfy转化为字符串,赋值给新变量,再将该新变量通过json.parse转为对象;

4,闭包

由一个封闭在函数内部的函数和他所使用的变量构成;

能让函数外界访问得到函数内部的数据

作用,在循环任务中记录每次循环的数据

this指向

普通函数:window

构造函数: 实例对象

对象方法: 所属对象

事件绑定:事件对象

定时器:window

立即执行函数:window

匿名函数:window

箭头函数:上一级函数作用域中的this

5,ajax/axios

分四步

1,创建xhr实例 new

2,xhr.open(url,method)

3,判断get/post

post: 设置请求头字段Content-Type xhr.setHeaders({
‘Content-Type’: ‘application/x-www-form-urlencoded’,
})

4,xhr.send

状态码:0,1,2,3,4

​ // 状态0, 创建了xhr

​ // 状态1, xhr 调用了open方法

​ // 状态2, xhr 调用send方法 发送数据了

​ // 状态3, xhr 数据接收中,但是数据还没有解析

​ // 状态4, xhr 数据接收完成并解析完毕可以直接使用

特殊点:axios的get请求请求体在params:{}里面;post请求体直接放在{}里面

promese

6,什么是mvvm?

mvc设计模式的改进版,将view的状态和行为抽象化,将视图和逻辑分开, 二者的联系由viewmodel控制

优点:低耦合,具有重用性,独立开发

7,浏览器缓存

缓存机制:

1,强制缓存,返回时携带一个有效期cache-control: max-age=60 (单位为秒）,和一个md5指纹;

2,协商缓存,协商缓存时看状态码,，如果资源没有变化则返回304，如果资源发生了变化则返回200及新的资源内容

3,按下ctrl+f5等于在开发者工具下勾选禁用缓存,

4,f5刷新时,如果在有效期内,则使用缓存,

问: f5与ctrl+f5的区分? 200和304的区分？200和304类型的请求是否达到了服务器？

1. 强制缓存
   1. 第一次请求资源，服务器返回资源，此时返回的状态码是200，并且设置了这份资源的缓存有效期，同时返回了这个资源的最后一次修改时间和这个资源的etag值（md5指纹）
   2. 在缓存有效期内，如果这个页面页签没有关闭，刷新页面，此时资源的状态码还是200，但是是从内存缓存中加载的；如果这个页面页签关闭后又打开页面，此时资源的状态码还是200，但是是从磁盘缓存中加载的；
   3. 缓存有效期的定义
      1. http1.1版本通过cache-control头来定义
         1. cache-control: public 表示网络中的任何节点都可以缓存这份资源
         2. cache-control: max-age=60 (单位为秒）表示这份资源的有效时间段。从服务器返回那一刻的服务器时间 + 这个时间段，这个时间内是有效的。到了过期的时间点缓存就无效。max-age的值为0，说明缓存立即过期
         3. cache-control: no-store 表示网络中的任何节点都不可以缓存这份资源
         4. cache-control: no-cache 表示不使用强制缓存的内容，看协商缓存的结果
      2. http1.0版本 Param: no-cache不使用强制缓存，expires定义缓存的有效期，它的值是一个过期的时间点，这种方式可以通过修改客户端的时间让资源一直处于不过期的状态，所以http1.1对过期时间的字段定义做了修改。
2. 协商缓存：在强制缓存无效时，走协商缓存的结果，如果资源没有变化则返回304，如果资源发生了变化则返回200及新的资源内容。
   1. 机制1：客户端发起请求时带上if-modified-since头，这个请求头字段的值是上次服务器返回该资源时返回的文件最后修改时间，服务器收到这个时间，再和磁盘上这个文件的修改时间进行比对，如果二者一致说明资源在 上次返回给客户端后没有修改过，此时返回给客户端304状态码，告诉客户端继续使用缓存文件即可。如果文件有变化，那就返回200和新的文件内容。
   2. 上述的时间比对机制有一定的问题：如果我们仅仅打开文件，按下保存关闭文件，文件的修改时间也会发生变化，那么在时间比对的机制下就会返回200和文件内容
   3. 机制2：客户端发起请求时带上if-none-match头，这个请求头字段的值是上次服务器返回该资源时返回的etag，服务器收到这个值，再对磁盘上这个文件进行md5计算得到一个etag值，二者进行比对，如果二者一致说明资源在 上次返回给客户端后没有修改过，此时返回给客户端304状态码，告诉客户端继续使用缓存文件即可。如果文件有变化，那就返回200和新的文件内容。
3. 按下ctrl+f5等于在开发者工具下勾选禁用缓存，发送的请求头上cache-control这一项的内容会被置为no-cahce不使用缓存内容，去服务器获取资源。此时不发送if-modified-since和if-none-matched请求头，所以无法判定是否走304，直接返回200。
4. 按下f5刷新时，如果在缓存有效期，则使用缓存即可；否则会发送if-modified-since和if-none-matched请求头，服务器经过判定后返回304或者200

8,http协议和https协议

http

http协议是超文本传输协议,最初的设计目的是为了提供一种发布和接收html页面的方法;http协议是以明文的方式传递数据的,如果传输报文被截取,就能获取其中信息,因此存在安全问题;

使用80端口

https

https可以说是安全版本的http协议,它的安全基础来自于ssl协议,ssl协议位于tcp协议和各种应用协议之间;主要分为两层,一层是记录协议,建立在tcp协议之上,主要负责为高层协议提供压缩,封装,加密等功能的支持;一层为握手协议,主要是在通信双方真实数据传输之前,对双方进行身份认证,协商加密算法,交换加密秘钥等

使用443端口

9移动端兼容性

1. 点击穿透与点击延迟

点击延迟：在iphone4开始判断网页上用户的点击行为是双击还是单击，判定的依据在用户点击后，300ms内没有再次认定为单击，如果在这个延迟期间有再次点击认定为双击(双击触发页面缩放事件)，调用的是dbclick。

解决:

click事件的触发过程：ontouchstart ontouchend onclick。如果不使用现成的库，把事件处理函数写在ontouchstart上；如果使用现成的库，可以使用zepto或者使用专门解决该问题的库fastclick。

点击穿透：因为点击事件有延迟触发，所以如果是a链接，跳转到下个页面时，恰好下个页面该位置的元素也有点击事件或者链接地址，此时点击行为触发到下个页面的该元素上，形成点击穿透。解决点击穿透问题:

touched事件出发后阻止默认行为;或者直接禁止页面缩放;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6gejqtgo-1604567252109)(C:\Users\老范\AppData\Roaming\Typora\typora-user-images\image-20201102000130149.png)]

2. 移动端键盘遮挡问题

当页面上有输入框时，点击输入框弹起软键盘，经常出现的问题的是软键盘遮盖输入框元素甚至遮盖到输入框之上的元素。

没有完全能解决该问题的技术手段，所以解决方案是在产品设计阶段进行

1. 输入框的位置不出现在页面的下半部分
2. 输入框在新开页面进行输入，确认后返回

3. iOS下fixed定位元素在键盘弹起时位置异常

使用position:absolute来模拟实现fixed的效果

• ios4下不支持position:fixed
• 解决方案： 可用iScroll插件解决这个问题

4. 移动的区域滚动问题

1. android下没有弹性效果，
2. 使用iScroll (vue中有一个基于iScroll的better-scroll库)等库来实现弹性滚动（ios使用-webkit-overflow-scrolling: touch具有弹性效果)
3. android4.0版本以下对非body元素设置overflow:scroll设置滚动条无效

5. 移动端在一些非可点击的元素上点击onclick不能触发

解决方法:为其增加css设置cursor:pointer属性

6.在ios和andriod中,audio元素和video元素在无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){
    audio.play()
})

10前端优化方案:

1,使用首屏优化,将首屏css文件放在html内部内联,加快css的构建

2,将静态资源放在csn上面

3,将小图片做成雪碧图

4,将静态资源使用gzip压缩;

5,对静态资源开启强(长时间)缓存

6,对图片进行base64转换写到css文件内部

7,数据可以被缓存时尽量写到本地存储,减少请求次数

8,图片懒加载,路由懒加载

9,减少引起页面重绘和重排的dom操作

10,预加载，在一个页面加载完毕后，考虑到用户会大概率会进入下一页，那么提前把下个页面的资源加载一下

解决vuex数据刷新消失的问题:

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

11,如何使用ajax做缓存,如何不缓存?

ajax自动缓存;
解决数据刷新后,ajax还只是从缓存中拿数据最有效的办法是禁止页面缓存，有以下几种处理方法：
1).在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
2).在服务端加 header(“Cache-Control: no-cache, must-revalidate”);
3).在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);

12,浏览器中输入url后到出现页面中间的过程:

1. 解析url中域名到ip（比如查找www.baidu.com这个域名）

   1. 先查看浏览器是否有解析过该域名，是否还有它的缓存，浏览器的缓存时间2～10分钟左右，具体看dns解析生效的时间，找到有缓存的ip则返回，没有则进行下一步
   2. 浏览器向系统发起查询，系统向配置的dns服务器查询，如果找到则返回，如果没有进行下一步，下面就是dns服务器的接力
   3. 首先向根dns服务器去查询（全球dns根服务器只有13台【1台在日本1台在澳大利亚2台在欧洲9台在美国】，还有其他镜像），根服务器会返回com所在的dns服务器的地址（这种顶级域名所在的dns解析服务器称为顶级dns解析服务器）
   4. 再向com所在的顶级dns解析服务器发起查询，会返baidu.com所在的dns服务器的地址
   5. 再向baidu.com所在的dns服务器发起查询，查询到www.baidu.com的服务器ip地址返回，查不到则报错说明域名解析有问题或者域名过期等

2. 找到ip，开始进行三次握手，客户端和服务器建立通信连接

3. 连接建立后，客户端向服务器发起查询请求

4. 服务器内部处理，返回网页字符串htmlstring (网页的状态：init - loading - interactive - complete)

5. 浏览器收到htmlstring，开始进行解析构建dom树

   1. 从html标签开始解析构建dom树

   2. 遇见link引入的css资源的话，新起线程去加载css并构建cssom，css不会阻塞dom树的构建

   3. 遇见script引入的js资源，阻止dom树的解析构建，去加载js，加载完成后再继续dom树的解析构建，所以需要把js放在body底部

      1. 如果script引入js时声明了defer属性，表示这个资源延迟执行，不阻塞dom树的解析构建，defer声明的js会在DOMContentLoaded执行前执行。如果多个声明defer属性的js，他们是按照声明的顺序来执行
      2. 如果script引入js时声明了async属性，表示这个资源异步执行，不阻塞dom树的解析构建，async声明的js会在onLoad执行前执行。如果多个声明async属性的js，他们不按照声明的顺序来执行

   4. 当dom属性解析构建完成后，cssom也构建完成了，合并生成渲染树(render Tree)，此时浏览器开始描述这些元素的属性

   5. 根据这些元素的属性生成渲染层或者合成层，合成层是一个独立的层级，利用这个特性来优化渲染

   6. 渲染层合成层生成完毕后，浏览器呈现引擎去调用底层的显卡，来绘制页面内容，显示到屏幕上

      三次握手:

      1. 三次握手

         1. 客户端A向服务器B发起一个同步信号Syn
         2. 服务器B向客户端A回应一个应答信号ack，同时也携带一个同步syn信号
         3. 客户端A收到服务器B的回应后，再响应一个ack信号

      2. 问题1：为什么是3次握手，2次不够吗？

         在第2步的时候，只能确定的是：服务器确认客户端有发送数据的能力；

         在第3步的时候，客户端能够确认服务器有发送/接收数据的能力；服务器确认客户端也有接收数据的能力

         所以在第3步后，双方都确认了对方能够发送数据以及接收数据，后面就可以发起真正的通信数据了

      3. 问题2：能否在建立连接时直接带上http请求的数据？能带的话在第几步带？

         1. 在第三步请求时可以携带通信数据，原因见问题1，第三步时双方通信能力基本确认没有问题了，所以可以同时把http数据带过去

      4. 问题3：什么是半连接？什么是全连接？什么是syn攻击

         半连接：就是三次握手没有完全建立时，比如只到了第2步，第三步没有发起/没有成功再重试时，系统为这种连接进行状态维护，称为半连接

         全连接：当三次握手完成了，把这些连接放入连接池里面，称为全连接

         syn攻击：当大量的请求到达服务器时，每次请求都要建立三次握手，由于是恶意攻击，第三步迟迟不会完成，那么系统就要为维护半连接的请求耗费大量的资源，这种攻击称为syn攻击

13. vue相关面试

1. vue的8个生命周期函数

1. beforeCreated
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestory
8. destoryed

2. v-show 与 v-if的区别

1. v-show: 是否显示，元素肯定已经渲染在dom节点上，然后通过样式来控制是否显示。
2. v-if: 是否渲染，如果没有额外的样式控制，只要渲染就是显示的。v-if有比较大的渲染开销（符合条件要渲染到dom节点中，不符合条件要从dom节点中去掉元素）。当频繁执行条件时，不适合使用v-if，用v-show；反之执行条件的次数很少，使用v-if即可

3. v-for与v-if优先级

小程序和vue中：v-for优先，对循环的每一项来执行v-if，根据v-if条件执行的结果再决定输出内容

// 这种情况肯定先v-if. 判断优先级是二者写在一起才需要定义优先级

4. v-for中的key的作用

key的作用是标示一组兄弟节点中每一项的唯一性，在下次更新时进行二次元素比对，去定位元素是更新、删除、新增、移动等

5. vue中每个周期函数一般放置什么业务逻辑

1. 在组件加载时就需要发送的异步请求，可以放在beforeCreated或者created上
2. 如果从路由获取一些数据来使用，可以放在created
3. 如果要操作dom，放在mounted, 因为这个阶段是把前面创建的组件实例的dom结构挂载到了dom节点中
4. 如果需要在组件更新后，需要发送数据给后台或者前台自己的一些存储，放在updated
5. 如果需要在组件销毁时处理一些数据、定时器等，放在beforeDestoryed

6. vue中data为什么是function

因为vue中内部使用的组件没有使用new Vue这种实例化的形式，不是创建一个新的实例，所以data数据需要进行区分，函数每次执行之间没有任何关系，所以使用函数来返回data数据，这样每次使用这个组件，组件的数据都只是这次的，下次再使用，下次数据跟这次的数据没有关系就不会相互影响了

7. vue中双向绑定的原理

借助js中Object.defineProperty(obj, 'a', {set: fn, get: fn})定义数据时可以对这个数据进行修饰，修饰的属性有：

1. value： 这个属性的值

2. writeable: 是否可写

3. configurable: 是否可配置

4. enumable: 是否可遍历

5. set: 设置数据

6. get: 获取数据

   上面的6种修饰属性分为2组使用: 第一组: 1234; 第二组: 3456

Object.defineProperty(obj, 'a', {
  set: function(n) {
    a = n
    document.getElementById('root').innerHTML = '<div>hello world</div>'
    document.getElementById('abc').innerHTML = n
  },
  get: function() {
    // 依赖分析和收集
    return a
  }
})
  
obj.a = 2 // this.abc = 123
console.log(a) // var b = obj.a

双向：

1. 视图view => 数据model：通过事件绑定的形式把数据从视图层传递到逻辑层
2. 数据model => 视图view：通过拦截setter getter来重新定义其中的逻辑，然后在模板解析阶段收集其中使用的数据（依赖收集），后续数据发生变化，会执行set方法的逻辑，set方法其中会根据上次依赖收集的结果去更新 使用当前变化的数据的那个template

8.vuex相关

1. store: 唯一的数据源

2. state: 数据源的某一次数据状态即快照

3. mutation: 同步修改 state 中的数据。
   3.1 修改 state 数据必须使用 mutation 函数进行。
   3.2 每次执行的 mutation 函数都会被记录下来，调试时可以方便的进行时光旅行查看任意时刻的数据状态，并且收集到线上用户的操作后可以方便的在本地重现用户的使用情况来定位线上 bug.

4. action: 专门用来处理异步任务。当我们改变 state 时，参与改变 state 的某个数据data此时得不到，需要调接口才能获取到。那么就先定义一个 action 获取数据data，然后再调用 mutation 函数改变 state

5. getters: 类似组件内部的 computed 计算属性.如果多个组件使用某个数据，这个数据可以由 vuex 的 state 中的一些数据整合得到，那么这个数据就使用 getters 来定义。

9.vue-router中的钩子函数

1.全局钩子

主要包括beforeEach和aftrEach
beforeEach函数有三个参数：
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数
这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作

2.单个路由里面的钩子

beforeEnter beforeLeave

3.组件路由

主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

14,web语义化

• 正确的标签做正确的事情
• 页面内容结构化
• 无CSS样子时也容易阅读，便于阅读维护和理解
• 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO

15,判断数据类型:

1: intanceof

用法: object instanceof constructor

instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上

object:
某个实例对象
constructor:
某个构造函数

作用:检测object 是否为constructort的实例
例如: arr intanceof Array

2: typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型

3 Object.prototype.toString.call(要判断的)

typeof无法区分对象、数组、函数的类型;
可以通过Object.prototype.toString方法，判断某个对象属于哪种内置类型。
分为null、string、boolean、number、undefined、array、function、object、date、math

16,h5,c3,es6相关

一、ES6新特性：

  1.  let/const块级作用域
  2.  模板字符串(用反引号 `` 表示,解析变量可以用  ${要解析的变量} 表示 )
  3.  数组/对象解构
  4.  扩展(或展开)运算符(...)以及剩余参数
  5.  箭头函数
  6.   promise对象
  7.   对象字面量简写（即对象中属性名和属性值一样时，可以简写成一个，例如data:data可以简写为data）
  8.  数组的map和reduce方法
  9.  函数参数默认值

二,H5新特性

##### 1, 新增了语义化标签

header,footer,article,aside,section,nav,hgroup,time,main等

##### 2,新增表单控件

email,tel,url,number,range,search,color,

##### 3 表单属性

palceholder 输入框提示

autofocus 表单获取输入焦点

required 必填字段

##### 4 本地存储

4.1localStorage

储存时间:除非手动清除,永久保存,

大小:20MB

4.2 sessionsStorage

储存事件:关闭页面则消失

大小:5MB

三,css3

1圆角
border-radius

2 阴影
bos-shadow

3 盒子模型
border-box:border-box(高宽不再受内边距和边框的影响)

4 过渡,动画
transform(旋转),scale(缩放),translate(定位) transition(过渡)

5,flex伸缩盒子
6 新增属性选择器
E[data] —— 选择带有data属性的元素对象

E[data=“one”] —— 选择带有data属性的元素对象且属性值为one

E[data^=“o”] —— 选择带有data属性的元素对象且属性以o开头

E[data$=“e”] —— 选择带有data属性的元素对象且属性以e结尾

E[data*=“n”] —— 选择带有data属性的元素对象且属性包含n

17,跨域

1:JSONP

缺点:只能get请求,不能post请求

原理:利用的是同源策略对img标签src属性没有限制的特性

2:cors;

3:服务器反向代理

跨域一般都是后端来做;前端做的比较少;

18,数组去重

var arr = [1, 2, 3, 6, 7, 4, 2, 5, 8, 4, 3, 6, 5];
        var newarr = [];
        // 传统遍历
        for (var n = 0; n < arr.length; n++) {
            if (newarr.indexOf(arr[n]) === -1) {
                newarr.push(arr[n]);
            }
        }
        console.log(newarr);
        //set数据结构
        var newArr = new Set(arr); //set数据结构实现快速去重
        let newArr2 = [...newArr] //存入数组中
        console.log(newArr2);
        // filter方法
        let newArr1 = arr.filter(function (value, index, self) {
            return self.indexOf(value) === index //判断索引值是否===在数组中的索引值,如果等,则返回,后面的重复元素因为返回的索引值不等,所以不被返回
        })
        console.log(newArr1);

19,window.history的功能有哪些?

back(),forward(),后退,back()前进;go()+1向前,-1向后