前端面试题小集
一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。
1.使用flex
//html
//css
.box{
width:400px;
height:100px;
display:flex;
flex-direction:row;
align-items:center;
border:1pxsolid#c3c3c3;
}
.left{
flex-basis：100px;
-webkit-flex-basis:100px;
/* Safari 6.1+ */
background-color:red;
height:100%;
}
.right{
background-color:blue;
flex-grow:1;
}
2.浮动布局
Left sidebar
Main Content
*{
margin:0;
padding:0;
}
#left{
float:left;
width:220px;
background-color:green;
}
#content{
background-color:orange;
margin-left:220px;
/*==等于左边栏宽度==*/
}
二、请写出一些前端性能优化的方式，越多越好
1.减少dom操作
2.部署前，图片压缩，代码压缩
3.优化js代码结构，减少冗余代码
4.减少http请求，合理设置 HTTP缓存
5.使用内容分发cdn加速
6.静态资源缓存
7.图片延迟加载
三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）
输入地址
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
10.浏览器发送异步请求
四、请大概描述下页面访问cookie的限制条件
跨域问题
设置了HttpOnly
五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流
1.直接改变className，如果动态改变样式，则使用cssText
// 不好的写法
varleft=1;
vartop=1;
el.style.left=left+"px";
el.style.top=top+"px";// 比较好的写法
el.className+=" className1";
// 比较好的写法
el.style.cssText+=";
left: "+left+"px;
top: "+top+"px;";
2.让要操作的元素进行”离线处理”，处理完后一起更新
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘
六、vue生命周期钩子
1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed
七、js跨域请求的方式，能写几种是几种
1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）
5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。
6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求
八、对前端工程化的理解
开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具
九, js深度复制的方式
1.使用jq的$.extend(true,target,obj)
2.newobj=Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj
3.newobj=JSON.parse(JSON.stringify(sourceObj))
十、js设计模式
总体来说设计模式分为三大类：
创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模
十一、图片预览
functionshowPreview(source){
varfile=source.files[0];
if(window.FileReader){
varfr=newFileReader();
fr.onloadend=function(e){
document.getElementById("portrait").src=e.target.result;
};
fr.readAsDataURL(file);
}
}
十二、扁平化多维数组
1、老方法
varresult=[]
functionunfold(arr){
for(vari=0;i
if(typeofarr[i]=="object"&&arr[i].length>1){
unfold(arr[i]);
}else{
result.push(arr[i]);
}
}
}
vararr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
unfold(arr)
2、使用tostring
varc=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
varb=c.toString().split(',')
3、使用es6的reduce函数
vararr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];
constflatten=arr=>arr.reduce((a,b)=>a.concat(Array.isArray(b)?flatten(b):b),[]);
varresult=flatten(arr)
十三、iframe有那些缺点？
iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
