本教程适宜中小白前台，大牛自行避退。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：面试肯定多去几家，薪资才能更理想。