前端面试题

阿里
xhr对象有哪几种状态
跨域几种方式，jsonp为什么不安全
let var 不同的深层原因
假如百度不想让腾讯访问其某些网址，怎么办？（阻止爬虫）
网易有道（重复的题就不写了）
收获的一道题是：vue的子组件是怎么样通信的？
有一个拖拽的框，怎么设计减少重绘重排
朋友阿里
vue中的ref，vuex，双向数据绑定原理，vue中怎么获取dom，flex实现三列等高布局，安全访问复杂object中的属性

static
generator函数是不是指针
状态码
缓存机制
朋友阿里健康
字符串去空格（frim缺陷要用正则最好）
跨域方法
html5新特性
行内元素和块级元素
居中布局
es6新特性。es6箭头函数
arguments本质是什么，如何实现
数组去重
如何取得url参数
前端优化方法
什么是闭包，有什么作用，优缺点是什么

朋友百度
求字符串中出现次数最多的，并返回字符和出现得次数
手写观察者模式
判断一个数是不是质数
实现垂直水平居中
跨域几种方式，具体工作原理

朋友腾讯天天快报
手写快排
https如何加密
行内元素有哪些？和块状元素的区别
手写事件委托
git原理
setTimeout和闭包

朋友美团前端：
手写了promise，垂直居中和水平居中，手写深拷贝，生成一个1-7的随机数，清除浮动，跨域，栅格布局的原理，flex布局，数据结构（貌似是链表什么的吧），ES6，闭包的作用，
新浪：笔试题（有空再补充）闭包、继承、作用域链很重要，延伸自己找到的一道题
https://github.com/Wscats/Good-text-Share/issues/85（非常经典，包含了变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等知识）http://www.cnblogs.com/poissonnotes/archive/2011/06/06/2073741.html
https://my.oschina.net/tongjh/blog/265087?p=%7B%7BcurrentPage-1%7D%7D
腾讯面试
一面：
css：
行内元素和块级元素的区别，怎么互相转换。
img是块级元素还是行内元素，它可以怎么样设置上下左右留白呢？
关于定位的了解
关于html5的动画，canvas用的多吗
js
作用域链
js放在头部和放在尾部有什么区别？
闭包的理解
事件冒泡，事件捕获，怎么取消事件冒泡,哪些Dom事件不会冒泡
原型链的理解，怎么获得一个对象的原型对象
你跟后台调试接口是用的ajax吗？
原生的ajax函数没有timeout的功能，你怎么可以做到?（面试官说用setTimeout）
http协议了解的多吗（弱弱地说，不多）get和post的区别。。。。回答的比较烂
vue的理解
vue实现双向数据绑定的原理
你是怎么学习前端的？
你有没有想过自己以后能对前端做出哪些改变？
阿里一面
垃圾回收机制
水平垂直居中
flex布局场景
js的继承的作用，原型链，原型对象，继承的方式
http和tcp的区别https://juejin.im/entry/5981c5df518825359a2b9476
osi七层模型，每一层的作用
浏览器的缓存
模块化的理解
cmd模块规范和amd模块规范
webpack的基本配置
dom层面上的事件对象
怎么用原生的方法获取一个classname
web的安全问题以及如何解决
数组去重的方法有哪几种
顺丰速递
关于数组的有关方法，map.reduce.forEach
settimeout和for循环
关于webpack的配置
vue的双向绑定原理
Objct.defineproperty（）的参数
Object.keys()的问题
promise函数的有关问题(为什么用catch，then里面不是也有处理错误的函数吗)，aysnc函数有了解吗
computed 和watch的区别
es6特性的了解
http状态码
对象深浅拷贝
ajax请求的原理，原生怎么写。
jsonp的实现原理
爱奇艺
虚拟的dom
promise函数，延伸出的async和awaite。应用场景，特点，作用
箭头函数的作用
vue中父子通信
vuex的原理。解决了什么场景。
好未来
1.怎么判断浏览器的类型
2.cookie和本地存储的区别
3.同源策略和跨域问题
4.垂直水平居中
5.css画正方体和圆
6.grid布局
7.css新特性
js
promise 函数
箭头函数
…作用
let const var区别
怎么判断一个数组
怎么判断一个对象
怎么判断一个字符串中有某个字符includes
vue
父子组件怎么通信
广播通信emit
二面
cavas的了解
promise的了解
其他忘了
好未来
cookie、sessionStorage、localStorage区别以及应用场景
三者的异同：相同：都是保存在浏览器端
生命周期：cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效
localStorage：除非被手动清除，否则将会永久保存。
sessionStorage： 仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。
存放数据大小：cookie：4KB左右
localStorage和sessionStorage：可以保存5MB的信息。
http请求：cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性：cookie：需要程序员自己封装，源生的Cookie接口不友好
localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
应用场景
cookie：
判断用户是否登陆过网站，以便下次登陆的时候能够实现自动登录（或者记住密码）。
保存上次登陆的时间信息
保存上次查看的页面
浏览计数
localStorage:用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据；购物车信息
seesionStorage:敏感账号一次性登录；表单填写，分成几个子页面

