最近，同事不停抱怨說總接到用戶咨詢網(wǎng)站建設(shè)的問題的時候，總會一開始就是你們做個網(wǎng)站多少錢，這讓人很無語，特別是對于我們這幫以技術(shù)為主的團(tuán)隊。似乎網(wǎng)站是從別處批發(fā)來的樣子，這樣對于做技術(shù)的同學(xué)來說無疑是一種羞辱——自己辛辛苦苦開發(fā)的東西被用戶理解為一文不值。

當(dāng)然實(shí)際上一直以來都有不少用戶接通電話就問你們做一個網(wǎng)站多少錢的問題。很慶幸的是，我們發(fā)現(xiàn)現(xiàn)在越來越多的客戶在與我們溝通的時候說：“其實(shí)一般網(wǎng)絡(luò)公司跟直接說做什么東西多少錢，我一般都不會需要他的服務(wù)，因?yàn)樗疾恢牢乙陕?，就已?jīng)把價格給確定了，因此他肯定是給一個非常固定的東西給我；那我還不如買現(xiàn)成的產(chǎn)品?！?/p>

的確，其實(shí)網(wǎng)站建設(shè)（當(dāng)然包括微信開發(fā)、app開發(fā)），其實(shí)都是非標(biāo)準(zhǔn)化的東西，其實(shí)跟律師那樣的行業(yè)差不多，雖然有很多可以“復(fù)用”的東西，但真正要把案子處理好，還是得根據(jù)具體情況具體實(shí)施。

呃，不對，好像上面說了一段廢話的樣子，但實(shí)際上我們今天要講的問題是由上面引出的問題。接下來的時間里，我們微構(gòu)網(wǎng)絡(luò)會不定期發(fā)布這個系列的內(nèi)容。就是通過一個個實(shí)例說明，為什么同樣的網(wǎng)站，有的收費(fèi)高又得收費(fèi)低；而同樣的價格，為什么不同建站公司做出來的東西不一樣。

在我本人和客戶打交道的時候，我很少跟客戶吹自己公司怎么怎么的，而貶同行怎么怎么的。我就想用用戶聽得懂的東西來說明，如果說技術(shù)細(xì)節(jié)用戶顯然不知道我在說什么。

————-分割線————-

今天是這個系列的第一篇文章，這一個系列我們微構(gòu)網(wǎng)絡(luò)都希望用短文來闡述，把重點(diǎn)概述下就好。這里我就以一個例子說明走心的開發(fā)與不走心的開發(fā)帶來最終網(wǎng)站品質(zhì)的差異，今天這個差別跟網(wǎng)站的加載速度，從而影響用戶體驗(yàn)有關(guān)。

上圖就是曾經(jīng)我們做過的一個實(shí)例模型，而且這個模型在網(wǎng)站建設(shè)過程中非常常見，但是否走心的開發(fā)結(jié)果卻不一樣，這個需求大概如下：

這是某公司的一個產(chǎn)品系列，這個系列有是個以上，并以后可以在后臺隨時添加系列，而每個系列有大概10-20（初期可能就幾個，后續(xù)不超過20個）個具體的產(chǎn)品?，F(xiàn)在，就是想在首頁的一個位置加上這個模塊，在這個模塊中可以向用戶展示這個產(chǎn)品系列的所有產(chǎn)品的一張大圖片。

如果僅僅只是實(shí)現(xiàn)這個需求，大概就是產(chǎn)品進(jìn)行分類，比如這個系列是屬于A類，在A類下有多個小分類（當(dāng)然也可以用標(biāo)簽之類的屬性），然后就是下面的產(chǎn)品。而前臺就調(diào)用A類下的子分類以及子分類下面的產(chǎn)品；然后輸出，加上css及js就是上面的樣子了。

就上面一段我還真見過不少，甚至很多網(wǎng)站就是按照上面說的辦，然后就完工的。實(shí)際上這樣真的好嗎?，F(xiàn)在我做一個假設(shè)，假設(shè)這個網(wǎng)站運(yùn)行了半年，產(chǎn)品資料都比較齊全了。假設(shè)A類下有10個小類，每個小類有10個產(chǎn)品，而每個產(chǎn)品展示在這里的大圖是高清的圖，就算只有200KB吧（實(shí)際上這種圖大于這尺寸，因?yàn)樯时容^豐富又高清）。那么光這一部分的圖片文件大小就是10*10*200KB=20MB。不算上這個頁面其他的靜態(tài)資源體積以及數(shù)據(jù)庫查詢（如果是動態(tài)的）以及頁面解析，就光這一部分可以計算下加載時間。

如果光這一部分20MB，不考慮服務(wù)端的壓力，我們只考慮客戶端，就算客戶是獨(dú)享的20MB光釬網(wǎng)絡(luò)，理論上也得8秒才能加載完成。而實(shí)際上在現(xiàn)在的網(wǎng)絡(luò)環(huán)境下單個用戶客戶端很難達(dá)到這要求。更別說服務(wù)端的問題了，比如一個普通的企業(yè)網(wǎng)站基本上使用單臺服務(wù)器，甚至是虛擬主機(jī)，很少見一個企業(yè)使用10MB以上獨(dú)享帶寬資源的服務(wù)器；當(dāng)然現(xiàn)在有云空間使用，比如七牛等等。

因此，這樣顯然是不行的，這樣也許可以過客戶這關(guān)，但你如果就這樣能對得起自己作為一個開發(fā)者的身份么？也就是如果那樣只能算是一個“半成品”，最多是“半成品+”。

那么改如何解決？

其實(shí)稍微改進(jìn)一下就可以解決這個問題。比如首先僅加載A類下的一個子分類的10個產(chǎn)品，這樣初始狀態(tài)下這部分圖片的體積就是1*10*200KB=2MB，這個大小對于現(xiàn)在的網(wǎng)絡(luò)環(huán)境似乎還可以接受。然后在每次切換的時候，通過ajax請求對應(yīng)子分類的產(chǎn)品圖片信息，加載進(jìn)來覆蓋之前的；當(dāng)然可以對已經(jīng)加載的內(nèi)容進(jìn)行緩存。實(shí)際上就一個模塊2MB也并不完美，還是覺得大了，那么可以進(jìn)一步優(yōu)化，那就是默認(rèn)狀態(tài)下僅加載A類下子分類的第一個產(chǎn)品的大圖，以及這個子分類下所有產(chǎn)品的縮略圖，這樣默認(rèn)大小理論上大概就是1*1*200+1*10*10=300KB（其中假設(shè)縮略圖是10KB每張）；這樣顯然并最開始不是一個檔次；形象地說，在其他條件一致情況下，現(xiàn)在和最開始打開網(wǎng)頁，就相當(dāng)于是一個火箭一個是拖拉機(jī)了。