校招前端面試知識大全

lymn發表於2018-10-10

前端面試

前言：這是之前看的視訊課程的一個面試知識總結，這只是一個簡單的總結，小夥伴們還是需要自己深入理解研究這些知識點，這裡面可能還有許多知識點沒有總結到，小夥伴們需要自己去總結學習。祝大家找工作順利。

變數型別和計算

使用typeof能得到的型別有哪些？
- undefined
- number
- boolean
- string
- object
- function
引用型別？
- 物件
- 陣列
- 函式
JS中有哪些內建函式？
- Boolean
- Number
- String
- Object
- Array
- Function
- Date
- RegExp
- Error
JS按照儲存方式分為哪些型別，並描述其特點？
- 值型別
- 引用型別
- 值型別的儲存不會相互影響
- 引用型別是變數指標的賦值，不是真正的拷貝，他們值的修改會相互影響
如何理解JSON?
- JSON在js中是一個物件，有兩個API（JSON.stringify() 和 JSON.parse()）
- 同時JSON也是一種資料格式
在if中會被轉換成false的?
- 0
- ‘’
- undefined
- null
- NaN
- false
面對物件？
- Math
- JSON

原型和原型鏈

5條原型規則？
- 所有的引用型別（陣列，物件，函式），都具有物件特性，即可自由擴充套件（除了“null”以外）
- 所有的引用型別（陣列，物件，函式），都有一個__proto__屬性（隱式原型），屬性值是一個普通的物件
- 所有的函式，都有一個prototype（顯式原型）屬性，屬性值是一個普通的物件
- 所有的引用型別，__proto__的屬性值指向它的建構函式的“prototype”的屬性值
- 當試圖得到一個引用型別的某個屬性時，如果這個引用型別沒有這個屬性，那麼它會去引用型別的__proto__(即該引用型別的建構函式的prototype)中尋找
var a={}其實是var a=new Object()的語法糖
var arr=[]其實是var arr=new Array()的語法糖
function Foo(){}其實是var Foo=new Function(...)
使用instanceof判斷一個函式是否是一個變數的建構函式
如何判斷一個變數是陣列型別？
- var arr=[]
  arr instanceof Array //true
  typeof arr //Object,typeof是無法判斷是否是陣列的
描述 new 一個物件的過程
- 建立一個新物件
- this指向這個物件
- 執行程式碼，即對this賦值
- 返回this

作用域和閉包

執行上下文
- 範圍：一段<script>或者一個函式
- 全域性：變數定義函式宣告
- 函式：變數定義函式宣告 this arguments
“函式宣告” 和 “函式表示式” 的區別
- 函式宣告 function fn(){...}
- 函式表示式 var fn=function(){...}
關於this
- this要在執行時才能確認值，定義時無法確認
this的使用場景
- 作為建構函式執行
- 作為屬性物件執行: a.fn()
- 作為普通函式執行: fn()
- call apply bind : fn.call()
關於作用域
- JS沒有塊級作用域
- 只有函式和全域性作用域
- （一個函式的作用域是他定義的作用域而不是他執行的作用域）
作用域鏈
- 一個自由變數，一直不斷的往父級作用域去找
閉包的使用場景？
- 函式作為返回值
- 函式作為引數傳遞

問題

說一下對變數提升的理解？
- 變數定義
- 函式宣告（注意和函式表示式是的區別）
this的使用場景？
- 作為建構函式使用
- 作為物件屬性使用
- 作為普通函式使用
- call apply bind
如何理解作用域？
- 自由變數
- 作用域鏈，即自由變數的查詢
- 閉包的使用場景
閉包的實際應用？
- 閉包實際應用中主要用於封裝變數，收斂許可權
建立10個a標籤，點選的時候彈出來對應的序號？
- 關係到作用域

非同步和單執行緒

何時使用非同步？
- 在可能發生等待的情況
- 等待過程中不能像alert一樣阻塞程式執行
- 因此，所有的“等待的情況”都需要非同步
前端使用非同步的場景？
- 定時任務 setTimeout setInterval
- 網路請求：ajax請求，動態載入
- 事件繫結

