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

千古壹號 發表於 2022-06-13
前端

前言

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

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

一、前端開發流程

需求評審

一般在做需求評審時,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動畫:WebGLThree.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 分支規範:

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

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

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介面設計如何讓使用者心動》
  • 《使用者體驗度量:收集、分析與呈現》

運營

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

商業

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

思維和認知

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

八、前端總結和認知

研發視角,如何理解需求

點選檢視大圖

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

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

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

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

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

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

前端認知

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

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

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

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

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

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

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

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

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

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

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

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

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

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