2022年Web前端開發流程和學習路線（詳盡版）

前言

前端側重於人機互動和使用者體驗，後端側重於業務邏輯和大規模資料處理。理論上，面向使用者的產品裡，所有問題（包括產品、設計、後端、甚至看不見的問題）的表現形式，都會暴露在前端，而只有部分問題（資料問題、計算問題、安全問題等）暴露在後端，這就意味著前端起到了至關重要的承載和連線作用。

前端技術的更新日新月異；前端框架的技術選型百家爭鳴；視覺審美的潮流不斷更替；視覺化效果酷炫無比；使用者的運營體系逐漸精細化；適老化、無障礙化、青少年人群的訴求浮出水面；智慧裝置的升級和適配無窮無盡。所有的這一切，對前端領域和前端同學就一個要求：要折騰，愛折騰，反覆折騰。

一、前端開發流程

需求評審

一般在做需求評審時，PRD裡只有互動稿，尚未有視覺稿。需要在評審結束並達成一致後，再輸出視覺稿。

1、需求分析：需求點逐一討論、需求合理性、互動評審、邏輯梳理，以及可能遺漏的部分。

提示：邏輯梳理的過程很花時間，貫穿開發始末。

2、涉及渠道/環境：

渠道和環境，往往是需求盲點，也是影響技術選型和開發進度的關鍵因素。

• App：App原生頁面、App內嵌H5、App內嵌小程式。
• 小程式：技術棧視角：小程式原生頁面、小程式內嵌H5、App內嵌小程式。
• 普通H5：微信H5、M站（即普通瀏覽器環境）
• B端：運營管理平臺等等

3、可行性分析：是否有技術上的實現難點，是否有其他的依賴條件。

資料來源：哪些是調介面，哪些是做成可設定，哪些是前端寫死；可設定的部分，是前端讀取，還是介面讀取然後返給前端。提示：可設定的靈活性與風險正相關。

異常流設計：容錯、容災、兜底、降級、回退機制、風險可控。prd一般只寫了正常流的邏輯，異常流往往需要研發同學配合做全盤考慮。

6、需求變更：如有需求不明確、改需求、加需求、砍需求、加時間、改時間、加人力等等，需要提前預判風險。

視覺評審

1、進度跟進：視覺稿是分批交付，還是一次性給到？這是要首先考慮的。

按照歷史經驗，前端專案進度的延誤，有一半的概率依賴於視覺稿的進度；因為一個新頁面的開發，前端有30%~50%的工作在做頁面構建。

2、視覺稿的檔案格式：

• Sketch 原型設計軟體：.sketch 格式。一般用來畫視覺稿。
• Figma 原型設計軟體：.fig 格式。
• Axure 原型設計軟體：：.rp 格式。Axure 一般用來畫互動稿。如果是輸出高保真的視覺稿，推薦用 Sketch 或 Figma。
• Photoshop 軟體： .psd 格式。專門做圖片處理。當然，有些CP外包人員的技能單一，喜歡用PS輸出視覺稿。
• Adobe Illustrator 軟體（簡稱AI軟體）：.ai格式。製作向量圖。
• Adobe After Effects（AE） 軟體：.aep 格式。製作動畫。

備註：Sketch 是Mac平臺獨有的原型設計軟體，最為知名和常見。Figma 是最近比較火的全平臺原型設計軟體，有取代 Sketch 的趨勢。

【劃重點】交付視覺稿時，需要視覺同學輸出「帶尺寸標註」的視覺規範檔案。

3、檢查需求：是否覆蓋需求和互動設計中的全部設計點。

4、檢查視覺規範：

• 樣式和配色，是否符合頁面和產品的整體風格。
• 尺寸規範：行動端的視覺稿寬度是750px。
• 排版、對齊、一致性。推薦閱讀書籍《寫個大家看的設計書》，瞭解基本的設計原則。
• 字型：字號大小（一般是12px以上，特別小的是10px以上）、字重（注意bold屬性值為700），以及有哪些特殊字型。尤其要注意字型的版權問題。

5、哪些圖是前端構建，哪些圖是寫死圖片資源，哪些是可設定；可設定的圖中，需要把每個元素做拆解，這個元素是合併到背景圖中，還是單獨切圖，還是讀取資料。

6、切圖格式：png（透明格式）、jpg

切圖的圖片大小，不要太大。行動端的大圖（比如幕簾彈窗的背景圖）建議不超過50kb，小圖建議不超過20kb。圖片在上傳之前，可以先在 https://tinypng.com/ 上進行壓縮。