問題

同步和非同步的區別是什麼？
- 同步會阻塞程式碼執行，而非同步不會
- alert是同步，setTimeout是非同步
前端使用非同步的場景是哪些？
- 定時任務 setTimeout setInterval
- 網路請求 Ajax請求動態載入
- 事件繫結
- 因為這三個事件都是需要等待的，等待的過程中不能阻塞程式碼的執行，所以需要非同步，因為js是單執行緒語言，一次只能執行一件事

Math和日期

Math.random()的作用
- 隨時改變，清除快取，比方說訪問一個連結，在連結後面加入隨機數，每次訪問這個連結random都會變，每次不一樣，這樣就可以把快取清
日期
- Date.now()
- var date=new Date()
- date.getFullYear() //年
- date,getMonth() //月
- date.getDate() //日
- date.getHours() //時
- date.getMinutes() //分鐘
- date.getSeconds() //秒
Math
- Math.random()
陣列API
- forEach()
  - 沒有返回值
- map()
  - 有返回值，可以return出來
- every()
- some()
- filter()
- sort()
物件API
- for-in

JS-web-API（上）

JS內建的的全域性函式和物件有哪些？
- Object Array String Boolean Math Json
- window document
- navigator.userAgent

DOM

DOM結構操作？
- 新增節點
- 獲取父節點
- 獲取子節點
- 刪除節點
DOM是哪種基本的資料結構？
- 樹
DOM操作的常用API有哪些？
- 獲取DOM節點，以及節點的property和Attribute
- 獲取父節點和子節點
- 新增節點，刪除節點
DOM節點的Attribute和property有何區別?
- property只是一個JS物件的屬性的修改和獲取
- Attribute是對html標籤的修改和獲取

BOM

如何檢測瀏覽器的型別？
- 使用navigator.userAgent
瀏覽器核心
- IE trident
- FireFox Gecko
- Chrome webkit/Blink
拆解url的各部分
- location.href
- location.protocol //"http:" "https:"
- location.host //"www.bilibili.com" 域名
- location.pathname //"/video/av25887056/" 路徑
- location.search //"?spm_id_from=333.334.chief_recommend.16"
- location.hash //"#1"
screen
- console.log(screen.height)
- console.log(screen.width)
history
- histort.back()
- history.forward()

JS-web-API（下）

事件代理的好處
- 程式碼簡潔
- 減少瀏覽器記憶體佔用
簡述事件冒泡流程
- DOM樹形結構（按照DOM樹形結構往上冒）
- 事件冒泡
- 阻止冒泡
- 冒泡的應用
  - 事件代理
無限下拉載入圖片的頁面，繫結事件
- 使用事件代理
狀態碼說明
- readyState
  - 0 (未初始化) 還沒有呼叫send()方法
  - 1 (載入) 已經呼叫send()方法，正在傳送請求
  - 2 (載入完成)send方法執行完畢，已經接收到全部響應內容
  - 3 (互動)正在解析響應內容
  - 4 (完成)響應已經解析完畢，可以呼叫了
- status
  - 2xx表示請求成功，如200
  - 3xx表示重定向，瀏覽器自動跳轉
  - 4xx客戶端請求錯誤，如404
  - 5xx伺服器端錯誤
什麼是跨域
- 瀏覽器有同源策略，不允許ajax訪問其他域介面
- 跨域條件：協議，域名，埠，有一個不同就是跨域
允許跨域的三個標籤
- 有三個標籤允許跨域載入資源
  - <img src=XXX>
  - <link href=XXX>
  - <script src=XXX>
- 三個標籤的場景
  - <img>可以用於打點統計，統計網站可以是其他域
  - <link>可以使用cdn,cdn的是其他域
  - <script>可以用於jsonp
跨域的幾種實現方式
- JSONP
- 伺服器端設定http header
儲存
- cookie
  - cookie本身用於客戶端與服務端通訊
  - 但是它有本地儲存的功能，於是就被借用
  - 使用documnet.cookie=...獲取和修改即可
