對(duì)于千萬(wàn)級(jí)的注冊(cè)用戶(hù)的門(mén)戶(hù)項(xiàng)目是前端這塊是怎么去實(shí)現(xiàn)的，自己在平常的工作中總結(jié)了一些經(jīng)驗(yàn)，也是在不斷的挫折中，不斷演練的，希望總結(jié)出來(lái)給大家參考下，和大家一起探討，一起進(jìn)步。

[[284960]]

一、門(mén)戶(hù)設(shè)計(jì)一般會(huì)遇到哪些難點(diǎn)

(一)、首頁(yè)打開(kāi)時(shí)間太慢了

在開(kāi)發(fā)一個(gè)門(mén)戶(hù)到生產(chǎn)上線(xiàn)后，首頁(yè)響應(yīng)時(shí)間是檢驗(yàn)門(mén)戶(hù)整個(gè)系統(tǒng)架構(gòu)以及開(kāi)發(fā)的重要的一項(xiàng)指標(biāo)，有時(shí)候我們發(fā)現(xiàn)在公司測(cè)試發(fā)現(xiàn)速度都挺快的，怎么到生產(chǎn)首頁(yè)打開(kāi)就慢了呢?

(二)、頁(yè)面加載不流暢，總感覺(jué)看著不舒服

因?yàn)殚T(mén)戶(hù)一般都是偏向于內(nèi)容和圖片類(lèi)資源比較多，但是我們打開(kāi)自己的網(wǎng)頁(yè)，有時(shí)候總感覺(jué)加載并不是按照我們期望的那樣加載得到，順其自然，總感覺(jué)看起來(lái)怪怪的。

(三)、希望用戶(hù)緩存的地方未進(jìn)行緩存

很多靜態(tài)的前端資源，其實(shí)在系統(tǒng)未進(jìn)行更新時(shí)候，第一次加載之后，希望緩存到用戶(hù)的本地，但是因?yàn)榫彺娌呗詻](méi)搞好，經(jīng)常未進(jìn)行有效的緩存。

(四)、頁(yè)面的頭部尾部經(jīng)常需要被第三方嵌入

因?yàn)樽鳛橐粋€(gè)比較大的門(mén)戶(hù)站點(diǎn)，可能會(huì)讓很多小的服務(wù)接入進(jìn)來(lái)，但是頭部和尾部因?yàn)槭切枰３诛L(fēng)格統(tǒng)一，所以經(jīng)常需要被第三方進(jìn)行嵌入。

(五)、代碼沒(méi)有進(jìn)行有效的壓縮，導(dǎo)致被竊取

因?yàn)樽鳛殚T(mén)戶(hù)站點(diǎn)，前端如果不進(jìn)行加密的話(huà)，代碼很容易被別人進(jìn)行抄襲偽造，而且還很容易清楚里面的業(yè)務(wù)邏輯，從而很容易仿造和進(jìn)行攻擊。

(六)、增量靜態(tài)資源發(fā)布

經(jīng)常門(mén)戶(hù)線(xiàn)上環(huán)境需要增加一點(diǎn)小功能，但是我們又不想去整個(gè)版本的迭代更新，這時(shí)候我們可能需要增量更新一部分代碼，但是因?yàn)榧用軌嚎s，這時(shí)候該怎么解決呢?

(七)、門(mén)戶(hù)的輪播圖，運(yùn)營(yíng)位圖片那么多，該怎么提升加載速度呢?

我們經(jīng)常在門(mén)戶(hù)上面能看到很多的圖片，但是這些圖片卻大大的拖慢了整個(gè)網(wǎng)站的加載速度，怎樣去很好的處理這些圖片資源呢，你考慮過(guò)么?

(八)、大家都知道門(mén)戶(hù)需要做靜態(tài)化，但是靜態(tài)化方案那么多，哪一種合適呢?

門(mén)戶(hù)的靜態(tài)方案隨著前端技術(shù)的發(fā)展，從最開(kāi)始的freemark等后端java類(lèi)模板，到客戶(hù)端的渲染模板，但是他們各自有什么優(yōu)勢(shì)?該怎么選型?

(九)、需要開(kāi)發(fā)多端，工作量大

二、整體設(shè)計(jì)

上圖主要說(shuō)明了大型門(mén)戶(hù)中常用到的一些技術(shù)，說(shuō)明如下：

