[騰訊]前端面試題整理
阿新 • • 發佈：2019-02-14
prototype 與 proto的關係是什麼：
__proto__是什麼？我們在這裡簡單地說下。每個物件都會在其內部初始化一個屬性，就是__proto__，當我們訪問一個物件的屬性 時，如果這個物件內部不存在這個屬性，那麼他就會去__proto__裡找這個屬性，這個__proto__又會有自己的__proto__，於是就這樣 一直找下去，也就是我們平時所說的原型鏈的概念。
<script type="text/javascript">
var Person = function () { };
var p = new Person();
</script>
很簡單的一段程式碼，我們來看看這個new究竟做了什麼？我們可以把new的過程拆分成以下三步：
<1 meta viewport原理
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
簡單來講，就是移動端視口分為可見視口（也就是我們手機螢幕的大小），layout視口（也就是真實的頁面的佈局大小），理想視口（就是佈局視口就等於可見視口）使用者通過縮放等瀏覽可見視口與佈局視口不等的頁面來檢視內容。
具體文章參照：域名收斂是什麼
PC 時代為了突破瀏覽器的域名併發限制。有了域名發散。
瀏覽器有併發限制，是為了防止DDOS攻擊。
域名收斂：就是將靜態資源放在一個域名下。減少DNS解析的開銷。
域名發散：是將靜態資源放在多個子域名下，就可以多執行緒下載，提高並行度，使客戶端載入靜態資源更加迅速。
域名發散是pc端為了利用瀏覽器的多執行緒並行下載能力。而域名收斂多用與移動端，提高效能，因為dns解析是是從後向前迭代解析，如果域名過多效能會下降，增加DNS的解析開銷。
參考文章：
域名收斂
float 與display:inline-block的區別：
共性：都可以使元素處於同一行，並且使元素為塊元素，可以自由設定寬高；
不同：
float:脫離文件流；呈環繞排列；上行有空白則後續元素會盡力去填補上；相同元素float:right時，在前面的元素先解析，所以顯示上反而在後面的元素右邊；
inline-block:在文件流中。行排列不會補位；
首選inline-block,不改變文件流，避免dom重繪；前端優化策略列舉：
首屏/白屏時間如何計算
白屏時間指的是瀏覽器開始顯示內容的時間。因此我們只需要知道是瀏覽器開始顯示內容的時間點，即頁面白屏結束時間點即可獲取到頁面的白屏時間。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>白屏</title>
<script type="text/javascript">
// 不相容performance.timing 的瀏覽器，如IE8
window.pageStartTime = Date.now();
</script>
<!-- 頁面 CSS 資源 -->
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="page.css">
<script type="text/javascript">
// 白屏時間結束點
window.firstPaint = Date.now();
</script>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
白屏時間 = firstPaint - performance.timing.navigationStart;首屏時間：這個比較複雜，具體看文章：
首屏時間計算
閉包
作用域鏈
ajax如何實現，readyState五種狀態的含義：
jsonp如何實現
ajax簡單封裝
該封裝不依賴jquery，添加了jsonp功能；
怎麼處理跨域
restful中的method解釋
http請求頭，請求體，cookie在哪個裡面？url在哪裡面？
http
對閉包的理解，實現一個暴露內部變數，而且外部可以訪問修改的函式
var obj = {
a:1,
setA:function(a){
var that = this;
return function(a){
return that.a =a;
}
},
getA:function(){
return this.a;
}
}
console.log(obj.setA()(4))//4
console.log(obj.getA())//4深入理解this與閉包：
閉包與return
this
閉包
重點理解這：
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()());//window
程式碼片段二。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()());//my object
get與post的區別
事件模型解釋
編寫一個元素拖拽的外掛
編寫一個contextmenu的外掛
編寫web端cookie的設定和獲取方法;
相容IE6的水平垂直居中
相容ie的事件封裝
h5與原生的android的優缺點
編寫h5需要注意什麼
xss和crsf的原理以及怎麼預防
xss：使用者過分信任網站，放任來自瀏覽器位址列代表的那個網站程式碼在自己本地任意執行。如果沒有瀏覽器的安全機制限制，xss程式碼可以在使用者瀏覽器為所欲為；
csrf：網站過分信任使用者，放任來自所謂通過訪問控制機制的代表合法使用者的請求執行網站的某個特定功能。css優先順序
如何實現點選radio的文字描述實現控制radio的狀態（通過lable實現）
delegate如何實現
cache-control
http-only
url輸入到伺服器中間發生了什麼？
vue跟angular像不像？
父子通訊？
移動端適配問題？
rem原理？
session與cookie的區別
什麼是bfc
jquery
https
實現一個站點從http到https的遷移
localstorage跟cookie的區別
http狀態碼，200，500，301，302，304
三次握手
框架原理：
1.angularjs的directive怎麼寫
2.angularjs的髒檢查（雙向繫結）是如何實現的？
3.依賴注入如何實現？
4.scope如何實現？
5.$parse模組如何實現？
http協議：
1.accept是什麼，怎麼用？
2.http狀態碼，
前端面試常見題目：
2016十家公司前端面試小記
js手寫一個排序演算法動態排序的動畫：
css篇：
垂直居中：
待總結
自適應佈局
linux:
unix中常用的命令列
Jquery:
function creat(){
return function(n){
if(n<1){
return 1
}
return n*arguments.callee(n-1)
}
}
對比有名字的函式遞迴：
function factorial (n) {
return !(n > 1) ? 1 : factorial(n - 1) * n;
}
[1,2,3,4,5].map(factorial);對前端路由的理解？前後端路由的區別？
前端路由與後端路由
gulp/grunt/webpack對比
待對比