前端基础面试题
页面布局
题目:假设高度已知,请写出三栏布局,其中左栏,右栏宽度各为300px,中间自适应
– 方案一:两边元素浮动不占位置,中间元素占父容器宽度百分之百
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
#a{
float: left;
width: 300px;
background-color: red;
}
#b{
float: right;
width: 300px;
background-color: aqua;
}
#c{
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案二:左右使用绝对定位不占位置,中间占父元素百分之百
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
div:nth-child(1){
position: relative;
}
#a{
position: absolute;
left: 0;
top:0;
width: 300px;
background-color: red;
}
#b{
position: absolute;
right: 0;
top: 0;
width: 300px;
background-color: aqua;
}
#c{
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案三:父元素使用flex布局,中间元素flex=1
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
height: 500px;
}
.fu{
display: flex;
width: 100%;
}
#a{
width: 300px;
background-color: red;
}
#b{
flex: 1;
background-color: aqua;
}
#c{
width: 300px;
background-color: black;
}
</style>
</head>
<body>
<div class="fu">
<div id="a">左</div>
<div id="b">中</div>
<div id="c">右</div>
</div>
</body>
</html>
–方案四:table-cell,设置父元素display为表格布局。(略)
–方案五:网格布局(略)
CSS盒模型
谈谈你对对盒模型的基本认识
- 基本概念
标准模型+IE模型 - 标准模型和IE模型区别
普通浏览器模型是content-box,而IE模型包括border与padding,也就是border-box. - CSS如何设置这两种模型
box-sizing属性 - JS如何设置获取盒模型对应的宽和高
dom.style.width
dom.currentStyle.width
window.getComputedStyle(dom).width
dom.BoundingClientRect().width //计算元素的绝对位置 - 实例题(根据盒模型解释边距重叠)
父子元素编剧重叠,子元素设置margin-top,父元素设置overflow=hidden,父元素高度会多margin-top像素 - BFC(编剧重叠解决方案)概念:块级格式化上下文
BFC原理及其应用
DOM事件类
- 基本概念:DOM事件的级别->dom0,dom2
- DOM事件模型:捕获和冒泡
- DOM事件流:通过捕获到目标元素,通过冒泡到window
- 描述DOM事件捕获的具体流程:window-document-body-…-目标元素
- event对象的常见应用:preventDefault();stopPropagation();stopImmediatePropagation();
currentTarget();currentTarget();target - 自定义事件:
var eve=new Event("custome");
domObj.addEventListener('custome',function(){....});
domObj.dispatchEvent(eve)//触发事件
原型链
- 创建对象的方法
var o1={name:'o1'}
var o11=new Object({name:"o11"})
var M=function(){this.name='o2'}
var o2=new M()
var P={name:"o3"}
var o3=Object.create(P)
通信类
- 什么是同源策略及限制
同源策略限制从一个源(协议+域名+端口)加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 -Cookie,LocalStorage和indexDB无法读取。-DOM无法获得。-AJAX请求不能发送。 - 前后端如何通信
-Ajax。-WebSocket。-CORS - 如何创建Ajax。
- 跨越通信的几种方式
-JSONP。-Hash。-postMessage。-WebSocket。-CORS
安全类
- CSRF
基本概念和缩写:跨站请求伪造,Cross-site request forgery
攻击原理:略
防御措施:Token验证。Referer验证。隐藏令牌 - XSS
基本概念和缩写:跨域脚本攻击,cross-site scripting
攻击原理与防御措施:略
算法类
- 排序
- 堆栈,队列,链表
- 递归
- 波兰式和逆波兰式
js技能讲解
- 渲染机制
什么是DOCTYPE:告诉浏览器是当前文档是哪个文档类型
浏览器渲染过程:
重排Reflow:页面中的元素放在对应的位置,这个过程叫重排
重绘Repaint:页面内容画在页面上
布局Layout: - JS运行机制
任务队列; - 页面性能
资源压缩合并,减少HTTP请求。
非核心代码异步加载;动态脚本加载,defer,async
利用浏览器缓存:强缓存,协商缓存
使用CDN
预解析DNS - 错误监控
前端错误分类:代码错误,资源加载错误