• 前端面试汇总-20170512

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

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

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

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

    <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .triangle-1{
             0;
            height: 0;
            border-left: 30px solid #0f0;
            border-right: 30px solid #00f;
            border-bottom: 30px solid #f00;
        }
    </style>
</head>
<body>
    <p>第一种方式:使用canvas绘制</p>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.moveTo(250, 25);
        ctx.lineTo(200, 200);
        ctx.lineTo(300, 300);
        ctx.closePath();

        //空心三角形
        ctx.strokeStyle = "red";
        ctx.stroke();

        //实心三角形
        ctx.beginPath();
        ctx.moveTo(350, 50);
        ctx.lineTo(300, 200);
        ctx.lineTo(400, 300);
        ctx.closePath();

        ctx.fillStyle = "red";
        ctx.fill();
    </script>

    <p>第二种方式：使用border样式</p>
    <div class="triangle-1"></div>
    <p>第三种方式：编码图片</p>
    <p>第四种方式：使用字体</p>
    <p>第五种方式：CSS 旋转正方形</p>
    <p>第六种方式：使用SVG</p>
</body>
</html>

    3.CSS权重

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

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

        important的权重为1000;

        ID的权重为100;

        类的权重为10;

        标签的权重为1;

        伪类的权重为10;

        属性的权重为10;

        伪对象的权重为1;

        通配符的权重为0;

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #left {
            color: black !important; /* 1000 + 100 = 1100*/
        }
        #container #left{
            color: red; /* 100 + 100 = 200 */
        }

        #left{
            color: green !important; /* 1000 + 100 = 1100 */
        }

        .container #left{
            color: blue; /* 10 + 100 = 110 */
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <span id="left">这到底显示什么颜色。答案为：绿色</span>
    </div>
</body>
</html>

    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等。

        image

    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事件委托

        请查阅资料：http://www.cnblogs.com/w-wanglei/p/5662067.html

    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"属性指向Student
Student.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：

        主程序页面代码

    <!DOCTYPE HTML> 
<html> 
<head> 
<title> 
Background Worker Application Example 1: Complicated Number Computation 
</title> 
</head> 
<body> 
<div> 
The least common multiple and greatest common divisor is: 
<p id="computation_results">please wait, computing … </p> 
</div> 
 <script>
  var worker = new Worker('numberworker.js'); 
worker.postMessage("{first:347734080,second:3423744400}"); 
  worker.onmessage = function (event) 
{ 
 document.getElementById(' computation_result').textContent = event.data; 
}; 
 </script>
</body> 
</html>

        后台工作线程代码

    /**  * 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：

        共享线程用户连接页面代码
    <!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Shared worker example: how to use shared worker in HTML5</title>   <script>  var worker = new SharedWorker('sharedworker.js');  var log = document.getElementById('response_from_worker');  worker.port.addEventListener('message', function(e) { 
//log the response data in web page 
log.textContent =e.data;  }, false);  worker.port.start();  worker.port.postMessage('ping from user web page..');     //following method will send user input to sharedworker 
 function postMessageToSharedWorker(input)  {  //define a json object to construct the request 
 var instructions={instruction:input.value};  worker.port.postMessage(instructions);  } 
</script>   </head> 
<body onload=''> 
<output id='response_from_worker'> 
Shared worker example: how to use shared worker in HTML5 
</output> 
send instructions to shared worker: 
<input type="text" autofocus oninput="postMessageToSharedWorker(this);return false;"> 
</input> 
</body> 
</html>
        用于处理用户指令的共享线程代码
    // 创建一个共享线程用于接收从不同连接发送过来的指令，指令处理完成后将结果返回到各个不同的连接用户。
  /* 
* 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)。定位的是第二个子元素为ｐ的元素。ｄｅｍｏ：
    <h1>这是标题</h1>
    <p>第一个段落。</p > //选中这里
    <p>第二个段落。</p >
    <p>第三个段落。</p >
    <p>第四个段落。</p >
    <p>第五个段落。</p >
    :nth-of-type(n),例如：p:nth-of-type(2),定位的是所有ｐ子元素第二个为p的元素。ｄｅｍｏ:
    <h1>这是标题</h1>
    <p>第一个段落。</p >
    <p>第二个段落。</p > //选中这里
    <p>第三个段落。</p >
    <p>第四个段落。</p >
    <p>第五个段落。

    13..css选中前五个th元素
    th:nth-child(-n+5)
    th:nth-of-type(-n+5)

    14..http header控制缓存属性
    包括Cache-Control和expires,都是指当前资源的有效期，控制浏览器是直接从浏览器缓存读取数据还是重新发请求到服务端读取数据。Cache-Control选择更多，并且优先级高于Expires
    Cache-Control值包括：public,private,no-cache,max-age, must-revalidate.
    max-age设置缓存秒数，must-revalidate强制页面不缓存，作用与no-cache相同但更严格。例如：
    打开新窗口，值为private,no-cache, must-revalidate都会重新访问服务器。设置max-age值，那么在时间范围内不会请求服务。
    地址栏回车，值为private或者must-revalidate则只有第一次返回时访问服务，以后就不会了。no-cache，你每次都访问，max-age和设置值有关系
    按刷新按钮，所有值都会重新访问。no-cache时，页面不会在在Internet目录下备份。

    15.Servlet生命周期：
    Server创建一个Servlet实例，调用init();
    客户端请求Server;
    Server将请求发送给Serverlet;
    Serverlet生成对请求的相应；
    Server激活Servlet的service方法，传递请求和相应对象作为参数；
    不需要Servlet时，调用Destroy()方法销毁
    说明：service()方法可能激活其他方法处理请求，如doGet或者doPost()等
  • 相关阅读:
    华为云确定性运维，为政务云平台稳定可靠运行保驾护航
    实践GoF的设计模式：代理模式
    KubeEdge 1.12版本发布，稳定性、安全性、可扩展性均带来大幅提升
    使用Mask RCNN模型实现人体关键节点标注
    Vue 中为什么要有nextTick？
    后CNN探索，如何用RNN进行图像分类
    带你认识JDK8中超nice的Native Memory Tracking
    实例分析Scheduled Thread Pool Executor与Timer的区别
    最后 3 天｜报名参加 OpenYurt+EdgeX 挑战赛 ，冲击最高 5 万元奖励！
    定时任务报警通知解决方案详解
  • 原文地址：https://www.cnblogs.com/w-wanglei/p/6859275.html
Copyright © 2020-2023  润新知