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会在页面加载完成后再加载。(如果写在头部的标签呢?)
-
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 Network
CDN是将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题,适用于站点加速、点播、直播等场景。怎样减少首屏加载时间:
图片懒加载:先指向一张较小的或者不指向图片,将真正的图片地址放到元素属性如
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,生成一颗渲染树
- 根据渲染树开始渲染和展示
- 遇到
时,会执行并阻塞渲染(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
-
对象键值对法
速度快,占内存较大
新建一个对象和数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增并放入新数组。
function uniqueArr2(arr) { var tempObj = {},res=[],len=arr.length,val,type; for (var i=0;i
-
数组下标判断法
如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的。不重复的话存入结果数组
function uniqueArr3(arr) { //首先将数组第一项存入缓存数组中 var tempArr = [arr[0]]; for(var i=1;i
-
排序后相邻去除法
调用sort()方法排序,只用检查最后一个值是否与当前元素相等即可.
会修改原数组
function uniqueArr4(arr) { arr.sort(); //存入原数组的第一个元素 var res = [arr[0]]; for(var i=1;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)
- 让你设计一个表单样式你会怎么设计(?)