7、複雜圖形、動畫的實現難度和實現方式，技術評估。詳見接下來要講的「技術選型」。

排期評估

1、排期一般包含這幾個要素：

• 開發時間：視覺構建時長、介面檔案（介面協定）交付時間、前後端聯調時間、自測時間
• 轉體驗時間
• 轉測時間
• 上線時間（以及，需確認業務投放時間）

2、評估排期時，要根據視覺稿排期，不要根據互動稿排期。這是首先要強調的。一個新頁面的開發，前端有30%~50%的工作在做頁面構建。 只看互動稿的話，無法評估真實的開發工作量。

3、前端開發工作包括：概要設計、視覺構建、邏輯程式碼、前後端聯調、自測、轉體驗。每一項都要單獨拆解後評估時間，加在一起就是整體的排期。

4、排期時，要考慮其它的依賴因素：比如視覺稿延期、需求不明確、介面進度、測試進度，當然最重要的是上線進度。緊急專案，經常是根據上線時間倒推開發排期。

5、即將進入開發階段後，與測試部門協調測試資源，確認轉測時間；大型專案&重點專案，需要在需求評審階段，提前知會測試部門，讓其預留時間。

6、如果自己有在並行開發其他專案，則排期時需要給自己預留 buffer。並行開發兩個專案是家常便飯；但，這個專案在測試時，往往很難抽身去做別的專案，因為會一直被測試童鞋牽制。

7、開發排期：如果開發排期有變更，需要立即周知其他相關人員，尤其是要評估測試排期的風險。測試排期比開發排期 更難變更。

技術選型

技術選型千變萬化，百家爭鳴。這裡需要列出你所在部門的常用技術選型，並非市面上的技術棧羅列。

1、頁面開發框架：

（1）多端頁面：（小程式原生頁面、H5）

• Taro 框架（基於 React技術棧）

注2：有些業務，一開始只做H5，後來迭代時，要求做小程式原生頁面。這一點也要納入需求評估。

（2）H5頁面：Vue.js 框架、React 框架

（3）App端：

• Android端開發語言：Kotlin（新）、Java（老）
• iOS端開發語言：Swift（新）、Objective-C（老）

（4）B端開發，UI框架：

• React 技術棧：Ant Design（簡稱Antd）
• Vue 技術棧：Element、Ant Design Vue
• 較簡單的CSS響應式框架：Bootstrap

（5）Node.js後端開發框架：

• Koa：新一代 Node.js 框架。
• Egg.js：Egg 是在Koa基礎上進一步封裝的企業級Web開發框架。
• Express：比較老的Node.js 框架。

2、CSS前處理器：SASS

3、複雜圖形、動畫的實現難度和實現方式，技術評估：

• gif 動圖：儘量不用。因為檔案太大，且效果模糊。

• CSS3 動畫：適合簡單的、有規律的動畫。舉例：擺動的魚、京喜工廠

• Canvas：Canvas 動畫、小程式分享圖採用 Canvas 繪製

• 3D動畫：WebGL（Three.js 是 WebGL 的綜合庫）常見案例：太陽系

• 遊戲框架：Cocos 引擎

概要設計

• 需求背景及資源
• 風險評估
• 技術選型
• 專案結構設計
• 主要功能點邏輯設計
• 可延伸可複用設計
• 依賴介面
• 工作量拆解和排期

開發環節

1、程式碼設計：

（1）目錄結構設計、程式碼風格

（2）公共元件、工具類設計：確保可複用、高內聚低耦合的原則。哪些可以複用京喜平臺的公共元件，哪些需要自己單獨寫 components、utils。

（3）彈窗設計：如果一個頁面有多個彈窗，建議先設計一個抽象的彈窗基礎類別。設計彈窗時，需要考慮的是：

• 設計原則：易擴充套件、複用性強
• 避免重複程式碼
• 避免同一時間出現多個彈窗
• 彈窗的位置要嚴格居中（不能因為螢幕尺寸的大小變了，導致彈窗位置不居中）
• 處理捲動穿透這個頑疾。

2、視覺構建：

（1）後端在開發介面時，前端做視覺構建；視覺構建完成後，前端根據介面檔案的定義，通過 mock 資料的方式調介面，寫前端邏輯；待介面開發完成後，可進入前後端聯調階段。

（2）建議前端童鞋學會自己切圖，可控程度更高，也能減少溝通成本。學會基本的 PS、Sketch操作就行，做一名合格的前端切圖仔。

（3）對於規則的樣式和動畫，建議用程式碼實現，而不是圖片。圖片會降低頁面的開啟效能，且大屏都顯示效果比較模糊。

