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

時間 2019-11-05

標籤騰訊一面總結 web 前端 2018.4.11 欄目騰訊简体版

原文原文鏈接

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

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

關於框架的問題

框架用過哪些，感受他們不僅須要熟練運用，更看重理解的深度，好比要懂源碼，react中diff算法的思想這些，懂原理並能對性能作一些優化和提高，這樣的層級彷佛纔是他們想要的。html

node如何開啓一個http服務

這個我沒回答上來，一會兒忘記了，以前學過一點node.js的，只記得好像引入了什麼模塊，但就是記不起具體怎麼實現了。參考博客，建立一個最簡單的http服務器以下：java

// 引入內置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，根本記不清具體的寫法了，胡亂亂的寫一通仍是怪本身不熟練。node

<!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解析過程詳解。react

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

具體過程以下：面試

(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;
}());
複製代碼