(一)、CDN ：

假設(shè)我們的服務(wù)器都部署在合肥的機(jī)房，對(duì)于安徽的用戶(hù)來(lái)說(shuō)訪(fǎng)問(wèn)是較快的，而對(duì)于新疆的用戶(hù)訪(fǎng)問(wèn)是較慢的，這是由于合肥和新疆分別屬于電信和聯(lián)通的不同發(fā)達(dá)地區(qū)，新疆用戶(hù)訪(fǎng)問(wèn)需要通過(guò)互聯(lián)路由器經(jīng)過(guò)較長(zhǎng)的路徑才能訪(fǎng)問(wèn)到合肥的服務(wù)器，返回路徑也一樣，所以數(shù)據(jù)傳輸時(shí)間比較長(zhǎng)。對(duì)于這種情況，常常使用CDN解決，CDN將數(shù)據(jù)內(nèi)容緩存到運(yùn)營(yíng)商的機(jī)房，用戶(hù)訪(fǎng)問(wèn)時(shí)先從最近的運(yùn)營(yíng)商獲取數(shù)據(jù)，這樣大大減少了網(wǎng)絡(luò)訪(fǎng)問(wèn)的路徑。

(二)、反向代理 ：

部署在網(wǎng)站的機(jī)房，當(dāng)用戶(hù)請(qǐng)求達(dá)到時(shí)首先訪(fǎng)問(wèn)反向代理服務(wù)器，反向代理服務(wù)器將緩存的數(shù)據(jù)返回給用戶(hù)，如果沒(méi)有緩存數(shù)據(jù)才會(huì)繼續(xù)訪(fǎng)問(wèn)應(yīng)用服務(wù)器獲取，這樣做減少了獲取數(shù)據(jù)的成本。反向代理常用Nginx。

(三)、硬負(fù)載 ：

應(yīng)用服務(wù)器作為網(wǎng)站的入口，會(huì)承擔(dān)大量的請(qǐng)求，我們往往通過(guò)應(yīng)用服務(wù)器集群來(lái)分擔(dān)請(qǐng)求數(shù)。應(yīng)用服務(wù)器前面部署負(fù)載均衡服務(wù)器調(diào)度用戶(hù)請(qǐng)求，根據(jù)分發(fā)策略將請(qǐng)求分發(fā)到多個(gè)應(yīng)用服務(wù)器節(jié)點(diǎn)。

其中包括硬負(fù)載和軟負(fù)載，硬負(fù)載常用的負(fù)載均衡技術(shù)硬件的有F5，價(jià)格比較貴一般都在15W以上。軟件的有LVS、Nginx、HAProxy。LVS是四層(傳輸層)負(fù)載均衡。

(四)、使用NoSql數(shù)據(jù)庫(kù)和搜索引擎：

對(duì)于海量數(shù)據(jù)的查詢(xún)和分析，我們使用nosql數(shù)據(jù)庫(kù)加上搜索引擎可以達(dá)到更好的性能。并不是所有的數(shù)據(jù)都要放在關(guān)系型數(shù)據(jù)中。常用的NOSQL有mongodb、hbase、redis，搜索引擎有l(wèi)ucene、solr、elasticsearch。

(五)、 消息隊(duì)列：

隨著業(yè)務(wù)的擴(kuò)展，應(yīng)用程序變得非常臃腫，這時(shí)我們需要將應(yīng)用程序進(jìn)行業(yè)務(wù)拆分。每個(gè)業(yè)務(wù)應(yīng)用負(fù)責(zé)相對(duì)獨(dú)立的業(yè)務(wù)運(yùn)作。業(yè)務(wù)之間通過(guò)消息進(jìn)行通信或者共享數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)。

(六)、分布式文件系統(tǒng)：

用戶(hù)一天天增加，業(yè)務(wù)量越來(lái)越大，產(chǎn)生的文件越來(lái)越多，單臺(tái)的文件服務(wù)器已經(jīng)不能滿(mǎn)足需求，這時(shí)就需要分布式文件系統(tǒng)的支撐。常用的分布式文件系統(tǒng)有GFS、HDFS、TFS。而我們業(yè)務(wù)線(xiàn)主要用FASTDFS。

三、前端功能性設(shè)計(jì)