（4）切圖的尺寸要求：100%寬度以 750px 為準。

（5）畫素級還原視覺稿：推薦使用 Snipaste 截圖軟體，按F1截圖，F2貼圖，然後調整貼圖的透明度為50%，將貼圖與前端頁面進行畫素級比對。

3、業務邏輯實現：

（1）建議先用思維導圖，梳理業務邏輯，再著手寫程式碼。思維導圖有利於理清邏輯、事後覆盤、高效給他人講解，一目瞭然。重要的是思想，而不是用哪一款工具更酷。

（2）在呼叫介面時，要明確前端自己的安全邊界：假設介面欄位異常時，前端需要有自己的降級措施，不能完全依賴和信任欄位，導致讓頁面直接白屏、互動異常、甚至掛掉。

（3）除了完成產品要求的業務邏輯之外，還要時刻考慮異常流的設計和容災。

（4）很多前端童鞋在做需求時，有個習慣是不喜歡細看prd，只對著互動稿和視覺稿進行開發。這樣做雖然省事，但有三道手續不能少：

• 開發前，一定要再和產品童鞋過一遍prd細節；
• 開發過程中，隨時和產品童鞋反覆溝通確認；
• 開發到80%時，自己對照prd，隻字不差地閱讀，看看是否有遺漏的地方。

4、非功能性需求。業務程式碼寫完後，還有很多細節需要打磨。比如：

• 不同渠道的分享場景
• ppms 設定檢查：運營設定端要做校驗；是給產品運營用的，設定要儘量人性化。
• 新增埋點：曝光上報、點選上報、呼吸上報
• 監控上報、測試上報、badjs上報
• 重複程式碼精簡
• 去掉 console.log、debugger 等多餘的程式碼
• 圖片、字型等靜態資源壓縮
• 常見的效能優化：骨架屏（按需）、圖片懶載入、圖片預載入、防抖節流、長列表捲動到可視區域動態載入
• 使用者體驗完善：返回定位、捲動穿透
• 螢幕適配
• 小程式程式碼瘦身
• 容災演習

5、程式碼提交：

• 先 git pull，再 git push，減少程式碼衝突。
• commit粒度要儘量細
• commit之前，一定要diff程式碼，確認每一行改動，以擴音交不必要的改動。
• Commit Message 常用格式：feat、fix、docs、merge
• 如合併程式碼時遇到衝突，一定要先解決完衝突後再提交程式碼。如衝突部分涉及到其他人的程式碼，一定要找到對應同學一起解決。

6、自測：

• 對照prd，查漏補缺。
• 在真機上體驗頁面，而不是在模擬器上。
• 寫一部分測試用例，加快後續的測試進度。前面梳理的思維導圖，其實就是測試的最佳素材。

產品體驗

1、在真機體驗，而不是在模擬器上。最好是 iOS和 Android 都要對比體驗。

2、體驗時，記錄整理各種 todolist：

• 需求待確認 list：一些小的、風險可控的需求點，可以在體檢階段，集中向產品童鞋提出。
• 開發未完成 list：有哪些尚未完成的部分，需要和產品童鞋交代清楚。
• 已知 bug list
• 體驗問題 list：邊體驗，邊記錄產品反饋的問題，並在稍後同步給測試童鞋。
• 依賴項 list：介面、視覺切圖、真實的測試環境等等。

程式碼評審/程式碼review

程式碼 review 可以在測試期間進行。

review順序：

• 業務核心邏輯
• 編碼規範
• 關鍵位置、容易踩坑的地方，需要註釋詳細
• 系統保障（監控、容災降級）
• 系統安全和風險
• 使用者體驗

視覺走查

視覺走查 可以在測試期間進行。

視覺童鞋都有畫素眼，即便是一兩個畫素的區別，他們都能瞧出來。所以，建議前端童鞋加強自測，努力做到畫素級還原視覺稿。

推薦前端童鞋使用 Snipaste 截圖軟體，按F1截圖，F2貼圖，然後調整貼圖的透明度為50%，將貼圖與前端頁面進行畫素級比對。

測試環節

1、建議加強自測質量。進入測試階段後，測試童鞋會進行一輪冒煙測試，如果質量不合格，將會被打回，這就很尷尬了。

2、整理自測、測試、釋出時需要的主流程checkList，每次迭代時都能用上。

轉測郵件的基本元素，包括但不僅限於：

