2020年終總結——前端入坑四年，今年實慘

寫在前面

2020最後一天，我在KFC寫總結。前幾天就想寫了，嗯，我是拖延症患者。😔 2020年，換工做、被裁人，體檢一堆問題... 回顧我31年的人生，沒有重點小學、沒有重點初高中、專科學歷、沒有獲獎經歷、沒有特殊技能、學習能力差、英語很差、拖延.... 加上如今算大齡程序員了吧，彷佛個人人生拿了一把爛牌，但是我仍是想贏啊。

我怎麼走上了前端這條路？

11年畢業後，在工廠裏打工，作技術員，跟IT無關。最好的4年光陰，感受錯付了，可是不後悔，每一個人都有不一樣的經歷。而後14年的時候，以爲這麼下去我能看見我退休甚至死亡的時刻。因此我以爲我應該學點什麼？好讓個人人生稍微有點不一樣。 因而我買了大學接觸過的單片機，想作硬件開發工程師哦。

因此要學彙編、學C（事實上我沒學好，也能作個計時器啥的...） ，而後放棄了，這個不太好找工做。 而後學Java去了（由於上網找C語言資料的時候），學了一段時間後，大概到SSH框架吧，15年那時候來過一次杭州，面了一個作Java開發的，給了3500的工資（沒去，那時候正在跟女友談婚階段了）。 後面16年初的時候接觸了web前端（由於JSP要寫HTML，查資料的時候web前端培訓的廣告挺火的），慎重考慮後，16年6月辭了工做（已經結婚了，老婆也支持），來杭州報了一個線下的培訓班學習4個月，挺貴的，我仍是以爲本身沒學好。而後10月底的時候拿了個7K的offer，感受月薪過萬有但願了。 我就正式入坑了...^_^

四年的工做經歷

第一份工做

16年10月份找工做，面了4家公司拿了2個offer，選擇了這家作醫療檢驗的。工做了差很少三年。一開始去公司，改.net項目樣式。後面先後端分離用JQ寫項目。而後用Vue全家桶來作項目。這個階段技術成長了不少。 也組建了一個8人的前端團隊（特別感謝老闆的信任，當初我買房還找他借了20多萬週轉，如今還欠着這我的情呢）。後面有想法作了一些工程化的工做，對於前端基建方面沒有任何認知，團隊管理方面也沒有管理知識的支撐。

第二份工做

出於提高本身的目的來到這家公司的，結果跟我想的不太同樣（雖然公司大了些，開發跟第一家公司也差很少），這一年成長太少了。好在學了算法。參加了早早聊，打開了視野。也在團隊中也作了幾回分享。

第三份工做

本打算好好工做的，奈何天不遂人願，被裁了（爲了融資擴招，而後裁人，找工做真的要擦亮眼啊）。三個多月的時間，簡歷被搞花了....

第四份工做（還在面試中......）

可能會選擇去大一點的團隊吧。

2020，我到底幹了啥？

工做

7月份以前，主要仍是寫業務代碼，不過從年初到7月，大概面試了有小百人吧，這個對我來講收穫仍是蠻大的。接觸了從應屆到工做10年工做經驗、大小廠的各類前端大小朋友。最大的感受就是：

• 工做年限不等於工做能力
• 平臺牛不表明你牛
• 基礎任何階段都不能拉下

7月份換工做的時候也不是我本意，原本是申請回到總部辦公的。因爲其餘緣由變成了離職。7月底的時候來了新公司（當時Scott建議我去丁香園的，考慮距離問題選擇了這家），而後11月被裁了（爲了融資擴招，可憐我試用期還沒過呢）。心裏委屈，畢竟是想好好上班的...
11月到如今，面試了9家大型互聯網公司，暫時沒有拿到offer，可是頗有信心，我必定能夠。 這個月面試的感觸：

• 基礎知識要夯實
• 要有前端廣闊的視野，後端要有必定的認知
• 要有某一方向的技術深度
• 性能優化必問
• 算法必定要刷

學習

這段時間刷了不少大廠面試題，作了一個整理，也是爲了方便本身複習，有空就能夠拿出來刷一刷。

HTML 和 CSS

• 你如何理解 HTML 結構的語義化？
• 談談之前端角度出發作好 SEO 須要考慮什麼？
• 有哪項方式能夠對一個 DOM 設置它的 CSS 樣式？
• CSS 都有哪些選擇器？
• CSS 中能夠經過哪些屬性定義，使得一個 DOM 元素不顯示在瀏覽器可視範圍內？
• 超連接訪問事後 hover 樣式就不出現的問題是什麼？如何解決？
• 什麼是 Css Hack？ie6,7,8 的 hack 分別是什麼？
• 請用 Css 寫一個簡單的幻燈片效果頁面
• 行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？
• 什麼是外邊距重疊？重疊的結果是什麼

