騰訊前端面試題詳解

時間 2019-12-05

標籤騰訊端面試題詳解欄目騰訊简体版

原文原文鏈接

廢話不說，直接上題。css

1.用正則把yya yyb yyc變成yya5 yyb6 yyc7？html

　　正則用的很少，思想是對的用replace方法，可是第二個須要用function，得出如下方法：其實就是考replace方法的第二個參數，function。java

j=5;str.replace(/\w+/g,function(m){node

　　return m+j++;css3

});web

function的第一參數表明匹配正則的字符串，第二個表明第一個子表達式匹配的字符串，第三個表明第二個子表達式匹配的字符串。面試

面試官順帶提了下數組的forEach(function(value,index,arr){});ajax

forEach的第二個參數是幹嗎的，我沒答上，實際上是this(context)，當執行回調函數時，做爲this的值。若是省略 this，則 undefined將用做 this 值。回調函數中的第三個參數是包含元素的數組對象。此方法在IE8以及如下不支持。npm

2.arr = [1,2,3];arr.slice(1,2,3) ;arr.splice(1,2,3,4)?跨域

　　slice只接受兩個參數，第三個參數沒用，所以就是arr.slice(1,2),第一個表明start，第二個表明end（我當時當成了length），結果其實返回[2]。包含從 start 到 end （不包括該元素）。

splice能夠接受無數個參數，第一個是開始項，第二項是要刪除的個數，第三項以及最後一項是添加到數組的項。返回的值是刪除的數組：[2,3]，數組arr變成[1,3,4]。

3.get請求和post請求的區別？

　　get請求數據有限，由於在url上面。所以也會引發安全問題。面試官提到使用history就能夠進行攻擊。

post請求沒法保存標籤。post請求不會緩存數據，get方法會，能夠經過時間戳的方式避免。

GET請求只能傳文本給服務器，POST能夠傳文本和二進制數據，如上傳文件。

get請求的效率比post請求高，緣由是get請求只請求一次（header），post請求須要請求兩次（header和body）。（還有包的內容不同，服務器處理時，post的包處理時間長。騰訊面試官說的。POST的Header比GET大一些）

（這裏提下百度面試官提的問題，get請求和post請求頭的內容和區別，當時沒答出來：區別：

get請求頭：

request-line get url http/1.1

accept */*

accept-encoding gzip,deflate

accept-language zh-cn

connection keep-alive

host localhost

referer url

user-agent

post請求:

request-line post url http/1.1

accept */*

accept-encoding gzip,deflate

accept-language zh-cn

Cache-Control: no-cache

connection keep-alive

content-length 34

content-type application/x-www-form-urlencoded

host localhost

referer url

user-agent

由於訪問同一臺服務器，因此返回頭是同樣的。

response:

status-line http/1.1 200 ok

cache-control private

Content-Type: text/html; charset=utf-8
Content-Length: 60

Date: Sun, 05 Jun 2011 15:47:39 GMT
Server: Microsoft-IIS/6.0

....

）

4.跨站請求僞造（csrf）

　　用戶A 用瀏覽器訪問了博客園網站，登陸後，會把登陸信息保存在用戶A的瀏覽器cookie中。這時用戶A訪問了攻擊人的網站 B,可是B網站一加載到用戶A的瀏覽器中，就執行一段js文件，這個js文件是向博客園網站請求改用戶密碼，那麼博客園網站接到這個請求時，會驗證，因爲以前用戶A的瀏覽器cookie中保存了登陸信息，博客園網站會認爲這是用戶的操做，就直接執行。這就是所謂的請求僞造。能夠經過服務器端的隨機數token（最安全）或者判斷referer解決。

5.css3 動畫定義

  @keyframes IDENT（動畫名字） {
     from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者所有寫成百分比的形式： @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properties:Properties value; } 100% { Properties:Properties value; } }

 .demo1 { width: 50px; height: 50px; margin-left: 100px; background: blue; -webkit-animation-name:'wobble';/*動畫屬性名，也就是咱們前面keyframes定義的動畫名*/ -webkit-animation-duration: 10s;/*動畫持續時間*/ -webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是同樣的*/ -webkit-animation-delay: 2s;/*動畫延遲時間*/ -webkit-animation-iteration-count: 10;/*定義循環資料，infinite爲無限次*/ -webkit-animation-direction: alternate;/*定義動畫方式*/ }

