oldCode
2022/09/27阅读:105主题:雁栖湖
快手2022秋招面试题以及详解
-
实习经历 -
水平垂直居中怎么实现 -
除了flex还知道什么布局方式? -
flex和grid的区别 -
什么是防抖和节流?有什么区别? -
分别的应用场景? -
在输入框输入内容,请求接口对比是否输入正确,用防抖还是节流? -
什么是事件委托? -
promise是干什么的,可以改变状态吗? -
vue有什么优势和缺点 -
seo是什么,怎么解决seo不友好 -
ssr是什么,有什么优劣,与前端渲染有什么区别吗 -
vue生命周期 -
vue2和vue3在响应式原理实现上的区别
1实习经历
讲述一下自己的实习经历,在哪实习,参与过那些项目,负责什么,做了什么,学到了什么...
属于开放性题目
2水平垂直居中怎么实现
-
使用flex布局设置居中。 -
使用flex 时也能通过给子项设置margin: auto实现居中。 -
使用绝对定位的方式实现水平垂直居中。 -
使用grid设置居中。
能说出来三四种就可以了,但是保不齐面试官还会继续问,所以尽可能的多说几种实现方式
果不其然,这一次面试官果然就继续问了
3除了flex还知道什么布局方式?
可以参考我之前写的这一片文章,有多种详细的实现方式: 我已经说了5种css居中实现的方式了,面试官竟然说还不够
4flex和grid的区别
-
flex是一维布局系统,适合做局部布局,比如导航栏组件。
-
grid 是二维布局系统,通常用于整个页面的规划。
5什么是防抖和节流,有什么区别,分别的应用场景
浏览器的 resize
、scroll
、keypress
、mousemove
等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能
为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖(debounce)
和 节流(throttle)
的方式来减少调用频率
防抖
防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
节流
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
有一个经典的比喻:
想象每天上班大厦底下的电梯。把电梯完成一次运送,类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle,超时设定为15秒,不考虑容量限制
电梯第一个人进来后,15秒后准时运送一次,这是节流
电梯第一个人进来后,等待15秒。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖
6分别的应用场景?
防抖:
-
搜索框搜索输入。只需用户最后一次输入完,再发送请求 -
窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
节流:
-
滚动加载,加载更多或滚到底部监听 -
搜索框,搜索联想功能
7在输入框输入内容,失焦后请求接口对比是否输入正确,用防抖还是节流?
防抖。
函数节流是减少函数的触发频率;
函数防抖则是延迟函数执行,并且不管触发多少次都只执行最后一次。
8什么是事件委托?
事件委托也称之为事件代理(Event Delegation)。 是JavaScript中常用绑定事件的常用技巧。是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。
它的原理是利用冒泡的原理,把事件加到父级上,触发执行效果。
9promise是干什么的,可以改变状态吗?
Promise 是异步编程的一种解决方案
它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
10vue有什么优势和缺点
优点:
-
vue是轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。
-
vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。
缺点:
-
不利于SEO优化. -
首屏加载速度慢.加载时,将所有的css,js文件进行加载. -
不支持IE678
11seo是什么,怎么解决seo不友好
seo是搜索引擎优化。在搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多的流量
单页面的内容是根据路由变化动态生成并展示出来的,很多页面的内容是通过ajax异步获取的,网络抓取工具并不会等待异步请求完成后再行抓取页面内容
解决方式可以使用SSR(服务端渲染)
或者是预渲染
12ssr是什么,有什么优劣,与前端渲染有什么区别吗
vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成,服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。
服务端渲染就是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器
服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML,网络爬虫可以抓取到完整的页面信息
SSR另一个很大的作用是加速首屏渲染,因为无需等待所有的JavaScript都完成下载并执行,才显示服务端渲染的标记,所以用户会更快地看到完整渲染的页面.
13vue生命周期
Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。
-
beforeCreate:组件实例被创建之初,组件的属性生效之前
-
created:组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用
-
beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用
-
mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
-
beforeUpdate:组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
-
update:组件数据更新之后
-
activited:keep-alive 专属,组件被激活时调用
-
deactivated:keep-alive 专属,组件被销毁时调用
-
beforeDestory:组件销毁前调用
-
destoryed:组件销毁后调用
14vue2和vue3在响应式原理实现上的区别
Vue2中通过 Object.defineProperty 实现数据劫持,使得数据实现响应式更新。Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Vue3通过Proxy(代理) 拦截对象中任意属性的变化, 包括:属性值的读写、属性的添加、属性的删除等。
Part1最后
欢迎关注公众号:oldCode
回复:面试
获取面试资料


作者介绍
oldCode
分享面试经历和前端技术