• prd連結、視覺稿連結
• 頁面連結
• 專案相關人員
• 資料設定系統
• host 代理
• 介面檔案
• 概要設計、前端開發整理（如果有的話）
• 測試用例（如果有的話）
• 核心業務邏輯梳理（如果有的話）
• 體驗問題列舉
• 測試重點建議
• 風險點評估

3、測試童鞋提的bug單，開發同學需要在 XX 小時內處理完成，否則會被QA催。

4、需要控制bug單數量，否則會被追責覆盤。同類問題，建議測試童鞋合併到同一個bug單中。

5、測試管理系統 是所有人處理bug 流程的平臺，不是讓測試童鞋隨便記錄個人問題的。所以要提醒測試童鞋，明確該問題是bug，再提單；不是bug，要麼不提，要麼在溝通後駁回。

釋出方案

• 釋出順序：一般是先發後端，再發前端
• 依賴項是否準備就緒：設定的資料、設定項等
• 是否會對線上業務、線上資料造成影響
• 本地環境、dev環境、gamma環境，均要做好驗證。
• 回退機制
• 釋出 checkList

上線確認

• 釋出完成後，需要輸出上線確認郵件
• 觀察頁面體驗、頁面效能表現
• 觀察監控資料、業務呼叫量
• 總結覆盤

二、前端工程化

Git 版本管理

1、前端程式碼倉庫 git 分支規範：

2、Commit Message 的格式，只允許使用以下10種標識，最常見的是 feat和 fix ：

• feat: 新功能
• fix: 修補 Bug
• docs: 檔案
• style: 格式變更，不影響程式碼的執行
• refactor: 重構（既不是新增功能，也不是修改 bug 的程式碼變動）
• test: 增加測試
• chore: 構建過程或輔助工具的變動
• up: 不屬於上述分類時，可使用此類別
• merge: 用於 merge branch，需要手寫 commit message 的情況
• revert: 用於復原之前的 commit

3、業務分支，命名規範：（建議一定加上日期）

• 特性分支：feature_xxx_YYMMDD
• 緊急bug修復分支：hotfix_xxx_YYMMDD
• 小程式釋出分支（自動生成）：release_YYMMDD

程式碼規範

• 程式碼格式化：Prettier
• 程式碼格式檢查：ESLint

CSS前處理器

• SASS（用得較多）
• Less
• PostCSS

包管理

• 包管理工具：npm（最常見）、yarn
• cnpm、nvm、nrm常用命令

編譯構建

• webpack（最常見）
• Vite
• Gulp
• Babel：ES6語法轉為ES5語法

小程式工程化

• 小程式工程化探索
• 京喜小程式最佳實踐：我是如何寫超大型小程式程式碼的

測試相關

• 編寫測試用例程式碼
• 單元測試
• 自動化測試

三、前端核心知識

前端入門核心知識點

瀏覽器

• Web標準：結構標準（HTML）、表現標準（CSS）、行為標準（JS）
• 瀏覽器分為兩部分：渲染引擎（即：瀏覽器核心）、JS 引擎
• 瀏覽器的工作原理：重繪和重排、V8引擎
• App的WebView容器，相當於瀏覽器，可以內嵌H5網頁

HTML5

• 語意化標籤：<header>、<article> 、<footer>等。
• 多媒體標籤：<audio>、<video>
• 更強的本地儲存能力和裝置相容性：indexDB、HTML5 APP cookie
• 三維、圖形及特效：SVG、Canvas、WebGL
• 更有效的實時連線：WebSocket、Server-Sent Events
• 無障礙體驗

CSS、CSS3

• CSS盒模型、BFC
• 浮動、定位（絕對定位和相對定位）
• flex 佈局
• 聖盃佈局、雙飛翼佈局
• 選擇器：後代選擇器、交集選擇器、並集選擇器、偽類選擇器
• 2D轉換：移動translation、旋轉rotate、縮放scale
• 3D轉換：透視 perspective、3D移動 translate3d、3D旋轉 rotate3d、3D呈現 transform-style
• CSS3動畫：animation
• CSS hack
• Retina 螢幕的 1px 畫素，如何實現

JS基礎

• ES6語法：嚴格模式、箭頭函數、Promise、Symbol資料型別、Set 和Map資料結構

• ES6轉ES5

• JS資料型別轉換、隱式型別轉換

• 內建物件及其方法

• 陣列的各種方法：map、filter、every、reduce等

• 事件機制、原型繼承、立即執行函數

• DOM操作、虛擬 DOM 的 diff 演演算法

• BOM瀏覽器操作

• 事件冒泡機制：捕獲階段、目標階段、冒泡階段。

• 非同步程式設計：Ajax、Promise、async await

• SessionStorage和LocalStorage、Cookie

