100%要记的面试题

yushulingfeng
184 阅读15分钟

一、项目上线流程：

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

二、本地存储 sessionStorage，localStoragejis，cookies

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

区别：

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

三、promise

就例如用原生ajax写请求的时候是异步，返回到结果之后我们拿到了数据，而且必须要再这后面写逻辑代码，这样就会很多东西再里面，一层套一层，结构就非常不好看，就容易造成回调地狱，如果promise的话，只要执行完ajax完之后执行then或away，我就执行下一步，这样的结构很简单很多，promise等待语诺ajax拿到数据后进行下一步。 Then就是，away就是监控promise里面执行的异步操作，在完成之后立马执行away。

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

四、闭包的原理:

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

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

五、面向对象，原型链，工厂模式，构造函数模式：

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

工厂模式：一般操作是我们先new一个对象，一开始就用字面量形式，对象点什么点什么的方式很费劲，但是如果我们工厂模式，就是先定义一个函数，里面new一个对象，然后return一个对象，我们可以调用这个对象去新建很多个对象是吧？但是工厂模式会有一个缺点，就是无法识别这是谁增的，增加了系统的复杂性。 工厂模式最大的优点在于实现对象的创建和对象的使用分离，将对象的创建交给专门的工厂类负责

构造函数模式：就是里面都是放构造函数，里面都是放this.name=name，但是这样可以解决一个函数究竟是谁生的，但是所有对象都会有这样的一个方法，他们的指针都是不一致的，这样并不是我们想要的，所以我们就引入了原型：原型就是构造函数方法，其中一个有一个自定义与原型重构函数方法，里面放的也是this，但是里面的方法会存放在一个叫做propotype里面，这是一个原型对象，这里面放的是存放公共公有属性，这就是原型。

原型链就是：我们的原型会生出很多很多的儿子，但是可能我们的原型可能也是别人的儿子，上面可能还有一个原型，比如说我们在其中一个里面找一个a方法，在这个原型里面找不到这个方法就会沿父亲往上找，这就是原型链。

六、你如何实现下拉刷新

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

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

  • 1、需要去申请一个百度地图秘钥。
  • 2、进行页面布局，需要安装vue-Bmap，新建mapConfig.js文件，用来放置申请的秘钥等相关变量参数因为我的功能还需要在指定城市搜索，所以定义了一个mapCityName来存储城市名。
  • 3、在组件中创建一个容器，用来显示百度地图宽度为100%；组建中引入Bmap
  • 4、在methods方法里面构建方法，实例化地图加载地图搜索插件，实现拖拽，拖放等功能。
  • 5、用到生命周期created，如果已载入百度地图API，则直接初始化地图，否则先载入API。

八、组件通信

  • 1、vuex的底层原理： 首先，vuex里面有5大核心概念，常用的有4个，state，mutation，action，我写的组建。 我要在组件里面进行this.$stor.state.data,我们要调用action的方法的话，用到的displaych，如果想拿到mutation的方法，我们也可以用commit调用mutation里面的方法。 mapActions,mapMutations,mapGetters
  • 2、bua总线，自定义事件，自定义一个事件给他，在子组件可以给bus事件传值，然后父件可以从里面拿值。
  • 3、父子传值 父给子传值，就是通过props这个参数把父组件的值传给子组件，这样做有个缺陷，就是子怎么传给父？

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

十大新特性：

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

Let和var区别：

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

Let和const区别：

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

十、数组的方法，增删改查（详细点）深度拷贝，浅度拷贝

方法有：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的每一个值都过去，深拷贝和浅拷贝也不仅仅作用于数组，也可以作用于对象。

十一、生命周期

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

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

常用的：

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

十二、路由生命钩子

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

路由拦截：

在router里面判断，在跳转该路由的时候验证用户的登陆信息，如果验证不通过就跳转到登陆页面，这个导航需要再写在beforEach里面，还有一个是ajax请求的时候有响应拦截和请求拦截，就是token令牌，就是用户第一次登陆的时候会把账户密码发送给服务器验证，如果验证通过，服务器会返回一个令牌，我们就把这个令牌进行本地存储，在用户下次进来的时候那着这个令牌跟ajax请求一起发送服务器验证，通过之后就不用登陆了。

十三、keepalive activied

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

十四、Webpack

我们项目是一个整体，webpack通过一个入口文件，将从这个问题件开始，找到项目里面所有依赖的文件，使用loader处理他们，最后打包成为浏览器可以识别的js文件。

十六、状态码

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

十七、怎么解决跨域

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

十八、Ajax底层原理

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

十九、双向数据绑定原理

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

二十、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伸缩布局盒模型(弹性盒)

二十二、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框架）

二十三、响应式布局

  • ① 设置 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) {}

二十四、Web前端性能优化

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

二十五、数组去重，对象合并。

方法有：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. 浏览器对页面进行渲染呈现给用户
avatar
文章
阅读
粉丝