Create by jsliang on 2019-2-11 15:30:34

Recently revised in 2019-3-17 21:30:36

Hello 小伙伴們，如果覺得本文還不錯，記得給個 star ， 小伙伴們的 star 是我持續(xù)更新的動力！GitHub 地址

并不是只有特定的季節(jié)才能跑路，只因為人跑得多了，這條路就定下來了。

金三銀四跳槽季，jsliang 于 2019年2月11日 寫下了這篇文章，開始準備自己的面試之旅。

至 2019年3月17日 為止，jsliang 搭建出個人的面試知識體系，海量地翻閱了一些前輩留下的資料，結(jié)合個人需求進行了幾場面試，從而進一步完善該文章并進行了發(fā)表，希望對準備跳槽或者正在跳槽中的小伙伴有所幫助。

一 目錄

不折騰的前端，和咸魚有什么區(qū)別

目錄
一 目錄
二 前言
?2.1 自我介紹
?2.2 跳槽原委
?2.3 進擊目標
?2.4 開篇點題
三 HTML
?3.1 HTML 學(xué)習(xí)推薦
?3.2 HTML 語義化
?3.3 HTML5 新標簽
?3.4 常見瀏覽器及其內(nèi)核
?3.5 cookies、session、sessionStorage、localStorage
四 CSS
?4.1 CSS 學(xué)習(xí)推薦
?4.2 CSS reset
?4.3 CSS 盒模型
?4.4 CSS 單位
?4.5 CSS 選擇器
?4.6 CSS 常見布局
?4.7 CSS3 新特性
?4.8 BFC
?4.9 行內(nèi)元素和塊級元素
?4.10 行內(nèi)樣式、內(nèi)嵌式、鏈接式以及導(dǎo)入式
?4.11 水平垂直居中
五 JavaScript
?5.1 JS 學(xué)習(xí)推薦
?5.2 JS 引用方式
?5.3 原型與原型鏈
?5.4 作用域與閉包
?5.5 淺拷貝與深拷貝
?5.6 模塊化與組件化
?5.7 面向?qū)ο笈c面向過程
?5.8 防抖與節(jié)流
?5.9 ES6
?5.10 數(shù)組操作
六 Vue
?6.1 MVVM
?6.2 生命周期
?6.3 雙向數(shù)據(jù)綁定
?6.4 Virtual DOM
?6.5 template 編譯
?6.6 key
?6.7 nextTick
?6.8 父子組件通訊
七 微信小程序
?7.1 文件主要目錄及文件作用
?7.2 微信小程序生命周期
?7.3 如何封裝數(shù)據(jù)請求
?7.4 頁面數(shù)據(jù)傳遞
?7.5 加載性能優(yōu)化的方法
?7.6 微信小程序與原生 APP、Vue、H5 差異
?7.7 微信小程序原理
八 瀏覽器
?8.1 瀏覽器解析 URL
?8.2 重繪與回流
?8.3 數(shù)據(jù)存儲
?8.4 內(nèi)存管理與垃圾回收
?8.5 內(nèi)存泄漏
九 網(wǎng)絡(luò)協(xié)議
?9.1 網(wǎng)絡(luò)分層
?9.2 HTTP/HTTPS
?9.3 HTTP 狀態(tài)碼
?9.4 TCP 三次握手與四次揮手
十 性能優(yōu)化
?10.1 HTML 優(yōu)化
?10.2 CSS 優(yōu)化
?10.3 JavaScript 優(yōu)化
十一 算法
十二 其他
十三 總結(jié)
十四 參考文獻
?14.1 關(guān)于面試
?14.2 關(guān)于 HTML
?14.3 關(guān)于 CSS
?14.4 關(guān)于 JS
?14.5 關(guān)于其他
十五 網(wǎng)友反饋

二 前言

返回目錄

請時刻準備好自己的簡歷，不管是互聯(lián)網(wǎng)經(jīng)濟不佳面臨裁員，還是因為公司內(nèi)部斗爭嚴重心亂如麻，還是因為厭倦了目前的一切……只有隨時更新自己，把自己的簡歷準備好，你才知道哪一刻跑路是最佳選擇。

2.1 自我介紹

返回目錄

Hello 小伙伴們好，我叫梁峻榮，網(wǎng)名叫 jsliang，由于崇拜前端大佬 技術(shù)胖（jspang）的原因，又因為自己學(xué)的是前端（JavaScript），所以給自己取了個 jsliang（JavaScriptLiang） 的網(wǎng)名，希望自己能通過建立自己的前端知識體系，從而在前端路上走得更遠。并將自己的經(jīng)驗分享給小伙伴，攜手小伙伴們一起前行。

下面是講講個人故事：