新华智云
1.模块化的作用（减少变量污染，使用命名空间）
2.兼容性问题
3.语义化标签的好处
4.前端安全的问题
5.预编译的问题
6.get和post的区别
https://sunshinevvv.coding.me/blog/2017/02/09/HttpGETv.s.POST/
笔试
1.如何水平垂直居中
2.数组去重
3.ES5的新特性，如何在低版本浏览器兼容
4.实现响应式前端的技巧
5.单页面应用的浏览器如何实现前进和后退
6.跨域问题
7.webpack和gulp的异同点
8.如何做前端的性能优化
9.请说一个你熟悉的框架
第四范式：
一面：
问的项目：问我怎么实现后台更新时，前端自动更新的。（简历上写错了，不应该那样写）
vue
0.vue中你是怎么从前端向后台请求数据的
1.问vue怎么样前端定时去后台取数据
2.当你从后台取了数据以后，dom里相应的数据会立即发生变化吗？（答案不会，涉及到事件循环，单线程，异步同步的操作。如果想立即的话，需要用nextTick.）
js
3.实现数组的去重(es6的新特性)
4.实现10个10-100随机数组
css3
1.block和inline的区别
2.如果设置了height高度，不设置width属性，会怎样（设计到width默认属性：不设置其时，其宽度和浏览器宽度相同），但是如果height不设置的话，会坍塌。
3.扯到了怎么清除浮动
4.BFC的概念，怎样成为BFC
二面:
1. 定义一个 log 方法，让它可以代理 console.log 方法，实现将传入的参数全部打印出来
2.写了一个关于this指向的函数做题
3.延伸出了箭头函数，问箭头函数的作用
4.延伸出了bind函数，
5.封装一个bind函数，适应于不同的浏览器(ie不支持bind)，并且call.apply，bind是函数原型Function.prototype的方法.
6.两栏布局（实现左定宽，右适应）http://zouzeir.xyz/2017/03/06/CSS%E5%B8%83%E5%B1%80%E4%B9%8B%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80/
7.了解calc吗
黄油：
1.new 操作符的作用，用两行代码解释
2.原型和原型链，说说你的理解。
延伸出来了原型对象，每个函数都有自己的原型对象，问我其他的（比如属于，对象）有没有原型对象
3.说说对vue的理解（怎么实现双向数据绑定的）
4.vue关于key属性的问题
5.问了冒泡排序和快排，快排的复杂度
6.单向链表和双向链表
7.css3的新特性
8.怎么设计三个圆等宽等高自适应
9.css3中的动画和transform的哪个性能更好？transform.不会重新渲染，知道z-index吗，
10.隐式继承和显式继承
11.Array是什么？
顺丰科技
1.异步编程的方法有哪几种？四（http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html）
基于延伸出来的for循环和setTimeout的问题：https://m.jb51.net/show/122489。两种方法1.用let定义变量2.立即执行函数
知道事件循环机制、同步任务、异步任务https://juejin.im/post/59e85eebf265da430d571f89
setTimeout:是指经过指定的时间后，将回调函数（要执行的任务）加入到Event Queue中
setInterva是指每隔指定的时间，将注册的函数置入事件队列中。
另一种说法：
setTimeout ：延时 delay 毫秒之后，啥也不管，直接将回调函数加入事件队列。
setInterval ：延时 delay 毫秒之后，先看看事件队列中是否存在还没有执行的回调函数（ setInterval 的回调函数），如果存在，就不要再往事件队列里加入回调函数了。
2.
智析科技
给定数组a, 里面的元素先严格递增后严格递减, 求最大值元素的下标.（考察二分查找）
查找一个字符串出现字符最多的字符
给url短地址去映射
web的性能优化

