2019年,盤點一些我出過的前端面試題以及對求職者的建議

時間 2020-01-23

標籤 2019年盤點一些端面試題以及求職者建議简体版

原文原文鏈接

筆者雖然曾經也面試過不少求職者,可是對於前端的筆試和麪試,我以爲並不能體現一我的的真實能力,因此建議你們多修煉前端真正的技術.對於前端面試題,以前也承諾過讀者要出一篇,筆者大體總結一下曾今面試的題目.後續不會再出面試題,而是聚焦於一些真正的,有利於成長性的技術文章和思惟方式,來幫助你們提升解決問題的能力. javascript

前言

首先總結一下筆者對於前端領域學習的一些成長模型和學習路線,來給你們提供一些參考.css

下面推薦一些不一樣技術選型的優秀組件和庫,也是筆者曾今使用過的.

若是公司的前端是以vue爲主的,那麼你可能須要熟悉以下技能和知識點

vue
vue-router 路由管理
vuex 狀態管理
vue-cli3 vue項目優秀的腳手架,能夠配置單頁,多頁,ssr, 預渲染技術的頁面
vue-server-renderer 服務端渲染方案
vue-devtools vue開發調試工具,方便調試大型複雜項目
antd-desigin-vue / element UI 基於vue的第三方ui組件庫
vxe-table 優秀的vue表格解決方案
vue-multiselect vue強大的多選下拉組件
Vuelidate 基於vue強大且輕量的校驗庫
vuex-router-sync 保持vue-router和vuex store同步

若是公司的前端是以React爲主的,那麼你可能須要熟悉以下技能和知識點

react
react-router
react-thunk 異步redux解決方案
ant design 優秀且強大的react組件庫
react-json-view JSON 顯示器
react-quill 富文本編輯器
rc-color-picker 拾色器
qrcode.react 二維碼生成器
antV 數據可視化解決方案
react-beautiful-dnd 基於react的拖拽庫
emoji-mart 表情庫
react-image-crop 圖片裁切
Ant Motion 動畫
react-codemirror2 代碼編輯器
react-copy-to-clipboard 複製到剪切板

接下來言歸正傳,開始進入正文.html

正文

1. 介紹一下ES6的新特性

[參考答案]前端

const和let
模板字符串
箭頭函數
函數的參數默認值
Spread / Rest 操做符
二進制和八進制字面量(經過在數字前面添加0o或0O便可將其轉爲八進制值,二進制使用0b或者0B)
對象和數組解構
ES6中的類(class)
Promise
Set()和Map()數據結構
Modules（模塊, 如import, export）
for..of 循環

2. 介紹Promise以及Promise的幾種狀態

[參考答案]vue

介紹: Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。所謂Promise，簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。狀態: pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。java

3. 談談你對閉包的理解及其優缺點

[參考答案]node

閉包就是可以讀取其餘函數內部變量的函數. 本質上,閉包是將函數內部和函數外部鏈接起來的橋樑.react

優勢

邏輯連續，當閉包做爲另外一個函數調用參數時，避免脫離當前邏輯而單獨編寫額外邏輯。
延長局部變量的生命週期, 更具備封裝性, 保護局部變量。

缺點

容易形成內存溢出
閉包會在父函數外部，改變父函數內部變量的值,因此可能會致使改變父函數的變量

4. React的生命週期

[參考答案]webpack

初始化階段 defaultProps -> constructor -> componentWillMount() -> render() -> componentDidMount()
運行中階段 componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> componentDidUpdate()
銷燬階段 componentWillUnmount()

5. componentWillReceiveProps的觸發條件是什麼

[參考答案] componentWillReceiveProps會在接收到新的props的時候調用css3

6. vue中v-if和v-show的區別

[參考答案]