首先，jsliang 高考后的暑期就聽大學(xué)師兄的建議，開始學(xué)習(xí)編程，那時候?qū)W習(xí)了 C 語言，覺得世界上最神奇的事情不過如此，敲兩下鍵盤，按下回車，電腦就會一閃一閃地響應(yīng)我們！于是在大學(xué)的時候，陸陸續(xù)續(xù)學(xué)過 C、C#、.Net 等……。

-_-|| 由于學(xué)得都是基礎(chǔ)，又都還給老師了，在這里就不多累述了。

然后，在大二就開始接觸 HTML，那時候選修了個《網(wǎng)頁設(shè)計基礎(chǔ)》，跟著老師做了個只有幾個頁面的靜態(tài)網(wǎng)站。在大三的時候，參加了學(xué)校的特訓(xùn)班，分角色按流程從頭到尾做了個包含角色管理、購物等功能的網(wǎng)站。同時，由于在特訓(xùn)班的時候，看到后端使用 ThinkPHP（簡稱 TP），覺得蠻不錯的，于是自己搗鼓，使用 TP 3.2.3 + Bootstrap 3 + MySQL 打造了自己的博客（已下線）。

接著，由于選修了門 Node.js 的課，所以也跟著大佬的步伐接觸了下 Vue、Koa 這些，那時候?qū)?npm 等諸多不懂，為了折騰這個，我的前端世界自此打開了個大門。

最后，我在自己的畢業(yè)設(shè)計中使用 Node.js + Vue + ElementUI + MongoDB 打造了個校園外賣、快遞代拿等功能的社區(qū)單頁應(yīng)用。

在 2018 年 5 月的時候，家里催促，于是直接出來面試。不像其他大佬的畢業(yè)等于失業(yè)，很幸運地 jsliang 面試第一家就給了 offer，于是就進了這家公司，那時候感覺自己前面的大學(xué)生活白過了，只懂 ES5、jQuery、HTML/HTML5、CSS/CSS3 的皮毛。

在熟悉了三個月的業(yè)務(wù)，公司給的任務(wù)能順利完成后，我覺得自己不夠努力：外面的前端翻天覆地，我的技術(shù)卻只是 jQuery is all！

于是 2018 年 8 月，jsliang 開始寫 Markdown，將 5 月份到 8 月份記錄到 Word 文檔上的筆記整理成了 jsliang 的文檔庫，并在 jsliang 的掘金 上發(fā)表了第一篇文章。

18 年 8 月至今，jsliang 大致經(jīng)歷了以下這些：

學(xué) Webpack，并用 Webpack 構(gòu)建一個多頁面配置。然后幸運的是，剛好碰到公司的一個仿站任務(wù)，于是整個前端小組直接用了我的 Webpack + jQuery + VS Code 的 Live Share 套路進行協(xié)同開發(fā)！

學(xué) 微信小程序，并將它應(yīng)用到電信開發(fā)的微信小程序項目翼小微中。

學(xué) ECharts 報表，并用它做了個 Vue + ECharts 的報表，來展示愛音樂公司的運營數(shù)據(jù)。

學(xué) Node，然后搭了個企業(yè)網(wǎng)站（company.jsliang.top），并寫了篇小文章（目前最高成就，獲得了 1100 多贊）。

學(xué) Vue，由于之前學(xué)的 Vue，在工作上有好多沒有，逐漸淡忘了，所以從基礎(chǔ)開始，準備寫一套《Vue 從 0 到 1》。

以上，就是 jsliang 的編程生涯。

今兒，在這里寫寫 jsliang 為了跳槽，根據(jù)個人想法進行的一些前端面試資料整理，小伙伴們覺得不錯的點個贊或者去 GitHub 點個 star，覺得有誤請指出，謝謝~

2.2 跳槽原委

返回目錄

馬老板曾經(jīng)說過，跳槽有兩個原因：

錢沒給到位。

心被委屈了。

首先，如果非要給 jsliang 我自己的跳槽定個位，那肯定是錢沒給到位，勞動與產(chǎn)出不成正比。在我 2018 年 5 月入職前，與人事的交談中了解到每年的 8 月和 2 月可以提薪，當初的技術(shù)棧是：HTML、CSS、ES5。

然后，2018 年 6 月到 2019 年 1 月，學(xué)習(xí)并應(yīng)用到工作中的技術(shù)有：

jQuery

Webpack

JSP

微信小程序

Vue

ECharts

其中 2018 年 8 月剛轉(zhuǎn)正，也不敢說自己技術(shù)進步很大，也不敢說自己項目貢獻很大，為公司謀了多大利益，所以沒有提薪想法。

2019 年 1 月底感覺自己項目也做了，凌晨 4/5/6 點的體育西路也看過了，技術(shù)也提升了，于是跟人事交談，期望 2 月能加薪，人事表示年終述職演講得好的給提薪，2 月開工的時候表示提薪名單沒我份……

你沒看錯，提薪全靠 PPT。PPT 里提高了不給，沒提就是沒有。

當初想法很簡單，你隨便加個 5/600 我也滿足了。

