前端面試跳槽總結

1、面試準備

一、 css,html,js基本功知識

二、 javascript面向對象編程開發

• es6和es5繼承區別

• es6語法更加優雅簡單，可是瀏覽器不支持
• es5寫法和操做都比較麻煩，但兼容性好
• 詳細比較 www.jianshu.com/p/342966fdf…
• javascript原型鏈和異步的講解

• var,let,const的區別

  • 使用var聲明的變量，其做用域爲該語句所在的函數內，且存在變量提高現象；
  • 使用let聲明的變量，其做用域爲該語句所在的代碼塊內，不存在變量提高；
  • 使用const聲明的是常量，在後面出現的代碼中不能再修改該常量的值。

三、 構建工具gulp和webpack的區別

• 詳細比較 www.jianshu.com/p/b1022d224…

• Gulp

Gulp就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。說的形象點，「Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。」

• Webpack

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS 等。

四、 瞭解css預編譯器：styles/less/sass

* 基於css的，能讓css也有一種編程語言範。解決了css的諸多問題，如css模塊化、沒法嵌套書寫、沒有變量。
複製代碼

五、 熟悉一種mvvm的開發模式。例如vue,熟悉vue生命週期，鉤子，等含義

• vue官網 cn.vuejs.org/v2/guide/
• vue生命週期 segmentfault.com/a/119000000…
• vue-router segmentfault.com/a/119000000…
• vuex segmentfault.com/a/119000000…

六、 瞭解而且熟悉前端組件化開發流程和模式

七、 防抖和節流實現和區別

• 詳細比較 blog.csdn.net/crystal6918…

• 防抖

將幾回操做合併爲一此操做進行。原理是維護一個計時器，規定在delay時間後觸發函數，可是在delay時間內再次觸發的話，就會取消以前的計時器而從新設置。這樣一來，只有最後一次操做能被觸發。

• 節流

使得必定時間內只觸發一次函數。 它和防抖動最大的區別就是，節流函數無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而防抖動只是在最後一次事件後才觸發一次函數。 原理是經過判斷是否到達必定時間來觸發函數，若沒到規定時間則使用計時器延後，而下一次事件則會從新設定計時器。

八、預加載三種區別。asyns、defer、preload

• zcfy.cc/article/422…

九、jquery 開發流程

• www.cnblogs.com/yoomin/p/53…

十、git學習 progit.bootcss.com/

2、一面準備

1. css頁面佈局

• 三列布局五種方法: www.cnblogs.com/chengzp/p/l…
• 兩列布局： www.bestvist.com/2017/10/14/…
• 清除浮動方法：segmentfault.com/a/119000000…

2. css盒子模型

• css盒子模型 www.cnblogs.com/chengzp/p/c…
• 邊距重疊問題解決方案.blog.csdn.net/qq_24235325…

3. DOM的事件類

• DOM事件類總結： www.cnblogs.com/chengzp/p/d…

4. http協議

• http協議總結 www.cnblogs.com/chengzp/p/h…

5. 原型鏈

• 原型鏈總結 www.cnblogs.com/chengzp/p/p…

6. 類與繼承

• 類與繼承總結 www.cnblogs.com/chengzp/p/e…
• this?原型/原型鏈？繼承？閉包？zhuanlan.zhihu.com/p/28058983

7. 通訊類

• 同源策略

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，則瀏覽器的正常功能可能都會受到影響。能夠說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

同源策略，它是由Netscape提出的一個著名的安全策略。 如今全部支持JavaScript 的瀏覽器都會使用這個策略。 所謂同源是指，域名，協議，端口相同。 當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面 當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪一個頁面的， 即檢查是否同源，只有和百度同源的腳本纔會被執行。[1] 若是非同源，那麼在請求數據時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

• 跨域幾種方法
  • jsonp
  • postMessage
  • websocket
  • cors

8. 安全類

• csrf 跨站點訪問
• xss 在網頁注入腳本(js)
  • 慕課網視頻教程：www.imooc.com/learn/812

9. 算法

• 快速排序
• 所有排序
• 遞歸講解
• 遞歸樹

• for循環加遞歸調用順序： 先遞歸後for循壞，直到遞歸完才執行下一步操做；

• 數組轉化成遞歸樹

const jsonArr = [
    {name: 'a', id: 1, pid: 0},
    {name: 'b', id: 2, pid: 1},
    {name: 'c', id: 3, pid: 1},
    {name: 'd', id: 4, pid: 2},
    {name: 'e', id: 5, pid: 2}
]

function fn(data, pid = 0) {
    let result = []
    let temp
    for (let i = 0; i < data.length; i++) {
        if (data[i].pid === pid) {
            let obj = {
                'name': data[i].name,
                'id': data[i].id
            }
            result.push(obj)

            // 返回了一個result數組，先遞歸完，在for循壞
            temp = fn(data, data[i].id)
            // 若是數組大於0，就是他的子級
            if (temp.length > 0) {
                obj.children = temp
            }
        }
    }
    return result
}
複製代碼

• 樹對象變回數組

function resertJson(aryTreeObj, pid = 0) {
    var wrapper = [];
    if (ary.length < 1) return wrapper;

    for (var i = 0; i < ary.length; i++) {
        var item = ary[i];

        var obj = {
            name: item.name,
            id: item.id,
            pid: pid
        };
        wrapper.push(obj);

        if (item.children && item.children.length > 0) {
            resertJson(item.children, item.id);
        }
    }
    return wrapper;
}

複製代碼

二面

• 1. 瀏覽器的渲染機制

  • DOM：Document Object Model，瀏覽器將HTML解析成樹形的數據結構，簡稱DOM。
  • CSSOM：CSS Object Model，瀏覽器將CSS解析成樹形的數據結構，簡稱CSSOM。
  • Render Tree: DOM和CSSOM合併後生成Render Tree，以下圖：
  • Layout: 計算出Render Tree每一個節點的具體位置。
  • Painting：經過顯卡，將Layout後的節點內容分別呈現到屏幕上。
  • 詳細講解瀏覽器的渲染機制
  • 重排與重繪區別和解決方案

• 2. 緩存

  • 緩存總結