v-show無論條件是真仍是假，第一次渲染的時候標籤都會添加到DOM中。切換的時候，經過display: none;樣式來顯示隱藏元素,對性能影響不是很大。
v-if在首次渲染的時候，若是條件爲假，不會在頁面渲染該元素。當條件爲真時，開始局部編譯，動態的向DOM元素裏面添加元素。當條件從真變爲假的時候，開始局部編譯，卸載這些元素，也就是刪除。對性能有必定影響

7. 小程序裏面開頁面最多多少

[參考答案] 小程序原生頁面存在層級限制，超過必定層數就會沒法打開新頁面。一開始這個限制爲不超過5層，目前是不超過10層。

8. 取數組的最大值（ES五、ES6）

[參考答案]

// es5
Math.max.apply(null, arr);
// es6
Math.max(...arr);
複製代碼

9. http併發請求資源數上限

[參考答案] HTTP客戶端通常對同一個服務器的併發鏈接個數都是有限制的, 最大爲6條

10. 如何優化網站的SEO

[參考答案]

網站結構佈局優化：儘可能簡單, 提倡扁平化結構. 通常而言，創建的網站結構層次越少，越容易被「蜘蛛」抓取，也就容易被收錄。
img標籤必須添加「alt」和「title」屬性，告訴搜索引擎導航的定位，作到即便圖片未能正常顯示時，用戶也能看到提示文字。
把重要內容HTML代碼放在最前搜索引擎抓取HTML內容是從上到下，利用這一特色，可讓主要代碼優先讀取，廣告等不重要代碼放在下邊。
控制頁面的大小，減小http請求，提升網站的加載速度。
合理的設計title、description和keywords

title標題：只強調重點便可，儘可能把重要的關鍵詞放在前面，關鍵詞不要重複出現，儘可能作到每一個頁面的title標題中不要設置相同的內容。
meta keywords頁面/網站的關鍵字。
meta description網頁描述，須要高度歸納網頁內容，切記不能太長，過度堆砌關鍵詞，每一個頁面也要有所不一樣。

語義化書寫HTML代碼，符合W3C標準儘可能讓代碼語義化，在適當的位置使用適當的標籤，用正確的標籤作正確的事。讓閱讀源碼者和「蜘蛛」都一目瞭然。
a標籤：頁面連接，要加「title」屬性說明，連接到其餘網站則須要加上 el="nofollow" 屬性, 告訴「蜘蛛」不要爬，由於一旦「蜘蛛」爬了外部連接以後，就不會再回來了。
圖標使用IconFont替換
使用CDN網絡緩存，加快用戶訪問速度，減輕服務器壓力
啓用GZIP壓縮，瀏覽速度變快，搜索引擎的蜘蛛抓取信息量也會增大
SSR技術
預渲染技術

11. 介紹下HTTP狀態碼, 40三、30一、302分別表明什麼

[參考答案]

當瀏覽者訪問一個網頁時，瀏覽者的瀏覽器會向網頁所在服務器發出請求。當瀏覽器接收並顯示網頁前，此網頁所在的服務器會返回一個包含HTTP狀態碼的信息頭（server header）用以響應瀏覽器的請求。

301 (永久移動) 請求的網頁已永久移動到新位置。服務器返回此響應(對 GET 或 HEAD 請求的響應)時，會自動將請求者轉到新位置
302 (臨時移動) 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求
403 (禁止) 服務器拒絕請求

12. RESTful經常使用的方法和介紹

[參考答案] rest請求方法有4種，包括get,post,put,delete.分別對應獲取資源，添加資源，更新資源及刪除資源.

12. React16.3對生命週期的改變

[參考答案] React16.3+廢棄的三個生命週期函數

componentWillMount
componentWillReceiveProps
componentWillUpdate

取而代之的是兩個新的生命週期函數

static getDerivedStateFromProps(nextProps, prevState) 取代componentWillMount、componentWillReceiveProps和componentWillUpdate
getSnapshotBeforeUpdate(prevProps, prevState) 取代componentWillUpdate

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 返回的數據將做爲componentDidUpdate第三個參數
    return {
      stateA: 'xxx'
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      console.log(snapshot.stateA)
    }
  }

  render() {}
}
複製代碼

