虾皮3

一面（大概3-40分钟）

 js事件机制，如何阻止事件冒泡，事件委托原理
 跨域方案
 闭包原理应用
 列举http 状态码/请求头（这里聊了挺多，基本上把我知道的都挖出来了，捂脸.jpg）

常见的HTTP请求头

请求头	说明
Accept-Charset	用于指定客户端接受的字符集
Accept-Encoding	用于指定可接受的内容编码，如Accept-Encoding:gzip.deflate
Accept-Language	用于指定一种天然语言，如Accept-Language:zh-cn
Host	用于指定被请求资源的Internet主机和端口号，如Host:www.taobao.com
User-Agent	客户端将他的操做系统、浏览器和其余属性告诉服务器
Connection	当前链接是否保持，如Connection:Keep-Alive

常见的HTTP响应头

响应头	说明
Server	使用的服务器名称，如Server:Apache/1.3.6(Unix)
Content-Type	用来指明发送给接收者的实体正文的媒体类型，如Content-Type:text/html;charset=GBK
Content-Encoding	与请求报头Accept-Encoding对应，告诉浏览器服务端采用的是什么压缩编码
Content-Language	描述了资源使用的天然语言，与Accept-Language对应
Content-Length	指明实体正文的长度，用以字节方式存储的十进制数字来表示
Keep-Alive	保持链接的时间，如Keep-Alive:timerout=5,max=120

常见的HTTP状态码

状态码	说明
200	客户端请求成功
302	临时跳转，跳转的地址经过Location指定
400	客户端请求有语法错误，不能被服务器识别
403	服务器受到请求，可是拒绝提供服务
404	请求的资源不存在
500	服务器发生不可预期的错误

 cookie 的一些字段属性

一个域名下面可能存在着很多个cookie对象。

name　　字段为一个cookie的名称。

value　　字段为一个cookie的值。

domain　　字段为可以访问此cookie的域名。

非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。

顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

path　　字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age 　　字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

Size　　字段 此cookie大小。

http　　字段  cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。

secure　　 字段 设置是否只能通过https来传递此条cookie

 cookie，session的区别

Cookie和Session的区别

 强缓存协商缓存具体过程
 如何隐藏一个元素
 padding，margin百分比

对元素的margin设置百分数时，百分数是相对于父元素的width计算，不管是margin-top/margin-bottom还是margin-left/margin-right。当然，padding的原理也是一样的。

 链表的优缺点

  优点：
              （1）插入和删除速度快，保留原有的物理顺序，在插入或者删除一个元素的时候，只需要改变指针指向即可。 
              （2）没有空间限制,存储元素无上限,只与内存空间大小有关. 
              （3）动态分配内存空间，不用事先开辟内存
              （4)是内存的利用率变高

               
    缺点：
              （1）占用额外的空间以存储指针，比较浪费空间，不连续存储，malloc函数开辟空间碎片比较多) 
              （2）查找速度比较慢，因为在查找时，需要循环链表。 
    时间复杂度 :查找操作为O(n) ,插入和删除操作为O(1)。

二面 （大概40分钟）

 讲一下实习经历和项目经历
 js 作用域链
文件上传进度展示和大文件断点续传 
（这个其实没什么经验，说了下HTML5 File API和相关的思路就过了）

实现一个大文件上传和断点续传

 回流和重绘，什么情况触发

大多数浏览器都会通过队列化修改并批量执行来优化重排过程，浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。
但是，当获取布局信息的操作 时，会强制队列刷新！

offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedStyle()
getBoundingClientRect
 

如何减少回流和重绘
（1） 合并多次对DOM和样式的修改，依次处理，可以使用
cssText : el.style.cssText += '...'
修改CSS的class : el.className += 'active'
（2） 批量修改DOM
当需要对DOM进行一系列修改时，如何减少回流重绘次数：

使元素脱离文档流
对其进行多次修改
将元素带回文档中
如何让DOM元素脱离文档流？

隐藏元素，应用修改，重新显示(会在展示和隐藏节点的时候，产生两次重绘)
使用文档片段在当前DOM之外构建一个子树，再把它拷贝回文档
将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素
（3）避免触发同步布局事件
利用一个变量来保存属性值，例如：const width = box.offsetWidth

（4）对于复杂的动画效果，使用绝对定位让其脱离文档流
（5）CSS3硬件加速（GPU加速）
常见的触发硬件加速的css属性：

transform
opacity
filters
Will-change
使用css3硬件加速，可以让上述这些动画不会引起回流重绘，但是对于动画的其他属性，比如background-color，还是会引起回流重绘的

 vue 和 react 的区别
 做了一道笔试的变形题，找出字符串中第一个连续三个递增的数字并返回
（这里想吐槽一下，我理解递增不就是+1吗，面试官说是大于）

HR面

实习经历，校园经历，在校成绩，奖励情况
专业不匹配为什么做前端
家乡，工作城市偏好
希望公司有什么价值观
offer 情况，期望薪资
如果发了offer觉得什么时候入职比较合适（没想到问这个，以为听错了）
3-12 

offer call

顺便不要脸地推荐一下平时练习前端和算法的一些代码（里面也有两道shopee笔试题）：

https://github.com/rosie597/practice