前端面试备考（基础题）
2017-05-23 本文已影响0人
艾莉娅的缝衣针
前端面试备考（基础题）
Html
1. HTML5离线存储和本地缓存
- 离线存储
<html manifest="test.manifest">
test.manifest内容
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
提示：在服务器上添加MIME TYPE支持：比如 Apache 中可在 .htaccess 中添加：
AddType text/cache-manifest manifest
如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1
- localStorage 和 sessionStorage方法
不同域下就算key相同取不到的值也不同，如localhost和127.0.0.1
localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key")
localStorage.clear()
css
1. 清除浮动方法
<html>
<head>
<meta http-equiv="content-type"content="text/html;charset=utf-8">
<title>清除浮动</title>
<style type="text/css">
.d {
float: left;
height: 100px;
width: 100px;
background-color: red;
border: solid #fff 2px;
}
.con{
/*方法四*/
/*overflow:auto;*/
/*方法五*/
/*overflow: hidden;*/
/*方法六*/
/*display:table;*/
}
</style>
</head>
<body>
<div class="con">
<div class="d1 d">
</div>
<div class="d2 d">
</div>
<!-- 方法一 -->
<!-- <div style="clear:both"></div> -->
<!--方法二-->
<!-- <br clear="all"/> -->
</div>
</body>
</html>
2. 等高布局
最完美的解决方式：等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{
float:left;
width:150px;
background:#B0B0B0;
padding-bottom:2px;
margin-bottom:-2px;
}
.right{
float:left;
width:450px;
background:#6CC;
padding-bottom:2px;
margin-bottom:-2px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>
3. 盒子模型
box-sizing：
content-box = width （content的宽）
border-box = width + border + padding
4. 垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*脱离文档流*/
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
5. 自适应居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.c1{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.c2{
width: 100%;
height: 100px;
background-color: green;
float: left;
width: 100%;
margin-right: -200px;
}
.c3{
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="c1 c"></div>
<div class="c2 c"></div>
<div class="c3 c"></div>
</body>
</html>
6. css3实现正方形
//方法一
.placeholder {
width: 100%;
background-color:red;
overflow: hidden;
}
.placeholder:after {
content: '';
display: block;
margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}
//方法二
.placeholder {
width: 100%;
height:100vw;
background-color:red;
}
//方法三
.placeholder {
width: 100%;
background-color:red;
padding-bottom:100%;
height:0;
}
7. css3新特性（举几个例子）
- Text-decoration：文字和边界可以填充颜色
Text-fill-color: 文字内部填充颜色
Text-stroke-color: 文字边界填充颜色
Text-stroke-width: 文字边界宽度
- border-radius和rgba透明度支持
- Gradient 渐变效果
background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
- 阴影（Shadow）和反射（Reflect）效果
- flex布局
- Transitions, Transforms 和 Animation
div{
/*用于指定过渡的性质，比如 transition-property:backgrond 就是指backgound 参与这个过渡*/
transition-property：backgrond;
/*用于指定这个过渡的持续时间*/
transition-duration：5s
/*用于制定延迟过渡的时间*/
transition-delay：5s;
/*用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier*/
transition-timing-function：linear;
}
/*Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换*/
.skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
/*animation 动画*/
@-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
javascript
1. array的基本方法
2. 阻止冒泡
JQuery 提供了两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二：return false;
$("#div1").mousedown(function(event){
return false;
});
3. arguments转化为真正的数组
Array.prototype.slice.call(arguments)
4. js数组去重
- 创建一个新的数组存放结果
- 创建一个空对象
- for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
5. 深拷贝
var clone = function(v) {
var o = v.constructor === Array ? [] : {};
for (var i in v) {
o[i] = typeof v[i] === "Object" ? clone(v[i]) : v[i];
}
return o;
}
6. 闭包
闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
- 应用场景 设置私有变量和方法
- 不适合场景 返回闭包的函数是个非常大的函数
- 闭包的缺点 常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
- 为什么会出现闭包这种东西，解决了什么问题
受JavaScript链式作用域结构的影响，父级变量中无法访问到子级的变量值，为了解决这个问题，才使用闭包这个概念。
7. 交换两个变量的值，但不产生新的变量
var a=1;
var b=2;
a=a+b;
b=a-b;
a=a-b;
8. 函数防抖和函数节流
函数防抖 频繁触发的情况下，只有足够的空闲时间，才执行代码一次
var timer = false
document.getElementById("debounce").onScroll = function() {
clearTimeout(timer)
timer = setTimeout(function(){
console.log(‘函数防抖’)
}, 300)
}
函数节流 声明一个变量当标志位，记录当前代码是否在执行
var canScroll = true;
document.getElementById('throttle').onScroll = function() {
if (!canScroll) {
return;
}
canScroll = false;
setTimeout(function(){
console.log('函数节流');
canScroll = true;
},300)
}
9. web worker js多线程
postMessage``onmessage``terminate
