騰訊一面總結-web前端-2018.4.11

shirleyli發表於2018-04-13
Web前端

面完給我的總體感覺，要求你掌握的不僅有廣度，更重要的是深度。我準備的爛大街的面試題沒怎麼問，可能自己欠缺的東西還比較多，不斷學習，不斷進步，再奶自己一口，fighting!!!

將面試官問的問題回憶總結如下：

關於框架的問題

框架用過哪些，感覺他們不只需要熟練運用，更看重理解的深度，比如要懂原始碼，react中diff演算法的思想這些，懂原理並能對效能做一些優化和提升，這樣的層級似乎才是他們想要的。

node如何開啟一個http服務

這個我沒回答上來，一下子忘記了，之前學過一點node.js的，只記得好像引入了什麼模組，但就是記不起具體怎麼實現了。參考部落格，建立一 個最簡單的http伺服器如下：

// 引入內建http模組
var http = require('http');

// 建立一個簡單伺服器，訪問http://127.0.0.1:1337/,顯示Hello World
http.createServer(function(req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
複製程式碼

CSS3動畫的實現方式有哪些，動手寫一下將一個div在1s內移動300px

當時只回答上來了有transition和animation動畫兩種方式，transition過渡動畫只定義初始和最終狀態，而animation動畫可以逐幀設定。然後面試官接著讓我手寫一下將一個div在1s內移動300px，根本記不清具體的寫法了，胡亂亂的寫一通還是怪自己不熟練。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        /* transition屬性動畫結合transform變化屬性，實現元素移動一段距離的動畫 */
        #transitonDiv:hover {
            transition: all 1s ease-in-out;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            -o-transition: all 1s ease-in-out;

            transform: translateX(300px);
            -ms-transform: translateX(300px);
            -moz-transform: translateX(300px);
            -webkit-transform: translateX(300px);
            -o-transform: translateX(300px);
        }

        /* 通過animation屬性，實現逐幀動畫 */
        #animationDiv:hover {
            animation: animName 1s ease-in-out;
            -webkit-animation: animName 1s ease-in-out;
            -moz-animation: animName 1s ease-in-out;
            -o-animation: animName 1s ease-in-out;
        }
        
        /* 定義關鍵幀 */
        @keyframes animName {
            0% {
                transform: translateX(0px);
            }
            30% {
                transform: translateX(100px);
            }
            60% {
                transform: translateX(200px);
            }
            100% {
                transform: translateX(300px);
            }
        }
    </style>
</head>
<body>
    <div id="transitonDiv" style="width:40px;height:40px;background-color:red;"></div>
    <div id="animationDiv" style="width:40px;height:40px;background-color:green;"></div>
</body>
</html>
複製程式碼

DNS解析過程？若是新申請的域名如何查詢DNS?

伺服器端DNS查詢參考部落格DNS解析過程詳解。

DNS是應用層協議，事實上他是為其他應用層協議工作的，包括不限於HTTP和SMTP以及FTP，用於將使用者提供的主機名解析為ip地址。

具體過程如下：

(1)瀏覽器快取: 當使用者通過瀏覽器訪問某域名時，瀏覽器首先會在自己的快取中查詢是否有該域名對應的IP地址（若曾經訪問過該域名且沒有清空快取便存在)；

(2)系統快取： 當瀏覽器快取中無域名對應IP則會自動檢查使用者計算機系統Hosts檔案DNS快取是否有該域名對應IP；

(3)路由器快取: 當瀏覽器及系統快取中均無域名對應IP則進入路由器快取中檢查，以上三步均為客戶端的DNS快取；

(4)ISP（網際網路服務提供商）DNS快取: 當在使用者客服端查詢不到域名對應IP地址，則將進入ISP DNS快取中進行查詢。比如你用的是電信的網路，則會進入電信的DNS快取伺服器中進行查詢；(或者向網路設定中指定的local DNS進行查詢，如果在PC指定了DNS的話，如果沒有設定比如DNS動態獲取，則向ISP DNS發起查詢請求)

(5)根域名伺服器: 當以上均未完成，則進入根伺服器進行查詢。全球僅有13臺根域名伺服器，1個主根域名伺服器，其餘12為輔根域名伺服器。根域名收到請求後會檢視區域檔案記錄，若無則將其管轄範圍內頂級域名（如.com）伺服器IP告訴本地DNS伺服器；

(6)頂級域名伺服器: 頂級域名伺服器收到請求後檢視區域檔案記錄，若無則將其管轄範圍內主域名伺服器的IP地址告訴本地DNS伺服器；

(7)主域名伺服器: 主域名伺服器接受到請求後查詢自己的快取，如果沒有則進入下一級域名伺服器進行查詢，並重復該步驟直至找到正確記錄；

(8)儲存結果至快取: 本地域名伺服器把返回的結果儲存到快取，以備下一次使用，同時將該結果反饋給客戶端，客戶端通過這個IP地址與web伺服器建立連結。

Ajax請求狀態及意義

在javascript裡面寫AJax的時，最關鍵的一步是對XMLHttpRequest物件建立監聽，即使用“onreadystatechange”方法。監聽的時候，要對XMLHttpRequest物件的請求狀態進行判斷，通常是判斷readyState的值為4且http返回狀態status的值為200或者304時執行我們需要的操作。

readyState 屬性表示Ajax請求的當前狀態。

0 代表未初始化。 還沒有呼叫 open 方法
1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有被呼叫
2 代表已載入完畢。send 已被呼叫。請求已經開始
3 代表互動中。伺服器正在傳送響應
4 代表完成。響應傳送完畢
複製程式碼

cookie的操作，讀寫

一臉懵逼。。。從來沒操作過cookie。

參考部落格JS中對Cookie的操作詳解。

(function(){
 var cookieObj = {
    //修改或是新增cookie
   'add': function(name, value, hours) { 
        var expire = "";
        if(hours != null){
            expire = new Date((new Date()).getTime() + hours * 3600000);
            expire = "; expires=" + expire.toGMTString();
        }    
    document.cookie = name + "=" + escape(value) + expire + ";path=/";
    
    //如果指定域名可以使用如下
    //document.cookie = name + "=" + escape(value) + expire + ";path=/;domain=findme.wang";
   },
   
   //讀取cookie
   'get': function(c_name){
        if (document.cookie.length>0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) { 
                c_start=c_start + c_name.length+1;
                c_end=document.cookie.indexOf(";",c_start);
                if (c_end == -1) {
                    c_end = document.cookie.length;
                }
                return unescape(document.cookie.substring(c_start,c_end));
            } 
        }
        return "";
   }
 };
 window.cookieObj=cookieObj;
}());
複製程式碼

結果，不出意料的涼涼了。繼續奶自己一口，fighting!!!

相關文章