前端面试汇总-20170512-白红宇

前端面试汇总-20170512

阅读量：6853 次

发布时间：2019-06-26

本文共 7746 字，大约阅读时间需要 25 分钟。

1.Table在各个浏览器呈现有哪些兼容问题？

1）如果td的值为空，IE8以下的浏览器会出现边框丢失的状况；可设置单元格内容为空白“&nbsp”，也可设置样式border-collpase:collapse解决。

2）table宽度为100%，在IE8以上以及FF、Chrome浏览器都正常工作，但IE6、IE7，表格始终会出现水平滚动条。

2.用五种方式呈现一个三角形？

Title

第一种方式:使用canvas绘制

第二种方式：使用border样式

第三种方式：编码图片

第四种方式：使用字体

第五种方式：CSS 旋转正方形

第六种方式：使用SVG

3.CSS权重

从CSS代码存放位置看权重优先级：内联样式>内部样式表>外联样式表。其实这个基本可以忽略，大部分情况下CSS代码都是使用外联样式表。

从样式选择器看权重优先级：important>内联样式>ID>类>标签|伪类|属性选择>伪对象>继承>通配符。

important的权重为1000;

ID的权重为100;

类的权重为10;

标签的权重为1;

伪类的权重为10;

属性的权重为10;

伪对象的权重为1;

通配符的权重为0;

如果两个权重都一样，那么现实后面的样式。实例如下：

    
         Title        
             
      这到底显示什么颜色。答案为：绿色

4.列举10个块元素

html5结构化元素：header、nav、article、section、aside、footer。

常用块元素：div。

列表元素：ul、ol、li。

表格：table。

5.列举JS10个保留关键字

Javascript的保留关键字不可以用作变量、标签、或者函数名。有些保留关键字是作为javascript以后扩展使用。例如：

case、catch、while、char、class、else、enum、eval、import、package、private、public、return等。

6.JQuery拷贝方法

Jquery提供了jQuery.extend函数由于拷贝对象，函数定义如下：

jQuery.extend([deep], target, object1, [objectN])

参数说明：

第一个参数deep:可选参数。如果第一个参数是为布尔类型的值，那么表示使用深(true)或者浅(false)拷贝。

第二个参数target:拷贝目标，其他对象的属性都会拷贝到这个目标对象上。

第三个参数object1一直到objectN：是拷贝的对象。把object1..objectN的对象全都拷贝到第一个对象中。

jQuery还提供了jQuery.fn.extend函数，这个函数用来扩展jQuery对象的函数。

7.JQuery事件委托

请查阅资料：

8.JS继承实现方式

假设现在有一个Person类型对象，现在我需要新增一个Student类型作为它的子类。并且Student需要重写Person的sayHello函数以及新增sayGoodBye函数。Person对象定义如下：

// 定义Person构造函数        var Person = function(firstName) {            this.firstName = firstName;        };        // 在Person.prototype原型上增加了walk和sayHello方法        Person.prototype.walk = function(){            console.log("I am walking!");        };        Person.prototype.sayHello = function(){            console.log("Hello, I'm " + this.firstName);        };

下面开始实现Student子类。

第一步，创建Student构造函数

// 定义Student构造函数function Student(firstName, subject) {  //调用父类构造函数，确保this是Student当前上下文。  Person.call(this, firstName);  // 初始化属性  this.subject = subject;}

代码的第一行，首先调用了执行Person.call并且上下文执行Student的this。这样，我们就可以把Person构造函数中的所有属性以及函数继承到Student子类。

第二步，重定向Student的原型，让其指向Person类的原型的一个实例化对象。

//创建一个Student的原型链指向Person的原型链。需要注意的是这里我们不能使用new Person()作为值，//而应该通过Object.create(Person.prototype)来指向。Student.prototype = Object.create(Person.prototype); // See note below

第三步，设置原型链的constructor指向Student。

//设置原型链的"constructor"属性指向StudentStudent.prototype.constructor = Student;

由于原型链，以一层一层有继承关系的，我们不能破坏原型链，所有必须把Student原型的构造函数指向Student。当我们再创建Student的子类时才不会有异常。

9.CMD和AMD区别

首先CMD和AMD都是由CommonJS延伸而来。CommonJS是跟着node出现而出现的。是一个模块化解决方案，Node.js用于服务器编程，加载的模块文件一般都存在本地硬盘上，不用考虑异步加载问题，CommonjS加载模块是同步的。但浏览器不同于Node环境，需要考虑阻塞问题。基于以上，前端模块化迎来两种方案：AMD、CMD。

对于AMD与CMD规范，二者最大的区别在于依赖模块的执行时期，CMD规范中明确要求延迟执行（Execution must be lazy）。

AMD中deifne如下定义：

define(id?, dependencies?, factory)

id:String类型，执行模块定义时的id，可选。如果省略，模块id默认使用加载器请求的响应脚本的模块id。