13. 介紹React高階組件

高階組件（HOC）是 React 中用於複用組件邏輯的一種高級技巧。HOC 自身不是 React API 的一部分，它是一種基於 React 的組合特性而造成的設計模式。具體而言，高階組件是參數爲組件，返回值爲新組件的函數.其自己是純函數，沒有反作用。

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // 將 input 組件包裝在容器中，而不對其進行修改。Good!
      return <WrappedComponent {...this.props} />; } } } 複製代碼

14. 緩存相關的HTTP請求頭

[參考答案]

headers字段	解釋	案例
Expires	服務端告訴瀏覽器，先把這個文件緩存起來，在這個過時時間以前，該文件都不會變化	Expires: Mon, 1 Aug 2016 22:43:02 GMT
Cache-Control	因爲Expires給定的是絕對時間，而客戶端的系統時間能夠由用戶任意修改, Cache-Control爲相對時間	Cache-Control: max-age=80
Last-Modified(response header) / If-Modified-Since (request header)	服務端收到請求後會對比目前文件的最後修改時間和該請求頭的信息，若是沒有修改，那就直接返回304給瀏覽器，而不返回實際資源。若是有變化了，就返回200，而且帶上新的資源內容	If-Modified-Since:Mon, 01 Aug 2016 13:48:44 GMT
Etag / If-None-Match	第一次請求後響應頭中包含了Etag，做爲時間標籤,下一次請求時會把原來的Etag標籤帶上（在請求頭中變成了If-None-Match）做爲校驗標準，若這個文件若是發生了改變，則Etag也會改變。服務器對比瀏覽器請求頭中的的If-None-Match：若是相同就返回304，而不返回實際資源若是不一樣，就返回200和新的資源。

15. 如何優化用戶體驗

[參考答案]

頁面渲染前使用骨架屏或者加載動畫,避免大塊白屏
使用預渲染或者ssr技術提升首屏加載時間
動畫使用css3硬件加速,避免用戶操做動畫卡頓
計算密集型業務使用web worker或者js分片處理,避免js線程阻塞
頁面狀態監控,給用戶提供反饋機制
靜態資源走CDN緩存或者oss服務,提升用戶訪問速度
避免用戶操做報錯,提供404頁面或則錯誤提示頁面

16. 對PWA的瞭解

[參考答案]

progressive web app：漸進式網頁應用.能夠將 Web 和 App 各自的優點融合在一塊兒：漸進式、可響應、可離線、實現相似 App 的交互、即時更新、安全、能夠被搜索引擎檢索、可推送、可安裝、可連接。其核心技術包括 App Manifest、Service Worker、Web Push，等等。

17. 介紹下跨域

[參考答案]

同源策略/SOP（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊, 同源策略要求兩個通信地址的協議、域名、端口號必須相同，不然兩個地址的通信將被瀏覽器視爲不安全的，並被阻擋下來. 要突破SOP的限制,咱們可使用以下方式:

CORS 同域安全策略CORS是一種跨域資源請求機制，它要求當前域在響應報頭添加Access-Control-Allow-Origin標籤，從而容許指定域的站點訪問當前域上的資源

res.setHeader("Access-Control-Allow-Origin","*"); 
// 不過CORS默認只支持GET/POST這兩種http請求類型，若是要開啓PUT/DELETE之類的方式，須要在服務端在添加一個"Access-Control-Allow-Methods"報頭標籤：
 res.setHeader(
    "Access-Control-Allow-Methods",
    "PUT, GET, POST, DELETE, HEAD, PATCH"
  )
複製代碼

HTML5 postMessage 可使用 postMessage 方法和 onmessage 事件來實現不一樣域之間的通訊，其中postMessage用於實時向接收信息的頁面發送消息
HTML5 WebSocket WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通訊，同時容許跨域通信，是server push技術的一種很棒的實現
JSONP 是JSON的一種「使用模式」，主要是利用script標籤不受同源策略限制的特性，向跨域的服務器請求並返回一段JSON數據
iframe形式經過設置相同的document.domain, 或者不一樣域經過window.name傳遞數據
服務器代理

