100%要记的面试题

1、项目上线流程:

  1. 技术跟产品UI开需求讨论会,提出开发需求
  2. 产品人员进行原型设计。
  3. UI进行原画等绘制工做
  4. 前端人员接收各类图形元素(会若有动态效果会有视频或动图交互)
  5. 先后端人员对接接口, 并给接口文档
  6. 先后端同时开始开发
  7. 先后端联合调试
  8. 测试人员测试
  9. 上线部署、服务重启
  10. 新版本发布上线

2、本地存储 sessionStorage,localStoragejis,cookies

Loca和session都有2个方方法删除数据,clear()删除全部数据,localStorage.removeItem(“tKey“)删除单条数据; 他们只能存字符串用JSON.parse(),拿到数据用JSON.stringify()进行转换 首先总的来讲,三者都是用于持久化数据存储的手段,都是存储在浏览器端,且同源(协议,端口号,都域名相同) localStorage和sessionStorage都是Web存储,大小5M左右,彻底存储在客户端,它们是由于本地存储数据而存在 cookies也是存储在浏览器端的,大小不超过4k,做为http规范的一部分,它是经过浏览器的请求将数据传给服务器的。html

区别:

  • 存储空间: localStorage,sessionStorage,都为5M cookies 为4k
  • 有效期
    1. localStorage ———-永久存储,永不失效,除非手动删除
    2. sessionStorage——–数据存储在窗口对象中,窗口关闭后,数据丢失
    3. cookies—————–只在设置的cookie过时时间以前一直有效,即便窗口或浏览器关闭
  • 做用域
    1. sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。
    2. localStorage和cookies是在全部同源窗口中共享的

3、promise

就例如用原生ajax写请求的时候是异步,返回到结果以后咱们拿到了数据,并且必需要再这后面写逻辑代码,这样就会不少东西再里面,一层套一层,结构就很是很差看,就容易形成回调地狱,若是promise的话,只要执行完ajax完以后执行then或away,我就执行下一步,这样的结构很简单不少,promise等待语诺ajax拿到数据后进行下一步。 Then就是,away就是监控promise里面执行的异步操做,在完成以后立马执行away。前端

Then是请求执行成功以后执行的方法,catch 是请求失败或者出现错误以后执行的方法。vue

4、闭包的原理:

  • 概念:外函数内部嵌套内函数,同时将内函数返回。内部函数引入外部函数的变量及参数,不会被垃圾回收机制所收回。
  • 缺点:可让一个变量长期驻扎在内存当中不能被释放。过分使用闭包,会占用过多的内存,形成性能问题。

咱们一个函数放着一个局部变量a,外面的函数式访问不到里面的变量a的,可是我能够在函数里面定义一个b函数,return这个a变量出去,外面就能够拿到a变量了, 这样作的坏处就是这个a的变量会永远保存在内存中,不会被垃圾回收机制回收,形成内存泄露,在咱们每次操做前,操做后例如C拿到它的值,完成逻辑运算后,直接把C定义为null,这样就能够解决内存溢出问题。html5

5、面向对象,原型链,工厂模式,构造函数模式:

世间万物皆对象,对象有具体的的实例化,任何方法或者属性都要写在对象(类)里面,就是不断的建立对象使用对象指挥对象作事。webpack

工厂模式:通常操做是咱们先new一个对象,一开始就用字面量形式,对象点什么点什么的方式很费劲,可是若是咱们工厂模式,就是先定义一个函数,里面new一个对象,而后return一个对象,咱们能够调用这个对象去新建不少个对象是吧?可是工厂模式会有一个缺点,就是没法识别这是谁增的,增长了系统的复杂性。 工厂模式最大的优势在于实现对象的建立和对象的使用分离,将对象的建立交给专门的工厂类负责web

