前端基本面试题

1.link和@import有什么区别?

      页面中使用CSS的方式主要3种：行内添加定义style属性值,页面头部内嵌调用和外部链接调用。其中外部引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:

       XML/HTML代码

            <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />

        XML/HTML代码

            <style type="text/css" media="screen">

                @import url("CSS文件");

     两者的区别:

            (1).link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

            (2).link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

            (3).link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

            (4).link支持使用javascript控制DOM去改变样式；而@import不支持。

2.行内元素和块级元素。

     行内元素指的是书写完成后不会自动换行。

     块级元素写完后会自动换行。

     大致分类是:

               行内元素有:head title label span br(比较特殊) a style em b i strong input img等

                块级元素有:body form select textarea h1-h6 html table button hr p ol ul dl center div等

3.js实现继承的方式？

     js作为面向对象的弱类型语言，继承也使其非常强大的特性之一。

     父类:

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

     (1).原型链继承

        核心：将父类的实例作为子类的原型

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

     特点:

            1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例。

            2.父类新增原型方法/原型属性，子类都能访问到。

     缺点:

            1.要想为原型新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中。

            2.无法实现多继承。

            3.来自原型对象的引用属性是所有实例共享的。(致命)

            4.创建子类实例时，无法向父类构造函数传参。(致命)

    (2).构造继承

        核心:使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类(没用到原型)

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

     特点:

            1.解决了1中，子类实例共享父类引用属性的问题。

            2.创建子类实例时，可以向父类传递参数。

            3.可以实现多继承(call多个父类对象)。

     缺点:

            1.实例并不是父类的实例，只是子类的实例。

            2.只能继承父类的实例属性和方法，不能继承原型属性/方法。

            3.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。(致命)

     (3).实例继承

         核心:为父类实例添加新特性，作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

     特点:

            1.不限制调用方式，不管是new子类()还是子类(),返回的对象具有相同的效果。

     缺点:

            1.实例是父类的实例，不是子类的实例。

            2.不支持多继承。

    (4).拷贝继承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

     特点:

            1.支持多继承。

     缺点:

            1.效率较低，内存占用高(因为要拷贝父类的属性)(致命)

            2.无法获取父类不可枚举的方法(不可枚举方法，不能使用for in访问到)。

     (5).组合继承

         核心:通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 感谢 @学无止境c 的提醒，组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

     特点:

            1.弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法。

            2.既是子类的实例，也是父类的实例。

            3.不存在引用属性共享问题。

            4.可传参。

            5.函数可复用。

     缺点:

            1.调用了两次父类构造函数，生成了两份实例(子类实例将子类原型上的那份屏蔽了)

     (6).寄生组合继承

         核心:通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true

感谢 @bluedrink 提醒，该实现没有修复constructor。

Cat.prototype.constructor = Cat; // 需要修复下构造函数

     特点:

            1.堪称完美

     缺点:

            1.实现较为复杂

4.CSS3新特性?

     在项目中我们经常采用的CSS3新特性有:

      (1).CSS3的选择器

            1) E:last-child匹配父元素的最后一个子元素E。

            2) E:nth-child(n)匹配父元素的第n个子元素E。

            3) E:nth-last-child(n) CSS3匹配父元素的倒数第n个子元素E。

      (2).@Font-face特性

       Font-face可以用来加载字体样式，而且它还能加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

            @font-face {

                    font-family: BorderWeb;

                    src:url(BORDERW0.eat);

            }

     (3).圆角

            border-radius: 15px;

     (4).阴影( Shadow )

            .class1{

                    text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

            }

     (5).CSS3 的渐变效果

            background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E)); 

    这里linear表示线性渐变，从左到右，由蓝色(#2A8BBE)到红色(#FE280E)的渐变。

5.常见浏览器兼容性问题？

     (1).不同浏览器的标签默认的外间距和内间距不同，一般通过CSS里 *{ margin:0;padding:0; }

     由于许多的兼容性问题都是在网上看到的，没有亲身体验过，所以在这里我先保留，等以后慢慢的补充吧！！！

6.js的基本类型。

    js的数据类型有字符串、数字、布尔、数组、对象、Null、Undefined。

    其中有5中简单数据类型(也成为基本数据类型)：Undefined、Null、Boolean、Number和String。还有object、Array属于引用类型。

7.DOCTYPE的介绍。

    doctype是文档类型的简写，在页面上表示HTML(XML)的版本；

    doctype一共有三种:

      1).过渡的:是一种很不严格的文档类型定义，写法是这样的:"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    2).严格的:一种严格的文档类型定义,不允许使用任何表现层的标示和属性，写法是这样的:"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   3). 框架的:一种针对于框架的，当页面上有框架的时候就要使用这个文档类型定义:"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