- cookie用於儲存的缺點
  - 儲存量太小，只有4KB
  - 所有的ajax請求都帶著，影響獲取資源的效率
  - API簡單，需要封裝才能用document.cookie=...
  - 如果不設定cookie的失效時間的話，瀏覽器關閉cookie就失效
- localStorage和sessionStorage
  - HTML5專門為儲存而設計，最大容量5M
  - API簡單易用
  - localStorage.setItem(key,value),localStorage.getItem(key)
  - 不同之處，localStorage會一直存在本地，sessionStorage瀏覽器關閉就沒有了
- cookie,localStorage和sessionStorage的區別
  - 容量
  - ajax是否攜帶
  - API易用性
- cookie和session的區別
  - cookie存在客戶端，session存在伺服器
  - 安全性較高的使用session,安全性較低的使用cookie
  - Cookie只能儲存字串，session可以儲存任何資訊
  - cookie如果不設定時間，當關閉瀏覽器時，Cookie就失效，不會在本地儲存，session的生命週期是一個會話（當啟動瀏覽器到關閉瀏覽器）。
  - 在儲存相對持久的資訊時，應考慮使用cookie，因為cookie可以以檔案的形式，儲存在客戶端。在進行一些登入的驗證及資訊攔截的時候，可以使用session。

開發環境

關於開發環境
- IDE（寫程式碼的效率）
- git（程式碼版本管理，多人協作開發）
- JS模組化
- 打包工具
- 上線回滾的流程
常用Git命令
- git add.
- git checkout xxx
- git commit -m
- git push origin master
- git pull origin master
- git branch
- git checkout -b xxx(新建分支)/git checkout xxx
- git merge xxx

模組化

AMD
- require.js
- 全域性define
- 全域性require
- 依賴JS會自動、非同步載入

