面试之路(不断更新)
最近想换一份工作,在各大招聘网都投了简历。回应的寥寥无几~~~~,说到底就是太菜了。记录一下笔试题还有面试过程中问的问题,分享分享。
关于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.jsimport 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的工作原理?
- 发送https请求:浏览器输入地址发送https请求。
- 服务端配置证书:https请求需要在服务器上配置一套数字证书。这套证书其实就是一对公钥和私钥。公钥可以理解为锁头,私钥可以理解为钥匙。钥匙只有自己有。锁头可以给别人锁东西。只有通过钥匙才能打开知道里面是什么内容。
- 传输证书:将证书传输给客户端。
- 客户端解析证书、传输加密信息:客户端要验证证书是否有效,这个证书包含颁发机构,有效时间。如果证书有效就生成一个随机数,用证书对随机数进行加密。然后将这个加密后的随机数发送给服务端。
- 服务端解密、传输加密信息:服务端用私钥对加密后的随机数进行解密获取到随机数。然后通过对称加密,对称加密就是将随机数和信息进行混合加密发送给客户端。这样只有私钥和随机数才能打开里面的信息。
- 客户端解密:客户端通过私钥解密获取到信息。这样就能保证信息的安全性。
关于笔试
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