面试之路（不断更新）

最近想换一份工作，在各大招聘网都投了简历。回应的寥寥无几~~~~，说到底就是太菜了。记录一下笔试题还有面试过程中问的问题，分享分享。

面试之路（不断更新）

关于CSS HTML

1.什么是bfc,出现bfc的原因是什么？

bfc(blcok formatting context),块格式化上下文，是页面css视觉渲染的一部分。用于决定块盒子的布局以及浮动相互影响的一个区域。原因：创建根元素、浮动、绝对定位元素、表格单元格、行内块元素、弹性盒等。

  • 特性：

    1.内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；

    2.处于同一个BFC中的元素相互影响，可能会发生margin collapse；

    3.每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；

    4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

    5.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

    6.浮动盒区域不叠加到BFC上；

2.HTML5新特性?

  • 十大特性：

    1.语义标签（更好的理解标签的作用，让页面内容结构化）。

    2.增强型表单（输入类型增强，如number、date、email等）。

    3.媒介标签<audio/>和<video/>。

    4.canvas画布。

    5.地理定位 Geolocation。

    6.拖放API。

    7.webSocket,浏览器与服务器之间的全双工通讯网络技术。

    8.webStorage localStorage SessionStorage 本地储存。

    9.webWorker。

    10.svg 可伸缩的矢量图形。

3.rem em px的区别

rem、rem是相对长度单位
rem是相对根元素html的字体大小来设定的，如果没有设置根元素px像素的话，默认是16px.即16px = 1rem。根元素字体大小不能小于浏览器最小字体大小，如chrome浏览器最小字体大小为12px 如果这设置为html元素的字体大小为10px。即10px = 1rem；则浏览器还是会执行浏览器最小字体大小12px = 1rem
em是相对父元素字体大小或者自身字体大小（有font-size属性）设定的。会存在多重继承。不建议使用。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
复制代码

关于js

1.js的数据类型有哪些?

  • 基本数据类型：String、Number、Undefined、Null、Symbol(ES6新增，表示独一无二的值)、Boolean

  • 引用数据类型：Object、Array、Function

2.可以用typeOf运算符检测一个变量是对象还是数组吗？为什么？怎样检测？

不能。当用typeOf检测对象或数组时，都是返回"object"。使用instanceOf运算符检测。typeOf判断一个变量是否为空或者属于什么类型，返回的时字符串。instanceOf用于判断一个变量是否属于某个对象的实例。

3.localStorage、sessionStorage cookie的异同？

  • 相同点：都依照同源策略，且都储存在客户端。

  • 区别：1.是否与服务端进行传输：cookie是携带在http请求头里面的里面的，需要在客户端与服务端之间进行来回传输。localStorage、sessionStorage只存在于客户端，不需要与服务端进行传输。2.储存大小：cookie一般在4k左右,localStorage、sessionStorage大小限制5M左右。3.储存时间：localStorage是永久储存的，即使关闭页面储存也还在，且在同一个域名下的可以跨页面储存。sessionStorage是临时储存的，关闭当前窗口就消失了，不能跨页面储存。cookie只能在有效时间内获取，在同一个域名下都可以获取。

4.讲一下垃圾回收机制

垃圾收集器在一定的时间间隔内重复进行查找。找出不再继续使用的变量，释放其占用的内存。

  • 标记清除，先给变量都标记上，然后除去正在引用的变量。剩下标记的就是离开作用域。没有被引用的变量。这些变量就会被垃圾收集器清除。这个方法是主流的方法。基本各大浏览器用的都是这种回收方式。

  • 引用计数，追踪记录每一个值被引用的次数。当一个变量被引用类型值赋值时，这个值的引用次数就加一，如果同一个值又被赋予某个变量，这个值就再加一。反之，如果包含这个值的变量被赋值，这个值的引用就减一。当这个值为0时。表明这个值无法被访问了。可以将其占用的空间回收了。等下次垃圾收集器运行时。就将这些引用为零的值的内存释放。

5.什么是闭包？

