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

千古壹號發表於2022-06-13
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）

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

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

（3）App端：

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

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

（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端常用）

知識庫框架

  • 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直出

六、前端工具和資源

前端文件

前端社群

  • GitHub
  • stackoverflow
  • 掘金

JS 學習資源

JS 程式碼規範

1、Airbnb JavaScript Style Guide：

2、clean code JavaScript：

前端刷題

CSS 學習資源

字型相關資源

抓包工具

相容性檢視工具

圖片相關工具

設計工具

流程圖工具

大綱筆記

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

相關文章