校招前端面試知識大全

時間 2019-11-21

標籤前端面試知識大全欄目快樂工作简体版

原文原文鏈接

前言：這是以前看的視頻課程的一個面試知識總結，這只是一個簡單的總結，小夥伴們仍是須要本身深刻理解研究這些知識點，這裏面可能還有許多知識點沒有總結到，小夥伴們須要本身去總結學習。祝你們找工做順利。javascript

變量類型和計算

使用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
- 常常須要登陸測試機來本身配置，獲取數據

運行環境

知識點php
- 加載資源的形式html
  - 輸入url（或跳轉頁面）加載html
    - www.baidu.com
  - 加載html中的靜態資源
    - <script src="...">
    - <img src="...">
    - <link href="...">
- 加載一個資源的過程前端
  - 瀏覽器根據DNS服務器獲得域名的ip地址
  - 向這個ip的機器發送http請求
  - 服務器收到，處理，並返回http請求
  - 瀏覽器獲得內容
- 瀏覽器渲染頁面的過程vue
  - 根據HTML生成DOM tree
  - 根據CSS生成CSSOM
  - 將DOM tree和CSSOM整合造成RenderTree
  - 根據RenderTree開始渲染和展現
  - 遇到script時，會執行而且阻塞渲染
從輸入url到獲得html的詳細過程java
- 瀏覽器根據DNS服務器獲得域名的ip地址
- 向這個ip的機器發送http請求
- 服務器收到，處理，並返回http請求
- 瀏覽器獲得內容
詳細點的以下node
- 在地址欄輸入地址
- 查看瀏覽器是否有緩存，若是有緩存直接返回緩存內容，沒有緩存發起新請求
- 經過DNS回去域名的ip地址
- 與目標IP地址創建TCP鏈接
- TCP鏈接後將http請求發送給服務器
- 服務器接受請求並解析將響應報文返回給瀏覽器
- 瀏覽器接受HTTP響應，而後根據狀況選擇關閉TCP鏈接或保留重用
- 瀏覽器解析文檔顯示界面
  參考這裏

window.onload和DOMContentLoaded的區別react

window.addEventListener('load',funciton(){
    //在頁面中的一切都加載完畢時觸發，
    //包括全部圖像、JavaScript文件、CSS文件等外部資源等外部資源 
})
複製代碼

document.addEventListener('DOMContentLoaded',function(){
    // 在造成完整的DOM樹以後就會觸發
    // 不理會圖像、JavaScrpt文件、CSS文件或其餘資源是否下載完畢
})
複製代碼

性能優化linux

原則
- 多使用內存、緩存或其餘方法
- 減小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渲染完及執行，此時圖片，視頻可能還沒加載完
})
複製代碼

安全性git
- 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防止惡意註冊

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。