前端面試彙總-20170512

時間 2019-11-06

原文原文鏈接

1.Table在各個瀏覽器呈現有哪些兼容問題？javascript

1）若是td的值爲空，IE8如下的瀏覽器會出現邊框丟失的情況；可設置單元格內容爲空白「&nbsp」，也可設置樣式border-collpase:collapse解決。css

2）table寬度爲100%，在IE8以上以及FF、Chrome瀏覽器都正常工做，但IE六、IE7，表格始終會出現水平滾動條。html

2.用五種方式呈現一個三角形？前端

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

    <style type="text/css">
        .triangle-1{
            width: 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權重html5

從CSS代碼存放位置看權重優先級：內聯樣式>內部樣式表>外聯樣式表。其實這個基本能夠忽略，大部分狀況下CSS代碼都是使用外聯樣式表。java

從樣式選擇器看權重優先級：important>內聯樣式>ID>類>標籤|僞類|屬性選擇>僞對象>繼承>通配符。node

important的權重爲1000;web

ID的權重爲100;編程

類的權重爲10;json

標籤的權重爲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等。

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()等

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。