石墨文档
1.git命令用过哪些
2.css3用过哪些
3.box- sizing
默认值content-box
border - box 内容的宽高要从已设定的宽高减去边框和内边距
inherit 从父元素继承
4.跨域 jsonp为什么可以跨域
浏览器为了安全有一种同源策略，协议.域名.端口有一个不同都是跨域，不允许ajax跨域获取服务器数据
jsonp是通过script的src实现，最终目的是向服务器请求数据回调
跨域：为了安全起见，浏览器会限制不同源的异步请求
jsonp 创建script标签设定src，提供一个回调函数来接受数据，服务器端组织数据并返回.浏览器立刻调用callback
var script = document.createElement("script");
script.type="text/javascript";
script.src = "xxxx.do?jsonp =jsonpCallbak "
document.body.appendChild(script)；
function jsonpCallBack(data){
alert(data);
}
cors跨域
要求服务器端要允许跨域请求
非ie浏览器于异步请求是一致的
5.ajax原生和jq的不同
原生ajax ：
首先要创建XMLHttpRequest对象
function getxhr ( ) {
var xhr = null ;
if ( window. XMLHttpRequest) {
xhr = new XMLHttpRequest;
} else {
xhr = new ActiveXObject ('Microsoft. XMLHttp ' )
}
return xhr ;
}
var xhr = getxhr( )
与服务器建立连接
open ( method, url, async)
客户端向服务器发送请求
send ( 请求参数) key = value
如果是get类型的话，send ( ) 不能向服务器端发送请求数据，send (null ) , 并且open (' get' , " url ? user = name " )
Ajax使用的是Post请求的话要在send()方法调用之前使用，使用setRequestHeader(key, value)方法，用于设置请求头，不设置的话参数无法正常发送
Xhr.setReuqestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
Form 有一个默认 enctype = “application/x-www-form-urlencoded”
Post中send起作用，get中send不起作用但不能省略
客户端接受服务器的响应，使用readyStateChange事件监听服务器的通信状态，readyState为4 status为200 可以接受到服务器端的响应数据responseText
readystate 得到服务器端目前的通信状态
0 服务器端尚未初始化
1 正在发送请求
2 请求完成
3 请求成功，客户端正在接收服务器端数据
4 响应完成
状态码： 1xx 信息类
100继续 101切换协议
2xx成功
200请求成功，有数据返回
201已创建
202已接受
203非权威信息
204请求成功，无数据返回
3xx 重定向
301永久性重定向
302对象已移动，临时重定向
303请求资源存在另一个url
304 服务器判断本地缓存未更新，用本地缓存
307 临时重定向
4xx客户端错误
400请求出现语法错误
401客户试图未经授权访问受密码保护的页面
403资源不可用
404页面找不到
405请求方法对指定的资源不适用
5xx 服务器错误
6.web攻击的几种方式和防御
web安全
XSS跨站脚本攻击：一般应用于留言板，如果攻击者将恶意代码写入留言，当用户浏览该网页时，恶意代码会被执行，从而达到恶意用户的特殊目的
对用户的输入做一些过滤，将其转化为不被浏览器解释执行的字符
CSRF跨站请求伪造：
让用户以自己的身份去完成攻击者的目的
SQL注入：
利用现有的应用程序，将恶意sql命令注入到后台数据库引擎执行的能力
手工注入，在url中手动修改参数，获得想要的信息
工具注入，阿D或者sqlmap
防御：后台避免手动拼接sql语句
7.下拉列表
8. 输入查询框自动匹配，防抖节流
防抖：延时处理，这段时间内又触发了事件，则重新开始延迟
节流：保证在多少毫秒内触发一次事件
9. for (var i = 0; i < 12; i + + ) {
settimeout ( function ( ) {
console. log (i )
}, 1000 )
}
输出什么，如何依次输出下标并且让它每1000ms输出一个数
for(let i = 0; i < 12; i++){
setTimeout(function(){
console.log(i)
},1000*i)
}
for(var i = 0; i < 12; i++){
(function(num){
(setTimeout(function(){
console.log(num)
},1000*i))
})(i)
}
10.一个数组，如何实现查找其中两个不同下标的数字想加等于一个固定的值，输出可能的结果
var arr = [ 2, 3, 5, 1]
var sum = 5;
function arrLoad ( ) {
}
let arr = [2,3,4,5,6,3,2],sum = 5,result = [],find = [];
arr.forEach((v,i)=>{
arrCopy = arr.concat();
while(arrCopy.indexOf(sum-v) !== -1){
if(find.indexOf(arrCopy.indexOf(sum-v)+"*"+i) == -1){
result.push([v, sum-v]);
find.push(i+"*"+arrCopy.indexOf(sum-v));
}
arrCopy.splice(arrCopy.indexOf(sum-v),1,'*');
}
})
畅游
1.你怎么接触到的前端
2.position的各个属性的区别
absolute 绝对定位，相对于static以外的第一个父元素进行定位
fixed 绝对定位，相对于浏览器窗口进行定位
relative 相对定位，相对于其正常位置进行定位
static默认，不定位
inhert 从父元素继承position属性的值
3.说一下h5新特性
一些标签：header, footer, article定义页面独立的内容区域, nav, section定义文档中的节
新的输入控件：number. color. Date日期. week. month.datetime完整日期
新的表单特性：placehoLder 输入框提示信息
required必填项 list, datalist为输入框构造一个选择列表，list值为datalist的id
canvas svg
新的选择器 querySelector querySelectorAll
4.行内，块级元素有哪些
行内：a, img , input, label
块级元素：h1- h6, div, ul, form, p
行内块级元素：img, input
- 你用过sass没
6.你用过angular没
网易面经：
1.web攻击的方式，CSRF的攻击原理，具体怎么做的
- jquery里面的ready方法与window.onload有什么区别
Window.onload() 必须等待网页全部加载完毕（包括图片）再执行JS代码，只能执行一次，否则第二次会覆盖前一次
$(document).ready() 只需要等待网页中的DOM结构加载完毕，就能执行JS代码，可以执行多次，都会输出结果，简写方式为$(function(){})
3.http状态码403是什么状态
403资源不可用
4.http和https有什么区别
https是以安全为目标的http通道，http下加入ssl层，对http传输的数据进行加密，http端口80，https 443端口，http的是无状态协议，https是由ssl + http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全
客户端向服务器端请求https连接，服务器端返回证书（公钥）产生随机对称密钥，使用公钥对对称密钥加密，客户端向服务器端发送加密后的对称密钥，通过加密密钥加密的密文通信
5.抓包工具有使用过么
6.进程与线程的区别
进程是资源的分配和调度的一个独立单元，而线程是CPU调度的基本单元
同一个进程中可以包括多个线程，并且线程共享整个进程的资源（寄存器、堆栈、上下文），一个进行至少包括一个线程。
7.node是单线程的么？回答是，那node怎么实现多线程操作？
8.数据库的索引有什么作用
9.数据库的组件与唯一id
10.你认为自己做前端有什么优势
11.sessionStorage里面的session是什么意思
12.cookie有哪些方法
13.同源策略，163.com/abc和163.com/abc/a之间怎么获取cookie
14.你觉得bootstrap框架干了些什么
15.使用git的时候，怎么管理分支的
16.angular是属于哪类设计框架的，mvc和mvvm有什么区别
滴滴面经：
滴滴1面：
1.你的项目最能代表你水平的一个介绍一下
2.jquery 的$fn是干嘛的，你为什么要用它
$fn 是指jquery的命名空间，加上fn的方法以及属性，会对jquery的每个实例有效，
jQuery.extend(object); 为jQuery类添加添加类方法，可以理解为添加静态方法。如：
$.extend({
add:function(a,b){return a+b;}
});
便为jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery的地方，使用这个方法了，$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").alertWhileClick();
//页面上为：
<input id="input1" type="text"/>
3.写一下你项目中的轮播
4.@keyframe怎么用
在2s内下移200px
div {
position:absolute;
top:0px;
animation: move 2s;
}
@keyframes move {
from {
top:20px;
}
to {
top:200px;
}
}
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@keyframes mymove
{
0% {top:0px; background:red; 100px;}
100% {top:200px; background:yellow; 300px;}
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
5.css3中的各种动画
6.h5中你用了什么
7.你怎样去封装一个自己的jquery插件
(function ($) {
$.fn.extend({
"highLight":function(options){
//do something
}
});
})(window.jQuery);
Jquery源码 window.jQuery = window.$ = jQuery
8.怎样写一个settimeout异步
for(var i = 0 ; i < 5 ; i++){
(function(num){
setTimeout(function(){
console.log(num)
}, 1000*i)
})(i)
}
9.css画三角形
#triangle{
0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#circle{
100px;
height:100px;
border-radius:50%;
background:yellow;
}
#oval椭圆{
200px;
height:100px;
background:red;
border-radius: 100px/50px;
}
#平行四边形 {
150px;
height:100px;
background:red;
margin-left:20px;
transform:skew(20deg);
}
#梯形{
100px;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
Border-radius 1个值等于四角
2个值 左上右下，右上左下
3个值 上左，上右和下左，下右
10.原生实现 on off triggle
11. 怎么实现一个类，类的继承
原型链继承：无法传参
function Fun1(){
this.property = true;
}
Fun1.prototype.getValue = function(){
return this . property;
}
Function Fun2(){
this.sub = false;
}
Fun2.prototype = new Fun1();
Fun2.prototype .sayValue = function(){
return this.sub;
}
Var instance = new Fun2();
Console.log(instance.getValue());
// 创建Fun1的实例，并讲该实例赋给Fun2.prototype实现的。本质是重写原型对象，代之以一个新类型的实例。原来存在于Fun1的实例中的属性和方法，现在也存在于Fun2.prototype中了。
构造函数：call() apply() 解决传参的问题，父类原型的属性和方法不能继承，实例不是父类的实例
function Fun1(){
this.color=[‘red’ , ’blue’];
}
function Fun2(){
fun1.call(this);
}
var instance1 = new Fun2();
Instance1.colors.push(“black”);
Console.log(instance1.colors); //red blue black
Var instance2 = new Fun2();
Console.log(instance2.colors); // red blue
传参：
Function Fun1(name){
this.name = name;
}
Function Fun2(age){
Fun2.call(this, “John”);
This.age = 23;
}
Var instance = new Fun2();
Console.log(instance.name)// John
Console.log(instance.age)//23
组合继承：组合原型链和构造函数，原型链实现对原型属性和方法的继承，构造函数来实现对实例属性的继承。
Function Fun1(name){
This.name = name;
This.color = [“red” , “blue”];
}
Fun1.prototype.sayName = function(){
alert(this.name);
}
Function Fun2(name , age){
Fun1.call(this , name);
This.age = age;
}
Fun2.prototype = new Fun1();
Fun2.prototype.sayAge = function(){
Console.log(this.age);
}
Var instance1= new Fun2(“John”, 29);
Instance1.colors.push(“black”);
Console.log(instance1.colors); //red blue black
Instance1.sayName (); //John
Instance1.sayAge(); // 29
Var instance2 = new Fun2();
Console.log(Instance2.color); //red blue
Instance.sayName();//John
Instance.sayAge(); //29
原型式继承：借助原型可以基于已有的对象创建新对象，同时还不必须因此创建自定义的类型。
思想：
function object(o) {
function F(){ }
F.prototype = o;
return new F();
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"
//新增Object.create()方法规范了原型式继承
//可以传递两个参数，第一个是用作新对象原型的对象，第二个（可选）为新对象定义额外属性的对象
//传递一个参数时，等同于object()
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"
12.绑定和移出事件怎么写
绑定：btn2.onclick = function(){
移出：btn1.onclick =null; // on+事件名 覆盖
绑定：
DOM 标准：elem.addEventListener(“事件名”, 函数对象, 是否在捕获阶段触发true/false)
//一个元素的一个事件处理函数可add多个不同的函数对象
IE8：elem.attachEvent(“on事件名” , 函数对象)
//IE8事件周期没有捕获阶段
移除：通过匿名函数是无法消除监听事件，只有通过实名函数才能
removeEventListener
detachEvent
绑定：bind()（绑定事件）和unbind()（移除通过bind()方法添加的事件）
$(function () {
$("#MySpan").bind("click", foo);
})
$(function () {
$("#LooseFocus").unbind("click", foo);
})
$body.on("click", "#btn2", btnClick2 );
$body.off("click", ":button", btnClick2);
滴滴2面：
1.rem em
rem是根据html根节点来计算的，而em是继承父元素的字体
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。
2.你用过的图片格式
GIF格式：支持动画以及全透明/不透明，仅支持8bit的索引色，即在整个图片中，只能存在256种不同的颜色，GIF是无损的，采用GIF格式保存图片不会降低图片质量。
JPEG：有损压缩，更丰富的色彩，适合用来存储照片，不适合用来存储企业Logo、线框类的图，不支持透明。针对相片影响，压缩过程中图像的品质会遭受到可见的破坏，JPEG在色调及颜色平滑变化的相片或是写实绘画上可以达到它最佳的效果。
Png: 无损压缩，支持alpha透明，不支持动画
3.png8 png24区别
Png8: png8是非常好的GIF代替者，在相同的图片效果下，png8具有更小的体积，并且支持透明度的调节。除非要去使用动画的支持，GIF受到广泛的支持，png8本身也是支持动画的，只是浏览器支持的不好。
Png24: 无损压缩了图片数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多,，要比JPEG大5倍之多，而显示效果通常只能获得一点点提升，只有在你不在乎文件体积而要最好的一个显示效果的时候，才应该去使用PNG24
4.png8怎么实现半透明
filter:alpha(opacity=100);opacity: 1;
5.写一个继承，并且改变这个属性
6.写一个正则 匹配11个字符串 第一位1 中间9个字母或者数字不区别大小写 最后一位不能是1
7.css怎么区分浏览器
8.DTD类型和区别
9.css优先级
!important > 内联样式（1000） > ID（0100） > 伪类选择器（0010） 类选择器（0010）/（伪类） > 元素选择器（0001）/（伪元素）
选择器的权值加到一起，大的优先；权值相同，后定义的优先
10.状态码 1XX 2xx 3xx 4xx
1xx : 信息类
2xx : 成功
3XX：重定向
4XX：客户端错误
5XX：服务器端错误
11.跨域 jsop原理 你为什么非要用script标签
跨域：协议、域名、端口 有一个不同，都属于不同的域，不同域之间相互请求资源就叫做“跨域” 浏览器本身是有同源策略禁止的。
Jsonp （主流浏览器）：利用script 元素的跨域能力，其实拥有Src属性的标签都拥有跨域的能力，<img><script>
dataType : ’jsonp’
(最上面)
12.重绘和重排 fixed是什么
当DOM的变化影响了元素的几何属性（宽或高），浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程称为重排。完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。
将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
美团：
1.jquery选择器$ (. cls1.cls2 ) $ (.cls1 .cls2 ) 区别
$(".class1 .class2") 选择class1元素下class2的元素（中间有空格）
$(".class1.class2") 选择同时含有class1和class2的元素（中间没有空格）
$(".class1,.class2") 选择class1或者class2的元素（中间有逗号）
2.写一个依次弹出下标的jq代码
$("div").click(function(){
console.log($(this).index())
});
$ this 指的是谁，为什么你非要用$
$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()；而this,则是html元素对象，能调用元素属性
$this
jQuery.fn.init [div]
0: divlength:
1__proto__: Object(0)
this
<div>1</div>
3. let块级作用域为什么能解决弹出下标是循环最后一个数的问题 先写出来代码
for(let i = 0 ; i < 5 ;i++){
setTimeout(function(){
console.log(i)
}, 1000 * i)
}
Let 块级作用域，在for循环中，循环一次完了销毁，不是全局的，只对本次循环有效
4.你的项目的文件是怎么放置的画出来
5.innerHTML innerText 区别
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
<div id="div1">456
<h1>123</h1>
</div>
<script>
var div = document.getElementById("div1");
console.log(div.innerHTML);
console.log(div.innerText);
console.log(div.outerHTML);
console.log(div.outerText);
console.log(div.textContent);
</script>
6.用jq获取标签中的文本几种方法
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
7.es6
8. 什么时候cookie能互相访问
9. vue 中data el compated都干嘛的
10. 你给我用vue写一个组件...
11.jsonp有什么缺点
Jsonp优点：不受同源策略的限制，兼容性好，不需要XHR的支持，请求完成之后通过调用callback的方式回传结果。
缺点：只支持get请求而不支持Post请求等，只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行js调用的问题
迅雷：
1.你的项目
2.怎么样实现弹幕并且让他匀速运动还要兼容ie
3. setTimeout中的动画公式推倒，你设置的时间跟实际时间之间的数学公式
4.你如何进行http抓包
5.http1到http2
6. es5到es6
CVTE
一面：
自我介绍
1. 手写两栏布局
2. 手写实现一个方法传入的数字（123123123.123）改成123,123,123.123这种格式
3.vue双向绑定原理
4.vue修改了data数据会不会更新视图
5.cookie了解多少
6.怎么保证cookie安全
7https是什么 安全如何保证
- 清除浮动的方式
先说一下什么是文档流和文本流：文档流本是自上而下，自左而右的布局，针对于盒子模型，如果一个元素浮动了，那么它下面没有浮动的元素就会无视它所占据的空间，布局在它下方。但是文本流是针对文字，这种情况下，文字还是会环绕它布局。脱离文档流的方法一般是float,absolute,fixed
清除浮动： 如果一个父元素没有设置高，其中的子元素浮动了，而由于父元素的高度为0，那么下面的元素就会自动补位。
清理浮动的方法：
(1).clear{ clear:both; }
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="div3"></div>
在浮动的盒子下面再加一个div，给一个class=“clear”; 如果放在div2下面会撑开父元素高度，并消除浮动影响； 如果在box下面会消除浮动影响但是不会撑开父元素高度；
(2) 找到浮动盒子的父元素，设置`overflow:hidden;` 即可消除影响，但是它会将超出的部分隐藏起来；
(3) 伪元素（推荐）
.clearfix:after{
content:" ";
display:block;
clear:both;
height:0;
}
.clearfix{
zoom:1; //兼容IE
}
给浮动元素的父容器加一个`class=".clearfix"；` 通过伪元素在内部元素的后面添加一个看不见的"."/" "，并赋予clear属性清除浮动
(4) 给浮动元素的父元素也设置浮动
9.手写伪类清除浮动 content还有哪些值
内容生成：通过css向元素的前面/后面增加一部分内容
伪元素：before匹配到某一元素的最前面
:after 匹配到某一元素的最后面
内容生成 content：配合：before :after 伪元素，插入生成内容
常用取值：字符串：纯文本，插入到指定位置处
P:before{
Content :’Hi’;
}
urL: 生成的图像
P:before{
Content: url(image/1.jpg)
}
计数器：向已存在的html文本内容增添序号
使用：定义计数器
10.xss csrf sql 的危害以及防御
11.怎么判断一个类型是不是number
isNaN
12. typeof NaN 等于啥
number
13. 六列布局兼容ie6
14. http缓存
强制缓存：
header中会有两个字段来标明失效规则（Expires/Cache-Control），指的是当前资源的有效期 Expires：Expires（HTTP1.0）的值为服务端返回的到期时间，Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，比较的时间是客户端本地设置的时间，所以有可能会导致差错，所以在HTTP 1.1版开始，使用Cache-Control替代。Cache-Control中设定的时间会覆盖Expires中指定的时间；
对比缓存：
需要进行比较判断是否可以使用缓存。浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。在对比缓存生效时，状态码为304，并且报文大小和请求时间大大减少。它在请求header和响应header间进行传递
Cache-control策略（重点关注）
Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
Last-Modified/If-Modified-Since要配合Cache-Control使用：
Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。
二面：
1.xss csrf原理以及防御
2.csrf为什么会造成攻击
3.如何保证cookie安全
4.现场敲代码出了一个题 没记住..
5.你为什么要学前端
金蝶：
1.你的项目
2.css3你用了什么
3.旋转用的什么 其他的呢
Skew
4.json标准格式的标点符号
5.vue好在哪里
6.vue双向绑定原理
7.二列布局
8.web安全
9null undefined 区别
Undefined 被转化成数字是NaN，null被转化为数字是0
Null: 作为函数的参数，表示函数的参数不是对象；作为原型链的终点
Undefined: 变量被声明了，但是没有赋值，就等于Undefined; 调用函数时，应该提供的参数没有提供，该参数等于undefined；对象没有赋值的属性，该属性的值为Undefined；函数没有返回值时，默认返回Undefined
hr:
1. 你项目中遇到的问题和你的收获
2.我们公司的情况
3.你怎么知道我们公司的
4.有没有男朋友
5.你能去外地吗
6.你的兴趣爱好
用友：
1.http tcp工作在哪一层
http 应用层 tcp传输层
Tcp/ip 五层模型：应用层、传输层、网络层、数据链路层、物理层
OSI 应用层、表示层、会话层、传输层、网络层、数据链路层、物理层
2.发送一个http请求得全过程
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
3.数据库第三范式
4.403 204
5.你的一个项目
6.json怎么处理数组和对象
7.跨域以及原理
8.为什么做前端
9.异步有几种方式
10.长字符串如何进行压缩
11.事件模型
12.addEventListener 第三个参数干嘛的
hr :
1.你的成绩排名，你怎么学习的
2.你的家在哪能不能去外地
3.兴趣爱好
4.如何保证自己成绩很高还在学技术
中移在线：
1.你做前端的优势
2.定位absolute你的名字 会出现在网页哪里为什么
3.跨域和你如何解决的
4.node用过没有
5.你期望的薪资
6.你想在哪里工作
7.闭包
8.输入一个url到页面渲染的过程
9状态码
hr :
1. 你的优势
2.你四级过了么 多少分
3.你的成绩排名
4.你得期望薪资
诺瓦：
1.笔试题
2.冒泡排序时间复杂度
3.冒泡排序 快排 希尔排序的思想
4.二分查找
5.进程和线程
6.你对面向对象的理解
7.封装继承多态的理解
8.你对内存的理解 画出来
9. a = b
b = a
的内存
10.一排 中间缺失一个 你怎么解决
11.你的项目 各种问
12.一个网页能不能操作另一个
13.dom节点属性 多种方法
滴滴实习面经：
1.document . write和innerHTML 区别
2.跨域
3.你的项目
4.闭包
5.继承
6.原型
7.h5你用过哪些
8.css3你用过哪些
9.什么时候来
京东：
1.css实现三角形
2.行内元素.块级元素.行内块级元素都有什么
3.rem em
4.css动画translation
5. 原型
6.有没有用过node
7.
爱奇艺实习：
1.你的项目
2.animation
3. cookie有哪些字段
4.跨域和你的解决
5.xss csrf SQL是什么和具体的防御怎么做
6.原生实现mustache
1.说说盒子模型
2.display
3.说说vue react angularjs jquery的区别。
4.聊聊项目
5.问了一段js代码，输出结果是什么
6.口述数组去重
7.jquery的一个方法的实现原理
8.怎么实现分栏
9.怎么隐藏一个元素
Opacity 为 0 占据着位置
Display 为 None 隐藏元素
Visibility 为 hidden 元素隐藏保留位置
Position 定位移出视觉区
10.怎么用原生的js实现jquery的一个特定方法（你自己选的，我选的toggle）
11.js的数据类型
原始： null undefined boolean string number
其他： object
1.项目 轮播图怎么实现的？懒加载怎么实现的？
2.webpack模块化原理？你还知道什么模块化方案（答了AMD,CMD,CommonJS,面试官说还有，就说了匿名函数自执行和闭包）
CommonJS中，有一个全局性方法require()，用于加载模块。这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。浏览器端的模块，不能采用"同步加载"，只能采用"异步加载"。
AMD 异步方式去加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成这个回调函数才会执行。Require（）语句加载模块的 require([module], callback);第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。所以AMD比较适合于浏览器环境的。Require.js。模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。
CMD和AMD 对依赖模块的执行时机处理不同，AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块 ，CMD推崇就近依赖，只有在用到某个模块的时候再去require
同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行
CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的
这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因
3.js继承？优缺点？为什么这样就能继承？（答了原型链）
4.一个不定宽高的元素垂直水平居中方案
5.rem和em区别
6.position定位
7.事件流
8.事件委托 原理 怎么确定点的是哪个（答了e.target 然后面试官问parent.target 我蒙蔽了）
9.如果一个ul里面插入1000个li节点，怎么插入？（答了innerHTML或者用分时函数）
10.为什么要用分时函数？（答了Dom操作影响性能）为什么影响性能？（答了浏览器重排机制）
11.js作用域
12.js this指向
13.call apply bind区别
14.实现一个bind方法？
15.数组都有哪些方法？
16.ES6新特性？
17.手写实现promise
18.输入一个url后发生了什么？
19.接上面的问题，具体说浏览器渲染
20接上面的 说说cssom生成规则
21前端性能优化，cdn原理？
22mvvm理解？
23你知道哪些框架是mvvm架构？
神州数码：
1.你对你的工作环境的想法
2.你平时怎么学习
3.你觉得网易云课堂慕课网就你来说你有什么建议
4.你是不是独生子女
5.你遇到的浏览器兼容
6.你讲一个项目
360
1.函数式编程
2.继承
3.你对数学建模，算法的理解
4.你为什么要学前端
5.你的规划
6.模电的01怎么实现？（二极管）
7.一个地图有很多条路，你怎么选择最近的
8.盒子模型
9.你说一下你了解的web安全
10.你知道Array中的push state
11.说你的项目
12.模块化怎么实现
13.你对数据库学了什么
14.你的安全实验在哪个平台上做的
15.你说一下原型链继承
16.你项目中的收获
17.你项目中遇到的问题和解决的办法
18.你的网页设计大赛是做的什么
19. 你的兴趣爱好
20.你对后端的了解
21.有没有用过node
22.你有没有在实习
23.清除浮动的方法
24.你用Photoshop 能做图吗
25.你觉得vue好在哪里
绿盟：
1.你的项目
2.项目中的各种问题
3.web安全 xss SQL具体实施以及预防措施
4.vue 你用过多深
5.vue react angular之间的区别
6.对后台语言的深度
7.你对jquery 源码的了解 选择元素的源码
8.jq绑定事件怎么写
9.浏览器兼容
二面：
1.你是哪的人
2.工作地点选择
3.你的项目
4.你的期望薪资
5.你能不能实习
6.对后台语言的了解
ofo (霸面 )
- 你的项目
2.定时器的设定时间和实际时间之间的误差以及原因 （数学公式）
3.错误处理
4.跨域
5. jsonp原理 原生手写
6.如果url没拿到数据怎么进行错误处理
7.vue中怎么做错误处理（监听变化时发现并没有变化）
8.css画个车轮
9.浏览器兼容
艺龙
一面：
1.你的项目
2.h5中的history
3. bom下的东西
4.如何用bom中的刷新页面
5.vue (怕带偏了就直接说了用的少 )
6.手写编程 如何判断一个月中的最后一个星期日是几号
7.写一个函数返回中位数
8.伪类after before的具体原理
9.伪类清除浮动的原理
10.如何获取一个星期
11.如何new一个Date
二面：
1.span div的区别 以及他们如何互相转换
2.实现艺龙官网的轮播图
3.setTimeout setInterval的区别
4.如何实现从快到慢
5.你对面向对象的理解
6.你写一个面向对象
7.编码的了解
8.透明度的兼容处理
9.浏览器兼容
10.框架
11.闭包
触宝：
1.响应式局部你如何实现，遇到了什么问题
2.rem em
rem是根据html根节点来计算的，而em是继承父元素的字体
使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，允许浏览器用户调整浏览器大小来达到最佳体验。
3. settimeout原理
JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个任务队列。一旦当前任务执行完毕，再从队列中取出下一个任务
如果代码中设定了一个 setTimeout，那么浏览器便会在合适的时间，将代码插入任务队列，如果这个时间设为 0，就代表立即插入队列，但不是立即执行，仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
4.实现深拷贝和浅复制
浅复制
function simpleClone(initalObj) {
var obj = {};
for ( var i in initalObj) {
obj[i] = initalObj[i];
}
return obj;
}
/* ================ 客户端调用 ================ */
var obj = {
a: "hello",
b: {
a: "world",
b: 21
},
c: ["Bob", "Tom", "Jenny"],
d: function() {
alert("hello world");
}
}
var cloneObj = simpleClone(obj); // 对象拷贝
深拷贝
/* ================ 深拷贝 ================ */
function deepClone(initalObj) {
var obj = {};
try {
obj = JSON.parse(JSON.stringify(initalObj));
}
return obj;
}
/* ================ 客户端调用 ================ */
var obj = {
a: {
a: "world",
b: 21
}
}
var cloneObj = deepClone(obj);
cloneObj.a.a = "changed";
console.log(obj.a.a); // "world"
递归拷贝
/* ================ 深拷贝 ================ */
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
if (typeof initalObj[i] === 'object') {
obj[i] = (initalObj[i].constructor === Array) ? [] : {};
arguments.callee(initalObj[i], obj[i]);
} else {
obj[i] = initalObj[i];
}
}
return obj;
}
5.原生js向前向后插入
只有appendChild 找前一个再向后插入
今日头条
- 汉诺塔
222^n - 1
寻找规律（把所有的圆盘移动到C）：
1）n(圆盘个数) == 1
第一次：1号盘A -> C sum(移动次数) = 1
2）n == 2
第一次：1号盘 A -> B
第二次：2号盘 A -> C
第三次：1号盘 B -> C sum = 3
3）n == 3
第一次：1号盘 A -> C
第二次：2号盘 A -> B
第三次：1号盘 C -> B
第四次：3号盘 A -> C
第五次：1号盘 B -> A
第六次：2号盘 B -> C
第七次：1号盘 A -> C sum = 7
以此类推...
故不难发现规律,移动次数为：sum = 2^n - 1
算法分析（递归）：
把一堆圆盘从一个柱子移动另一根柱子，必要时使用辅助的柱子。可以把它分为三个子问题：
首先，移动一对圆盘中较小的圆盘到辅助柱子上，从而露出下面较大的圆盘，
其次，移动下面的圆盘到目标柱子上
最后，将刚才较小的圆盘从辅助柱子上在移动到目标柱子上
把三个步骤转化为简单数学问题：
（1）把 n-1个盘子由A 移到 B；
（2）把第n个盘子由 A移到 C；
（3）把n-1个盘子由B 移到 C；
我们创建一个JS函数，当它调用自身的时候，它去处理当前正在处理圆盘之上的圆盘。最后它回一个不存在圆盘去调用，在这种情况下，它不在执行任何操作。
JavaScript源代码实现
var hanoi = function(disc,src,aux,dst){
if(disc>0){
hanoi(disc-1,src,dst,aux);
console.log(' 移动 '+ disc + ' 号圆盘 ' + ' 从 ' + src + ' 移动到 ' + dst);
hanoi(disc-1,aux,src,dst)
}
}
hanoi(3,'A','B','C')
整个算法的思路是：
将A柱子上的n-1个盘子暂时移到B柱子上
A柱子只剩下最大的盘子，把它移到目标柱子C上
最后再将B柱子上的n-1个盘子移到目标柱子C上
2. 三次握手.四次挥手
当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，"你发的FIN报文我收到了"。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。
3. cookie session
session保存在服务器端, 客户端不知道其中的信息，session中保存的是对象，不区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到
cookie保存在客户端，服务器可以知道其中的信息，保存的是字符串
session保存在服务器端, 客户端不知道其中的信息，session中保存的是对象，不区分路径，同一个用户在访问一个网站期间，所有的session在任何一个地方都可以访问到
cookie保存在客户端，服务器可以知道其中的信息，保存的是字符串
首先HTTP是无状态的协议, 数据交换完毕之后，客户端与服务器端之间的连接就会关闭, 再次交换就要建议新的链接, 但是我们有时候就需要来弥补HTTP的这个不足之处
cookie机制就是说客户端请求服务器端的时候, 服务器端如何记录用户状态，就要使用response，向客户端发送一个cookie，客户端就会把cookie保存起来，浏览器再次请求服务端时就会把网址和cookie一起发给服务器，服务器检查cookie来辨别用户身份，所以cookie功能需要浏览器的支持，也就是说你不能禁用它
session 就是客户端访问服务器的时候服务器就会以某种形式保存下来, 服务端会有一个SESSIONID, 当再次访问时就会在服务器端查找, 如果找不到对应的sessionid, 那么就会创建一个session 并生成一个sessionid, sessionid会在本次响应中返回给客户端保存, 就是个不会重复的字符串, 也就是说你再请求服务端时, 首先要检查请求里是否有这个id, 而客户端保存sessionid并传去服务端的这个过程, 通常使用cookie来保存和发送
4. 行内元素和块级元素，行内块级元素的区别
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
5. a是否可以加padding margin
6. 算法中的排序
7. 排序的时间复杂度
8. 写一个闭包
for(var i = 0 ; i < 12 ; i++){
(function(n){
(setTimeout = function (){
console.log(n)
},1000)
})(i)
}
9. cookie安全
提高cookie的安全性的几种方式
一、对保存到cookie里面的敏感信息必须加密
二、设置HttpOnly为true
1、该属性值的作用就是防止Cookie值被页面脚本读取。
2、但是设置HttpOnly属性，HttpOnly属性只是增加了攻击者的难度，Cookie盗窃的威胁并没有彻底消除，因为cookie还是有可能传递的过程中被监听捕获后信息泄漏。
三、设置Secure为true
1、给Cookie设置该属性时，只有在https协议下访问的时候，浏览器才会发送该Cookie。
2、把cookie设置为secure，只保证cookie与WEB服务器之间的数据传输过程加密，而保存在本地的cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。（MD5 DES）
四、给Cookie设置有效期
1、如果不设置有效期，万一用户获取到用户的Cookie后，就可以一直使用用户身份登录。
2、在设置Cookie认证的时候，需要加入两个时间，一个是“即使一直在活动，也要失效”的时间，一个是“长时间不活动的失效时间”，并在Web应用中，首先判断两个时间是否已超时，再执行其他操作。
- highCharts 和 echarts的区别
Echarts 图表是免费开源的，基于Canvas绘图，3D绘图方面占据绝对的优势，可以去结合百度地图的使用，可以流畅的运行在PC和移动设备上，兼容当前大部分浏览器
HighCharts 基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图
10.Svg和 canvas 区别
Svg: 不失真，可被搜索，页面优化：减少外部链接
Canvas: 在HTML中绘制图形，实际运行中会以图片.png方式出现，不能被搜索引擎抓取，放大后会失真
为什么游戏用canvas ？ 游戏会分不同分辨率的版本
Svg效果：静态绘制图形，动态动画效果，专门提供事件
webGL : 专门用于绘制图像
12 Angular Vue React JQuery Bootstarp对比
Angular :
AngularJS的学习成本高。在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。模板功能强大丰富，自带了极其丰富的angular指令。是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
Vue:
Vue.js本身提供的API都比较简单、直观。单html开发. 它的开发模式, 是一个html, 然后不停替换组件对应的js来切换显示效果. html中的共通js和css只需要download一次, 理论上比Iframe页面的呈现更快。数据的双向绑定. 数据改, 页面改. 页面改, 数据也改。用模板搭建应用，应用小而快的比较适合。
组件化，创造单个component后缀为.vue的文件，包含template(html代码)，script(es6代码),style(css样式)
React:
计划构建一个大型应用，更好的可测试性，同时适用web端和原生APP
Boostarp:
栅格系统, 使用简单, 上手容易. 专为响应式页面而生. 一套代码就可以自适应平板电脑和PC
jQuery :
最少的代码做最多的事情，jQuery对性能的理解最好。基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。不能向后兼容，每一个新版本不能兼容早期的版本。在同一页面上使用多个插件时，很容易碰到冲突现象
13.Vue与 Angular 双向数据绑定原理
angular.js ：脏值检查
angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout , $interval )
执行 $digest() 或 $apply()
vue ：数据劫持
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
14.数组去重
function unique(arr){
var res = [];
for(var i = 0 ; i<arr.length;i++){
if(res.indexOf(arr[i]) == -1){
res.push(arr[i]);
}
}
return res;
}
function unique10(arr){
//Set数据结构，它类似于数组，其成员的值都是唯一的
return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}