一、一个页面上两个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>
二、请写出一些前端机能优化的体式格局,越多越好
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属性值,如许能够绕开以上两个题目。