2016之web前端面试题，最全最有用
1、请写出以下几个alert的值：
var a =100;
function fn(){
alert(a);
var a = 200;
alert(a);
}
fun();
alert(a);
var a;
alert(a)
var a = 300;
alert(a)
2、请写出以下程序的输出
var obj1 = {
name:'obj1' ,
fn:function(){
document.write(this.name)
}};
var obj2 = {name:'obj2'};
var obj3 = {name:'obj3'};
obj1.fn();
var newFn = obj1.fn;
newFn();
newFn.call(obj2);
obj3.fn = newFn;
obj3.fn();
3、一个数组par中存放多个人员信息，每个人员的信息由年龄age和姓名name组成，如{age:2 ,name:'xx'} 请写一段js程序，对这个数组按年龄从小到大进行排序。
4、有字符串var str = 'abc345efgabcab'，请写出3条js语句分别实现如下3个功能：
1）、去掉字符串中的a、b、c字符，形成结果：‘345efg’
2）、将字符中的数字用中括号括起来，形成结果：‘abc[3][4][5]efgabcab’
3）、将字符串中的每个数字乘以2，形成结果：‘abc6810efgabcab’
5、请写一段js程序，定义一个列表类List，改类包括两个成员：属性length（表示列表中的元素个数）和方法add（向列表添加元素），其中要求构造函数和add方法的参数为动态参数。
6、请问以下js程序有什么问题？应该如何优化？
function setStyle(element){
element.stype.fontWeight = 'bold';
element.stype.color = '#000000'
}
7、请写出一个正则表达式：
1）匹配一个全部是数字的字符串
2）提取出一个url所使用的协议类型http、ftp等和host名称
8、请使用闭包的方式，写一段js程序实现如下功能：函数每调用一次则改函数的返回值加1（注：要求使用es6新技术）
9、请写出下面js程序中几个document.write的结果：
function Parent(){
this.a = 1;
this.b = [1,2,this.a];
this.c = {dome:5};
this.show = function(){
document.write(this.a+''+this.c.demo+':'+this.b+'
')
}
}
function Child(){
this.a = 2;
this.change = function(){
this.a= this.b.length;
this.c.demo = this.a++;
}
}
Child.prototype = new Parent();
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();
10、请简述对MVC的理解，并列举一些MVC架构的js框架。
11、请用js程序实现二分查找算法。
12、有这样一个URL：http://vip.qq.com/a.php?a=1&b=2&c=&d=xxx&e，请写一段JS程序提取URL的各个GET参数（参数名和参数个数不确定），将其按key-value形式返回到一个json结构中，如{a:'1' , b:'2' ,c:'' , d:'xxx' , e:undefined}
13、xss原理是什么？怎么防御呢？请写出一个攻击和防御的例子。CSRF和hash碰撞攻击原理是什么，怎么防范。
14、请列举前端可以采取的常见优化方式。
15、请列举你所了解的跨域实现方法
16、console.log(typeof [])
17、移动端有哪些原生触摸事件。
18、请写出解决跨域的方法。
19、请使用原生JS写一个兼容各种浏览器（IE6+、chrome等）的事件绑定函数。
20、每给一个整数数组，编程实现找出求和最大的连续子数组，如数组[1,-2,4,1,3]，求和最大的连续子数组为[4,1,3]
21、编程实现一个once函数，使得传入的函数只执行一次，第二次以后返回undefined。
例如：
var foo = once(function(){console.log('bar')})
foo(); //bar
foo(); //undefined
foo(); //undefined
22、列举你知道的HTTP状态码
23、列举你知道的HTTP请求和响应头的字段和该字段的作用。
24、什么事CSRF？怎么避免？
25、JavaScript原型，原型链，有什么特点？
26、eval是做什么的？
27、JavaScript如何实现继承？
28、谈谈this对象的理解。
29、事件、IE与火狐的事件机制有什么区别？如何阻止冒泡？
30、什么是闭包，为什么使用它？
31、new 操作符具体干了什么？
32、JSON的了解？
33、ajax是什么？
34、同步和异步的区别？
35、模块化怎么做？
36、异步加载的方式有哪些？
37、点击事件中300sm延时的处理方式。
38、css3新增属性？
39、margin对哪些元素无效？
40、写一个简单的css滑动动画。
41、html5新增标签？
42、如何获取设备当前位置信息？
43、写一个函数，将‘hello world’ 转为 ‘h e l l o w o r l d’
44、将['a' , 'b' , 'c'] 转换为 'a,b,c'
45、写一个简单闭包。
46、解释变量声明提前。
47、.call() 和 apply()区别？
48、jquery中如何将数组转化为json字符串，然后再转化回来？
49、针对jquery的优化方案？
50、哪些操作会造成内存泄漏？
51、jquery的slideUp动画，如果目标元素是被外部事件驱动，当鼠标快速地连续触发外部元素事件，动画滞后的反复执行，该如何处理？
52、给定var str = "github is free for open source ";把这个字符串变成"github6 is7 free8 for9 open10 source11"
53、一个长度为10000左右的字符串数组var arr=[‘asdf’,’ccc’,’eee’,’asdf’…];请写一个函数计算出现次数最多的字符串及出现次数。
54、动态创建一个UL节点，并绑定1000个LI子节点，显示在body的第一个节点前。
55、在页面里通过JS如何判断页面是否属于腾讯(qq.com，包括子域名)？
56、创建一个Person类，使其拥有 public和private两种属性和方法。
57、原生JS实现添加事件方法，并保证this指针指向到绑定的对象（兼容不同浏览器）。
58、通过2个代码片段实现两个iframe之间的通信（兼容ie6、7）。
59、实现两个超出整数存储范围的两个大正整数相加 function add(a,b)
嵌入一个试卷1：
1. 为div设置类a与b,应编写HTML代码____________.
2. 设置CSS属性clear的值为____________时可清除左右两边浮动.
3. ____________标签必须直接嵌套于ul,ol中.
4. CSS属性____________可为元素设置外border.
5. 设置CSS属性float的值为____________时可取消元素的浮动.
6. 文字居中的CSS代码是____________.
选择题。（每题4分,共16分）
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( )
A. display:inline B. display:none C. display:block D. display:inheric
2. 选出你认为最合理的定义标题的方法( )
A. 文章标题 B.
文章标题
C.
文章标题
D. 文章标题3. br标签在XHTML中语义为( )
A.换行 B.强调 C.段落 D.标题
4. 不换行必须设置( )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值( )
A. cellpadding="0" B. padding:0 C. margin:0 D. cellspacing="0"
判断题(每题4分,共24分)
1. CSS属性font-style用于设置字体的粗细.( )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条. ( )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关. ( )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关. ( )
5. display:inline兼容所有的浏览器. ( )
6. input属于窗体元素,层级显示比flash,其它元素都高. ( )
问答题(每题9分,共36分)
1. 写出ul,ol,dl三种列表的html结构.
2. 将以下CSS代码进行缩写,注意要符合缩写的规范.
代码一:
border-width:1px;
border-color:#000;
border-style:solid;
代码二:
background-position:0 0;
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#f00;
background-image:url(background.gif);
代码三:
font-style:italic;
font-family:"Lucida Grande",sans-serif;
font-size:1em;
font-weight:bold;
font-variant:small-caps;
line-height:140%;
代码四:
list-style-position:inside;
list-style-type:square;
list-style-image:url(image.gif);
代码五:
margin-left:20px;
margin-right:20px;
margin-bottom:5px;
margin-top:20px;
代码六:
color:#336699;
color:#ffcc00;
答:
3. 修改以下代码,使其结构更加合理以及符合W3C标准.(XHTML 1.0 Strict)
代码:
Don't buy these electronics used
Money may be tight, but you may kick yourself for purchasing these electronics secondhand.
Even when the price is low, the risk may be too high.
home
content
答:
4. 简述border:none以及border:0的区别,并给出使用建议.
编程题(不限于一种方法,共30分)
使用重构的方式制作出一个如下图的水平,垂直都居中短边为50px,长边为150px的红色十字架.
要求: 1.使用2个div完成 2.使用3个div完成 3.使用5个div完成
嵌入试卷2：
1) 现在有以下 HTML 代码：
<div class="wrapper">
<div class="box box1">div>
<div class="box box2">div>
div>
补全下面的 CSS
div.wrapper {
border:1px solid #ccc;
width:200px;
padding:10px;
overflow: hidden;
}
div.box {
width:50px;
height:50px;
border:1px solid #ccc;
}
div.box1 {
float: left;
}
div.box2 {
float: right;
}
以达到以下效果：
2) 补充完成下面的代码：
function People (name) {
this.name = name;
}
// TODO
// ...
//
People.prototype.sayHi = function(){
console.log('Hi,I am Jerry')
}
var jerry= new People('Jerry');
jerry.sayHi();// => 'Hi, I am Jerry'
var lucy= new People('Lucy');
lucy.sayHi();// => 'Hi, I am Lucy'
3) 补充下面的代码，尽量多地写出你能想到的实现方案。
var arr= [
{ name: 'Jerry' },
{ name: 'Lily' },
{ name: 'Lucy' },
{ name: 'Tomy' }
];
var a = {name: 'Jerry' } ;
var a1 = {name: 'Lily' } ;
var a2 = {name: 'Lucy' } ;
var a3 = {name: 'Tomy' } ;
var arr2=[a,a1,a2,a3];
arr === arr2;// => false
arr[0]=== arr2[0];// => true
arr[1]=== arr2[1];// => true
arr[2]=== arr2[2];// => true
arr[3]=== arr2[3];// => true
4) 补充 CSS代码，让p元素内的文字“垂直” 居中显示：
HTML
<p>Jerry is my love.p>
CSS
p {
height:30px;
border:1px solid #ccc;
text-align: center;
line-height: 30px;
}
5) 写出标号处各打印的内容，并解释原因：
<script type="text/javascript">
var name= 'jerry';
function sayHi () {
return 'Hi, I am ' + this.name;
}
var lucy= {
name: 'Lucy',
sayHi: sayHi,
sayAnotherHi: function () {
return sayHi();
}
};
var tomy= {
name: 'Tomy'
}
console.log(sayHi());// 1:Hi, I am jerry this指向window
console.log(lucy.sayHi());// 2:Hi, I am Lucy this指向lucy对象
console.log(lucy.sayHi.apply(tomy));// 3:Hi, I am Tomy apply可以让this指向tomy
console.log(lucy.sayAnotherHi());// 4:Hi, I am jerry 因为sayHi()不能直接在对象内部调用，所以sayAnotherHi里面的sayHi其实是调用window下面函数sayHi，所以this指向window，也就是jerry
script>
6) HTTP是无状态协议，那么网站应该如何记住用户的登录状态？尽量详细回答整个过程。
答：可以使用session来记录用户登录状态，session是服务器保存数据，当用户登录时，服务器会生成一个seesionid，这个sessionid下面就存储着用户的所有信息，这个时候也会传递这个sessionid给浏览器，这个sessionid存储于浏览器cookie中，之后用户请求的时候，就会把这个sessionid与服务器匹配，找到相对应的信息。
7) 写出标号处各打印的数值，并尽量解释原因：
(function () {
var a= 0;
function run() {
a = 1;
function run2 () {
console.log(a);// 1:Undefined 其实变量声明是会置顶，所以相当于先var a;
var a= 3;
console.log(a);// 2: 3 a = 3，当然会输出3
}
run2();
console.log(a);// 3: 1 run2中的a并无影响，run下定义a = 1
function run3 (a) {
console.log(a);// 4: 8 这个a是参数8
a = 5;
}
run3(8);
console.log(a);// 5: 1 这个a是指匿名函数下定义的a，被赋值了1
function run4 () {
a = 4;
}
console.log(a);//6: 1 这个a是指匿名函数下定义的a，被赋值了1
return run4;
}
var result= run();
console.log(a);// 7:1 这个a是指匿名函数下定义的a，被赋值了1
result();
console.log(a);// 8:4 执行了一遍run4()，a被赋值了4
})();
8）页面上有以下元素：
<ul id="list">
<li>This is Jerryli>
<li>This is Lucyli>
<li>This is Lilyli>
<li>This is Tomyli>
ul>
编写 JavaScript，使得点击页面的特定li元素就会alert "元素的序号.内容"。例如点击第一个元素，就会alert出"1. This is Jerry"。（不能用jQuery，注意需要alert序号）
var pAry=document.getElementsByTagName("li");
for (var i =1; i < pAry.length; i++) {
pAry[i].οnclick=function(arg){
return function(){
alert(arg+1+this.innerText);
}
}(i);
};
9) 尽量多地列出你所知道的关于前端的技术（方法、框架等），并且简述其作用。
答：
框架有Angular、react。前端代码结构优化，代码功能优化就靠他们了。
也很喜欢动画效果animate.css。
Sliderjs也非常不错，轻量级的滑屏js库。
10) 如果现在页面上出现了卡顿现象，例如鼠标移动不流畅，页面滚动不流畅，你会如何进行debug？
答：用chrome浏览器查看network和timeline来查看具体导致页面卡顿的原因。
11）编写 JavaScript代码，让题目1的两个正方形可以在长方形内自由拖拽（可以使用jQuery）。
Js原生：
window.οnlοad=function ()
{
var oDrag=document.getElementById('drag');
oDrag.οnmοusedοwn=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDrag.offsetLeft;//x坐标
var disY=oEvent.clientY-oDrag.offsetTop;//y坐标
document.οnmοusemοve=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//移动x坐标位置
var t=oEvent.clientY-disY;//移动y坐标位置
//限制范围
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDrag.offsetWidth)
{
l=document.documentElement.clientWidth-oDrag.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDrag.offsetHeight)
{
t=document.documentElement.clientHeight-oDrag.offsetHeight;
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
};
document.οnmοuseup=function ()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
};
};
};
Jq写法：
$(function(){
$('#drag').mousedown(function (){
var patch=parseInt($(this).css("height"))/2; /*也可以写成var patch=parseInt($(this).css("width"))/2*/
$(document).mousemove(function (event){
var ox=event.clientX;
var oy=event.clientY;
var t=oy-patch;
var l=ox-patch;
var w=$(window).width()-$('#drag').width();
var h=$(window).height()-$('#drag').height();
if(t<0){
t=0;
}
else if(t>h){
t=h;
}
if(l<0){
l=0;
}
else if(l>w){
l=w;
}
$('.drag').css({top:t,left:l})
})
});
$(document).mouseup(function (){
$(this).unbind("mousemove");
});
})
12) 编写一个 Children 类，继承题目2中的 People类。
funtion Children(name,age){
People.call(this,name)
this.age= age;
}
Children.prototype.tellAge = function(){
Console.log(‘I am‘+this.age+’ years old’)
}
Children.prototype = Object.create(people.prototype)
Children.prototype.constuctor = Children;
var baby= new Children('Lucy',12);
baby.tellAge();// => 'I am 12 years old';
baby.sayHi();// => 'Hi, I am Lucy';
(baby instanceof People)// => true;
13) 找出下面代码的规律并且编写一个函数，转换特定的整数到对应的字符串。
1 => A
2 => B
3 => C
...
26 => Z
27 => AA
28 => AB
29 => AC
...
52 => AZ
53 => BA
...
function convert (num) {
}
算法基础：
先献上一张算法知识点图片
持续更新中。。。。。。