// 定義模組 myModule.js
define(['myModule'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 載入模組
require(['myModule'], function (my){
&emsp; my.printName();
});

---------------------

本文來自 一切隨我走之大師之路 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/jackwen110200/article/details/52105493?utm_source=copy 
複製程式碼

CommonJS
- nodejs模組化規範，現在大量被前端引用，原因：
  - 前端開發依賴的外掛和庫，都可以從npm獲取
  - 構建工具的高度自動化，使得使用npm的成本非常低
  - CommonJs不會非同步載入JS,而是同步一次性載入出來
  - export和require
AMD和CommonJS的使用場景
- 需要非同步載入使用AMD
- 不需要非同步載入，或者使用了npm之後建議用CommonJS

上線和回滾的基本流程
- 上線流程要點
  - 將測試完成的程式碼提交到git版本庫的master分支
  - 將當前伺服器的程式碼全部打包並記錄版本號，備份
  - 將master分支的程式碼提交覆蓋到線上伺服器，生成新版本號
- 回滾流程要點
  - 將當前伺服器的程式碼打包並記錄號版本號，備份
  - 將備份的上一個版本號解壓，覆蓋到線上伺服器，並生成新的版本
linux基本命令
- 伺服器使用linux居多，server版，只有命令列
- 測試環境要匹配線上環境，因此也是linux
- 經常需要登入測試機來自己配置，獲取資料

執行環境

知識點
- 載入資源的形式
  - 輸入url（或跳轉頁面）載入html
    - www.baidu.com
  - 載入html中的靜態資源
    - <script src="...">
    - <img src="...">
    - <link href="...">
- 載入一個資源的過程
  - 瀏覽器根據DNS伺服器得到域名的ip地址
  - 向這個ip的機器傳送http請求
  - 伺服器收到，處理，並返回http請求
  - 瀏覽器得到內容
- 瀏覽器渲染頁面的過程
  - 根據HTML生成DOM tree
  - 根據CSS生成CSSOM
  - 將DOM tree和CSSOM整合形成RenderTree
  - 根據RenderTree開始渲染和展示
  - 遇到script時，會執行並且阻塞渲染
從輸入url到得到html的詳細過程
- 瀏覽器根據DNS伺服器得到域名的ip地址
- 向這個ip的機器傳送http請求
- 伺服器收到，處理，並返回http請求
- 瀏覽器得到內容
詳細點的如下
- 在位址列輸入地址
- 檢視瀏覽器是否有快取，如果有快取直接返回快取內容，沒有快取發起新請求
- 通過DNS回去域名的ip地址
- 與目標IP地址建立TCP連線
- TCP連線後將http請求傳送給伺服器
- 伺服器接受請求並解析將響應報文返回給瀏覽器
- 瀏覽器接受HTTP響應，然後根據情況選擇關閉TCP連線或保留重用
- 瀏覽器解析文件顯示介面
  參考這裡

window.onload和DOMContentLoaded的區別

window.addEventListener('load',funciton(){
    //在頁面中的一切都載入完畢時觸發，
    //包括所有影象、JavaScript檔案、CSS檔案等外部資源等外部資源 
})
複製程式碼

document.addEventListener('DOMContentLoaded',function(){
    // 在形成完整的DOM樹之後就會觸發
    // 不理會影象、JavaScrpt檔案、CSS檔案或其他資源是否下載完畢
})
複製程式碼

效能優化

原則
- 多使用記憶體、快取或其他方法
- 減少CPU計算，減少網路
從哪裡入手
- 載入頁面和靜態資源
- 頁面渲染
載入資源優化
- 靜態資源的壓縮合並
  - (通過構建工具)
- 靜態資源快取
  - 通過連結名字控制快取
    - <script src="abc_1.js">
- 使用CDN讓資源載入更快
- 使用SSR後端渲染，資料直接輸出到HTML中
  - 現在vue react提出了這樣的概念
  - 其實jsp php asp都屬於後端渲染

渲染優化

CSS放前面，JS放後面

懶載入（圖片懶載入，下拉載入更多）

   <img id="img" src="perviem.png" data-realsrc="abc.png"/>
<script type="text/javascript">  
    //圖片懶載入  
    var img1=document.getElementById('img')
    img1.src=img1.getAttribute('data-realsrc')  
</script>
複製程式碼

減少DOM查詢，對DOM查詢做快取

      //未快取DOM查詢
 for(var i=0;i<document.getElementsByTagName('p').length;i++){
 	//todo
 }

 //快取了DOM查詢
 var pList=document.getElementsByTagName('p')
 var i;
 for(i=0;i<pList.length;i++){
 	//todo
 }
複製程式碼

減少DOM操作，多個操作儘量合併在一起執行

  //合併DOM插入
  var listNode=document.querySelector('.list')
  var frag=document.createDocumentFragment()
  var a,li;
  for(a=0;a<10;a++){
  	var li=document.createElement('li')
  	li.innerHTML='list item'+a
  	frag.appendChild(li)
  }
  listNode.appendChild(frag)
複製程式碼

事件節流

儘早執行操作（DOMContentLoaded）

    document.addEventListener('DOMContentLoaded',function(){
  //DOM渲染完及執行，此時圖片，視訊可能還沒載入完
})
複製程式碼

安全性
- XSS跨站請求攻擊
- XSRF跨站請求偽造
XSS
- 舉個例子
- 在某個網站寫一篇文章，同時偷偷插入一段<script>
- 攻擊程式碼中，獲取cookie，傳送到自己的伺服器
- 釋出文章客，別人看到文章內容
- 會把檢視者的cookie傳送到攻擊者的伺服器
怎麼防範XSS
- 前端替換關鍵字，例如替換<為&lt,>為&gt
- 後端替換
XSRF
- 你已登陸一個購物網站，正在瀏覽商品
- 該網站付費介面是(xxx.com/pay?id=100)但是沒有任何驗證
- 你收到一封郵件，裡面圖片的src是(xxx.com/pay?id=100)
- 你開啟郵件的時候，就已經悄悄的付費購買了
如何放置XSRF攻擊
- 增加驗證流程、如輸入指紋，密碼，簡訊驗證碼
如何防止別人惡意呼叫介面
- 驗證碼，採用點觸驗證，滑動驗證或第三方驗證服務，普通驗證很容易被識破
- 頻率，限制同IP,同裝置等傳送次數，單點時間範圍可請求時長
- 歸屬地，檢測IP所在地是否與手機號歸屬地匹配，IP所在地是否為常在地
- 可疑使用者，對可疑使用者主動要求其傳送資訊（或其他主動行為）來驗證身份
- 黑名單，對黑名單使用者，限制其操作，API介面直接返回success，1可以避免浪費資源，2混淆黑戶判斷
- 簽名，API介面啟用簽名策略，簽名可以保障請求URL的完整安全，簽名匹配再進行下一步操作
- token,對於重要的API介面，生成token值，做驗證。
- https,啟用https，https需要金鑰驗證，可以在一定程度上辨別是否偽造IP
- 程式碼混淆，釋出前端程式碼混淆過的包
- 風控，大量肉雞來襲時只能受著，同樣攻擊者也會暴露意圖，分析意圖提取演算法，分析判斷是否為惡意如果是則斷掉；異常賬號及時鎖定；或從產品角度做出調整，及時止損。
- 資料安全，資料安全方面做策略，攻擊者得不到有效資料，提高攻擊者成本
- 惡意IP庫，( threatbook.cn/ )，過濾惡意IP
- tips:
  - 鑑別IP真偽，可以考慮第三方saas服務
  - 手機號真偽，可以考慮選擇有防攻擊的運營商
如何解決使用者惡意註冊
- 手機驗證碼
- IP限制
- 記錄註冊人cookie，ip防止惡意註冊

大廠前端校招 - 知識體系
2019-09-05
前端
前端校招面試該考察什麼？
2017-10-10
前端面試
校招面試知識點複習之計算機網路
2017-03-20
面試計算機網路
校招面試知識點複習之計算機網路（更新）
2017-07-20
面試計算機網路
前端知識大全 - 收藏集 - 掘金
2017-06-06
前端
前端面經 | 騰訊實習生校招面試心路歷程
2018-04-12
前端面試
知名網際網路公司校招 Java 開發崗面試知識點解析
2018-04-12
Java面試
愛奇藝校招面試題
2015-12-02
面試題
2018web前端校招面試總結
2017-10-22
Web前端面試
最近校招面試記錄
2020-09-28
面試
【小米集團未來星校招】知識圖譜研究員 (急招)
2019-10-22
[小米集團未來星校招] 知識圖譜研究員 (急招)
2019-10-22
2018年前端開發校招面試總結
2018-12-28
前端面試
前端面試大全
2019-02-16
前端面試
【面試】-阿里前端社招面試
2019-04-09
面試阿里前端
前端面試知識點錦集
2017-12-18
前端面試
PHP知識大全
2016-03-24
PHP
自己總結的web前端知識體系大全
2016-08-06
Web前端
如何準備校招技術面試
2018-06-29
面試
前端面試知識點目錄整理
2019-05-06
前端面試
前端知識點總結—面試專用
2019-02-16
前端面試
史上前端面試最全知識點
2017-11-21
前端面試
MySQL 索引知識大全
2020-12-27
MySql索引
網路知識大全
2006-11-13
面試之前，簡歷之上：給前端校招同學的簡歷建議
2019-09-23
面試前端
校招面試心得看得再多也沒用
2018-10-10
面試
2016騰訊校招面試分享
2016-04-15
面試
2016年美的校招面試
2015-09-14
面試
前端秋招面試總結
2019-02-16
前端面試
2018前端校招總結
2017-10-20
前端
前端經典的JavaScript面試知識總結
2019-03-01
前端JavaScript面試
前端校招該考察什麼？一個面試官的思考 | 掘金技術徵文
2017-09-06
前端面試
【實用知識】招投標知識兩則
2020-01-13
BIOS知識大全(轉)
2007-08-09
iOS
阿里春招前端面試（1）
2019-04-06
阿里前端面試
寒冬中的前端社招面試
2019-03-18
前端面試
阿里前端社招面試總結
2019-03-19
阿里前端面試
2018前端面試知識整理【上】
2019-02-28
前端面試