面试大全

HTML

HTML5新特性,语义化

  • 简洁的DOCTYPE:HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。
  • 简单易记的编码类型:你现在可以在meta 标签中使用”charset”:<meta charset=”utf-8″ />
  • 脚本和链接无需type
  • 更加语义化的新增标签:比如说:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>
  • 视频和音频

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

浏览器的标准模式和怪异模式

标准模式怪异模式。在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染;而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话,对于旧有的网页,浏览器启动怪异模式,就能够使得旧网页正常显示;对于新的网页,则可以启动标准模式,使得新网页能够使用HTML与CSS的标准特性。

xhtml和html的区别

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

渐进式渲染

指浏览器不用等待所有页面资源都渲染好之后再呈现给用户看,而是边下载边渲染,所以用户打开一个网页的时候往往不能第一时间看到所有的内容,但是能够看到一个大概的样子,后续的内容浏览器会慢慢补上形成一个完整的页面。

CSS

清楚浮动的几种方法,各自的优缺点

  • 父级div定义伪类:after和zoom
<style type="text/css">
    .div1{background:#000080;border:1px solid red;}
    .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    /*清除浮动代码*/
    .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0
}
    .clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
     div2
</div>
- 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
- 优点:简单,代码少,浏览器支持好,不容易出现怪问题。
- 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽。
- 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法。

– 父级div定义height

<style type="text/css">
     .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
     .div2{background:#800080;border:1px solid red;height:100px;margin一top:10px}
     .left{float:left;width:20%;height:200px;background:#DDD}
     .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>

- 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
- 优点:简单,代码少,容易掌握。
- 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题。
- 建议:不推荐使用,只建议高度固定的布局时使用。
  • 父级div定义overflow:auto
<style type="text/css">
     .div1{background:#000080;border:1px solid red;
         /*解决代码*/width:98%;overflow:auto}
  .div2{background:#800080; border:1px solid red; height:100px; margin- top:10px;width:98%}
     .left{float:left;width:20%;height:200px;background:#DDD}
     .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div class="div2">
  div2
</div>
- 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
- 优点:简单,代码少,浏览器支持好。
- 缺点:内部宽高超过父级div时,会出现滚动条。
- 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

媒体查询的原理是什么?

媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定CSS样式

JavaScript

基本类型与引用类型

深入了解数据类型

6 种基本数据类型:UndefinedNullBooleanNumberStringSymbol (new in ES 6)

除过上面的 6 种基本数据类型外,剩下的就是引用类型了,统称为 Object类型。细分的话,有:Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型 等。

如何判断一个变量是Array类型?

  • instanceof操作符

这个操作符和JavaScript中面向对象有点关系,了解这个就先得了解JavaScript中的面向对象。因为这个操作符是检测对象的原型链是否指向构造函数的prototype对象的。

var arr = [1,2,3,1];   
alert(arr instanceof Array); // true
  • 对象的constructor属性
var arr = [1,2,3,1];   
alert(arr.constructor === Array); // true

由于每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的,因此导致上述检测代码失效!

var iframe = document.createElement('iframe');   //创建iframe
document.body.appendChild(iframe);   //添加到body中
xArray = window.frames[window.frames.length-1].Array;   
var arr = new xArray(1,2,3); // 声明数组[1,2,3]   

alert(arr instanceof Array); // false   

alert(arr.constructor === Array); // false
  • Object.prototype.toString

Object.prototype.toString的行为:首先,取得对象的一个内部属性[[Class]],然后依据这个属性,返回一个类似于”[object Array]”的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这 个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。

function isArrayFn (o) {  
 return Object.prototype.toString.call(o) === '[object Array]';   
}
var arr = [1,2,3,1];   

alert(isArrayFn(arr));// true
  • Array.isArray()

ECMAScript5将Array.isArray()正式引入JavaScript,目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。

  • 最佳写法!
var arr = [1,2,3,1];  
var arr2 = [{ abac : 1, abc : 2 }];  

function isArrayFn(value){
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);    
    }else{
        return Object.prototype.toString.call(value) === "[object Array]";    
    }
}
alert(isArrayFn(arr));// true 
alert(isArrayFn(arr2));// true

如何判断一个变量是Number类型?

用typeof,不能用isNaN(),isNaN()不能判断一个变量是否为数字类型,isNaN(123)值为false,isNaN(‘123’)值也为false。

NaN也属于Number类型

事件冒泡和事件捕获

事件冒泡与事件捕获

JS事件:target与currentTarget区别

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
addEventListener的第三个参数为isCapture,addEventListener(type,listener,isCapture);

可选参数options:
capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once:Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
passive:Boolean,设置为true时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。

    <div id="outer" style="background:#099">  
         click outer  
         <p id="inner" style="background:#9C0">click inner</p>  
         <br>  
     </div>
    function G(id){  
        return document.getElementById(id);      
    }  
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
        obj.attachEvent("on" + ev, handler);  
    }else if(window.addEventListener){   
        obj.addEventListener(ev, handler, false);  
        }  
     }  
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
     var outer = G("outer");  
     var inner = G("inner");  
     //addEvent(inner, "click", test);  
     addEvent(outer, "click", test);   

上面的示例中,当在outer上点击时,e.target与e.currentTarget是一样的,都是div;当在inner上点击时,e.target是p,而e.currentTarget则是div。

对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

  • 变量作用域

当你声明一个本地变量的时候,变量有一个作用域,通常,局部变量仅存在于声明它们的函数中。

function() {
  var a = 1;
  console.log(a); // works
}    
console.log(a); // fails

如果访问本地变量,大多数语言将在当前作用域中查找它,然后通过父作用域查找它们,直到它们到达根作用域。

var a = 1;
function() {
  console.log(a); // works
}    
console.log(a); // works

当一个块区域或函数执行完时,本地作用域将不再起作用,并在内存中被清理掉

  • 一个闭包就是一个持久的局部作用域

闭包是一个持久的作用域,即使在代码执行移出该块之后也会保留局部变量。支持闭包的语言将允许保留对作用域的引用,即使在声明了这些变量的块已经完成执行之后,只要在某处保留对该块或函数的引用。

promise的缺点

  • Promise 可以很好地处理单一异步结果,不适用于:
    • 多次触发的事件:如果要处理这种情况,可以了解一下响应式编程( reactive programming ),这是一种很聪明的链式的处理普通事件的方法。
    • 数据流:支持此种情形的标准正在制定中。
  • ECMAScript 6 Promise 缺少两个有时很有用的特性:
    • 不能取消执行
    • 无法获取当前执行的进度信息(比如,要在用户界面展示进度条)。

显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链

  • 显式原型:prototype

  • 隐式原型:__proto__

  1. 显式原型和隐式原型是什么?

在js中万物皆对象,方法(Function)是对象,方法的原型(Function.prototype)是对象,对象具有属性(__proto__)称为隐式原型,对象的隐式原型指向构造该对象的构造函数的显式原型。

方法(Function)是一个特殊的对象,除了和其他对象一样具有__proto__属性以外,它还有一个自己特有的原型属性(prototype),这个属性是一个指针,指向原型对象。原型对象也有一个属性叫constructor,这个属性包含一个指针,指向原构造函数。

注意:通过Function.prototype.bind方法构造出来的函数没有prototype属性。

注意Object.prototype.这个对象的是个例外,它的__proto__值为null