最后，jsliang 曾跟項目總監(jiān)私下談話，建議可以發(fā)展一些新產(chǎn)品，這樣公司或許能獲取一些新收入，我也可以進一步挑戰(zhàn)我的技術(shù)。但是，由于我司是個老牌子公司，并且大部分依賴于接手電信項目進行擴張……

enm...所以心也委屈了。

在 2018 的努力下，GitHub 破 600 近 700 star，掘金破 10 萬閱讀量，3000 粉絲：

GitHub 見證：點擊查看

掘金見證：點擊查看

2.3 進擊目標

返回目錄

目標城市：廣州

目標薪資：10K - 15K

目標技術(shù)：

1. 熟悉 HTML/HTML5、CSS/CSS3、ES5/ES6。
2. 了解 OOP 概念，并嘗試在工作中使用過 OOP 技巧。
3. 對 MVC/MVVM 架構(gòu)有一定了解，如有 Vue/React/Angular 或者 微信小程序開發(fā)經(jīng)驗更佳。
4. 使用過 Bootstrap 或者 ElementUI 等 UI 庫，并對前端 UI 庫有一定的個人理解。
5. 了解 Git、Webpack 等工具。
6. 對 Java、Node.js 等后端編程有一定了解。
7. 一年及以上工作經(jīng)驗。

廣州前端分析：

廣州 13K 薪資要求：

2/3 年工作經(jīng)驗。

熟悉 OOP，并能在工作中使用，且能獨立開發(fā)插件等……

你可以不懂 Vue，但 React 你必須得會！

廣州 15k+ 薪資要求：

5 年+ 工作經(jīng)驗。

全能，懂前端，熟悉后端，能寫文檔……

帶領(lǐng)過小隊進行開發(fā)。

廣州異常偏科公司：

要求必須懂后端。

要求必須懂安卓或者 IOS 開發(fā)。

要求必須精通 jQuery 全家桶(jQuery UI、jQuery Mobile 等……)。

該分析數(shù)據(jù)來自 Boss 直聘

2.4 開篇點題

返回目錄

本文的知識點將涉及 HTML、CSS、JS、HTTP、Vue、Webpack、打包工具、性能優(yōu)化等，沒有前置條件，看得懂可以瞅瞅復(fù)習(xí)下，看不懂可以瞅瞅?qū)W習(xí)下。

關(guān)于面試，在這記下慕課網(wǎng)視頻看到的，個人非常認同的三個問答：

問：拿到一個面試題，第一時間看到什么？ 答：考點

問：如何看待網(wǎng)上搜出來的永遠看不完的題海？ 答：不變應(yīng)萬變

問：如何對待面試題？ 答：題目到知識再到題目

然后在復(fù)習(xí)面試題的過程中，個人有些小看法：

個人感言一：為什么我總是比不上別人優(yōu)秀？

當編寫業(yè)務(wù)代碼中，碰到某個業(yè)務(wù) bug 時，我會習(xí)慣性地百度這個業(yè)務(wù) bug，看看網(wǎng)友是怎么解決的。但是，學(xué)霸級的程序猿，會多走一步，他們會思考產(chǎn)生這個業(yè)務(wù) bug 的底層原因是什么，下次碰到類似的是如何應(yīng)用該技術(shù)解決。所以，日積月累，我的確比不上人家了。

個人感言二：辭職并不是件便捷的事。

way 1：面試成功，跟自己公司遞辭呈，走流程，同時跟對面 hr 申請一個月后入職。

way 2：面試成功，跟自己公司遞辭呈，詢問能不能快速離職，收到回復(fù)跟對面 hr 確認時間。【推薦】

way 3：先遞辭呈，同時面試，面試成功的，一律申請走完原公司一個月的流程之后的日子入職。

jsliang 于 2 月底拿到 offer 并遞交辭呈，3 月 - 4 月進入一個月倒計時，4 月第一周才能拿到離職證明。

最后在這里祝各位小伙伴能找到稱心如意的工作~

三 HTML

返回目錄

HTML 屬于結(jié)構(gòu)層，負責描繪出內(nèi)容的結(jié)構(gòu)。

CSS 屬于表示層，負責如何顯示有關(guān)內(nèi)容。

JavaScript 屬于行為層，負責內(nèi)容應(yīng)如何對事件做出反應(yīng)。

3.1 HTML 學(xué)習(xí)推薦

返回目錄

《前端工程師手冊》

《HTML 教程- (HTML5 標準) - 菜鳥教程》

3.2 HTML 語義化

返回目錄

語義化的含義就是用正確的標簽做正確的事情，HTML 語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，它有如下優(yōu)點：

便于對瀏覽器、搜索引擎解析；

便于盲人瀏覽網(wǎng)頁；

便于閱讀源代碼的人對網(wǎng)站進行分開，維護和理解；

簡單來說，能用

、