18. Access-Control-Allow-Origin在服務端哪裏配置

[參考答案] response header響應頭

19. csrf跨站攻擊怎麼解決

[參考答案]

CSRF, 跨站請求僞造,它能夠在用戶絕不知情的狀況下以用戶名義僞造請求發送給受攻擊站點，從而對用戶或者網站形成攻擊. 預防措施以下:

服務器端驗證HTTP Referer字段, Referer記錄了該HTTP請求的來源地址
在請求地址中添加token並驗證
在HTTP頭中自定義屬性並驗證

20. 用js寫一個數組扁平化函數

[參考答案]

// reduce
function flatten(arr = []) {  
    return arr.reduce((result, item) => {
        return result.concat(Array.isArray(item) ? flatten(item) : item)
    }, [])
}

// (toString | join) & split(利用數組的toString或者join,將數組轉化爲字符串)
function flatten(arr = []) {
  return arr.toString().split(',').map(item => Number(item))
}
複製代碼

21. Promise和Callback有什麼區別

[參考答案]

相比於callback，Promise 具備更易讀的代碼組織形式（鏈式結構調用），更好的異常處理方式（在調用 Promise 的末尾添加上一個catch方法捕獲異常便可），以及異步操做並行處理的能力（Promise.all()Promise.race()等）。callback最大的問題就是咱們一般說的回調地獄,一旦業務邏輯複雜了,咱們不得不使用大量的嵌套回調代碼,可維護性很低.

22. 如何實現高度自適應

[參考答案]

使用絕對定位, 設置top,bottom屬性
使用flex佈局
float+ height:100%

23. cookie, session, storage的區別和聯繫

[參考答案]

cookie存儲於瀏覽器端，而session存儲於服務端
cookie的安全性相比於session較弱,cookie容易被第三方劫持,考慮到安全應當使用session
session保存在服務器上,當訪問增多時，會佔用服務器的資源
cookie存儲容量有限制，單個cookie保存數據不能超過4k，且不少瀏覽器限制一個站點最多保存20個cookie。對於session,默認大小通常是1M
cookie、sessionStorage、localStorage,都保存在瀏覽器端，且受同源策略影響
cookie數據始終在同源的http請求中攜帶，而Storage不會再請求中攜帶，僅在本地存儲
存儲大小上, cookie通常是4k，Storage能夠達到5M-10M
數據存儲時間上：sessionStorage僅僅是會話級別的存儲，它只在當前瀏覽器關閉前有效，不能持久保持；localStorage始終有效，即便窗口或瀏覽器關閉也一直有效，除非用戶手動刪除；cookie只在設定的過時時間以前有效
做用域上：sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面； localStorage和 cookie在全部同源窗口是共享的
Storage支持事件通知機制，能夠將數據更新的通知發送給監聽者。而且它提供增刪查api使用更方便

24. 說說你作過的前端性能優化（JS原生,React, vue）

[參考答案] 參考<趣談前端>週二打卡答案

25. 對web安全的理解

[參考答案]

CSRF 攻擊和防範

跨站請求僞造,能夠理解爲攻擊者盜用了用戶的身份，以用戶的名義發送惡意請求，形成用戶隱私及財產損失過程: 1.登陸受信任網站並在本地生成cookie; 2.在不登出網站的狀況下訪問危險網站防範: 關鍵操做只接受POST請求, 使用驗證碼, 檢測Referer, 使用token(或者JWT)

XSS 攻擊和防範