6.seajs在打包，壓縮時，有什麼缺點？

　　seajs加載模塊，會引發屢次http請求，所以須要打包，壓縮。

若是要用Seajs, 最好使用SPM提供的工具進行打包壓縮, 一是由於像require這種固定語法的, 能夠當作是關鍵字, 通常壓縮工具如yuicompressor會改爲其餘名字; 二是, 過程當中會分析各文件的相互依賴,並把某文件的依賴文件合併到這個文件中; 三是, 由於遵循了統一的CMD規範, 這樣能夠將你寫的優秀模塊代碼發佈到http://module.seajs.org上, 其餘人就很方便的install你的模塊. SPM和Seajs的關係能夠當作是npm和nodejs的關係...

spm工具是基於node（nodejs的服務平臺）的,所以咱們須要先安裝 node 和 npm

7.Backbone的module繼承

　　Backbone必須依賴於 Underscore.js，DOM操做和AJAX請求依賴於第三方jQuery/Zepto/ender之一，也能夠經過 Backbone.setDomLibrary( lib ) 設置其餘的第三方庫。

 var extend = function(protoProps, classProps) {
    return inherits(this, protoProps, classProps);
  };

// 自擴展函數

Backbone.Model.extend = Backbone.Collection.extend = Backbone.Router.extend = Backbone.View.extend = extend; 
this指的是Model，protoProps實例屬性，classProps靜態屬性

inherits使用的是原型繼承的方法，child.prototype = new parent();裏面調用了underscore.js的的extend方法：_.extend（）

// 定義Book模型類
var Book = Backbone.Model.extend({
    defaults : {
        name : 'unknown',
        author : 'unknown',
        price : 0
    }
});

// 實例化模型對象
var javabook = new Book({
    name : 'Thinking in Java',
    author : 'Bruce Eckel',
    price : 395.70
});  

8.當ajax請求狀態爲3的時候，忽然拔掉網線，會報什麼錯誤？同時，狀態爲3時，可使用數據嗎？
　　第一個好像會報網關錯誤，504，Gateway Timeout 網關超時。由於不能及時地從遠程服務器得到應答。（這個不肯定）
第二個是可使用一些數據，好比，圖像的大小。而後面試官又問，還有什麼數據？我就卡住了。應該是響應頭裏面的數據。（不肯定）

9.window.name的用處？
　　跨域（傳遞參數）。判斷當前的window，由於一個頁面可能會有iframe，這時會有多個window。保存頁面刷新時，用戶輸入的數據。
同一窗口打開頁面，只要window.open(url,name),name同樣，就會在同一窗口下打開url。

10.圖片的data:url和直接加在圖片的優缺點？
　　圖片被轉換成base64編碼的字符串形式，並存儲在URL中。使用Data URL技術，圖片數據以base64字符串格式嵌入到了頁面中，與HTML成爲一體。

當圖片的體積過小，佔用一個HTTP會話不是很值得時。可使用Data url
Data URL形式的圖片不會被瀏覽器緩存，這意味着每次訪問這樣頁面時都被下載一次。這是一個使用效率方面的問題——尤爲當這個圖片被整個網站大量使用的時候。不適用。
能夠將Data URL形式的圖片存儲在CSS樣式表中。而全部瀏覽器都會積極的緩存CSS文件來提升頁面加載效率。
只要這個圖片不是很大，並且不是在CSS文件裏反覆使用，就能夠以Data URL方法呈現圖片下降頁面的加載時間，改善用戶的瀏覽體驗。

緊接着，面試官問：圖片始終是要下載的，那麼下載一張圖片的速度快仍是下載一堆編碼快？瀏覽器對圖片的顯示快，仍是處理代碼的速度快？

其實Data URL實際使用的比較少，在如下條件下可使用：