构造函数模式:就是里面都是放构造函数,里面都是放this.name=name,可是这样能够解决一个函数到底是谁生的,可是全部对象都会有这样的一个方法,他们的指针都是不一致的,这样并非咱们想要的,因此咱们就引入了原型:原型就是构造函数方法,其中一个有一个自定义与原型重构函数方法,里面放的也是this,可是里面的方法会存放在一个叫作propotype里面,这是一个原型对象,这里面放的是存放公共公有属性,这就是原型。ajax

原型链就是:咱们的原型会生出不少不少的儿子,可是可能咱们的原型可能也是别人的儿子,上面可能还有一个原型,好比说咱们在其中一个里面找一个a方法,在这个原型里面找不到这个方法就会沿父亲往上找,这就是原型链。vuex

6、你如何实现下拉刷新

  • 一、先要设置一个数组,存放订单信息,
  • 二、设置一个开关避免数据请求重复,根据后端提供的API设置当前页数,总页数,每页多少条信息。
  • 三、在methods里面定义方法,经过请求的参数中的ID判断发起对应页数的请求。
  • 四、根据当前页数是否为1来判断,同时将请求回来的数据push进定义的数组中,在对页数进行++。
  • 五、判断当前页数是否小于中页数来做为依据是否进行请求。
  • 六、使用生命周期created在进入订单页面先触发一次数据请求渲染第一页。

7、如何调用高德地图API实现定位功能。

  • 一、须要去申请一个百度地图秘钥。
  • 二、进行页面布局,须要安装vue-Bmap,新建mapConfig.js文件,用来放置申请的秘钥等相关变量参数由于个人功能还须要在指定城市搜索,因此定义了一个mapCityName来存储城市名。
  • 三、在组件中建立一个容器,用来显示百度地图宽度为100%;组建中引入Bmap
  • 四、在methods方法里面构建方法,实例化地图加载地图搜索插件,实现拖拽,拖放等功能。
  • 五、用到生命周期created,若是已载入百度地图API,则直接初始化地图,不然先载入API。

8、组件通讯

  • 一、vuex的底层原理: 首先,vuex里面有5大核心概念,经常使用的有4个,state,mutation,action,我写的组建。 我要在组件里面进行this.$stor.state.data,咱们要调用action的方法的话,用到的displaych,若是想拿到mutation的方法,咱们也能够用commit调用mutation里面的方法。 mapActions,mapMutations,mapGetters
  • 二、bua总线,自定义事件,自定义一个事件给他,在子组件能够给bus事件传值,而后父件能够从里面拿值。
  • 三、父子传值 父给子传值,就是经过props这个参数把父组件的值传给子组件,这样作有个缺陷,就是子怎么传给父?

9、ES6(简单说一些常常用的方法)

十大新特性:json

  • 默认参数
  • 箭头函数
  • let,const
  • 字符串模板
  • 拓展运算符
  • 导入导出模块
  • for-of
  • 解构赋值
  • new Set()

Let和var区别:

  • let声明的变量不能在声明变量以前调用,而var声明的变量就能够用使用。
  • var定义的变量是全局变量或者函数变量,let定义的变量是块级的变量。

Let和const区别:

  • let声明的变量能够改变,值和类型均可以改变,没有限制。
  • const声明的变量不得改变值,这意味着,const一旦声明变量,就必须当即初始化,不能留到之后赋值。

10、数组的方法,增删改查(详细点)深度拷贝,浅度拷贝

方法有:Push、slilce、concat、reverse、includes、sort、map ES6(for-of)、ES5(forEach、for-in)、通用for循环后端

例如:我这里定义一个数组arr1,放1234567,又定义了一个空数组arr2, 咱们要赋值给空数组,那么深拷贝和浅拷贝的区别就在于,浅拷贝就是直接arr2=arr1,这样实际上是咱们把arr1的指针指向给了arr2,可是若是咱们改变arr2,会影响到arr1,这一般咱们不但愿看到的,因此呢咱们就要用深拷贝,不是指针的改变,而是用循环的方式,解构赋值方式,map、forEach让arr1的每个值都过去,深拷贝和浅拷贝也不只仅做用于数组,也能够做用于对象。