(一)、多頁(yè)和單頁(yè)的選擇

門(mén)戶(hù)網(wǎng)站推薦使用多頁(yè)架構(gòu)。

理由如下：

• 多頁(yè)項(xiàng)目，頁(yè)面和頁(yè)面之間是獨(dú)立的，不存在交互，因此當(dāng)一個(gè)頁(yè)面需要單獨(dú)重構(gòu)時(shí)，不會(huì)影響其他頁(yè)面，對(duì)于有長(zhǎng)期歷史的項(xiàng)目來(lái)說(shuō)，可維護(hù)性、可重構(gòu)性要高很多;
• 多頁(yè)項(xiàng)目可以單次只更新一個(gè)頁(yè)面的版本，而單頁(yè)項(xiàng)目如果其中一個(gè)功能模塊要更新(特別是公共組件更新)，很容易讓所有頁(yè)面都需要更新版本;
• 多頁(yè)項(xiàng)目的版本控制更簡(jiǎn)單，如果需要頁(yè)面拆分，調(diào)整部分頁(yè)面的使用流程，難度也會(huì)更低;
• 灰度發(fā)布更友好;

優(yōu)點(diǎn)：

1、降低長(zhǎng)期項(xiàng)目迭代維護(hù)的難度;

2、方便增量資源更新，以及緩存內(nèi)容按照頁(yè)面緩存，不會(huì)整體緩存。

(二)、考慮多端，并規(guī)范多端共用一套接口，注冊(cè)接口平臺(tái)服務(wù)

常見(jiàn)方案如下：

• 后端提供的接口，應(yīng)該同時(shí)考慮包含PC和H5的數(shù)據(jù)(即單獨(dú)對(duì)一個(gè)存在亢余數(shù)據(jù));
• 接口應(yīng)當(dāng)穩(wěn)定，即當(dāng)業(yè)務(wù)變更時(shí)，應(yīng)盡量采取追加數(shù)據(jù)的形式;
• 只有在單獨(dú)一端需要特殊業(yè)務(wù)流程時(shí)，設(shè)計(jì)單端獨(dú)有接口;
• 多端共用接口，是減少開(kāi)發(fā)工作量，并且提高業(yè)務(wù)可維護(hù)性的重要解決方案。

優(yōu)點(diǎn)：

1、降低開(kāi)發(fā)工作量，增強(qiáng)可維護(hù)性。

2、頁(yè)面可以通過(guò)響應(yīng)式設(shè)計(jì)，部分頁(yè)面可以減少開(kāi)發(fā)工作量。

(三)、負(fù)載均衡使用nginx

負(fù)載均衡通常使用Nginx比較多。當(dāng)遇見(jiàn)大型項(xiàng)目的時(shí)候，負(fù)載均衡和分布式幾乎是必須的。前端主要是對(duì)于靜態(tài)資源服務(wù)來(lái)說(shuō)，負(fù)載均衡有以下好處：

• 降低單臺(tái)server的壓力，提高業(yè)務(wù)承載能力;
• 方便應(yīng)對(duì)峰值流量，擴(kuò)容方便(如舉辦某些活動(dòng)時(shí));
• 增強(qiáng)業(yè)務(wù)的可用性、擴(kuò)展性、穩(wěn)定性;

負(fù)載均衡已經(jīng)是蠻常見(jiàn)的技術(shù)了，好處不用多說(shuō)，很容易理解。

優(yōu)點(diǎn)：

1、增強(qiáng)業(yè)務(wù)的可用性、擴(kuò)展性、穩(wěn)定性，可以支持更多用戶(hù)的訪(fǎng)問(wèn)。

2、通過(guò)靜態(tài)資源代理，可以增加緩存，提升加載速度。

(四)、考慮使用CDN

用戶(hù)來(lái)自不同地區(qū)，加入CDN可以使用戶(hù)訪(fǎng)問(wèn)資源時(shí)，訪(fǎng)問(wèn)離自己比較近的CDN服務(wù)器，降低訪(fǎng)問(wèn)延遲;

降低服務(wù)器帶寬使用成本;

支持視頻、靜態(tài)資源、大文件、小文件、直播等多種業(yè)務(wù)場(chǎng)景;

消除跨運(yùn)營(yíng)商造成的網(wǎng)絡(luò)速度較慢的問(wèn)題;

