前端面试题

这是一份前端面试题，你可以用来面试潜在的候选人或者自测。
摘抄自--[https://h5bp./Front-end-Developer-Interview-Questions/]

​通用
​

1. 你昨天或者这个星期学到了什么？
2. 你最近遇到的一个技术挑战是什么，你是怎么解决它的？
3. 请描述一下，你完成一个网页时的工作流程。
4. 如何优化网站的静态资源
5. 当打开一个域名的时候，有多少资源将会被一次性下载？有没有例外？
6. 说出三种方法，可以减少页面加载时间的
7. 如果今年你要掌握一门新的技术，你想掌握什么技术

​HTML

1. DOCTYPE 的作用
2. data- 属性的好处
3. 为什么我们通常将css标签置于head标签之中，而将script标签置于</body>之前

​​CSS

1. id与class在css中有什么不一样
2. resetting css与normalize css有什么区别，你要如何选择
3. 描述下浮动
4. 描述一下（BFC），还有他是如何工作的
5. 有几种清楚浮动的方法，具体每一种适合的场景是什么
6. 描述一下图片精灵以及在什么情况下使用
7. 会写媒体查询吗？（看看是否会具体描述，查看这个人的主动性)
8. 会写svg吗？
   
9. 会使用css预处理器吗？使用css预处理器的优劣是什么
10. 描述一下盒子模型
11. 有没有了解用过flexbox和grid 布局，简述一下使用过程。
    
12. 固定布局与响应式布局的区别是什么？它们各自实现的主要方式。

​JS

1. 解析一下什么是事件委托
2. “this”在javascript中工作原理是什么
3. javascript中是如何实现继承的
4. 列举一下你知道的前端模块化规范，和他们的代表，分析一下他们之间的区别是什么
5. 变量null与undefine之间的区别是什么
6. 什么是闭包，怎么使用的
7. 怎么写一个自调用函数
8. 以下三者之间有什么区别？function Person(){};var Person = function(){};var Person = new Person();
9. call 跟apply的区别
10. 尽可能详细地解析一下ajax
11. 解析一下jsonP是如何工作的，为什么他不是真正的ajax
12. 描述一下事件冒泡
13. attribue属性和property属性有什么区别
14. ==和===的却别是什么
15. 解析一下什么是单页应用以及怎么取做SEO优化
16. 简述一下es6中promise的使用方法。
17. 你是怎么调试js的报错
18. 6大设计原则，23种设计模式的理解
    

​coding问题

1. 怎么让以下输出生效？

   add(2, 5); // 7
   add(2)(5); // 7

2. 下面的返回值是什么？

   "i'm a lasagna hog".split("").reverse().join("");

3. window.foo的值是什么？
   

   ( window.foo || ( window.foo = "bar" ) );

4. 
   

答案：

 闭包：闭包是一个函数，也是一种保护内部私有变量的方法，原理就是函数内部可以访问函数外部的变量。如果调用外部函数就能间接调用内部方法，内部方法可以访问其作用域内的变量。这就形成了闭包

其他

1. webpack 和 gulp的区别？​​

gulp是一个流程控制工具，它是以输入文件流和输出文件文件流的形式工作的。比如要编译scss成为css，需要一个任务流程，将css压缩需要一个任务流程，将文件打上版本戳也需要一个流程。所以gulp更多地是去做任务型的工具。

而webpack是一个模块打包工具，遵循所有文件即模块的概念。对不同的文件使用不同的loader处理，可以使用多个loader处理一种文件，输出的都是一个模块的代码。可以使用插件对模块作额外的处理，如抽取公共代码、压缩代码等操作。

它们适用的场景：gulp更灵活，更适合处理一些灵活的任务，而且比较简单；webpack比较重一点，但它是配置更适合作模块化工程化的工具。webpack适合构建vue应用，gulp适合做一些灵活轻量的任何任务，如打包图片精灵。

2.vue的优缺点

他的外部优点：上手简单，目前社区比较活跃，生态比较比较完善，从打包工具到各种组件和指令层出不穷，开源的资源非常丰富。这对于公司快速开发一个新的项目是非常有利的，因为可以借助于它海量的开源资源和解决方案。

它本身的优点： 数据双向绑定，数据驱动的模式可以让我们把主要精力专注于数据和表现。试想我们曾经有一个列表数据的话，要判断列表数据是否为空，要在js里面判断列表非空啊，循环添加字符串，追加到文档等等繁琐的操作。另外一个就是语法简约优雅，对开发者非常亲近-- data双向绑定的数据集，computed 数据的计算属性自动根据元数据作相应的变化。数据渲染到dom上v-for,v-on,v-if等语法糖大大解放了我们操作dom的成本，完善的生命周期可以让我们在更细的粒度上把握组件的渲染过程，无论是请求数据，还是解绑事件都有合适的生命周期接口可以去操作。另外一个就是灵活的组件机制驱动模块化开发，组件之间可以灵活组装嵌套，可以把模块划分可以相当灵活和自由。

它的缺点：也是数据带来的。首先一个就是异步数据的同步问题，vue构建的是一个单页面应用，应用一般是没有刷新的概念的，但是浏览器有，一刷新就会有数据同步的问题。必须对所有操作的二级数据做非空判断；第二个就是同级组件的数据同步问题，在一个组件获取的异步数据，存在store里面在另一个同级组件一刷新就没了，要每个需要用到组件都去异步获取数据，这会带来请求浪费和代码重复的问题；所以必须要做持久化存储，但是官方没有持久化存储方案，持久化存储都是要靠自己实现。另外一个就是vue是自成一个生态的，像之前jquery的那种成熟的解决方案和库都没法直接用在vue上面。官方是推荐使用es6来开发的，这带来所以它也带来了一个用人要求，就是具备最少一个能够自己封装解决方案的人才，因为有相当量的业务方案需要封装而没有业界开源的解决方案可用。

vue毕竟是这两年兴起的，生态中开源的业务解决方案和库与jquery是远远不可比的，以前基本懂点js的后端就能用相应的jquery库解决了大部分问题。现在到vue的话，vue官方推荐的是用es6作为开发语言，这个带来一定的学习成本，对手写原生代码带来一定的要求，而且开源的解决方案不足不成熟，需要能根据业务进行设计具体解决方案，封装代码的人才，这对企业的人才招聘就提出了要求。

3. js 的数据类型

3.1 基本的数据类型

Undefined, Null, String, Number, Boolean, Symbol

基本数据类型的特点就是，都是按值访问的。

3.2 引用类型

除上面6种基本数据类型之外，剩下的就是引用类型，也就是Object类型。可以细分为：

Object, Array, RegExp, Date, Function 等。

3.3 typeof 检测基本的数据类型

var a = 'dosir'; // string
var b = 24; // number
var c ;//  在chrome是'undefined',在Safari是'object’
var d = null;// object
var e = new Object();// object
var f = function(){};// function
var g = Symbol(); // symbol ;es6 新增特性

3.4 判断数组

Array.isArray(arr) // >IE8

Object.prototype.toString.call(arr) ==='[object Array]';

3.5 instanceof 判断引用类型

var a =/^a*/; a instanceof RegExp; //true

var b = []; b instanceof Array; //true

// instanceof 的原理是测试对象的原型链上是否存在一个构造函数的prototype

function C(){} 
var o = new C();
o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype

因为是通过prototype 来判断的，所以这个表达式并不一值返回的都是true，用来判断Array的话，并不一直靠谱。

参考：javascript深入了解基本类型和引用类型

4. 移动端和pc端开发的区别？