• 迭代器Iterator和生成器Generator

• Web Socket

• 非同步程式設計

• 單執行緒

• Canvas影象繪製

• svg 動畫

JS 高階

• JS 三座大山：原型與原型鏈、作用域及閉包、非同步和單執行緒
• 作用域鏈、類、繼承、原型繼承
• this的指向和繫結規則
• 深拷貝和淺拷貝
• 防抖和節流
• Promise的宏任務和微任務
• 瀏覽器的重排和重繪
• 手寫 Promise的整個邏輯和API：resolve、reject、then、catch、finally、allSettled、race any
• 高階函數
• 事件委託
• call、apply、bind
• arguments 偽陣列
• 函數柯里化
• 模組化：CommonJS、AMD、CMD、ESModule
• JS高階語法：Iterator 迭代器、Decorator 生成器
• JS 高階語法：Decorator、Proxy/Reflect、MutationObserver、 物件屬性描述符、Object.assign、Object.freeze、Object.seal
• JS 記憶體漏失、JS垃圾回收演演算法
• TypeScript 型別檢查
• Vue.js、React.js原始碼解析
• Vue.js、React.js的狀態管理：Vuex、Redux、Redux Toolkit、React Hooks、zustand
• V8引擎原始碼

Node.js

• 回撥函數
• 時間驅動機制
• 模組化
• 函數
• 路由
• 全域性方法
• 檔案系統

Web 安全

• 跨域問題、同源策略、JSONP
• CORS
• XSS
• CSRF

頁面形式

• 多端自適應佈局

• SPA單頁應用

• PWA（Progressive Web App）：小程式的鼻祖

四、前端框架

每個框架和工具，都有自己的約束、價值和最佳實踐。

JS框架

• Vue.js
• React.js
• Svelte（輕量級框架，最近比較火）。
• angular（逐漸淘汰）

對比：

• vue ：宣告式程式設計，資料驅動的思想
• React：函數語言程式設計。如果你要改變資料，那麼必須呼叫api去改。

在vue 中，幾乎給你想要的全部給你了；而react 追求的更多的是自力更生。

CSS框架、元件庫（B端常用）

• React 技術棧：Ant Design（簡稱Antd）
• Vue 技術棧：Element、Ant Design Vue
• 簡單的CSS響應式框架：Bootstrap
• Tailwind CSS（最近比較火）
• Vant Weapp：輕量級的行動端（含H5、小程式）元件庫

知識庫框架

• Vuepress（基於 Vue.js，推薦）
• Docusaurus（基於 React.js，推薦）
• GitBook
• docsify：可製作簡易的 wiki 檔案。案例：掘墓人的 Wiki

補充：知識庫框架，首先推薦 Vuepress 和 Docusaurus，功能強大，成熟穩定。

API 檔案框架

• TypeDoc：將TypeScript專案生成 html、markdown等檔案。
• storybook：用於搭建UI元件的知識庫。可線上預覽UI元件的樣式和互動效果。

跨端框架

• Flutter（最近比較火）：Flutter 的Dart開發語言，可以編譯為 ARM 64、x86 和 JavaScript 程式碼

• ReactNative（逐漸沒落）：App、Web端

• Taro：小程式、H5

桌面應用開發框架

• Electron 框架。案例：VS Code軟體就是用 Electron 開發的。

Electron 非常流行，也被大量公司使用，也有很多成功軟體，比如 VS Code、Facebook Messager、Twitch、Microsoft Teams 等。Electron 雖然上手容易，但問題也很明顯，就是慢、吃記憶體和大，Electron 吃記憶體是因為打包的 Chromium 吃內容，同時一個 Hello World 編譯後就要 120M+ 。

VS Code、chrome、小程式開發者工具，本質上都是執行的 chrome 核心。所以你會發現，這三個軟體都很佔記憶體，都很卡。我將其稱之為「前端頭痛三劍客」。

前端視覺化框架、圖表庫

• ECharts：百度的開源圖表庫。
• D3.js：視覺化 js 庫。
• Three.js：基於原生 WebGL 封裝執行的三維引擎。太陽系案例 #
• Cocos 引擎：遊戲動畫開發框架。
• 白鷺引擎：H5遊戲引擎，一套完整的H5遊戲解決方案。白鷺引擎的所在公司已在2022年初破產，不建議使用。

編輯器框架

• wangEditor：國內很流行
• TinyMCE：國外很火
• ueditor：百度的開源框架。比較老，逐漸沒落。
• Monaco Editor：VS Code的線上版

Node.js 框架

