唯品会技术岗面试5Word下载.docx

唯品会技术岗面试5Word下载.docx

《唯品会技术岗面试5Word下载.docx》由会员分享，可在线阅读，更多相关《唯品会技术岗面试5Word下载.docx（7页珍藏版）》请在冰豆网上搜索。

他就让我问问题了。

面试题整理

CSS类

CSS盒子模型

Margin（外边距）-清除边框外的区域，外边距是透明的。

Border（边框）-围绕在内边距和内容外的边框。

Padding（内边距）-清除内容周围的区域，内边距是透明的。

Content（内容）-盒子的内容，显示文本和图像。

position的几种值，相对谁定位，百分比以谁为参照

absolute:

绝对定位，相对于static定位以外的第一个父元素进行定位

fixed：

绝对定位，相对于浏览器窗口进行定位

relative：

相对定位，按照元素的原始位置对该元素进行定位

static：

默认值。

元素出现在文档流中。

inherit：

从父元素继承position属性的值。

百分比以父容器为参照

CSSreset

因为不同核心的浏览器对CSS的解析效果呈现各异，导致所期望的效果跟浏览器的“理解”效果有偏差，cssreset就是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”。

有必要重置的元素才写，不要照搬全抄。

CSS放在底部和顶部的区别（？

）

css放在顶部；

如果放在底部，浏览器构建完DOM树，然后才开始渲染，当渲染树构建完成，又要重新渲染整个页面，造成资源的浪费。

重要的CSS和JS放在顶部，次要的放在底部

（JS放在body和header中的区别）

CSS选择器的优先级

CSS的选择器类型：

标签选择器、类选择器、ID选择器、全局选择器、组合选择器、后代选择器、群组选择器、继承选择器、伪类选择器、字符串匹配的属性选择器、子选择器、CSS相邻兄弟选择器

!

important属性会覆盖任何样式，权重最高

important>

行内样式>

ID选择器>

类选择器>

标签>

通配符>

继承>

浏览器默认属性

后写的样式会覆盖先写的样式

ID选择器是唯一的，不要再在前面写其他选择器了

CSSlink和import的区别

，link是html标签，只能放在html源码中。

link引入的css文件在页面加载之前完成。

@importurl（…）,import在html和css中都可以使用，相当于一种css样式。

import引入的css会在页面加载完成后再加载。

（如果写在头部的

lt{float:

left;

width:

200px;

background:

#ff0;

}

rt{overflow:

hidden;

#f0f;

左边左浮动，右边加个margin-left;

width:

rt{margin-left:

200px;

左边绝对定位，右边加个margin-left;

lt{position:

absolute;

top:

0;

left:

左右两边绝对定位，右边加个width,top,left,right

0;

rt{position:

100%;

rigth:

background:

​

左右两边固定，中间自适应，且中间内容优先显示布局的几种方法

第一种：

左右两边绝对定位法,中间用margin-left、margin-right；

main{margin:

0200px;

overflow:

#ccc;

left{position:

absolute;

0;

right{position:

top:

right:

#0ff;

第二种：

中间的盒子绝对定位，左右两边的盒子左右浮动

main{position:

left{float:

left;

right{float:

right;

双飞翼和圣杯布局？

如果下面再来一个元素，怎么处理（分别对应上一题不浮动、浮动、绝对定位等等的情况）（？

清除浮动的方式clear:

both的含义

元素两侧都不允许出现浮动元素

对布局有什么心得

响应式@mediascreenand（max-width=780px）

屏幕尺寸小于780px

remempx区别

px：

像素，相对长度单位，相对于显示器的屏幕分辨率

rem：

相对长度单位，相对于根目录。

移动端一般采用rem。

em：

相对长度单位，继承父元素的字体大小。

值不固定。

在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em

displayvisibilityopacity的区别

{display:

none;

/*不占据空间，无法点击*/}

{visibility:

/*占据空间，无法点击*/}

{opacity:

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、框架类

闭包是什么，写一个闭包，一般可以用在哪里，好处在哪

闭包是指一个函数的内部函数被返回之后，在函数外部被另一个变量引用的时候，就形成了闭包。

functiona（）{

vari=0;

functionb（）{

console.log（i）;

}

returnb;

varc=a（）;

//这时c的引用就指向了a的内部函数b

c（）;

//此时c会打印出i的值，0

i=1;

//此时打印出来的值还是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：

ContentDelivery|DistributeNetworkCDN是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。

怎样减少首屏加载时间：

图片懒加载：

先指向一张较小的或者不指向图片，将真正的图片地址放到元素属性如data-src中，监听页面的滚动事件，到滚动到时才加载。

（可以给页面滚动事件加一个节流函数）

浏览器缓存机制，怎么处理浏览器缓存问题

主要是HTTP协议定义的缓存机制。

浏览器依靠请求和相应中的头信息来控制缓存。

头信息中的Cache-Control的值可以是public、private、no-cache、no-store、no-transform等等等

public:

所有内容都将被缓存。

private:

内容只缓存到私有缓存中。

no-cache:

所有内容都不会被缓存。

no-sto