全稱Cross-site script，跨站腳本攻擊，是Web程序中常見的漏洞。原理是攻擊者向有XSS漏洞的網站中輸入惡意的腳本，當其它用戶瀏覽該網站時候，該腳本會自動執行，從而達到攻擊的目的(盜取Cookie，破壞頁面結構，重定向到釣魚網站等)。區分: 分爲持久型XSS和非持久性XSS. 持久型XSS是將攻擊的腳本植入到服務器，從而致使每一個訪問的用戶都會遭到此XSS腳本的攻擊。非持久型XSS是將惡意腳本包裝在頁面的URL參數中，經過URL連接騙取用戶訪問，從而進行攻擊. 防範: 對用戶輸入進行HTML轉義, 對敏感信息進行過濾

SQL 注入與防範

經過把SQL命令插入到表單中並提交或頁面請求的參數中，最終使得服務器執行惡意的SQL命令. 防範: 對用戶的輸入進行校驗或限制長度；對特殊字符進行轉換, 不要使用動態拼裝SQL，爲每一個應用使用單獨的權限有限的數據庫鏈接。對隱私信息進行加密

DDOS 攻擊

分佈式拒絕服務(DDoS:Distributed Denial of Service)攻擊指藉助於客戶/服務器技術，將多個計算機聯合起來做爲攻擊平臺，對一個或多個目標發動DDoS攻擊，從而成倍地提升拒絕服務攻擊的威力。

26. 用js實現數組隨機取數，每次返回的值都不同

[參考答案]

function getUniqueItems(arr, num) {
  let temp = [];
  for (let index in arr) {
      temp.push(arr[index]);
  }
  let res = [];
  for (let i = 0; i<num; i++) {
      if (temp.length>0) {
          let arrIndex = Math.floor(Math.random()*temp.length);
          res[i] = temp[arrIndex];
          temp.splice(arrIndex, 1);
      } else {
        break;
      }
  }
  return res;
}
複製代碼

27. 頁面上有1萬個button如何綁定事件

[參考答案] 事件委託, 冒泡觸發

28. base64爲何能提高性能以及它的缺點是什麼

[參考答案] 優勢:

無額外請求
適用於很小或者很簡單的圖片
可像單獨圖片同樣使用，好比背景圖片等
沒有跨域問題，不須要考慮緩存、文件頭或者cookies問題缺點:
CSS 文件體積的增大, 形成CRP(關鍵渲染路徑)阻塞
頁面解析CSS生成的CSSOM時間增長

29. 介紹webp圖片文件格式

[參考答案]

WebP是一種支持有損壓縮和無損壓縮的圖片文件格式，根據Google的測試，無損壓縮後的WebP比PNG 文件少了45％的文件大小，即便這些PNG文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小28％的文件大小。

優勢
- 更小的文件尺寸
- 更高的質量——與其餘相同大小不一樣格式的壓縮圖像比較
缺點
- 編碼和解碼速度比較慢,存在必定兼容性

30. react-router裏的Link標籤和a標籤有什麼區別

[參考答案]

從渲染的DOM來看，這二者都是連接，都是a標籤，區別是： Link是react-router裏實現路由跳轉的連接，配合Route使用，react-router攔截了其默認的連接跳轉行爲，區別於傳統的頁面跳轉，Link 的「跳轉」行爲只會觸發相匹配的Route對應的頁面內容更新，而不會刷新整個頁面。 a標籤是html原生的超連接，用於跳轉到href指向的另外一個頁面或者錨點元素,跳轉新頁面會刷新頁面。

31. 介紹一下函數柯里化,並寫一個柯里化函數

[參考答案]

柯里化是一種將使用多個參數的一個函數轉換成一系列使用一個參數的函數的技術。柯里化函數可以讓咱們：

在多個函數調用中依次收集參數，不用在一個函數調用中收集全部參數。
當收集到足夠的參數時，返回函數執行結果。

32. 介紹一下從輸入URL到頁面加載全過程

[參考答案]

瀏覽器的地址欄輸入URL並按下回車。
瀏覽器查找當前URL是否存在緩存，並比較緩存是否過時。
DNS解析URL對應的IP。
根據IP創建TCP鏈接（三次握手）。
HTTP發起請求。
服務器處理請求，瀏覽器接收HTTP響應。
渲染頁面，構建DOM樹。
關閉TCP鏈接（四次揮手）。