• Koa：新一代 Node.js 框架。
• Egg.js：Egg是在Koa基礎上進一步封裝的企業級Web開發框架。
• Express：比較老的Node.js 框架。

伺服器端渲染框架

• Next.js （基於React.js）

• Nuxt.js （基於Vue.js）

前端測試框架

• Mocha：JS 測試框架。
• Tiga：跨端（H5、小程式）專案的自動化測試 SDK。凹凸實驗室出品。

五、前端效能優化

效能分析工具

• 控制檯的瀑布圖 Waterfall

• 控制檯的 performance工具：日常開發過程中觀察分析執行時的效能表現

• 控制檯的 LightHouse ：跑分、輸出效能報告，分析效能

• WebPageTest網站：評估網站效能

• Performance 這個API：實時動態測量效能

效能引數

• 首屏時間 = 白屏時間 + 渲染時間。預解析、預載入、預渲染、懶載入、懶執行。
• FPS影格率
• 效能的測量標準：RAIL 模型
• 弱網環境，耗時對比

瀏覽器渲染優化

• 瞭解渲染過程、關鍵渲染路徑
• 減少重排和重繪
• 使用者從輸入url到頁面載入顯示完成，經歷了哪些過程

JavaScript 優化

• JS資源優化：按需載入、編譯打包、解析執行、非同步載入
• V8引擎工作原理、效能優化原理
• 防抖和節流
• 無限捲動列表：做節點回收
• 骨架屏 skeleton：減少佈局移動
• 時間分片：把一個執行時間比較長的任務分解成一塊一塊比較小的任務，分塊去執行，減少使用者的卡頓感
• JS記憶體管理

資源優化

• 資源的壓縮與合併：減少http請求數量；減少請求資源的大小；使用 http快取
• HTML優化：減少iframe的使用；避免節點的深層次巢狀；避免使用table佈局
• CSS優化：降低CSS對頁面渲染的阻塞，儘早載入CSS；利用GPU渲染CSS動畫；使用 contain屬性，減少佈局和繪製的消耗時間
• 圖片優化：使用CSS3、SVG、IconFont代替影象；圖片懶載入 lazy loading；圖片的預載入；漸進式圖片；響應式圖片；使用 base64 代替小於8kb的圖。
• 字型優化：字型閃動問題；使用特殊字型時，建議動態載入網路字型
• 非同步載入第三方資源：第三方資源不可控會影響頁面的載入和顯示

構建優化

• tree shaking、程式碼拆分（Code Splitting）
• 程式碼壓縮混淆
• 打包時，避免對不變的庫重複構建。

網路傳輸優化

• 啟用Gzip對資源進行壓縮
• CDN傳輸：靜態資源全部放CDN上，使使用者可就近獲取所需內容，大幅減小光纖傳輸距離。
• 避免重定向：301、302 重定向會降低響應速度
• dns預解析：使用dns-prefetch 提前解析域名，提高資源載入速度。在存取以圖片為主的網站時，DNS預解析可以讓載入時間減少5%左右。
• PWA，Service worker
• SSR 伺服器端渲染/Node直出

六、前端工具和資源

前端檔案

• MDN 官方檔案：https://developer.mozilla.org/zh-CN/docs/Web

前端社群

• GitHub
• stackoverflow
• 掘金

JS 學習資源

• 現代 JavaScript 教學：https://zh.javascript.info/
• 阮一峰 JS教學：https://wangdoc.com/javascript/
• 阮一峰 ES6教學：https://es6.ruanyifeng.com/
• TypeScript 入門教學：https://github.com/xcatliu/typescript-tutorial
• Node.js學習指南：https://blog.poetries.top/node-learning-notes/

JS 程式碼規範

1、Airbnb JavaScript Style Guide：

• 英文原版：https://github.com/airbnb/javascript

• 中文版：https://github.com/lin-123/javascript

2、clean code JavaScript：

• 英文原版：https://github.com/ryanmcdermott/clean-code-javascript

• 中文版1：https://github.com/alivebao/clean-code-js

• 中文版2：https://github.com/beginor/clean-code-javascript

前端刷題

• 前端進階之道：https://yuchengkai.cn/

CSS 學習資源

• CSS靈感：https://github.com/chokcoco/CSS-Inspiration
• CSS的各種實現效果：https://lhammer.cn/You-need-to-know-css/
• css_tricks：https://github.com/QiShaoXuan/css_tricks
• 按需客製化 CSS 動畫效果：https://github.com/QiShaoXuan/css_tricks

字型相關資源

