小赢科技一面 面经 答案解析

每天一篇面经,麻麻再也不用担心我缺钙!(๑•̀ㅂ•́)و✧

1.盒子模型 Box Model

所有的HTML元素都可以看作为一个盒子,一个盒子由外边距(Margin)、边框(Border)、内边距(Padding)、内容(Content)组成。

标准盒子模型width = content
IE盒子模型width = border + padding + content

box-sizing: content-box;   //标准盒子模型
box-sizing: border-box;  //IE盒子模型
box-sizing: inherit;  //从父元素继承 box-sizing 属性。

2.居中

水平居中
行内元素,设置属性 text-align: center (行内内容居中显示)即可。
块级固定宽度:给其设置 margin: 0 auto; (外边距 上下为0px 左右为自适应)即可;
块级不固定宽度: 给其设置 display:inline-block;(元素生成框类型 行内块元素)转换为行内元素,父元素设置 text-align:center; 控制其居中。

垂直居中
行内元素,设置 line-height 属性的高度值等于行高值(height)。
块级元素
1.
position:absolute; //将元素定位更改为绝对定位
left:50%;  //左边向右位移50%
top: 50%;  //顶部向下位移50%
transform: translate(-50%, -50%); //再相对本身进行左边向左 和 上边向上的50%偏移
2.
display: flex; //其父元素容器定义为弹性容器
align-items: center; //交叉轴上 居中 (垂直)
justify-content: center; //主轴上居中 (水平)
3.
table 方式  不推荐

3.HTML5 新标签

1.结构标签
article:定义一篇文章header:定义页面头部
footer:定义页面底部
nav:导航条链接
section:定义一个区域
hgroup:定义文件中的一个区块的相关信息
figure:定义一组内容以及标题
dialog:定义一个对话框

2.表单标签
email:必须输入邮件
url:必须输入url地址
number:必须输入数值
range:必须输入一定范围内的数值
Data pickers:日期选择器
search:搜索常规的文本域
color:颜色

3.多媒体标签
video:定义一个视频
audio:定义一个音频
source:定义媒体资源
canvas:定义图片,可以在内部绘图
embed:定义外部可交互内容和插件

4.Web标签
meter:实时状态显示 气温、气压
progress:显示任务过程、安装、加载
datalist:为input定义一个下拉列表
ruby&rt:用ruby将字扩起来,然后rt标签填写注释信息(注释文字偏小)
mark:用于标黄

4.前端存储异同

cookie:兼容好,请求头携带。大小为4k,每个domain(域名)限制为20个,需要封装。
sessionStorage:会话级存储,同源窗口不共享。大小为5M,存储形式仅为字符串。
localStorage:本地永久存储,同源窗口共享。大小为5M,存储形式仅为字符串。
indexDB(索引数据库):本地非关系型数据库,遵守同源协议。容量超大,存储形式为键值对。

5.WebSocket

意义:http协议只能向服务端发起请求,所以如果有需要持续更新的消息问题时,一般会采用间隔几秒访问一次即麻烦又浪费带宽。
WebSocket特性:一次握手,持续连接。客户端和服务端都可以主动推送消息,并且不受同源策略限制,也就是不存在跨域问题。请求头更轻量级,最小请求单位为帧。
使用

WebSocket协议是基于TCP协议的应用层协议。为了建立链接,客户端要先向服务端发送一个带"Upgrade:WebSocket"(申请协议升级的HTTP请求)头信息的HTTP请求,服务端解析后应答,建立成功。

创建 WebSocket对象 var ws = new WebSocket(url, [protocol])

ws.onopen() 打开连接

ws.send() 向服务端发送信息

ws.onmessage() 来接收服务端信息

ws.close() 关闭连接

6.闭包 内存管理

闭包:一个函数保留对另一个函数的内部引用。也就是调用之后本应该被销毁,但因为闭包的存在没有销毁并且仍然可以访问的现象(也是造成内存泄漏的原因之一)!主要应用在设计私有方法和变量上。
内存管理:内存空间大小,64位操作系统是1.4G = 新生代 64M + 老生代 1400M,32位是0.7G = 新生代 16M + 老生代 700M。
新生代内存空间:保存存活时间短、新的变量,会频繁进行垃圾回收。回收算法为将空间均分为两份每次只使用一半。标记存活的变量,垃圾回收时将活的变量复制到另一半空间并且清空当前空间。标记次数达到一定数量就会存放到老生代去!
老生代内存空间:存放保存存活时间长的变量。回收算法为标记死去的变量,在垃圾回收时将死去的变量删除(因为老生代内存多,所以回收时采用插入方式,类似于cpu切片运行看似同步的方式)。
内存处理:主要存储变量等数据结构。局部变量程序执行结束,没有引用之后会被销毁。全局变量会始终存储直到程序运行结束。

7.箭头函数

箭头函数相当于匿名函数,一个函数可以写为 x => x+x; 等价于 function(x){return x+x;}.箭头函数的特性主要表现在:
this:箭头函数内部的this由上下文决定。
构造函数:因为没有this,所以无法作为构造函数。
arguments:没有!

8.js事件模型

DOM0: 在dom上直接绑定事件(而且一个事件只能绑定一次),没有事件传播(事件一旦发生就立即调用句柄执行)
DOM2:采用addEventListener来注册事件,支持事件流的捕获过程和冒泡过程(注册事件的时候第三个参数控制)!
8之前的IE:采用attachEvent注册,仅支持冒泡阶段触发句柄,并且要在事件前面加on(例如 onclick)!

9.拷贝

数组 
浅拷贝:在js语言里面,直接写 var b = [...]; var a  = b; a保有对b数组的引用,所以进行a[1] = "...";操作的时候会同样更改b[1]的访问结果。
深拷贝:
1.利用slice(start, end) 返回从开始到末尾数组中的元素,结果为数组。
2.var a = b.concat(x,y)方法,用于连接两个或多个数组。a会得到b数组里面加上x、y数组值的新数组。
对象 
浅拷贝:1.直接赋值 2. ES6 的 Object.assign();
深拷贝:
1.var a = JSON.parse(JSON.stringfy(obj)); 将b序列化,然后再反序列化。
2.将对象递归循环,然后进行相应的赋值以及判断!

10.整数数组中a+b=c的组合

1.三重循环。第一重选择a,第二重选择b,第三重查找c。复杂度为O(n3)!
2.两重循环加一个Map。第一重循环选择a,第二重循环选择b,Map判断是否有c。复杂度O(n2);
- END
这是一个有仪式感的结尾! <( ̄︶ ̄)>
#面经##社招##小赢科技##前端工程师#
全部评论
老哥有整理的其他的面经答案吗
点赞 回复
分享
发布于 2019-11-17 18:08

相关推荐

2 24 评论
分享
牛客网
牛客企业服务