一、一个页面上两个div摆布铺满全部阅读器，要保证左侧的div一向为100px，右侧的div追随阅读器大小变化（比方阅读器为500，右侧div为400，阅读器为900，右侧div为800），请写出也许的css代码。

1.运用flex

//html
<div class='box'><div class='left'></div> <div class='right'></div></div>

//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;
}

在线demo

2.浮动规划

<div id="left">Left sidebar</div>
<div id="content">Main Content</div> 

<style type="text/css">
 *{
 margin: 0;
 padding: 0;
}

#left {
 float: left;
 width: 220px;
 background-color: green;
}
#content {
 background-color: orange;
 margin-left: 220px;/*==即是左侧栏宽度==*/
}
</style>

demo
更多规划栗子 请移步

二、请写出一些前端机能优化的体式格局，越多越好

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的限定前提

1.跨域题目
2.设置了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设想形式

整体来讲设想形式分为三大类：
建立型形式，共五种：工场要领形式、笼统工场形式、单例形式、制作者形式、原型形式。
构造型形式，共七种：适配器形式、装潢器形式、代办形式、表面形式、桥接形式、组合形式、享元形式。
行动型形式，共十一种：战略形式、模板要领形式、观察者形式、迭代子形式、义务链形式、敕令形式、备忘录形式、状况形式、接见者形式、中介者模

细致申明 请移步alloyteam的文章

十一、图片预览

<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

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、运用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属性值，如许能够绕开以上两个题目。