初级前端面试的一些题

[FredrickYeung]

说一下你了解的 CSS 盒子模型

在一个文档中，每个元素都被表示为一个矩形的盒子。一个独立的盒子模型是由 content、border、padding、margin 这4个部分组成的。

W3C 标准盒模型一个元素的宽度（高度以此类推）应该这样计算：

一个元素的宽度 = content
盒子总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而IE 怪异盒模型一个元素的宽度（高度以此类推）却是这样计算的：

一个元素的宽度 = border-left + padding-left + content + padding-right + border-right
盒子总宽度 = margin-left + width + margin-right

解决方案： box-sizing

// W3C 标准盒模型（浏览器默认）
box-sizing: content-box;
// IE 怪异盒模型
box-sizing: border-box;

所以，为了避免你同一份 css 在不同浏览器下表现不同，最好加上：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

说一下怎么让一个未知宽高元素上下左右垂直居中

说一下原型链，实例化对象，构造函数之间的一些联系

说一下 BFC 的原理，实用例子

说一下 dom 绑定事件的几种方式

addEventListener、attachEvent、on{Event}、html绑定

DOM 事件流

事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段

有没有了解过 HTTP 、HTTPS、SPDY、HTTP2.0，说一下你的理解以及你了解的特性。说一下200和304的理解和区别。

说一下你对闭包的理解以及实际应用场景有哪些？

如何实现跨域

有没有使用过 webpack，使用过哪些 plugins，你是怎么配置的？

ES6 特性

• Default Parameters（默认参数） in ES6
• Template Literals （模板文本）in ES6
• Multi-line Strings （多行字符串）in ES6
• Destructuring Assignment （解构赋值）in ES6
• Enhanced Object Literals （增强的对象文本）in ES6
• Arrow Functions （箭头函数）in ES6
• Promises in ES6
• Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
• Classes（类） in ES6
• Modules（模块） in ES6

用最简洁的代码实现数组去重

ES6实现：

[...new Set([1,2,3,1,'a',1,'a'])]

ES5实现：

[1,2,3,1,'a',1,'a'].filter(function(ele ,index, array) {
    return index===array.indexOf(ele)
})

写一个 sleep 函数

说一下 Vue 实现双向数据绑定的原理，以及 vue.js 和 react.js 异同点，如果让你选框架，你怎么怎么权衡这两个框架，分析一下。

面对移动端的 UI 设计稿，你是怎么做到页面去适配各个设备的？

前端性能优化

雅虎前端优化35条规则翻译

说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。