• 360字型版權查詢：https://fonts.safe.360.cn/
• 最全的免費可商用字型-效果預覽：https://wordshub.github.io/free-font/index.html
• 常見的免費字型：http://zenozeng.github.io/Free-Chinese-Fonts/

抓包工具

• Whistle：https://wproxy.org/whistle/

相容性檢視工具

• Can I use（前端API相容性檢視）：https://caniuse.com/

圖片相關工具

• 圖片壓縮：https://tinypng.com/
• 圖片壓縮：https://docsmall.com/
• 生成程式碼截圖：https://carbon.now.sh/

設計工具

• 墨刀：原型設計工具。網址：https://modao.cc/

• 藍湖：一款產品檔案和設計圖的線上共同作業平臺。網址：https://lanhuapp.com

• PxCook（畫素大廚）：高效易用的自動標註工具。軟體下載連結：https://www.fancynode.com.cn/pxcook

• 即時設計、稿定、master go

流程圖工具

• ProcessOn：https://www.processon.com/

大綱筆記

• 幕布：https://mubu.com

• 飛書-思維筆記

markdown 編輯器

• typora
• VS Code

程式碼編輯器

• VS Code
• Sublime Text

七、前端書籍推薦

JS經典書籍

• 紅寶書：《JavaScript高階程式設計》
• 小黃書：《你不知道的JavaScript》上、下冊
• 犀牛書：《JavaScript權威指南》
• 綠皮書：《javascript語言精粹與程式設計實踐》

JS進階

• 《前端開發核心知識進階》
• 《JavaScript 二十年》
• 《JavaScript 悟道》
• 《深入理解現代JavaScript》
• 《JavaScript忍者祕籍》
• 《編寫可維護的JavaScript》
• 《了不起的JavaScript工程師：從前端到全端高階進階》
• 《javascript設計模式與開發實踐》
• 《WebKit技術內幕》
• 《JavaScript啟示錄》

CSS

• 《CSS世界》
• 《CSS新世界》
• 《CSS揭祕》
• 《精通 CSS》

Vue.js

• 《Vue.js設計與實現》
• 《深入淺出Vue.js》

Node.js

• 《深入淺出Node.js》
• 《Node.js：來一打 C++ 擴充套件》

資料結構和演演算法

• 《計算之魂》
• 《大話資料結構》
• 《學習JavaScript資料結構與演演算法》

後端

• 《領域驅動設計》
• 《推薦系統實踐》
• 《資料密集型應用系統設計》
• 《程式碼精進之路：從碼農到工匠》

專案管理和認知

• 《人月神話》
• 《駭客與畫家》
• Joel Spolsky的書：《軟體隨想錄》《Joel 說軟體》《Joel 談優秀軟體開發方法》
• 《鳳凰專案》
• 《持續交付2.0》
• 《Google軟體工程》
• 《軟技能：程式碼之外的生存指南》
• 《重來3：跳出瘋狂的忙碌》
• 《程式設計師的思維修煉》
• 《管理的常識》

產品

• 《啟示錄》
• 《結網》
• 《人人都是產品經理》
• 《使用者體驗要素》
• 《有效需求分析》
• 《產品邏輯之美：打造複雜的產品系統》
• 《微信背後的產品觀》
• 《俞軍產品方法論》
• 《決勝B端——產品經理升級之路》
• 《給產品經理講技術》
• 《精益資料分析》
• 《產品經理面試寶典》
• 《體驗引擎：遊戲設計全景探祕》

設計

• 《設計心理學》四冊
• 《使用者體驗要素》
• 《點石成金》
• 《寫給大家看的設計書》
• 《About Face 4: 互動設計精髓》
• 《設計中的設計》
• 《破繭成蝶》
• 《簡約至上：互動式設計四策略》
• 《Web表單設計：點石成金的藝術》
• 《觸動人心：設計優秀的iPhone應用》
• 《瞬間之美：Web介面設計如何讓使用者心動》
• 《使用者體驗度量：收集、分析與呈現》

運營

• 《運營之光》兩冊
• 《我在一線做使用者增長》
• 《增長駭客：創業公司的使用者與收入增長祕籍》
• 《流量池》
• 《超級運營術》

商業

• 《史蒂夫·喬布斯傳》
• 《浪潮之巔》
• 《贏》
• 《你憑什麼做好網際網路：從技術思維到商業邏輯》
• 《計算廣告》
• 《詳談：左暉》
• 《線上：資料改變商業本質，計算重塑經濟未來》
• 《零售的哲學》
• 《我看電商》
• 《衝浪板上的公司》
• 《一本書讀懂財報》

思維和認知