魔力耳朵面试
笔试：1.水平垂直居中
2.画出盒模型
3.实现对象的深浅拷贝
1.object()函数 子对象的prototype属性，指向父对象，从而使得子对象与父对象连在一起
function object(o){
function F(){}
F.prototype=o;
return new F()
}
2.Object.assign({},o)
3.Object.create(o)
4.父类直接把属性赋值给子类
function extendCopy(o){
var c={};
for(var i in o){
c[i]=p[i]
}
return c
}

深拷贝
1.利用JSON的特性
var a=JSON.parse(JSON.stringify(o));
2.基于引用类型会导致原有父类属性相应改变，来做深拷贝
　　function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === ‘object’) {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}

4.将url的参数转换为对象
利用split属性去分割
5.比较你熟悉的几个库或者框架，以及他们的优缺点
面试
1.将url参数转化为字符串
function parseQueryString(url){
var params={};
var arr=url.split(“?”);
if(arr.length<=1){
return params;
}
arr=arr[1].split(“&”);
for(var i=0,len=arr.length;i

<div class="content">
   <div class="container">
   </div>
</div>

使用绝对定位法：
已知宽高：absolute+margin(left:50%,top:50%,margin-left:-（宽度/2），margin-top：-（高度/2）)
.content{
position: relative;
height: 500px;
width: 500px;
background-color: green;
}
.container{
position: absolute;
height: 100px;
width: 100px;
background-color: red;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
不知道宽高：absolute+left:50%+top:50%+transform:translate(-50%,-50%)
使用position+margin：auto（必须有宽高）
.content{
position: relative;
height: 500px;
width: 500px;
background-color: green;
}
.container{
position: absolute;
height: 100px;
width: 100px;
background-color: red;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
使用父元素设置position:table-cell,vertical-align:middle;text-align:center;子元素设置display:inline-block
.content{
display: table-cell;
vertical-align: middle;
text-align: center;
height: 500px;
width: 500px;
background-color: green;
}
.container{
display: inline-block;
height: 100px;
width: 100px;
background-color: red;
}
使用flex布局：对父元素设置display：flex；align-items：center;just-align：center
2.跨域问题
非同源，有三种行为受到限制
Cookie、LocalStorage、IndexDB无法获取
DOM无法获取
AJAX请求受限
解决方案：
主域相同的跨域
主要适用于不同子域的框架间的交互，但是主域必须相同的不同源
脚本可以将document.domain的值设置为其当前域或当前域的超级域
完全不同源的跨域
通过window.name跨域
window对象有个name属性，该属性有个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个name的，每个页面对于window.name都有读写权限，window.name是持久存在一个窗口的所有页面中
通过window.postMessage跨域（跨文档通信API）
允许跨窗口通信，不论两个窗口是否同源
AJAX请求不同源的跨域
通过JSONP跨域
基本原理：通过添加