降低DDOS攻擊造成的對(duì)網(wǎng)站的影響;

CDN是一種比較成熟的技術(shù)，各大云平_臺(tái)都有提供CDN服務(wù)，價(jià)格也不貴，因此CDN的性?xún)r(jià)比很高。

優(yōu)點(diǎn)：

1、增加用戶(hù)訪(fǎng)問(wèn)速度，降低網(wǎng)絡(luò)延遲，帶寬優(yōu)化，減少服務(wù)器負(fù)載，增強(qiáng)對(duì)攻擊的抵抗能力。

(五)、前后端分離

建議前端負(fù)責(zé)所有靜態(tài)資源的開(kāi)發(fā)，后端負(fù)責(zé)所有服務(wù)的開(kāi)發(fā);前端通過(guò)前端工程化來(lái)完成前端靜態(tài)資源的編譯和處理工作，同時(shí)像VUE等腳手架也提供了工具。

優(yōu)點(diǎn)：

1、更規(guī)范的進(jìn)行頁(yè)面管理，降低頁(yè)面和功能的耦合度，減少?gòu)?fù)雜頁(yè)面的環(huán)境配置時(shí)間，以及方便欄目拼接。

2、方便進(jìn)行頁(yè)面的工程化處理，包括合并，壓縮，加密等;

(六)、支撐內(nèi)容和欄目可以配置

提供內(nèi)容和欄目渲染的基礎(chǔ)組件，支持這些可復(fù)用的內(nèi)容可以進(jìn)行可配置，減少后期運(yùn)維的成本。

門(mén)戶(hù)開(kāi)發(fā)前期，一定要梳理出后期可能調(diào)整的地方，從而很大限度的進(jìn)行配置。

優(yōu)點(diǎn)：

1、 頁(yè)面調(diào)整時(shí)候更加靈活，方便定制化;

(七)、靜態(tài)化;

能夠?qū)?shù)據(jù)進(jìn)行靜態(tài)化，在服務(wù)端進(jìn)行頁(yè)面的渲染。

正常情況調(diào)用接口接口，異常轉(zhuǎn)向靜態(tài)數(shù)據(jù)。

可以通過(guò)靜態(tài)頁(yè)存儲(chǔ)，采用定時(shí)更新機(jī)制減輕服務(wù)器負(fù)擔(dān)，首頁(yè)每個(gè)小模塊可以通過(guò)oscache進(jìn)行緩存，這樣不用每次拉數(shù)據(jù)。

優(yōu)點(diǎn)：

1、 能夠很大程度上提升頁(yè)面以及首頁(yè)的加載速度;

(八)、緩存機(jī)制

對(duì)頭部導(dǎo)航、用戶(hù)信息等內(nèi)容進(jìn)行緩存，靜態(tài)的數(shù)據(jù)進(jìn)行緩存，定期更新。

常見(jiàn)解決方案：

直接將資源文件名使用文件摘要或者說(shuō)某個(gè)固定的字符串加上一個(gè)文件摘要拼接成一個(gè)文件名。

好處有以下幾點(diǎn)：

首先發(fā)資源文件，由于文件名已經(jīng)不一樣了，所以不會(huì)覆蓋掉之前存在的資源文件，客戶(hù)端依舊可以安全的訪(fǎng)問(wèn)。

再發(fā)客戶(hù)端文件，在客戶(hù)端文件一旦發(fā)布成功，那么就會(huì)立馬切成新的特性，中間可以做到無(wú)縫銜接。這就是所謂的非覆蓋發(fā)布的方案。

(九)、基礎(chǔ)組件庫(kù)的建設(shè)

梳理門(mén)戶(hù)常見(jiàn)的組件，并形成統(tǒng)一的UI組件庫(kù)，從而更加優(yōu)化的交互，以及方便后面升級(jí)。

門(mén)戶(hù)常用的組件不多，但是需要梳理出規(guī)范，這樣便于第三方接入。

優(yōu)點(diǎn)：

1、 方便頁(yè)面展示好看，并且方便第三方接入。

(十)、瀏覽器兼容

兼容性考慮統(tǒng)一解決方案，避免bug的重復(fù)產(chǎn)生。

常見(jiàn)解決方案：

