前端面试要点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试要点相关的知识,希望对你有一定的参考价值。

想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先,我们得知道前端面试中,社招和校招究竟有啥区别?

对于前端开发来说,如果说社招更看重对前端技术体系的深入理解,以及解决问题的能力话,那校招更看重的其实是基本功和学习能力(或者说是潜力)。

但其实,无论是社招还是校招,面试的时候都会问到一些曾经操作过的项目,尤其是大厂,或者热门高薪部门,面试官除必问的技术经验外,也会对技术深度进行一个基础的考核,那在这种情况下如何hold住大厂面试呢?

前端面试三要素:简历、个人介绍、技术能力。下面,就来分别聊一聊。

1、简历筛选关:

HR一般会去看简历中所提的技术栈是否匹配,怎么看呢?我们可以抓住简历中的技术名词,一般来说如果一点技术名词都没有提到,那么大概有以下几种可能:很水、很牛但概率很小、不会写简历。所以,一部分人可能会因为简历的问题没有了面试机会,这点是需要非常注意的。

2、个人介绍关:

通过了简历筛选阶段,就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意,最多3分钟!言简意赅的说明自己的工作时间,擅长技术栈和自己的工作预期。

3、项目经验表达:

对前端开发学习者而言,JS并不陌生,但大厂的JS面试题却总是显得很“陌生”,怎么样能够真正做到深入理解与高级应用?这不仅是面试过程中对前端求职者的要求,也是大多数前端开发者的痛点。

大厂面试中,面试官除了关注你的项目经验外,还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如:模块化、异步解决方案、网络、框架及原理、线程等,但在与面试官的正面battle中,求职者总会败下阵来。

所以,建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。

参考技术A

Vue面试题,React面试题,JS面试题,HTTP面试题,工程化面试题,CSS面试题,算法面试题,大厂面试题,高频面试题都需要刷刷。

v-if和v-show区别

    当条件不成立时,v-if不会渲染DOM元素,v-show操作的是样式(display)

    v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;

    v-show 则适用于需要非常频繁切换条件的场景。

    为什么 v-for 和 v-if 不建议用在一起

    当 v-for 和 v-if 处于同一个节点时,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大,而真正要展示的数据很少时,这将造成很大的性能浪费

    虚拟DOM树

    组件中的data为什么是一个函数

    一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。

    如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

    事件 事件冒泡

    性能优化

    vue和小程序区别

    null和undefined

    1.null 表示一个值被定义了,定义为“空值”;undefined 表示根本不存在定义。
    2.设置一个值为 null 是合理的;设置一个值为 null 是合理的。

    Vue事件绑定原理是什么

    原生事件绑定是通过addEventListener绑定给真实元素的,组件事件绑定是通过Vue自定义的$on实现的。

    route 和router的区别

    router为VueRouter的实例,相当于一个全局的路由器对象,里面含有很多属性和子对象,例如history对象。。。经常用的跳转链接就可以用this.$router.push,和router-link跳转一样

    route相当于当前正在跳转的路由对象,可以从里面获取name,path,params,query等

    父子传参的方式

    父向子传值props

    子向父传参 emitemitemiton

    v-model 双向数据绑定原理

    v-model是用来在表单控件或者组件上创建双向绑定的

    他的本质是v-bind和v-on的语法糖

    在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件

    cookies,sessionStorage和localStorage的区别?

    共同点:都是保存在浏览器端,且是同源的。

    区别:cookies是为了标识用户身份而存储在用户本地终端上的数据,始终在同源http请求中携带,即cookies在浏览器和服务器间来回传递,而sessionstorage和localstorage不会自动把数据发给服务器,仅在本地保存。

    存储大小的限制不同。cookie保存的数据很小,不能超过4k,而sessionstorage和localstorage保存的数据大,可达到5M。
    数据的有效期不同。cookie在设置的cookie过期时间之前一直有效,即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存。
    作用域不同。cookie在所有的同源窗口都是共享;sessionstorage不在不同的浏览器共享,即使同一页面;localstorage在所有同源窗口都是共享.

响应式/兼容

    对响应式布局的看法

    响应式布局有缺点也有优点。

        优点:面对不同分辨率设备,灵活性强,能够快捷地解决设备显示适应问题。

        缺点:兼容各种设备时所需工作量大、效率低下、代码累赘,会隐藏无用的元素,加载时间延长,
        其实这是一种折中性质的十设计解决方案,由于多方面元素影响而达不到最佳效果,
        在一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。复制代码

    PC端页面需要兼容那些浏览器

     浏览器不断更新,人们所熟知所使用的浏览器已不再是电脑自带的浏览器,
     所以在设计并完成PC端的页面时,要尽可能考虑更多的浏览器兼容性问题。
     那浏览器大致可以分为IE内核浏览器和非IE内核浏览器。

       

        IE内核浏览器:360,傲游、搜狗、世界之窗、腾讯TT

        非IE内核浏览器:Firefox、Opera、Safari、Chrome

    一般情况下主要考虑兼容性问题的浏览器是:IE6、IE7、IE8、Firefox5+、Safari、Chrome等浏览器

    vuex

    关于vuex的面试题网上的比较多,仅作参考

    1、有哪几种属性

    有 5 种,分别是 state、getter、mutation、action、module
    state => 基本数据
    getters => 从基本数据派生的数据
    mutations => 提交更改数据的方法,同步!
    actions => 像一个装饰器,包裹mutations,使之可以异步。
    modules => 模块化Vuex

    2、vuex 的 store 特性是什么

    (1) vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data

    (2) state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新

    (3) 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

    3、 vuex 的 getter 特性是什么

    (1) getter 可以对 state 进行计算操作,它就是 store 的计算属性

    (2) 虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用

    (3) 如果一个状态只在一个组件内使用,是可以不用 getters

    4、vuex 的 mutation 特性是什么

    action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态

    action 可以包含任意异步操作

    5、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

    如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里

    如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

    6、不用 vuex 会带来什么问题

    可维护性会下降,你要修改数据,你得维护3个地方

    可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的

    增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背
    复制代码



以上是关于前端面试要点的主要内容,如果未能解决你的问题,请参考以下文章

前端面试要点

前端技能树,面试复习—— 风中劲草:知识要点精讲精炼手册

前端技能树,面试复习—— 风中劲草:知识要点精讲精炼手册

2021前端工程师面试分享

2021前端工程师面试分享

2021前端工程师面试分享