唯品会前端实习全面面经

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是html标签，只能放在html源码中。link引入的css文件在页面加载之前完成。
@import url(…) ,import在html和css中都可以使用，相当于一种css样式。import引入的css会在页面加载完成后再加载。（如果写在头部的

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，生成一颗渲染树
根据渲染树开始渲染和展示
遇到