• 配置postcss，讓某些css增加兼容性前綴;
• 寫(xiě)一個(gè)wepback的loader，處理某些特殊場(chǎng)景;
• 規(guī)范團(tuán)隊(duì)代碼，使用更穩(wěn)定的寫(xiě)法(例如移動(dòng)端避免使用fixed進(jìn)行布局);
• 對(duì)常見(jiàn)問(wèn)題、疑難問(wèn)題，總結(jié)解決方案并團(tuán)隊(duì)共享;
• 建議或引導(dǎo)用戶(hù)使用高版本瀏覽器(比如chrome);

優(yōu)點(diǎn)：

1、避免瀏覽器環(huán)境產(chǎn)生的bug，以及排查此類(lèi)bug所浪費(fèi)的大量時(shí)間。

(十一)、考慮響應(yīng)式設(shè)計(jì)

盡量支持響應(yīng)式布局，方便在移動(dòng)設(shè)備上顯示。

優(yōu)點(diǎn)：

1、為后期多端開(kāi)發(fā)提供支撐。

(十二)、采用靜態(tài)資源部署方式

為了前端靜態(tài)資源方便維護(hù)和升級(jí)，建議分開(kāi)部署，和服務(wù)端tomcat容器不要部署在一起。

利用nginx分向，使用之前對(duì)接完成的地址+新增一個(gè)獨(dú)立上下文，然后nginx攔截執(zhí)行到tomcat外層靜態(tài)文件，原請(qǐng)求上下文依然使用nginx指向到tomcat調(diào)用接口。

優(yōu)點(diǎn)：

1、 提升靜態(tài)資源響應(yīng)速度。

四、非功能性需求

(一)、安全管理

安全管理的很難從架構(gòu)設(shè)計(jì)上完全避免，但還是有一定解決方案的，常見(jiàn)安全問(wèn)題如下：

• XSS注入：對(duì)用戶(hù)輸入的內(nèi)容，需要轉(zhuǎn)碼(大部分時(shí)候要server端來(lái)處理，偶爾也需要前端處理)，禁止使用eval函數(shù);
• https：這個(gè)顯然是必須的，好處非常多;
• CSRF：要求server端加入CSRF的處理方法(至少在關(guān)鍵頁(yè)面加入);

優(yōu)點(diǎn)：

1、減少安全漏洞，避免用戶(hù)受到損失，避免遭遇惡意攻擊，增加系統(tǒng)的穩(wěn)定性和安全性。

(二)、埋點(diǎn)系統(tǒng)

強(qiáng)烈推薦前端做自己的埋點(diǎn)系統(tǒng)。這個(gè)不同于后端的日志系統(tǒng)。

前端埋點(diǎn)系統(tǒng)的好處：

• 記錄每個(gè)頁(yè)面的訪(fǎng)問(wèn)量(日周月年的UV、PV);
• 記錄每個(gè)功能的使用量;
• 捕捉報(bào)錯(cuò)情況;
• 圖表化顯示，方便給其他部門(mén)展示;

埋點(diǎn)系統(tǒng)是前端高度介入業(yè)務(wù)，把握業(yè)務(wù)發(fā)展情況的一把利劍，通過(guò)這個(gè)系統(tǒng)，我們可以比后端更深刻的把握用戶(hù)的習(xí)慣，以及給產(chǎn)品經(jīng)理、運(yùn)營(yíng)等人員提供準(zhǔn)確的數(shù)據(jù)依據(jù)。當(dāng)有了數(shù)據(jù)后，前端人員就可以針對(duì)性的優(yōu)化功能、布局、 頁(yè)面交互邏輯、用戶(hù)使用流程。

埋點(diǎn)系統(tǒng)應(yīng)和業(yè)務(wù)解耦，開(kāi)發(fā)人員使用時(shí)注冊(cè)，然后在項(xiàng)目中引入。然后在埋點(diǎn)系統(tǒng)里查看相關(guān)數(shù)據(jù)(例如以小時(shí)、日、周、月、年為周期查看)

優(yōu)點(diǎn)：

1、數(shù)據(jù)是money，數(shù)據(jù)是公司的生命線(xiàn)，數(shù)據(jù)是很好的武器。

以上一些點(diǎn)是我們?cè)陂T(mén)戶(hù)開(kāi)發(fā)中常注意的點(diǎn)，來(lái)解決交互，性能和安全方面的問(wèn)題。