大家好，我来自驾考宝典。时间不知不觉进入2018金三银四了，想必很多朋友已经看过网上新出的各大厂面试题，多如牛毛。本人幸运，去过美团、58同城、青云QingCloud、蛋壳公寓等公司面试过。如今工作到现在，个人的知识体系也在逐渐建立中，更加清晰化。总结了一套个人关于前端知识体系的面试题，主要是工作当中运用的技术点和坑，希望以此共勉。

Q:JS jQ 部分

0、将数组进行正序排序，比如  -> 

 var arr = [ { name : 'a', value: 21}, { name : 'b', value: 10}, { name : 'c', value: -1}, { name : 'd', value: 1}];

该怎么写；若用箭头函数输出，() => {} 和() => ()区别是什么，各将输出什么。

如果数组是这样 var arr = [5,20,40,15];用箭头函数输出，() => {} 和() => ()，又各将输出什么。为什么没有实现我们想要的排序，该如何做。

如果是二维数组 var arr = [ [30, -5, 0, 5], [100, 50, 20], [1, 15, 10] ]，又该如何做。

1、如何将这么一组数据 var arr = ["123@qq.cn","zhangsan@163.cn"];转化为 ->

<123@qq.cn>;<zhangsan@163.cn>

2、产品需要我们前端这边制造假数据。当前页面每次刷新，页面里的数字都会自动增加固定数字或不固定数字。如果用localStorage处理，大概怎么做。

3、一个应用场景——俩个页面，一个列表页，里面有若干条数据，在详情页则有对应的详情。我需要点击某条数据时跳转至详情页，展示对应的详情，其余全隐藏。有没有自认为代码量很少、性能比较高的写法(禁止使用网上插件)。

4、如何将获取的数据，里面分别是1 2 3 … 10、102等，转化为对应的一、二、三…十、一百零二。

5、用最少的原生JS实现文字超出...显示。

6、如何优雅地用原生JS实现textarea随着内容增多，高度自动增加。

7、移动端常见的字数统计，不管是递增或递减，同时兼容pc端的复制、粘贴、撤销等操作，实时统计，以及支持移动端的emoji表情的统计，该如何实现(网上的插件兼容性太差，自己想办法写吧)。

8、define和require有什么区别。

9、dom我们都知道，bom是什么。

10、this指的是什么。

11、如何JS或jQ，监听app自带的返回键，以及安卓机里物理返回键。产品需要前端编写一个h5，里面有若干audio或video，不与客户端交互。当用户点击app自带返回键，如何暂停正在播放的文件。并处理好广大安卓机的兼容性。

12、将所有的html内容一键转化为图片，有实现的大概思路吗。html2canvas.js插件bug太多，是否有替代方案。

13、如何实现移动端旋转木马交互。

14、支付宝里的芝麻信用，目前是静态的，如何实现让小白点随着对应的分数、文案从零跳转到对应的位置。

15、移动端轮播图，比如swiper3.js，实现的原理是什么。当swiper3.js有兼容性问题时，是否有轻量级替代方案。

16、iscroll.js的替代方案有哪些，优缺点是什么。

17、中英文一键切换，前端该怎么实现。

18、模板渲染引擎用过吗。和传统的拼接字符串相比，优缺点是什么。

19、判断JS数据类型有哪些方式，它们的区别是什么。

20、什么是防抖和节流。

21、延迟加载有哪些方式，什么是阻塞模式。

22、JSON全称是什么，JSON.parse()和JSON.stringify()区别是什么。

23、移动端点击穿透、滚动穿透是否了解，是否解决过。

24、移动端点击延迟300ms，怎么处理。

25、click和input的区别。实际应用场景，当用户点击input要改变type的类型，采用jQ你会如何处理。

26、$(document).on(“click”,function(){})和$(document).on(“click”,”.xxx”,function(){})区别。

27、jQ的on、bind、live、delegate各有什么异同。

28、移动端和PC端jQ版本的选择，是否有差异，如果有，对应的规范、原因是什么。

29、雅虎军规35条（前端性能优化）说说吧。

30、什么是回流和重绘。

31、let和var的区别。

Q:css html 部分

1、html5与PC端项目的区别。

2、如何快速实现1px以下的边线。友情提示，可以讲讲ios从系统几支持类似0.5px的写法。

3、不定宽高垂直水平居中，有哪些实现方式，优缺点各是什么。

4、定位当中的fixed属性，在ios中有哪些瑕疵，如何解决。

5、footer固定在页面底部，除了fixed方式，还有哪些实现方式。你平常用的最多是哪种，在各大移动端浏览器里、app里表现如何。

6、移动端中input固定在底部，h5软键盘问题，听过吗，研究过有较好的方案吗。

7、清除浮动有哪些方式?

8、行内元素大概有哪些。

9、什么时候用img更合适，什么时候用背景图片更合适。

10、关于h5的新标签，有哪些。平常开发中，使用频率较高的，又是哪些。

11、label的作用是什么。当编写一个表单提交页面，里面有手机号字段，input的number和tel类型，有什么区别。

12、b和strong标签有什么区别，和h1对比呢，根据什么准则使用。

13、css的优先级分别是什么，各代表的权重比是多少。

14、li与li之间有看不见的空白间隔是什么原因导致的，如何解决。

15、当定义display:inline-block出现间隙时，如何处理。

16、box-sizing的border-box和content-box有什么区别。

17、h5的video、audio标签，在不同平台手机里，有遇到什么坑吗（多音频播放、暂停、自动续播，多视频播放、自定义弹窗等需求）。

18、预加载除了preload，还有什么方式吗。

19、如何区分h5及非h5。

20、讲讲dom树、cssom树的解析、绘制吧。js放在哪里比较合适。

21、在jpg、png的使用上，规范是什么。

22、移动端适配，手淘的flexible.js原理大概讲讲吧。

23、margin：0 auto和margin-left：auto；margin-right：auto哪种写法更好，为什么。同理，padding：0 5px和padding-left：5px和padding-right：5px哪种更合适。

24、现在越来越多的移动端项目会设置max-width：640px或720px，淘宝、京东、网易等都不同。到底有没有必要去设置，依据是什么。

25、input的maxlength属性主要针对哪些类型才生效。

26、background-color、background:url（）、background-size这种写法背景颜色会生效吗，不会是为什么。

27、ul li有自带的黑色圆点。当产品需要自定义原点颜色、大小时，除了用背景图片，还有什么方法。

28、如何使用纯css实现手风琴效果。把列表里的每条数据对应的详情，当点击时显示，再次点击隐藏，同时不冲突。

29、nth-of-child和 nth-of-type的区别。

框架就不问了，这次先和各位分享到这，都是本人平常工作当中的积累，和各位高大上的面试题比起来，不值一提，喜欢的朋友可以收藏下。欢迎在评论区补充更多实用的坑，下次见。