dependencies:模块定义要求的依赖项的模块id的数组字面量。这些依赖项必须在factory方法执行前被解析，解析值应当被参数传递给factory函数。

factory: 是一个呗用来执行模块初始化的参数或者一个对象。如果factory是函数，它应当值能用来执行一次。如果factory是一个对象，用作模块的输出值。

define(["./a", "./b"], function(a, b) {  //BEGIN  a.doSomething();  b.doSomething();});

CMD中模块如下定义：

define(function(require, exports, module){            //这里执行模块的代码        });

一个模块使define函数来定义

1.define函数只接受一个模块工厂作为参数。

2.factory必须是一个函数或者其他有效值。

3.如果factory是一个函数，如果指定参数的话，前三个参数必须是require、exports、module。

4.如果factory不是一个函数，那么模块的exports属性被设置为那个有效对象。

define(function(require, exports, module) {  //BEGIN  require("./a").doSomething();  require("./b").doSomething();});

需要提一下的是二者对待依赖模块的额加载都是一致的，在factory执行时，依赖模块都已被加载。从代码上看，AMD中的BEGIN处a、b的factory都是执行过的；而CMD中虽然a、b模块在BEGIN处已被加载，但尚未之心，需要调用require执行依赖模块。这就是CMD中着重强调的延迟执行。如果这个例子不明显，看下面的例子：

AMD：

define(["./a", "./b"], function(a, b){            //BEGIN            if(true){                a.doSomething();            }else{                b.doSomething();            }        });

CMD:

define(function(require){            //BEGIN            if(some_condition){                require("./a").doSomething();            }else{                require("./b").doSomething();            }        });

10.什么是WebWorker

在HTML5中提出了工作线程的概念，并且规范出工作线程的三大特征：能够长时间运行，理想的启动性能以及理想的内存消耗。Web Worker允许开发人员编写能够长时间运行而不被用户所中断的后台程序，去执行事务或者逻辑，并同时保证页面对用户的及时响应。

工作线程demo：

主程序页面代码

    Background Worker Application Example 1: Complicated Number Computation    
     
       The least common multiple and greatest common divisor is: 
      please wait, computing …

后台工作线程代码

/**  * This worker is used to calculate  * the least common multiple  * and the greatest common divisor  */    onmessage = function (event)  {  var first=event.data.first;  var second=event.data.second;  calculate(first,second);  };      /*  * calculate the least common multiple  * and the greatest common divisor  */  function calculate(first,second) {     //do the calculation work  var common_divisor=divisor(first,second);  var common_multiple=multiple(first,second);     postMessage("Work done! " + "The least common multiple is "+common_divisor  +" and the greatest common divisor is "+common_multiple);  }        /**  * calculate the greatest common divisor  * @param number  * @param number  * @return  */  function divisor(a, b) {  if (a % b == 0) {  return b;  } else {  return divisor(b, a % b);  }  }    /**  * calculate the least common multiple  * @param number  * @param number  * @return  */  function multiple( a,  b) {  var multiple = 0;  multiple = a * b / divisor(a, b);  return multiple;  }

共享线程demo：

共享线程用户连接页面代码

   
      Shared worker example: how to use shared worker in HTML5         Shared worker example: how to use shared worker in HTML5  send instructions to shared worker:

用于处理用户指令的共享线程代码

// 创建一个共享线程用于接收从不同连接发送过来的指令，指令处理完成后将结果返回到各个不同的连接用户。  /* * define a connect count to trace connecting * this variable will be shared within all connections */ var connect_number = 0;   onconnect = function(e) {  connect_number =connect_number+ 1;  //get the first port here   var port = e.ports[0];  port.postMessage('A new connection! The current connection number is '  + connect_number);  port.onmessage = function(e) { //get instructions from requester var instruction=e.data.instruction; var results=execute_instruction(instruction);    port.postMessage('Request: '+instruction+' Response '+results    +' from shared worker...');  }; };   /* * this function will be used to execute the instructions send from requester * @param instruction * @return */ function execute_instruction(instruction) { var result_value; //implement your logic here //execute the instruction... return result_value }

11.RequestAnimationFrame和Timer的区别？

a).requestAnimationFrame不需要设置时间。

b).setTimeout和setInterval都不精准，它们内在运行机制决定了时间间隔实际上只是指定动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经有其他任务，那么动画代码就要等前面队列执行完。requestAnimationFrame采用系统时间间隔，保持最佳绘制效率。

c).requestAnimation是html5引入的，对浏览器的要求比较高。

12..css定位

:nth-child(n),例如:　p:nth-child(2)。定位的是第二个子元素为ｐ的元素。ｄｅｍｏ：

<p>第一个段落。</p > //选中这里

<p>第二个段落。</p >

<p>第三个段落。</p >

<p>第四个段落。</p >

<p>第五个段落。</p >

:nth-of-type(n),例如：p:nth-of-type(2),定位的是所有ｐ子元素第二个为p的元素。ｄｅｍｏ: