前端面试题小集

　　一、一个页面上两个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: 1px solid #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

　　

　　二、请写出一些前端性能优化的方式，越多越好

　　1.减少dom操作

　　2.部署前，图片压缩，代码压缩

　　3.优化js代码结构，减少冗余代码

　　4.减少http请求，合理设置 HTTP缓存

　　5.使用内容分发cdn加速

　　6.静态资源缓存

　　7.图片延迟加载

　　三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

　　输入地址

　　1.浏览器查找域名的 IP 地址

　　2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

　　3.浏览器向 web 服务器发送一个 HTTP 请求

　　4.服务器的永久重定向响应（从 http:// 到 http://www.）

　　5.浏览器跟踪重定向地址

　　6.服务器处理请求

　　7.服务器返回一个 HTTP 响应

　　8.浏览器显示 HTML

　　9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

　　10.浏览器发送异步请求

　　四、请大概描述下页面访问cookie的限制条件

　　跨域问题

　　设置了HttpOnly

　　五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流

　　1.直接改变className，如果动态改变样式，则使用cssText

　　// 不好的写法

　　var left = 1;

　　var top = 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设计模式

　　总体来说设计模式分为三大类：

　　创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

　　结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

　　行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

　　十一、图片预览

　　

　　

　　function showPreview(source) {

　　var file = source.files[0];

　　if(window.FileReader) {

　　var fr = new FileReader();

　　fr.onloadend = function(e) {

　　document.getElementById('portrait').src = e.target.result;

　　};

　　fr.readAsDataURL(file);

　　}

　　}

　　十二、扁平化多维数组

　　1、老方法

　　var result = []

　　function unfold(arr){

　　for(var i=0;i< arr.length;i ){

　　if(typeof arr[i]=='object' && arr[i].length>1) {

　　unfold(arr[i]);

　　} else {

　　result.push(arr[i]);

　　}

　　}

　　}

　　var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

　　unfold(arr)

　　2、使用tostring

　　var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

　　var b = c.toString().split(',')

　　3、使用es6的reduce函数

　　var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

　　const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

　　var result = flatten(arr)

　　十三、iframe有那些缺点？

　　iframe会阻塞主页面的Onload事件；

　　搜索引擎的检索程序无法解读这种页面，不利于SEO;

　　iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

　　使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。