面试题总结(持续更新)

下面是面试的时候碰到的一些问题，写这篇文章的主要目的是为记录，有些能几句话说明白的就给出答案，不能说明白的，后续的文章会有更新。

1.[‘1’,’2’,’3’].map(parseInt) 输出结果是什么？答：[1, NaN, NaN]，为什么自己百度，有很详细的解答，这道题还是比较偏的，刚开始的时候并不知道parseInt有两个参数。

2.说出em ,rem ,pt,px的区别？答：pt表示榜，px表示像素，em是以父元素的像素为基准的，rem是以root的像素为基准。这个是基础题

3.css3的no ,nth-of-type

4.js的闭包，也是很基础的：
var O = function(name){
this.name = name||’world’;
};
O.prototype.hello = function(){
return function(){
console.log(“hello”+this.name);
}
};
var l = new O();
var hello = l.hello();
hello();
这一段输出的是“hello”,这个时候的this指向的是window对象。

用一个div实现红绿灯，并且实现红黄绿灯从左往右无线循环轮播。

html代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A Gentle Introduction</title>
    <link rel="stylesheet" type="text/css" href ="./test2.css">

  </head>
  <body>
    <div id = "contain">
        <span class='red'></span>
        <span class='yellow'></span>
        <span class='green'></span>
    </div>
  </body>
</html>

css3代码

@CHARSET "UTF-8";
#contain {
    width: 500px;
    height: 500px;
    position: relative;
}

#contain span{
    width: 100px;
    height: 100px;
    display: inline-block;
    background-color: black;
    border-radius: 50%;

}
.red{
    animation-name:red ;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

.yellow{
    animation-name:yellow ;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}
.green{
    animation-name:green ;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

@keyframes red{
    0%,30%{
        background-color: red;
    }
    31%,100%{
        background-color: black;
    }
}

@keyframes yellow{
    0%,30%{
        background-color: black;
    }
    31%,60%{
        background-color: yellow;
    }
    61%,100%{
        background-color: black;
    }
}

@keyframes green{
    0%,60%{
        background-color: black;
    }
    61%,90%{
        background-color: green;
    }
    100%{
        background-color: black;
    }
}

红绿灯问题完美解决哈哈哈哈哈哈，其实是考擦CSS3基础的动画，这个面试题出的还是很不错的。

6.用jquery 实现一个tab组件（这个是进阶了，考验你封装组件的能力）

7.说说网页优化的方法？（这个也是进阶了，需要站在比较高的角度去谈）

8。说说css让盒子垂直水平居中的方式
1.position absolute 的情况下，可以left 50%; top:50%,margin-left:一半宽度; margin-top:一半高度
2.table-cell 布局，用vertical-align:middle margin:0 auto
3.flex布局
4.定位+transform 适用于盒子宽高不定的时候，position absolute/relative top:50%;left:50%;transform :translate(-50%,-50%)

扫描二维码关注公众号，回复： 3259877 查看本文章

9。vue 双向绑定的原理

10 浏览器兼容的一般技巧

11 ajax返回值的限制

12 get post 的区别

13 jsonp
https://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 这个有jsonp的详细解释，一目了然，这个玩意调用其实很简单，但是ajax和jsonp其实是两个完全不同的东西，需要好好对比研究下。

14 怎么处理跨域问题
这个问题答案也是很多的，需要好好吃透下。http://blog.csdn.net/joyhen/article/details/21631833 这个博客不错。

15 web性能优化
1、减少http请求，合理设置 HTTP缓存。包括对CSS，js,html进行打包，压缩,合并图片;
2、合理设置缓存
3、懒加载
4、Javascript代码优化：a.尽量减少dom操作。b.减少cookie传输。c.减少作用域链查找。比如减少全局变量的调用和操作，因为全局变量再作用域链的最顶端。d.避免使用 eval和 Function。

16 cookie

17 如果在XX这个域名下，要拿到YY平台的内容，怎么弄？（典型的跨域问题，有很多答案，我这个傻逼，居然没想到）
Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如

面试题总结(持续更新)

猜你喜欢