11、生命周期

Vue的生命周期有8个,我就讲讲经常使用的几个吧

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated beforeDestroy、destroyed、errorCaptured

经常使用的:

  • Created(建立后):是用来请求数据,用户打开页面在显示前就经过这个生命周期拿到数据的。
  • Mounted(挂载后):到这一步,就表示整个vue实例已经初始化完成,进入运行阶段,若是要使用某些插件操做DOM节点,就在mounted中进行
  • Updated:的话我就用来简单的例子说明一下,例如2个组件传值,例如选项卡,用户点击其中一个项目,咱们要传一个下标过去另外一个组件里面改变里面的ajax请求的值,这个方法就是在updated里面执行的,可让给用户呈现不一样的信息。
  • Destroyed:的话例如咱们切换路由的时候,一些用不到的变量,定时器的这些东西会缓存起来,致使内存泄漏,影响性能问题,咱们就能够用destroyed这个销毁触发的生命周期把这些东西销毁。

12、路由生命钩子

  • beforeEnter:咱们在params路由里配置了bdforeEnter的钩子函数,函数咱们采用了ES6的箭头函数,须要传递三个参数。
  • to:路由将要跳转的路径信息,信息是包含在对像里边的。
  • from:路径跳转前的路径信息,也是一个对象的形式。
  • next:路由的控制参数,经常使用的有next(true)和next(false)。

路由拦截:

在router里面判断,在跳转该路由的时候验证用户的登录信息,若是验证不经过就跳转到登录页面,这个导航须要再写在beforEach里面,还有一个是ajax请求的时候有响应拦截和请求拦截,就是token令牌,就是用户第一次登录的时候会把帐户密码发送给服务器验证,若是验证经过,服务器会返回一个令牌,咱们就把这个令牌进行本地存储,在用户下次进来的时候那着这个令牌跟ajax请求一块儿发送服务器验证,经过以后就不用登录了。

十3、keepalive activied

Keepalive经常使用在是否缓存该组件或路由,在keepalive 里面定义一个属性include=“a”,那么包裹在里面的名字为a的component的组件将,exclude就是跟include。

十4、Webpack

咱们项目是一个总体,webpack经过一个入口文件,将从这个问题件开始,找到项目里面全部依赖的文件,使用loader处理他们,最后打包成为浏览器能够识别的js文件。

十6、状态码

  • 200,请求成功,
  • 304未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。
  • 404找不到资源,多是url错误。
  • 500服务器内部错误,没法完成请求

十7、怎么解决跨域

咱们公司通常都是用服务器代理,后端都帮我作好了接口,咱们直接请求就好了,后端只须要弄个响应头就能够了,可是要我本身解决跨域能够用jsonP来作,可是如何写我可能要看文档才能作,好像是利用script标签能加载其余域名的js文件的原理,来实现跨域数据的请求,还有一个CORS,就是跨域资源共享,就是在头部加一个东西,在请求头的时候加一句东西,让服务器设置一个头部,CORS须要浏览器和服务器同时支持,这样就能够解决。

十8、Ajax底层原理

New一个Request请求对象,经过onreadystatechange监听里面的状态,看是否返回数据,拿到数据就对数据进行处理。
复制代码

十9、双向数据绑定原理

减轻Controller层或者View层的压力,实现更加清晰化代码。经过对ViewModel层的封装:封装业务逻辑处理,封装网络处理、封装数据缓存等,让逻辑处理分离出来,而且不须要处理Model数据,使得Controller层或者View层结构简单,条理清晰。
复制代码

二10、VUE的Computed(追踪器),watch(监听器)的区别