闭包就是有权访问另一个函数的变量的函数。常见的闭包就是一个函数返回一个函数。内部函数可以访问外部函数的变量。且外部函数的变量不会被清理。因为内部函数的作用域链包含外部函数的活动对象。内部函数的的作用域链为：闭包的活动对象、外部函数的活动对象、全局变量对象。

6.离线缓存机制？

application cache 应用缓存，是浏览器的缓存中分出来一块缓存区。缓存的文件就放在这里。使用一个描述文件manifest.file，列出要下载和缓存的资源。然后描述文件和页面关联起来。在html标签中指定manifest属性并指向文件路径。

关于Vue

1.Vue的八大生命周期，实例化在哪个阶段？data初始化在哪个阶段？

面试之路（不断更新）

  • beforeCreate:完成初始化实例、初始化事件以及生命周期(实例化在这个阶段)。

  • created:完成数据监听(data的初始化在这个阶段)。

  • beforeMount：完成编译模板。在这个过程中teamplate选项的优先级大于el选项或者$mount(el)。即实例有template属性就直接用teamplate挂载，否则寻找el属性或者$mount(el)。还有一种实例挂载是通过render()方法。这三种构建方式的优先级为：render()>template>el或者$mount(el)

new Vue({
el:"#app"
teamplate:"<p>hello pengbaba</p>"
render(createElement){
return createElement(ElementName,ElementProperty,ChildNode)
}
//在服务端渲染期间不被调用
//在实例挂载之前调用
beforeMount(){
}
})
vm.$mount("#app")
复制代码

  • mounted: 完成实例挂载。vue实例创建$el代替el。元素可以用vm.$el访问。当vue根实例挂载了文档内的一个元素。那么mounted被调用时也可以用vm.$el访问元素。mounted不能保证全部子组件也一起被挂载。如果想要等到整个视图渲染完毕，可以在mounted内部使用$nextTick()

