前言
全系列分为四个章节,分别是电话面试部分、一面部分、二面部分、三面部分。全系列不光有题目还有详细答案,收藏转发就完事了!
希望这个系列能够助力大家,今年一帆风顺!!
正文:电话面试
之前接触过动画交互与过渡属性吗?用到什么程度?讲一讲实际使用场景
作为一个前端er,切图和交互自然是基础中的基础,信手拈来。
经常使用,交互实现在我的开发习惯里是能用原生css实现就用原生。比如一些hover操作需要淡进淡出,就需要用transation和opacity相结合去实现。还有一些窗口的抖动可以通过animation去实现,设定keyframes关键帧。加入购物车的动画可能需要结合JS去判断飞入和飞出的相对位置,利用transform:translate(x,y)进行位置的变化,然后通过transition:transform0.8slinear去控制动态飞入的时间和速度曲线,当然这些属性的出发都需要动态去添加。说到这里面试官打断了我,可能觉得说的差不多了,无情~H5的具体场景部分动画实现
这部分面试官问了一些具体场景下动态交互的实现,应该都是百度部分业务用到的。其实核心还是第一个问题中的部分属性,这里不再赘述。
制作横向滑动收起的动画时有没有碰到一些问题?
横向滑动收起如果使用display:none;去控制显示隐藏的时候会出现动画的不连贯和抖动,解决方式就是就是通过位置去视觉上的隐藏,利用定位将动画的DOM藏在屏幕之外。animation属性缩写状态下值分别代表什么?第四个呢?
这里面试官一开始没问前几个,我就把经常用的前三个说了,然后追问的第四个属性值,好在我还记得。
animation:动画名称持续时间速度函数延迟时间如何画1PX的线
因为屏幕的分辨率和浏览器的的分辨率存在换算关系,所以1像素的线在屏幕上会占用2个或者2个以上视觉像素,这点在移动端尤其明显。解决方案:
说一下深拷贝和浅拷贝及常用实现方式
浅拷贝:以赋值的形式拷贝引用对象,仍指向同一个地址,修改时原对象也会受到影响赋值表达式=Object.assign展开运算符(...)深拷贝:完全拷贝一个新对象,修改时原对象不再受到任何影响JSON.parse(JSON.stringify(obj))递归进行逐一赋值追问:使用JSON自带函数进行深拷贝有什么问题
具有循环引用的对象时,报错当值为函数或undefined时,无法拷贝用户从浏览器输入地址到看到页面发生了什么
由于是电话面试,当时心想说多了面试官也没心情听,只要把关键的节点都说出来就好。后来去百度面对面面试的时候面试官又问了一遍这个问题,然后追问了很多。
检查缓存DNS缓存页面缓存网络请求DNS域名解析建立TCP连接(三次握手机制、四次握手机制(HTTPS安全协议下))发送HTTP请求接收响应解析页面构建DOM树样式计算生成布局树渲染过程建立图层树生成绘制列表生成图块、位图显示内容部分特定情况下的性能优化
性能优化是前端面试中必问的题目,这部分前期写过三篇专门的文章,分成三个方面讲述性能优化问题,可以点击链接查看,这次面试中问到的题目在文章中都有解决方案
高级Web必备:网络优化,拿去镇住面试官
通往中高端Web前端:浏览器篇
Web前端性能优化:JavaScript细节篇
以上电话面试的内容就结束了,约定了三天后去百度面试。虽然问题不多,但是经历了近一个小时,想到问了很多关于动态交互和性能优化的题目,猜测部门应该面向用户,而且量级不小,所以后续在复习中专门巩固了相关的内容。
事实证明自己没有猜错,入职之后发现业务全是面向用户,而且日活上亿。
这里给大家一点建议,除了针对招聘信息上的招聘要求针对性复习之外,如果能够在面试前和面试官有交流,可以问一下具体是什么业务部门,这样可以提前猜测一下面试会针对哪些方面。
电话面试之后我就傻啦吧唧忘了问了,幸好还能猜测出部分针对性问题。
尾声
电话面试部分到此结束,下一部分:一面。觉得不错的同学记得点个赞呦~