33. 說說bind、call、apply的區別

[參考答案]

call和apply的共同點

都可以改變函數執行時的上下文，將一個對象的方法交給另外一個對象來執行，而且是當即執行的
調用call和apply的對象，必須是一個函數Function

call和apply的區別

apply的第二個參數，必須是數組或者類數組，它會被轉換成類數組，傳入函數中，而且會被映射到函數對應的參數上, 而call從第二個參數開始，能夠接收任意個參數

bind

bind()方法建立一個新的函數，與apply和call比較相似，也能改變函數體內的this指向。不一樣的是，bind方法的返回值是函數，而且須要稍後調用，纔會執行。而apply和call 則是當即調用

34. ES6中的map和原生的對象有什麼區別

[參考答案]

object和Map存儲的都是鍵值對組合。區別：object的鍵的類型是字符串；map的鍵的類型能夠是任意類型；另外，object獲取鍵值使用Object.keys（返回數組）Map獲取鍵值使用map變量.keys() (返回迭代器)。

35. 說說H5手機端的適配的幾種方案

[參考答案]

1. js實現一

(function (doc, win) {
  var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
          var clientWidth = docEl.clientWidth;
          var fontSize = 20;
          docEl.style.fontSize = fontSize + 'px';
          var docStyles = getComputedStyle(docEl);
          var realFontSize = parseFloat(docStyles.fontSize);
          var scale = realFontSize / fontSize;
          console.log("realFontSize: " + realFontSize + ", scale: " + scale);
          fontSize = clientWidth / 750 * 20;
          if(isIphoneX()) fontSize = 19;
          fontSize = fontSize / scale;
          docEl.style.fontSize = fontSize + 'px';
      };
  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);

  // iphoneX判斷
  function isIphoneX(){
      return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
  }

})(document, window);
複製代碼

1. css @media媒介查詢(蘇寧易購實現方式)
1. 手淘的lib-flexible實現方式

36. 用js如何去除url中的#號

[參考答案]

情景一: 單純將hash路由改變成history路由便可去除hash的#號,此時須要服務器作路由重定向,好比nginx, node重定向
情景二: 單純去除#