• 《學會提問》
• 《思考，快與慢》
• 《清醒思考的藝術》
• 《把時間當作朋友》
• 《智識分子》
• 《少有人走的路》
• 《溝通的方法》
• 《我們為什麼要睡覺》

八、前端總結和認知

研發視角，如何理解需求

點選檢視大圖。

從上面的流程圖中可以看出，產品經理的交付物是什麼？是prd嗎？顯然不是。

產品經理的工作跟設計師、工程師非常不同。人們對工程師的期望是交付有效的程式碼，對設計師的期望是交付視覺稿。而對於產品經理來說，只交付一份prd是不夠的。

產品經理要負責跟進整個產品週期，包括上線後的頁面效果和資料表現。編寫需求規範是一種溝通和推動專案的手段，但規範本身並沒有內在的價值。很多產品經理並不藉助prd來交流他們的想法，他們可以用談話，還可以把想法畫在白板上。也有一些產品經理雖然寫了規範，但卻沒有參照執行。

前端工程師應該具備怎樣的能力和素質

• 技術功底、技術視野、技術追求
• 除了開發業務功能外，還需要對開發規範、工程化、元件化、模組化、測試、設計模式有一定的認知和實踐
• 溝通表達能力、書面表達能力、總結覆盤習慣
• 全域性思維、抽象思維、持續交付意識
• 專案一號位擔當，團隊共同作業意識
• 綜合權衡：成本、效率、質量、風險、體驗
• 關注產品、設計、商業等各個領域。交叉學科會帶來更多創新。

前端認知

1、雖然我們絕大多數時間耗在業務開發上，但仍需要積累其他方面的沉澱，做多一些有趣的、可持續的事情，比如分享總結、基礎能力建設、研發效能提升、技術運營建設、技術沉澱等。

2、學會提問。我們日常在提出問題和解決問題時，經常容易陷入X-Y問題，導致目標不明確、思路不清晰、溝通效率低下，甚至在一個完全錯誤的方向上浪費大量的資源、時間和精力。無論是在尋求幫助的人身上，還是在提供幫助的人身上，都有所體現。

在面對一個問題時，要理解這句話的意圖、事實、情緒、期待。學會提問，學會答疑，都是一種智慧。參考提問的智慧 。

3、全流程跟進，持續交付，創造業務價值。

4、前端的本質是連結商業、設計、計算能力，為使用者提供專業的人機互動體驗。

5、產品能力和技術能力是：判斷資訊，抓住要點，整合有限的資源，把自己的價值打包成一個產品進行交付，並獲得回報。

6、部門體系的角色有很多：運營、產品、視覺、開發、測試、架構師、leader、行銷、資料分析、運維等。有些工作不是「做或者不做」的問題，而是程度的問題。在注意邊界的前提下，主動承擔、全盤思考、多一份同理心，這是能力和責任逐漸增強的體現。

7、謙遜、尊重和信任，是協同作戰和良性合作的基礎。

8、組織內，人與人的關係應該是怎樣的？有人認為是管理與被管理的關係，有人認為是合作關係。而我認為，組織內的關係是奉獻關係。沒有奉獻作為基礎，組織關係是不成立的。組織內的人與人之間是相互付出的關係，部門與部門是相互付出的關係，上級與下級之間是相互付出的關係，在這樣的相互奉獻關係中，組織才會真正地存在並行揮作用。

奉獻關係所產生的基本現象是：每個處於流程上的人更關心他能夠為下一個工序做什麼樣的貢獻；每個部門都關心自己如何調整才能夠與其他部門有和諧的介面；下級會關注自己怎樣配合才能夠為上級提供支援，而上級會要求自己為下級解決問題並提供幫助。

能力很重要，而付出更重要。

9、優秀的人有幾個特性：敏感、不能忍、有動手優化的能力。

10、前端側重於人機互動和使用者體驗，後端側重於業務邏輯和大規模資料處理。理論上，面向使用者的產品裡，所有問題（包括產品、設計、後端、甚至看不見的問題）的表現形式，都會暴露在前端，而只有部分問題（資料問題、計算問題、安全問題等）暴露在後端，這就意味著前端起到了至關重要的承載和連線作用。

11、前端技術的更新日新月異；前端框架的技術選型層出不窮；視覺審美的潮流不斷更替；視覺化效果酷炫無比；使用者的運營體系逐漸精細化；適老化、無障礙化、青少年人群的訴求浮出水面；智慧裝置的升級和適配無窮無盡。所有的這一切，對前端領域和前端同學就一個要求：要折騰，愛折騰，反覆折騰。