//在服务端渲染期间不被调用
//在实例挂载之后调用
mounted(){
this.$nextTick(function(){
}
}
复制代码

  • beforeUpdate和updated：触发这两个生命周期的前提是：data中更新的数据必须与模板进行了绑定。data更新——beforeUpdate()——虚拟DOM更新——patch——重新渲染视图——updated()。。updated不能保证子组件一起被重绘，想等到整个视图重绘完毕，可以在updated内部使用$nextTick()

//在服务端渲染期间不会别调用，只在初次服务端渲染时调用
beforeUpdate(){
},
//在服务端渲染期间不被调用
updated(){
this.$nextTick(function(){
}
}
复制代码

  • beforeDestroy和destroyed：

//在服务端渲染期间不会别调用
//在实例销毁之前调用。这一步实例仍然可以使用
beforeDestroy(){
},
//在服务端渲染期间不被调用
//销毁之后调用。Vue实例对应的指令解绑，事件监听移除，所有子实例也被销毁
updated(){
}
复制代码

除这八大生命周期外，还有activated、deactivated、errorCaptured钩子函数

//在服务端渲染期间不会别调用
//被keep-alive缓存的组件激活时调用
activated(){
},
//在服务端渲染期间不被调用
//被keep-alive缓存的组件停用时调用
deactivated(){
},
//我也不太清楚时干啥的，就只知道是捕获子孙组件发生错误时别调用的。下次再研究，下次一定下次一定
//感兴趣可以去官网api看看，https://cn.vuejs.org/v2/api/?#errorCaptured
errorCaptured(){
}
复制代码

2.有用过Vue.$set方法吗？在什么场景下？

有啊，当我想在响应式的对象添加一个新属性时，并且希望触发视图更新。这个时候就要用到$set方法。$set(target,property/index,value)。

面试之路（不断更新）

3.vue中的data为什么用函数返回声明而不是对象？

这是js的特性导致的。因为对象是引用类型，且组件可能被用来创建多个实例（相当于一个功能组件被多个页面调用了），如果data用对象返回的话，所有实例共用一个data,当某个实例修改data属性时候，所有实例的data属性也会改变。如果以函数返回的形式，每个实例的data都是初始的且独立的。实例之间不会相互影响。

面试之路（不断更新）

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

  • v-if是真正的条件渲染，在切换过程中，事件监听和子组件会适当的销毁重建。同时v-if也是惰性的，如果初始条件为假就什么事都不做。直到渲染条件为真时才渲染代码块。

  • v-show只是简单的css切换，display:none或block。

    v-show有更高的初始渲染消耗，v-if有更高的切换消耗。在经常切换的场景建议使用v-show,否则使用v-if

5.vue双向绑定原理？

采用数据劫持结合发布订阅者模式，通过object.defineProperty()方法给Data中的每一个属性添加getter和setter方法（这样做是为了数据的读取和修改可以追踪到，即可观测）。在读取属性的时候即执行getter()方法的时候，订阅器会收集所有订阅者，通俗讲就是收集每一个依赖这个属性的组件。这个过程称为依赖收集。在修改data数据的时（比如用户操作行为），就会触发setter()方法。这个时候就会通知之前订阅器收集的订阅者，也就是通知依赖这个属性的组件。触发组件的更新函数更新视图。

6.vue父子间的通信、兄弟间的通信

  • 父传子：在父组件引入子组件。在子组件添加一个自定义属性（如childProp），属性的值为需要传递给子组件的值。在子组件中，props中声明自定义属性childProp。这样就可以在子组件使用childProp属性获取到父组件传来的值。需要动态传值只需要在父组件声明自定义属性的时候前面加个:，如<children :childProp="parentMsg"/>

  • 子传父：在子组件中，声明一个方法如eimtParentData(),在方法内部使用this.$emit("自定义事件名"，"需要传给父组件的值")方法。在父组件中,引入子组件，在子组件上监听这个自定义事件并且添加响应该事件的方法如<children @eimtParentData="receiveData">。

//父组件
<template>
<children childProp="parentMsg" @eimtParentData="receiveData"></children>
</template>
<script>
import children from './xxx/children.vue',
export default{
data(){
return{
parentMsg:'我是鹏霸霸'
}
},
methods:{
//参数val就是子组件传来的值
receiveData(val){
console.log(val) //我是鹏霸霸
}
},
compontent:{
children
}
}
</script>
复制代码

//子组件
<template>
<button @click="eimtParentData"></button>
</template>
<script>
export default{
props:{
childProp:{
type:String,//定义接收这个属性的类型
default:"",//定义属性的默认值
}
},
methods:{
eimtParentData(){
this.$emit("eimtParentData"，"我是鹏霸霸")
}
}
}
</script>
复制代码

  • 兄弟间通信：

    1.将两个兄弟组件作为某个组件的子组件，即父组件作为中间件进行兄弟之间的通信。这种方法不推荐，随着应用程序越来越庞大，这种方法用起来很烦又难维护。

    2.通过eventBus(事件总线)，创建一个bus.js文件，文件内容很简单，就是声明一个vue实例。在需要通信的兄弟组件分别引入该文件。在需要传递信息的组件中直接调用bus.$emit()来添加实例自定义事件，在接收信息的组件中调用bus.$on来监听实例事件且需要在钩子函数created中调用。这样就可以不通过父组件达到兄弟之间的通信。

面试之路（不断更新）

面试之路（不断更新）

//bus.js
import Vue from'vue'
exportdefaultnew Vue()
复制代码

//brother1.vue
<template>
<button @click="sendToBrother">点击给brother2传值</button>
</template>
import bus from './xxx/bus.js'
export default {
methods:{
sendToBrother(){
bus.$emit("toBrother","我是鹏霸霸")
}
}
}
复制代码

///brother2.vue
<template>
<p>{{msg}}</p>
</template>
import bus from './xxx/bus.js'
export default {
data(){
return{
msg:""
}
},
created(){
bus.$on("toBrother",(msg)=>{
this.msg = msg
//msg为传递的信息
})
}
}
复制代码

关于Http(s)

1.http与https的区别？

  • http(hypertext transfer protocol)超文本传输协议，采用的是明文传输，没有任何加密。安全性低。不适合传输一些敏感信息。端口号一般为80。

  • https(hypertext transfer protoclo secure)安全套接字层超文本传输协议。通过ssl+http进行加密传输。安全性高。且需要证书支持。端口号一般为443。

2.https的工作原理？

  1. 发送https请求：浏览器输入地址发送https请求。

  2. 服务端配置证书：https请求需要在服务器上配置一套数字证书。这套证书其实就是一对公钥和私钥。公钥可以理解为锁头，私钥可以理解为钥匙。钥匙只有自己有。锁头可以给别人锁东西。只有通过钥匙才能打开知道里面是什么内容。

  3. 传输证书：将证书传输给客户端。

  4. 客户端解析证书、传输加密信息：客户端要验证证书是否有效，这个证书包含颁发机构，有效时间。如果证书有效就生成一个随机数，用证书对随机数进行加密。然后将这个加密后的随机数发送给服务端。

  5. 服务端解密、传输加密信息：服务端用私钥对加密后的随机数进行解密获取到随机数。然后通过对称加密，对称加密就是将随机数和信息进行混合加密发送给客户端。这样只有私钥和随机数才能打开里面的信息。

  6. 客户端解密：客户端通过私钥解密获取到信息。这样就能保证信息的安全性。

关于笔试

1.以下哪个标签不是HTML5新增标签？

  • A.video

  • B.font

  • C.section

  • D.nav

2.哪个是HTML5内建对象用于在画布上绘图的环境？

  • A.getContent

  • B.getContext

  • C.getGraphics

  • D.getCanvas

3.关于CSS中的单位以下哪个说法是正确的？

  • A.px是相对于显示器屏幕分辨率的相对单位长度

  • B.em是相对于body标签font-size的单位

  • C.rem是相对于父元素来设置字体大小的

  • D.夫妻vh是印刷常用单位"磅"，大小为1/72英寸

4.要去掉文本超链接的下划线，下列正确的是？

  • A.a(underline:none)

  • B.a(text-decoration:none)

  • C.a(text-decoration:underline)

  • D.a(decoration:underline)

5.下列哪一个选项不属于document对象的方法？

  • A.focus()

  • B.getElementByid()

  • C.querySelector()

  • D.bgColor()

6.下面哪一个方法是用来追加到指定元素的末尾的？

  • A.insertAfter()

  • B.insertTo()

  • C.appendTo()

  • D.appendAfter()

7.以下哪个方法会改变原数组？

  • A.slice()

  • B.concat()

  • C.splice()

  • D.join()

8."1 2 3".replace(/\d/g,parseInt)的结果是？

  • A."1 2 3"

  • B."0 1 2"

  • C."1 NAN 3"

  • D."NAN 2 3"

9.[1<2<3,3<2<1]的结果是？

  • A.[true,true]

  • B.[true,false]

  • C.error

  • D.[false,false]

10.以下程序输出结果是？

    function showcase (value){
switch(value){
case "A":console.log("Case A");
break;
case "B":console.log("Case B");
break;
case undefined:console.log("undefined");
break;
default console.log("Do not know")
}
}
showcase(new String("A")
复制代码

  • A.Case A

  • B.Case B

  • C.undefined

  • D.Do not know

11.请谈谈你对盒模型的理解，以及如何在css中告诉浏览器使用不同的盒模型来渲染你的布局?

12.请用CSS实现多行文字的垂直居中

13.javascript的typeof返回的结果有哪几种？

14.请尽可能完整的描述从输入URL到整个网页加载完毕即显示正在屏幕上的完整流程？

15.前端优化的方案有哪些？

16.写一个函数sort,将整数数组按奇偶分成两部分，数组左边是奇数，右边是偶数。

17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdefbf,则输出的，找不到则输出""

18.实现深拷贝，考虑函数以及循环引用的情况(禁止使用JSON序列化)。

19.现要按照一定顺序发起去进行第三方渠道授权的多个异步网络请求（未知个数，需设置数组），但是每个网络请求，如果报错或者失败了有多次重新请求的机会（次数可设置）。直到当前网络请求节点的次数用完了，才算整个授权调用链失败。需要封装成一个函数，返回Promise可知道整体的调用链的完成情况以及每个节点的数据。

以上是 面试之路（不断更新） 的全部内容， 来源链接： utcz.com/a/115523.html

回到顶部