function dropHash(url) {
  let i = url.indexOf('#')
  return i > -1 ? url.replace(/#/g, '') : url
}
複製代碼

37. Redux狀態管理器和變量掛載到window中有什麼區別

[參考答案] redux經過制定一套嚴格的規範，提供一種規範式的api和使用方式來處理狀態, 適合大型項目和多人協同開發的項目，雖然代碼編寫有些繁複，但總體數據流向清楚，便於問題跟蹤和後期維護,而且支持狀態回溯.而window的變量管理比較混亂,維護不當還會形成變量污染,不適合中大型項目的開發.

38. webpack和gulp的優缺點

[參考答案]

	gulp	webpack
定位	基於任務流的自動化打包工具	模塊化打包工具
優勢	易於學習和理解, 適合多頁面應用開發	能夠模塊化的打包任何資源,適配任何模塊系統,適合SPA單頁應用的開發
缺點	不太適合單頁或者自定義模塊的開發	學習成本低,配置複雜,經過babel編譯後的js代碼打包後體積過大

39. 說說jsonp爲何不支持post方法

[參考答案]

瀏覽器的同源策略限制從一個源加載的文檔或腳本與來自另外一個源的資源進行交互,jsonp跨域本質上是經過動態script標籤, 本質上也是對靜態資源的訪問,因此只能是get請求

40. 說說棧和堆的區別, 垃圾回收時棧和堆的區別以及棧和堆具體怎麼存儲

[參考答案]

1.從定義和存取方式上說:

棧stack爲自動分配的內存空間, 它由系統自動釋放, 特色是"LIFO，即後進先出（Last in, first out）"。數據存儲時只能從頂部逐個存入，取出時也需從頂部逐個取出,js的基本數據類型(Undefined、Null、Boolean、Number和String). 基本類型在內存中佔據空間小、大小固定，他們的值保存在棧空間，按值訪問
堆heap是動態分配的內存，大小不定也不會自動釋放. 特色是"無序"的key-value"鍵值對"存儲方式. 好比js的對象,數組. 引用類型佔據空間大、大小不固定, 棧內存中存放地址指向堆(heap)內存中的對象。是按引用訪問的

2.從js數據的存取過程上說:

棧內存中存放的是對象的訪問地址，在堆內存中爲這個值分配空間。這個值大小不固定，所以不能把它們保存到棧內存中。但內存地址大小的固定的，所以能夠將內存地址保存在棧內存中。這樣，當查詢引用類型的變量時，先從棧中讀取內存地址，而後再經過地址找到堆中的值。

3.棧內存和堆內存與垃圾回收機制的聯繫和清除方式:

垃圾回收機制: JavaScript中有自動垃圾回收機制，會經過標記清除的算法識別哪些變量對象再也不使用，對其進行銷燬。開發者也可在代碼中手動設置變量值爲null（xxx = null）進行清除，讓引用鏈斷開，以便下一次垃圾回收時有效回收。其次, 函數執行完成後，函數局部環境聲明的變量再也不須要時，就會被垃圾回收銷燬（理想的狀況下，閉包會阻止這一過程）。全局環境只有頁面退出時纔會出棧，解除變量引用。因此工程師們應儘可能避免在全局環境中建立全局變量，如需使用，必定要在不須要時手動標記清除，將內存釋放。
棧內存和堆內存一般與垃圾回收機制有關。之因此會區分棧內存和堆內存,目的是使程序運行時佔用的內存最小。當某個方法執行時，都會創建本身的內存棧，在這個方法內定義的變量將會逐個放入棧內存裏，隨着方法的執行結束，這個方法的內存棧也將天然銷燬了。所以，全部在方法中定義的變量都是放在棧內存中的；當咱們建立一個對象時，對象會被保存到運行時數據區中，以便反覆利用（由於對象的建立內存開銷較大），這個運行時數據區就是堆內存。堆內存中的對象不會隨方法的結束而銷燬，即便方法結束後，這個對象還可能被另外一個引用變量所引用，則這個對象依然不會被銷燬，只有當一個對象沒有任何引用變量引用它時，系統的垃圾回收機制纔會在循環收集的過程當中回收。

41. ES6中let塊做用域是怎麼實現的

[參考答案]

能夠經過閉包自執行函數實現塊做用域

42. 介紹排序算法和快排原理

[參考答案]

排序算法有:冒泡排序, 希爾排序, 快速排序, 插入排序, 歸併排序, 堆排序, 桶排序等.

快速排序原理:

經過一趟排序將要排序的數據分割成獨立的兩部分，其中一部分的全部數據都比另一部分的全部數據都要小，而後再按此方法對這兩部分數據分別進行快速排序，整個排序過程能夠遞歸進行，以此達到整個數據變成有序序列。

43. 說說node文件查找的優先級

[參考答案] 從文件模塊緩存中加載 > 從原生模塊加載 > 從文件加載

44. WebView和原生是如何通訊的

[參考答案]

使用Android原生的JavascriptInterface來進行js和java的通訊
UrlRouter(經過內部實現的框架去攔截前端寫的url，若是符合UrlRouter的協議的話，就執行相應的邏輯)
WebView 中的 prompt/console/alert 攔截，一般使用 prompt避免反作用
API注入，經過Native獲取JavaScript環境上下文，並直接在上面添加方法，使js能夠直接調用

45. pm2怎麼作進程管理，如何解決進程奔潰問題

[參考答案]

經過pm2 start去開啓一個進程, pm2 stop去中止某個進程, pm2 list去查看進程列表, pm2 monit查看每一個進程的cpu使用狀況, pm2 restart重啓指定應用等
進程奔潰能夠用過設置自動重啓或者限制應用運行內存max_memory_restart(最大內存限制數，超出自動重啓)

46. 直接給一個數組項賦值，Vue 能檢測到變化嗎,爲何？

[參考答案] vue中的數組的監聽不是經過Object.defineProperty來實現的，是經過對'push', 'pop','shift','unshift','splice', 'sort','reverse'等改變數組自己的方法來通知監聽的,因此直接給數組某一項賦值沒法監聽到變化,解決方案以下:

用vue的set方法改變數組或者對象
用改變數組自己的方法如splice, pop, shift等
用深拷貝,解構運算符

總結

面試只是進入公司的第一步,如何走好它,須要自身的不斷努力和學習,因此不要沉迷於走捷徑,踏踏實實的學技術吧. 年前筆者會總結一下筆者2019年的技術成長與規劃, 但願能和你們繼續分享真正的前端技術.

最後

若是想了解更多H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰，歡迎在公衆號《趣談前端》加入咱們一塊兒學習討論，共同探索前端的邊界。

招聘

年後公司因擴招須要2-3名熟悉react的工程師,座標上海, 有意者請聯繫我哈~

2019年,盤點一些我出過的前端面試題以及對求職者的建議

前言

若是公司的前端是以vue爲主的,那麼你可能須要熟悉以下技能和知識點

若是公司的前端是以React爲主的,那麼你可能須要熟悉以下技能和知識點

正文

1. 介紹一下ES6的新特性

2. 介紹Promise以及Promise的幾種狀態

3. 談談你對閉包的理解及其優缺點

優勢

缺點

4. React的生命週期

5. componentWillReceiveProps的觸發條件是什麼

6. vue中v-if和v-show的區別

7. 小程序裏面開頁面最多多少

8. 取數組的最大值（ES五、ES6）

9. http併發請求資源數上限

10. 如何優化網站的SEO

11. 介紹下HTTP狀態碼, 40三、30一、302分別表明什麼

12. RESTful經常使用的方法和介紹

12. React16.3對生命週期的改變

13. 介紹React高階組件

14. 緩存相關的HTTP請求頭

15. 如何優化用戶體驗

16. 對PWA的瞭解

17. 介紹下跨域

18. Access-Control-Allow-Origin在服務端哪裏配置

19. csrf跨站攻擊怎麼解決

20. 用js寫一個數組扁平化函數

21. Promise和Callback有什麼區別

22. 如何實現高度自適應

23. cookie, session, storage的區別和聯繫

24. 說說你作過的前端性能優化（JS原生,React, vue）

25. 對web安全的理解

26. 用js實現數組隨機取數，每次返回的值都不同

27. 頁面上有1萬個button如何綁定事件

28. base64爲何能提高性能以及它的缺點是什麼

29. 介紹webp圖片文件格式

30. react-router裏的Link標籤和a標籤有什麼區別

31. 介紹一下函數柯里化,並寫一個柯里化函數

32. 介紹一下從輸入URL到頁面加載全過程

33. 說說bind、call、apply的區別

call和apply的共同點

call和apply的區別

bind

34. ES6中的map和原生的對象有什麼區別

35. 說說H5手機端的適配的幾種方案

36. 用js如何去除url中的#號

37. Redux狀態管理器和變量掛載到window中有什麼區別

38. webpack和gulp的優缺點

39. 說說jsonp爲何不支持post方法

40. 說說棧和堆的區別, 垃圾回收時棧和堆的區別以及棧和堆具體怎麼存儲

1.從定義和存取方式上說:

2.從js數據的存取過程上說:

3.棧內存和堆內存與垃圾回收機制的聯繫和清除方式:

41. ES6中let塊做用域是怎麼實現的

42. 介紹排序算法和快排原理

快速排序原理:

43. 說說node文件查找的優先級

44. WebView和原生是如何通訊的

45. pm2怎麼作進程管理，如何解決進程奔潰問題

46. 直接給一個數組項賦值，Vue 能檢測到變化嗎,爲何？

總結

最後

招聘

更多推薦