阅读 1499

面试之路(不断更新)

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

关于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'
export default new 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可知道整体的调用链的完成情况以及每个节点的数据。

文章分类
前端
文章标签