举个例子,若是data里面有个数值0,如何然这个数值经过一系列的操做变成其它10,这个就在computed的做用,watch就是监听数据的改变,好比说这个0变成了10,这个数值改变了,立马执行watch里面的方法。 若是要调用一个数据,在Watch下面是一对一的,因此在调取Watch的参数的话每次都要从新执行一遍,性能很差, Computed下面是写不少参数,都跑一遍,把逻辑结果保存在内存里面,下次调用的时候把内存结果本身返回给你,性能更优效率更高。

总结:

Computed通常用于计算属性,Watch通常用于监听数据变化,当数据发生变化的时候,执行某一项操做

二十一. CSS3有哪些新特性?

  • 1.选择器
  • 2.CSS3 边框(Borders)(圆角边框,添加阴影框)
  • 3.CSS3 背景(background-clip、background-size)
  • 4.CSS3 渐变(线性渐变、径向渐变)
  • 5.CSS3 文本效果(text-overflow(修剪刀)、text-shadow(阴影))
  • 6.CSS3 字体
  • 7.CSS3 转换和变形(transform)
  • 8.CSS3 过渡(transition)
  • 9.CSS3 动画(animation)
  • 10.CSS3 多媒体查询
  • 11.CSS3伸缩布局盒模型(弹性盒)

二12、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何 区分HTML和HTML5?

新特性:

  • 1)拖拽释放(Drag and drop) API
  • 2)语义化更好的内容标签(header,nav,footer,aside,article,section)
  • 3)音频、视频API(audio,video)
  • 4)画布(Canvas) API
  • 5)地理(Geolocation) API
  • 6)本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  • 7) sessionStorage 的数据在浏览器关闭后自动删除
  • 8) 表单控件,calendar、date、time、email、url、search
  • 9) 新的技术webworker, websocket, Geolocation

移除的元素:

  • 1)纯表现的元素:basefont,big,center,font, s,strike,tt,u;
  • 2)对可用性产生负面影响的元素:frame,frameset,noframes;

支持HTML5新标签:

  • 1)IE8/IE7/IE6支持经过 document.createElement 方法产生的标签,能够利用这一特性让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还须要添加标签默认的样式(固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架)

二十3、响应式布局

  • ① 设置 Meta 标签 在标签里加入这个meta标签。
  • ②经过媒介查询来设置样式 Media Queries Media Queries 是响应式设计的核心。· 它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px,那么能够这样写: @media screen and (max-width: 980px) { #head { … } #content { … } #footer { … } }
  • ③设置多种试图宽度 如咱们要设定兼容 iPad 和 iphone 的视图,那么能够这样设置: /** iPad / @media only screen and (min-width: 768px) and (max-width: 1024px) {} / iPhone **/ @media only screen and (min-width: 320px) and (max-width: 767px) {}

二十4、Web前端性能优化

屏蔽 (屏蔽开发环节的一些提示信息和无关的报错信息进行屏蔽)
对项目的的文件进行压缩
对路由组件进行懒加载
V-for 的item 添加key值,方便vue内部准肯定位列表数据减小对比
细分vue组件,方便在组件信息更新的时候不会形成大规模从新渲染。
减小watch使用
内容图片按需加载
使用loading让用户看到数据正在请求而不是一直白屏影响体验。
复制代码

二十5、数组去重,对象合并。

方法有:new Set(),sort()排序去除相等项,for...of + includes(),双重 for 循环,Array.filter() + indexOf 咱们能够定义2个数组合,将两个数组拼接为一个数组,而后使用 ES6 中的 Array.filter() 遍历数组,并结合 indexOf 来排除重复项

二十六. 一次完整的HTTP事务是怎样的一个过程?

  • 基本流程:
    • a. 域名解析
    • b. 发起TCP的3次握手
    • c. 创建TCP链接后发起http请求
    • d. 服务器端响应http请求,浏览器获得html代码
    • e. 浏览器解析html代码,并请求html代码中的资源
    • f. 浏览器对页面进行渲染呈现给用户
相关文章
相关标签/搜索