HTML Strict DTD

如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"

HTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd" 

Frameset DTD

Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：

 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd"

XHTML

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

XHTML Strict DTD

如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：

 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

XHTML Transitional DTD

Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：

 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

XHTML Frameset DTD

当您希望使用框架时，请使用此 DTD！

 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

如需检查你是否编写了带有正确 DTD 的合法 XHTML 文档，您可以把您的 XHTML 页面链接到一个

8.DOM节点的创建、插入、删除、查找、替换等基本操作。

    1.创建DOM节点

        使用的命令是

                var oDiv = document.createElement('div');

        这样就创建了一个div标签。

    2.插入DOM节点

        移动DOM节点也就是把这个节点插入到html文档中的某个地方,这里js给了我们两个方法:

        1).appendChild(): 把节点插入到父节点的末尾。

            document.body.appendChild(oDiv);    //把div插入到body中,并且位于末尾

        2).insertBefore(): 把节点插入到父节点的某个兄弟节点的前面。

            var oP = createElement('p');     //创建一个p节点

            document.body.insertBefore(oP,oDiv);    //把p节点插入到div的前面

        3).删除DOM节点

            删除DOM节点的方法是removeChild()。

                document.body.removeChild(oP);    //删除p节点

        4).查找DOM节点

            查找DOM节点的方法很多,常用的有:

                getElementById()    //通过元素Id,唯一性

                getElementsByTagName()    //通过元素标签名称查找

            如html文档如下:

                <body>

                           <div id='box'></div>

                </body>

            这是可以用getElementById()获取到id为box的div。

                var oDiv = document.getElementById('box');

        5).替换DOM节点

            替换DOM节点的方法是replaceChild()。

                var oSpan = document.createElement('span');    //创建一个span标签

                document.body.replaceChild(oSpan,oBox);    //用span标签替换div标签

            最常用的DOM操作就是这些了，一般常用的就是这些，推荐大家暂时只使用上述这些方法。

9.性能优化的方法。

        1).减少HTTP请求。主要从减少图片的请求、减少脚本文件与央视表的请求两方面入手。

        2).页面内部优化。主要方向: 样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本。

        3).启用缓存。介绍两套方案: expires/If-Modified-Since、Cache-Control/Etag;前者是HTTP1.0中的缓存方案，后者是HTTP1.1中缓存方案，若http头部中同时出现二者，后者的优先级更高。

        4).减少下载量: 减少下载量最有效的方式就是开启gzip压缩。

        5).优化网络连接主要有三个规则: 使用CDN加速、减少DNS查找、避免重定向。

        介绍:CDN是地理上分布的web server的集合，用于更高效地发布内容。

10.IE与FF脚本兼容性。

        1)window.event

            表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

            例如: e=window.event || e;

        2) 获取事件源

            IE用srcElement获取事件源，而FF用target获取事件源；

            例如: var target = e.target || e.srcElement;

        3) 添加，去除事件

            IE: element.attachEvent("onclick",function) 

                 element.detachEvent("onclick",function)

            FF: element.addEventListener("click",function,true)

                  element.removeEventListener("click",function,true)

        4) 获取标签的自定义属性

            IE: div1.value或div1["value"]

            FF: 可用div1.getAttribute("value")

        5) input.type的属性

            IE: input.type只读

            FF: input.type可读写

            例如:js修改input的type属性有些限制。当input元素还未插入文档流之前，是可以修改它的值的，在ie和ff下都没问题。但如果input已经存在于页面，其type属性在ie下就成了只读属性了，不可以修改。在ff下仍是可读写属性。

        6) innerText textContent outerHTML

            IE: 支持innerText,outerHTML

            FF:支持textContent

        7) 是否可用id代替HTML元素

            IE:可以用id来代替HTML元素

            FF:不可以

            例如:          

<input id="id" type="button"  
value="click me" ōnclick="alert(id.value)"/>  
在Firefox中，按钮没反应，在IE中，就可以，因为对于IE来说，一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用，而Firefox中不可以。兼容方式document.getElementById('id').value