......

JS基礎

• call 和 apply 的區別
• b 繼承 a 的方法
• JavaScript this 指針、閉包、做用域
• 事件委託是什麼
• 閉包是什麼，有什麼特性，對頁面有什麼影響
• 如何阻止事件冒泡和默認事件
• 添加 刪除 替換 插入到某個接點的方法
• javascript 的本地對象，內置對象和宿主對象
• document load 和 document ready 的區別
• 「==」和「===」的不一樣
• javascript 的同源策略
• 編寫一個數組去重的方法

Ajax

• Ajax 是什麼? 如何建立一個 Ajax？
• 同步和異步的區別?
• 如何解決跨域問題?
• 頁面編碼和被請求的資源編碼若是不一致如何處理？
• 簡述 ajax 的過程。
• 闡述一下異步加載。
• 請解釋一下 JavaScript 的同源策略。
• GET 和 POST 的區別，什麼時候使用 POST？
• Ajax 的最大的特色是什麼。
• ajax 請求的時候 get 和 post 方式的區別
• 解釋 jsonp 的原理，以及爲何不是真正的 ajax
• http 常見的狀態碼有那些？分別表明是什麼意思？
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

......

JS高級

• JQuery 一個對象能夠同時綁定多個事件，這是如何實現的？
• 知道什麼是 webkit 麼? 知道怎麼用瀏覽器的各類工具來調試和 debug 代碼麼?
• 如何測試前端代碼麼? 知道 BDD, TDD, Unit Test 麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)
• 前端 templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?
• 簡述一下 Handlebars 的基本用法？
• 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
• 用 js 實現千位分隔符?
• 檢測瀏覽器版本版本有哪些方式？
• 咱們給一個 dom 同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來講下會執
• 行幾回事件，而後會先執行冒泡仍是捕獲

......

Vue

• vuex 有哪幾種屬性？
• vuex 的 State 特性是？
• vuex 的 Getter 特性是？
• vuex 的 Mutation 特性是？
• Vue.js 中 ajax 請求代碼應該寫在組件的 methods 中仍是 vuex 的 actions 中？
• 什麼是 MVVM？
• mvvm 和 mvc 區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
• vue 的優勢是什麼？
• 組件之間的傳值？
• vue.cli 中怎樣使用自定義的組件？有遇到過哪些問題嗎？
• vue 如何實現按需加載配合 webpack 設置
• Vue 中引入組件的步驟?
• 指令 v-el 的做用是什麼?
• 在 Vue 中使用插件的步驟
• vue 生命週期的做用是什麼
• vue 生命週期總共有幾個階段
• 第一次頁面加載會觸發哪幾個鉤子
• DOM 渲染在 哪一個週期中就已經完成
• 簡單描述每一個週期具體適合哪些場

瀏覽器

• 跨標籤頁通信
• 瀏覽器架構
• 瀏覽器下事件循環(Event Loop)
• 從輸入 url 到展現的過程
• 重繪與迴流
• 存儲
• Web Worker
• V8 垃圾回收機制
• 內存泄露
• reflow(迴流)和 repaint(重繪)優化
• 如何減小重繪和迴流?
• 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？
• localStorage 與 sessionStorage 與 cookie 的區別總結
• 瀏覽器如何阻止事件傳播，阻止默認行爲

生活

平平淡淡，兩個姑娘愈來愈漂亮了 這個月沒上班，接送大姑娘上下學、去培訓班。如今的小孩子要學的可真多，我3歲多的時候應該在捏泥巴吧。 遺憾的是，由於疫情的緣由沒能帶老婆孩子出去玩玩，明年補上吧。

2021，必定會更好的

許多事情要提上日程了，健身、英語、算法、理財、旅遊、裝修........想作的事情不少。

• [ ] 多寫一些總結，多覆盤【每個月輸出2篇文檔】
• [ ] 算法【每日打卡，要弄懂】
• [ ] 一次旅遊 【希望疫情完全過去吧】
• [ ] 讀書【儘可能每個月1本吧】
• [ ] 裝修【房子交付要裝修了】
• [ ] 健身 【動起來，體檢好幾項都不行，得關注一下身體健康了】
• [ ] 英語【背背單詞】
• [ ] 理財 【暫定吧】
• [ ] ....

2021年，走的慢一點不要緊，千萬不能停！將來必定會更好的。

最後

前端工做四年多點了，好在沒有放棄。雖然離優秀還很遠，但貴在一直堅持。技術慢慢在提高、視野愈來愈開闊、薪水也比剛作前端時多了3倍多，我無法跟那些優秀的人比，我只能跟本身比，今天的我比昨天的我進步了一點就很開心了。 2021年，必定要讀完的3本書《刻意練習》、《覆盤》、《戒了吧，拖延症》。 願本身愈來愈好。