産品經理要懂的11條前端開發知識

1、軟體開發崗位分工和職責

UI設計：對軟體人機互動的視覺效果設計，負責頁面美觀度、切圖.

前端：将設計好的圖檔，轉換成使用者能操作的軟體界面或HTML頁面，負責産品界面和互動

後端：提供資料庫、平台和接口設計，負責功能邏輯實作和資料存儲處理

測試：驗收開發出來的産品與預期是否相符，負責把關産品品質

DBA：負責資料庫的管理和運維，保證資料庫的穩定、安全、完整和高性能

運維：對網絡、伺服器、系統環境、服務的生命周期各個階段的營運與維護，在成本、穩定性、效率上達成一緻可接受的狀态

2. WEB基礎技術

URL：統一資源定位符，用來通路網頁、圖檔、視訊等内容，網際網路上所有資源都有一個唯一的URL，以http開頭，可以是ip也可以是域名，其實是一種路徑

TCP/IP：是指能夠在多個不同網絡間實作資訊傳輸的協定簇，它是在網絡的使用中的最基本的通信協定

HTTP：全球超文本傳輸協定，基于TCP之上，是網際網路的基本協定，所有的WWW服務都必須遵守HTTP協定，保證用戶端與伺服器之間的通信

SSL：可以在網際網路上提供秘密性傳輸，使使用者/伺服器應用之間的通信不被攻擊者竊聽，并且始終對伺服器進行認證，一般用于安全要求較高的系統，比如網絡支付

2. 前端技術

SDK：指輔助開發某一類軟體的相關文檔、範例和工具的集合，包括軟體、架構、硬體、系統等，以前端使用最為廣泛，可以極大減少開發難度，提高開發效率；比如我麼要接入移動支付，就可以下載下傳一個支付寶的用戶端SDK，配置并調用支付接口即可；

POST/GET：是兩種常見的http請求方式，Get 是用來從伺服器上獲得資料，而 Post 是用來向伺服器上傳遞資料；Get資料放在URL中，對使用者可見，Post通過request body傳遞參數，對使用者不可見；

AJAX：使用異步資料傳輸，網頁應用能夠快速地将增量更新呈現在使用者界面上，而不需要重載（重新整理）整個頁面，這使得程式能夠更快地回應使用者的操作，在使用者端體驗會更加友好（重新整理頁面在視覺上會出現跳幀讓使用者失去了焦點）；

COOKIE/SESSION：兩種會話儲存技術，多用于使用者身份識别或狀态存儲，cookie是儲存在本地（浏覽器中可修改檢視），session儲存在伺服器會更安全；

TOKEN：服務端生成的一串字元串，以作用戶端進行請求的一個令牌，一般用作使用者登入後判斷身份，無需再次輸入賬号密碼，就像我們拿卡代替鑰匙開鎖一樣；

原生開發：是指在Android、IOS等移動平台上利用官方提供的開發語言、開發類庫、開發工具進行App開發，優點是體驗好、性能佳；缺點是不同手機系統要開發兩遍，開發周期長，成本高；

混合開發：使用原生（native）+ HTML5 進行開發，然後打包成不同平台的app，優點是開發快，UI表現一緻；缺點是性能和原生有差距，有些能力無法實作；

小程式：是一種不需要下載下傳安裝即可使用的應用，使用者用完即走，不用關心是否安裝太多應用的問題；小程式開發門檻低，能滿足大多數業務需求，使用也很友善，由微信16年第一次提出，現在幾乎所有超級APP都内置了小程式；

3、URL的組成

URL 主要由 協定、主機、端口、路徑、查詢參數、錨點6部分組成！

輸入URL後，浏覽器會解析出協定、主機、端口、路徑等資訊，并構造一個HTTP請求。

浏覽器發送請求前，會判斷強緩存政策，如果命中，直接從緩存擷取資源，并不會發送請求。如果沒有命中，則進入下一步。

浏覽器會發送請求判斷是否命中協商緩存，如果命中，直接從緩存擷取資源。如果沒有命中，則進入下一步。

