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

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

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

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

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

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

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

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

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

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

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

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

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

那么改如何解決？

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