唯品会前端面经+面试题集合
8.22接到唯品会的内推电面，问的问题都不难，聊了40分钟，结果没过。有点伤心(；′⌒`)
那就把面经发一发，顺便发一下在面试前搜集的网上的唯品会面经，整理出来了CSS和JS两大类问题，以及一些其他方面的问题，就当攒攒RP吧，给想去唯品会的小伙伴们一个参考。
每个问题都大概写了个答题方向，如果有不对的欢迎指正，有些问题没写答案，也欢迎小伙伴们给个方向。
面经
上来先让介绍一个最近做的项目，然后项目的难点是什么。我说了一个难点，然后又说了一个还在构想没实现的功能。面试小哥哥就跟我探讨了一下怎么去实现，但是感觉我跟他脑回路不太对的上，反正他把我的意思理解错了（不过下来想了想确实他的思路才更清晰）。
说完这个又问有没有做过大一点的很多网页的项目，我说之前跟同学一起做的一个购票网站。然后他问你们项目中网页怎么多，重复的像header和footer这种是怎么去实现的。我说当时就是复制粘贴。他就问你现在有什么其他想法没，我说可以用像webpack这样的构建工具去做一个模板再插入不同的内容（下来查了下也可以用react，vue这些框架的组件去实现）。
然后他就问用过webpack没，我说只是了解各项配置，没有具体去用webpack做过什么项目。
然后问了js的闭包，答完之后还问函数的作用域是定义的时候确认的还是调用的时候。我说定义的时候。他还再三跟我确认，吓得我差点以为自己答错了。
然后是HTTP缓存，又问如果是我的话怎么实现HTTP缓存。
问最近在学什么，这里我有点作死，他打电话前我正在看vue，他一问我就答这个了，但其实我才看了半个小时，问了几个基础点的问题都支支吾吾的，他就下一题了。
然后问为什么做前端吧。我说因为开心啊（是不是听起来不太靠谱哈哈哈(:з」∠)），多说了几句之后又问为什么想来唯品会，我说唯品会电商的话肯定会比较注重性能优化这块吧，我觉得可以学到很多东西。
然后他就问性能优化了，我说了一堆，说完之后他问你刚刚说了用CDN，那你跟我说说CDN吧。
我就说了CDN是什么，干嘛用的。他又让我说原理，这个我就有点蒙蔽了，不知道他到底想问啥。具体的反正也没答上来，然后时间差不多了。他就让我问问题了。
面试题整理
CSS类
-
CSS盒子模型
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
-
position的几种值，相对谁定位，百分比以谁为参照
-
absolute:绝对定位，相对于static定位以外的第一个父元素进行定位
-
fixed：绝对定位，相对于浏览器窗口进行定位
-
relative：相对定位，按照元素的原始位置对该元素进行定位
-
static：默认值。元素出现在文档流中。
-
inherit：从父元素继承position属性的值。
百分比以父容器为参照
-
-
CSS reset
因为不同核心的浏览器对CSS的解析效果呈现各异，导致所期望的效果跟浏览器的“理解”效果有偏差，css reset就是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”。
有必要重置的元素才写，不要照搬全抄。
-
CSS放在底部和顶部的区别（？）
css放在顶部；如果放在底部，浏览器构建完DOM树，然后才开始渲染，当渲染树构建完成，又要重新渲染整个页面，造成资源的浪费。
重要的CSS和JS放在顶部，次要的放在底部
（JS放在body和header中的区别）
-
CSS选择器的优先级
CSS的选择器类型：标签选择器、类选择器、ID选择器、全局选择器、组合选择器、后代选择器、群组选择器、继承选择器、伪类选择器、字符串匹配的属性选择器、子选择器、CSS相邻兄弟选择器
!important属性会覆盖任何样式，权重最高
!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
后写的样式会覆盖先写的样式
ID选择器是唯一的，不要再在前面写其他选择器了
-
CSS link和import的区别
-
<link rel="stylesheets" href="..." />，link是html标签，只能放在html源码中。link引入的css文件在页面加载之前完成。 -
@import url(...),import在html和css中都可以使用，相当于一种css样式。import引入的css会在页面加载完成后再加载。（如果写在头部的<style>标签呢？）
-
-
iconcss （？）
-
左侧固定，右侧自适应两栏布局（一直会问你除了这个有没有别的方法，最后说了四种才问下一题）
-
左边左浮动，右边加个overflow:hidden;
#lt{ float: left;width:200px; background: #ff0;} #rt{ overflow: hidden; background: #f0f;} -
左边左浮动，右边加个margin-left;
#lt{ float: left; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;} -
左边绝对定位，右边加个margin-left;
#lt{ position: absolute; top:0; left:0; width:200px; background: #ff0;} #rt{ margin-left: 200px; background: #f0f;} -
左右两边绝对定位，右边加个width,top,left,right
#lt{ position: absolute; top:0 ; left:0 ;width:200px; background: #ff0;} #rt{ position: absolute; top:0 ; left:200px; width: 100% ; rigth:0;background: #f0f;}
左右两边固定，中间自适应，且中间内容优先显示布局的几种方法
第一种：左右两边绝对定位法,中间用margin-left、margin-right；
#main{margin:0 200px; overflow: hidden; background: #ccc;} #left{position:absolute; top:0; left: 0;width:200px;background: #ff0;} #right{ position: absolute;top:0; right:0; width:200px; background: #0ff;}第二种： 中间的盒子绝对定位，左右两边的盒子左右浮动
#main{ position: absolute; top:0; left:200px; right:200px;background: #ccc;} #left{ float:left;width:200px;background: #ff0;} #right{ float:right;width:200px; background: #0ff;}双飞翼和圣杯布局？
-
-
如果下面再来一个元素，怎么处理（分别对应上一题不浮动、浮动、绝对定位等等的情况） （？）
-
清除浮动的方式 clear:both的含义
元素两侧都不允许出现浮动元素
-
对布局有什么心得
-
响应式@media screen and （max-width=780px）
屏幕尺寸小于780px
-
rem em px区别
-
px：像素，相对长度单位，相对于显示器的屏幕分辨率
-
rem：相对长度单位，相对于根目录。移动端一般采用rem。
-
em：相对长度单位，继承父元素的字体大小。值不固定。
在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em
-
-
display visibility opacity 的区别
{ display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
-
IE6下的双边距、内联和块级元素等
-
双边距问题：当元素的浮动方向与它的margin方向一致时，IE6会把margin值解析为原来的2倍
如何解决： 1.给float元素添加display:inline
2.给ie6写一个hack，值为正常值的一半，例如：
margin-left:20px;ie6:_margin-left:10px;
-
-
做表单类页面需要注意哪些问题？
-
font-face是什么
可以自定义字体
-
实现一个圆环进度条，如何用css画圆环里的进度条
两个div，一个左边一个右边，都只有一半的border，然后分别设置overflow:hidden，通过旋转来得到想要的样式
-
页面效果切换，当鼠标划过时当前div消失，换成另一个div显示，用css怎么实现
hover属性，设置z-index
JS、框架类
-
闭包是什么，写一个闭包，一般可以用在哪里，好处在哪
闭包是指一个函数的内部函数被返回之后，在函数外部被另一个变量引用的时候，就形成了闭包。
function a(){ var i=0; function b(){ console.log(i); } return b; } var c = a();//这时c的引用就指向了a的内部函数b c();//此时c会打印出i的值，0 i = 1; c();//此时打印出来的值还是0，因为函数中的自由变量只会在函数定义时的父作用域去找通常用于创建一个内部变量（私有变量），使得这个内部变量不能被外部修改。但可以通过传递的指定函数借口来进行修改。
常用的例如用for循环来绑定事件的时候。
（注意，由于闭包内的部分资源无法自动释放，容易造成内存泄漏）
-
JS原型和原型链（大概说到对象
__proto__和构造函数prototype的关系就差不多了，没有继续问继承）__proto__：隐式原型，每个引用类型都有，每一个对象的私有属性，天生的。prototype：显示原型，所有的函数（构造函数？）都有，是后天赋予的。原型链查找：调用一个对象的属性或方法，一旦这个对象没有，就去这个对象的
__proto__中查找，对象的__proto__指向自己的构造函数的prototype属性。JavaScript中每个对象都有一个内置属性prototype，ES5之前没有方法可以得到这个属性，大多数浏览器都支持通过
__proto__来访问。 -
网站的性能优化、CDN、怎样减少首屏加载时间？
两大原则：
- 多使用内存、缓存或其他方法
- 减少CPU计算、减少网络请求
从哪入手：
- 加载页面和静态资源
- 静态资源的压缩合并
- 静态资源缓存
- 使用CDN让资源加载更快
- 使用SSR（服务端渲染），数据直接输出到HTML中
- 页面渲染
- CSS放前面，JS放后面
- 懒加载（图片懒加载，下拉加载更多）
- 减少DOM查询，对DOM查询做缓存
- 减少DOM操作，多个操作尽量合并在一起
- 事件节流
- 尽早执行函数
CDN：
Content Delivery|Distribute NetworkCDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。怎样减少首屏加载时间：
图片懒加载：先指向一张较小的或者不指向图片，将真正的图片地址放到元素属性如
data-src中，监听页面的滚动事件，到滚动到时才加载。（可以给页面滚动事件加一个节流函数） -
浏览器缓存机制，怎么处理浏览器缓存问题
主要是HTTP协议定义的缓存机制。浏览器依靠请求和相应中的头信息来控制缓存。
头信息中的
Cache-Control的值可以是public、private、no-cache、no-store、no-transform等等等public:所有内容都将被缓存。
private:内容只缓存到私有缓存中。
no-cache:所有内容都不会被缓存。
no-store:所有内容都不会被缓存到Internet临时文件中。
must-revalidate/proxy-revalidation:如果缓存的内容失败，请求必须发送到服务器/代理进行重新验证。
max-age=xxx(xxx is numeric):缓存的内容将在xxx秒失效，在HTTP1.1中可用，比expires、last-modified优先级高。
last-modified，Etag
-
js和css中缓存是怎样的
-
在项目中，当第一次从服务器download时，第一次下载缓存了，然后如果你要更新的话，是如何更新缓存的。（如果修改的文件很多呢？）
-
浏览器加载过程，一个网站的网页是如何加载的（解析文本、树节点...）
- 加载一个资源的过程
- 浏览器通过DNS得到域名的IP地址
- 向这个IP的服务器发送HTTP请求
- 服务器收到，处理并返回HTTP请求
- 浏览器得到返回内容
- 页面加载过程
- 根据HTML结构生成DOM树
- 根据CSS生成CSSOM（CSS Object Model）
- 结合DOM和CSSOM，生成一颗渲染树
- 根据渲染树开始渲染和展示
- 遇到
<script>时，会执行并阻塞渲染（JS可能会修改DOM树）
- 加载一个资源的过程
-
this
this指向执行上下文。要在执行时才能确定它的值
- 作为构造函数执行
- 作为对象属性执行
- 作为普通函数执行
- call apply bind
-
call
-
apply
-
冒泡和事件捕获
DOM事件流：三个阶段：事件捕捉，目标阶段，事件冒泡
事件冒泡：事件从发生的目标开始，沿着文档逐层冒泡，到document为止。
事件捕获：事件从最不精确的事件目标到最精确的目标。
addEventListener第三个参数为true是事件捕获，false为事件冒泡。IE只支持事件冒泡，不支持事件捕获。
如何阻止事件传播：
stopPropagation()，IE下设置cancelBubble=true如何阻止事件的默认行为：使用
preventDefault()方法，IE下设置window.event.returnValue = false; -
浏览器事件触发的大概流程
看上一问。
-
继承
-
变量污染
-
跨域的解决办法（实现方式）cross-domain
跨域：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成，是浏览器对JavaScript施加的安全限制。同源指域名，协议，端口均相同。
-
模块化、模块化编码
-
JS事件代理，怎么代理，什么好处（判断e.target）
事件代理就是利用事件冒泡，只指定一个事件处理程序。
-
HTTP状态码
- 200：请求成功
- 301：资源（网页等）被永久转移到其他URL，浏览器会将网址和内容的抓取都转移到新的网址中；302为暂时性转移，浏览器会抓取新的网址的内容，但地址仍旧是旧网址的。
- 304：Not Modified
- 404：请求的资源（网页等）不存在
- 500：内部服务器错误
-
封装一个用ul模拟的select控件
-
www(.vip.)com怎么把括号里的字符串取出来。（正则，如何创建正则式|对象 ，g和i分别代表什么）/www(\.vip\.)com/new RegExp('www\.vip\.com') -
写一个数组去重
-
遍历数组法
function uniqueArr1(arr) { var tempArr = []; for(var i=0;i<arr.length; i++) { if(tempArr.indexOf(arr[i])===-1) { tempArr.push(arr[i]); } } return tempArr; } -
对象键值对法
速度快，占内存较大
新建一个对象和数组，遍历传入数组时，判断值是否为js对象的键，不是的话给对象新增并放入新数组。
function uniqueArr2(arr) { var tempObj = {},res=[],len=arr.length,val,type; for (var i=0;i<arr.length;1++){ val = arr[i]; type = typeof val; if(!tempObj[val]){ temObj[val] = [type]; res.push(val); } else if(tempObj[val].indexOf(type) < 0) { tempObj[val].push(type); res.push(val); } } return res; } -
数组下标判断法
如果当前数组的第i项在当前数组中第一次出现的位置不是i，那么表示第i项是重复的。不重复的话存入结果数组
function uniqueArr3(arr) { //首先将数组第一项存入缓存数组中 var tempArr = [arr[0]]; for(var i=1;i<arr.length;i++){ if(arr.indexOf(arr[i]) === i) { tempArr.push(arr[i]); } } return tempArr; } -
排序后相邻去除法
调用sort()方法排序，只用检查最后一个值是否与当前元素相等即可.
会修改原数组
function uniqueArr4(arr) { arr.sort(); //存入原数组的第一个元素 var res = [arr[0]]; for(var i=1;i<arr.length;i++){ if(arr[i]!==res[res.length-1]){ res.push(arr[i]); } } } -
优化遍历数组法
当前元素在右边的数组中没有重复的，就放入结果数组中，否则跳出循环检查数组中的下一元素。
获取没重复的最右一值放入新数组（检测到有重复值时终止当前循环并进入顶层循环的下一轮判断）
function uniqueArr(arr) { var res = []; for (var i = 0, l = arr.length; i < l; i++) { for (var j = i + 1; j < l; j++) { if (arr[i] === arr[j]) { j = ++i; } } res.push(arr[i]); } return res; }
-
-
设计模式（...观察者模式）
- 工厂模式
- 单体模式
- 观察者模式
-
AppCan是什么框架来的
移动应用开发，混合应用开发，web+原生。
-
JS定时器，写定时器用到了哪些函数模块
setInterval
-
jQuery选择器哪些加载起来效率更高
ID选择器加载最高效，因为使用了js的getElementById函数。其次是类型选择器，然后是class选择器。
使用类选择器时结合类型选择器，例如input.class
-
对jQuery的API或者功能进行分类（jQuery源码）
DOM操作，元素属性操作，样式操作，动画，位置，AJAX
(function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小 window.jQuery = window.$ = jQuery; })(window);
-
JS写日历，如何判断当前月份第一天应该显示在哪儿
判断当前月份的第一天是星期几。
var date = new Date(year,month-1,1); date.getDay(); -
什么是JSONP，JSONP原理
JSON（JavaScript Object Notation）
JSONP（JSON with Padding）是JSON的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
-
AJAX
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function (){ if(xhr.readyState === 4 && xhr.status === 200) { //.... } } //true是异步，false是同步 xhr.open("GET","/test.js",true); xhr.send();
-
重绘（redraw）和重排(reflow)有什么区别
重绘：是一个元素的外观变化所引发的浏览器行为；例如改变visibility、outline、背景色等属性。
重排：是引起DOM树重新计算的行为。引发重排的行为：添加、删除可见的DOM；元素位置改变；元素的尺寸改变；页面渲染初始化；浏览器尺寸改变。
浏览器会维护一个队列，把所有引起重排、重绘的操作放入这个队列中。等队列的操作达到一定的事件间隔，浏览器就会flush队列。如果向浏览器请求一些style信息，会让浏览器flush队列。
让要操作的元素进行“离线处理”，处理完后一起更新：
使用DocumentFragment进行缓存操作，引发一次回流和重绘。
使用display:none技术，只引发两次回流和重绘。
使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘。
-
一般用jq的时候是怎么绑定事件的？
$("#id").on('click',function(){ //... });
-
nodejs
-
怎样把一些内容加到页面上？（？）
其他
这里的问题有点杂，就没写答案了。
- 给我看了一个设计图，说说它哪里不合理
- 又拿出一个上面设计图的改进版，问我这样改好不好，怎么好
- 为什么想来唯品会
- 你想要的薪酬是多少
- 最新前端技术
- 手机建站建设经验
- JS框架
- 怎样可以成为一个好前端
- 让你设计一个表单样式你会怎么设计（我说Bootstrap的表单样式就挺好的，他问我为什么觉得好）
- 学过这么多基本课程，Linux的基本指令都会吗，说一说
- 数据结构排序知道吗？都有啥？于是冒泡排序啊快排啊巴拉巴拉，还好之前记得
- 二叉树知道吧，画了一个树，后序遍历之后的顺序写给我看，还好上个礼拜偶然的过了一下遍历的知识
- 斐波那契数列怎么实现？任何语言都可以，伪代码也可以，恩这个比较简单，于是面试官开始看我带过去的代码
- 学过算法?能解释一下动态规划吗?
- 了解B+树吗
- Linkedlist和ArrayList的区别
- 个人规划
- 项目细节、项目中有遇到什么问题，是如何解决的。团队细节、团队协作。
- 做的项目有用到h5吗
- 有没有做过离线应用
- 你是怎么处理浏览器之间的兼容性问题的？
- boostrap的设计理念是怎样的？
- 如果你学的这些框架，来我们这里用不上，这里比较偏后台一点，你怎么看？
- 做表单类页面需要注意哪些问题？
- 为什么会学这些js框架（angular、node、react）
- 让你设计一个表单样式你会怎么设计（？）