如果前兩步都沒有命中，則直接從服務端擷取資源。

4、HSTS

由于安全隐患，會使用 HSTS 強制用戶端使用 HTTPS 通路頁面。詳見：你所不知道的 HSTS[1]。當你的網站均采用 HTTPS，并符合它的安全規範，就可以申請加入 HSTS 清單，之後使用者不加 HTTPS 協定再去通路你的網站，浏覽器都會定向到 HTTPS。無論比對到沒有，都要開始 DNS 查詢工作了。

5、伺服器處理請求并傳回 HTTP 封包

每台伺服器上都會安裝處理請求的應用——Web Server。常見的Web Server 産品有 apache、nginx、IIS 或 Lighttpd 等。

HTTP請求一般可以分為兩類，靜态資源 和 動态資源。

請求通路靜态資源，這個就直接根據url位址去伺服器裡找就好了。

請求動态資源的話，就需要web server把不同請求，委托給伺服器上處理相應請求的程式進行處理（例如 CGI 腳本，JSP 腳本，servlets，ASP 腳本，伺服器端 JavaScript，或者一些其它的伺服器端技術等），然後傳回背景程式處理産生的結果作為響應，發送到用戶端。

6、伺服器在處理請求的時候主要有三種方式：

第一種：是用一個線程來處理所有的請求，并且同時隻能處理一個請求，但是這樣的話性能是非常的低的。

第二種：是每一個請求都給他配置設定一個線程但是當連結和請求比較多的時候就會導緻伺服器的cpu不堪重負。

第三種：就是采用複用I/O的方式來處理例如通過epoll方式監視所有連結當連結狀态發生改變的時候才去配置設定空間進行處理。

7、最簡單的前端部署方式

先從簡單的靜态頁面開始，衆所周知，前端資源由 HTML、JavaScript、CSS 三劍客組成，假設我們有一個簡單的頁面，用Nginx作為 Web 伺服器，此時， 隻需将 HTML、JavaScript、CSS 等靜态資源通過 FTP 等軟體，上傳到 Web 伺服器（如 Nginx）某目錄，将 Nginx 啟動做簡單配置即可讓使用者通路。

8、前端CDN分發

CDN 是一種内容分發網絡，部署在應用層，利用智能配置設定技術，根據使用者通路的地點，按照就近通路的原則配置設定到多個節點，來實作多點負載均衡。簡單來說，使用者就近通路，通路速度更快，大公司也無需搞一台超級帶寬的存儲伺服器，隻需使用多台正常帶寬的 CDN 節點即可。而 CDN 的常見實作是有一台源站伺服器，多個 CDN 節點定時從源站同步。

那如何将 CDN 與 Nginx 等 Web 伺服器結合呢？

答案是将靜态資源部署到 CDN 上，再将 Nginx 上的流量轉發到 CDN 上，這種技術我們稱之為『反向代理』。

9、自動化建構過程：

我們每次建構時大約需要進行這些步驟：

拉取遠端倉庫

切換到 XX 分支

代碼安全檢查（非必選）、單元測試等等

安裝 npm/yarn依賴

設定 node 版本

設定 npm/yarn 源

安裝依賴等

執行編譯 & 建構

産物檢查（比如檢測打包後 JS 檔案 / 圖檔大小、産物是否安全等，保證産物品質，非必選）

人工卡點（非必選，如必須 Leader 審批通過才能繼續）

打包上傳 CDN

自動化測試（非必選，e2e）

配套剩餘其他步驟

通知建構完成

10.自動化部署部分

為了提升部署效率，要搭建自動化部署平台，以 Docker 等保證環境的一緻性，以 Jenkins 等保證建構流程的串聯。

11.關于前端部署，能總結出下面幾個原則/要求：

建構釋出後，不應該被覆寫。

建構釋出後，靜态資源應當永久儲存在伺服器/CDN 上，即隻可讀。

靜态資源組織上，每個版本應該按檔案夾存儲，做到資源收斂。這樣假如真要删除時，可按版本删除。（如某個版本代碼洩密）