前端面试大攻略-面霸血书-内容易引起极度舒适—文末附赠学习资料
本教程适宜中小白前端,大牛自行避退。o(∩_∩)o
直接进入主题!
来到面试官面前开说!
首先做基本的自我介绍。注意基本,别太详细。涵盖:姓名、毕业学校、专业(选择性的说)
接着介绍一下你在什么公司、做过的项目(肯定是要包装。包装但不是真正意义上的作假。)企业是通过面试来考验你是否满足企业需求。你可以选择一些确实是你会做,懂得做的项目,作为自己的项目并且展示给别人看。
重点!如何介绍自己做过的项目:
1、简单的介绍项目的由来。为什么公司要做这个项目,对公司有什么好处,2-3句带过即可。别弄得跟上家公司过来搞传销似的。
2、介绍你在这个项目中负责的事情和职责。别事事你都统揽了,别搞得一个项目十几号人,什么事都你做了,其他人就只能斗地主。前端的话,可以说,我负责日常的营销活动的H5制作,购物车、订单模块前端页面的制作。
3、在你负责的项目和事情里,你用到了哪些技术。再说每一个技术点的,必须要说下用在项目的什么地方:比如说整个商城的页面切换包括购物车、订单页面都是采用Vue的路由来做。前端技术例如,像素级的还原设计页面,REM布局、弹性布局、CSS3动画、过渡效果、字体图标、canvas、本地存储、解决兼容性问题、Vue框架、Vue路由、Vuex进行状态管理、微信小程序等等。
4、接着你要说你在这个项目遇到的问题。要说一下困难的,比较棘手的问题,一来证明你具有独立解决问题的能力,二来证明你的技术到位能解决困难的问题,三说明你确实做过这样的项目。解决困难问题事情,比如说某个模块,父子组件直接的信息传递和状态管理,又或者说解决某个库兼容性问题。
5、做个总结,你在项目中的收获。比如说,技术上的收获,基本可以独立完成商城前端页面的开发等等。事业上的收获,老板加薪、升职了、表扬了等等。
再来说说,前端面试所遇到的技术点。下面给出常见的问题,基本都可以百度到,这里就不一一给出答案了。记住这些点你都要整理好,并且可以转为你自己的口述,将它背熟,是的背熟、重要的事情说3遍,背熟,背熟,背熟。因为面试很容易紧张导致头脑一片空白,所以当你很熟悉的时候,一来可以减少紧张,二来可以根据肌肉记忆,可以张口就来:
HTML相关问题
(1) 行标签和块级标签分别有哪些?
(2) 常见HTML5的标签有哪些?
(3) 怎么页面结构会比较好?
(4) 如何减少HTTP请求和优化?
减少请求的资源,将多个CSS资源打包到1个文件里。将多个JS打包到1个JS文件里。采用雪碧图将多个图片放置到1个图片里。尽量的压缩css文件、js文件、图片文件、采用无损压缩的方式或者是使用webP格式的图片。
(5) HTML5和HTML4的区别。
① 自定义标签
② HTML5兼容HTML4
③ 多出一些标签canvas/video/audio/iframe等等,多出的JS相关的API
CSS相关问题
(1) 选择器的问题,选择器权重的问题。
Id>class>element,越详细越精确的选择器权重越过,!important可以迅速将权重提高。
(2) 布局相关的问题。
正常的布局、圣杯布局、居中、定位、REM布局的原理、弹性布局、清除浮动等等
(3) Tansfrom位移、旋转、倾斜、缩放的问题?
一般问顺序执行的问题,先位移在旋转和旋转后位移有什么区别
(4) 动画、过渡性能优化的问题?
尽量减少非常多元素同时产生动画,尽量少的在1个元素里设置多个动画效果。位移的话,尽量使用transform的tranlate来做位移,不要用定位的left、top、right、bottom来实现位移。
(5) CSS兼容性问题
JS相关问题
(1) 变量的提升、函数的提升
(2) 构造对象,构造对象的方法。
构造函数、class、工程模式构造对象、单例模式
(3) 什么是原型链、原型对象、怎么在原型链上添加方法,如何通过原型实现继承
构造函数的prototype、事例化出来的对象__proto__
(4) this的指向问题
This是根据函数被哪个对象调用,那么这个this就指向谁。在箭头函数里,箭头函数定义的时候,this指向谁就一直指向谁。改变this的指向可以通过call/apply/bind都可以改变this的指向。
(5) 数组常见的方法和排序问题
数组的增删改查、数组排序、数组复制
(6) 事件的问题
Onclick跟addEventListener这两种方式监听的事件有什么区别。(addEventListener一个事件可以绑定多个函数,很多新出移动端事件比如touch等只有它支持、还可以设置捕获或者冒泡来进行监听)
如何阻止冒泡事件?Event.cancelbubble = true
事件传递参数的问题?一般在元素上绑定data-xx=xx’
(7) 如何处理操作dom
对元素对象的增删改查操作。
(8) 如何获取元素的一些信息:元素的大小、屏幕的宽度、元素的位置
(9) 如何获取浏览器的一些信息:url地址的获取、UserAgent的获取、地理位置的获取
(10) jQuery的链式原理?
(11) jQuery常用的方法有哪些?
(12) Vue虚拟DOM是什么原理?
(13) Vue数据的双向绑定的原理?
(14) Vue路由的原理是什么?
(15) Vuex状态管理的整个过程是什么样的?
(16) Vue生命周期这个过程是什么样的?
(17) React虚拟dom什么原理?
(18) React路由什么原理
(19) Redux是什么原理
(20) 小程序一些常见的API方法?
这些原理性的问题,并不是大家真的要背熟框架和库的代码,而是让你能够表述其的原理,是依据什么,是什么方式实现的。当然这些基本也可以百度找到,大家要是懒得话,后面我也会出相关这些原理的文章,大家先关注我就行了。好了,大家只要将这些搞明白弄懂了,基本10k以上的月薪唾手可得,祝大家找个好工作。
PS:面试一定多去几家,薪资才能更理想。
最后,想学习web前端ww的小伙伴们!
请关注+私信回复:“学习”就可以拿到一份我为大家准备的学习资料!
web前端学习资料