優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利

電商網(wǎng)站臃腫原因分析

       電商網(wǎng)站臃腫原因分析。近十年的互聯(lián)網(wǎng)大爆發(fā), 促使網(wǎng)絡(luò)通訊能力大大提升, 寬帶網(wǎng)速已經(jīng)可以達(dá)到100兆甚至更高, 移動(dòng)通訊的4G技術(shù), 也給使用者帶來(lái)了高速的網(wǎng)絡(luò)通路。在網(wǎng)絡(luò)加載如此便捷的前提下, 網(wǎng)站的體積不斷增大。在約早十年前的網(wǎng)絡(luò)時(shí)代, 在移動(dòng)端打開(kāi)一個(gè)網(wǎng)頁(yè), 需要耗時(shí)幾秒, 而加載過(guò)來(lái)的內(nèi)容, 只有十分簡(jiǎn)潔的文字和小圖標(biāo), 那時(shí)候人們?cè)L問(wèn)的網(wǎng)站, 多數(shù)是新聞或小說(shuō)這類(lèi)以文字為主題的網(wǎng)站, 網(wǎng)站十分簡(jiǎn)單。而如今, 得益于通訊技術(shù)的進(jìn)步, 在移動(dòng)端設(shè)備上, 加載數(shù)兆大小的網(wǎng)站, 所花費(fèi)的時(shí)間可能不到一秒。如此便捷的網(wǎng)絡(luò)環(huán)境, 促使網(wǎng)站設(shè)計(jì)者往網(wǎng)站上增加更多的內(nèi)容, 包括高清圖片、音頻視頻、精美動(dòng)效和游戲等。很多時(shí)候, 用戶(hù)在某個(gè)網(wǎng)頁(yè), 需要查看的東西, 僅僅是一小部分內(nèi)容, 而網(wǎng)站卻給用戶(hù)附帶了其他推薦內(nèi)容、相似內(nèi)容、廣告內(nèi)容等。這些內(nèi)容不僅僅占據(jù)著視覺(jué)上的位置, 同時(shí)也占據(jù)了不少網(wǎng)絡(luò)請(qǐng)求, 影響了瀏覽性能, 網(wǎng)站也變得越來(lái)越臃腫。除了網(wǎng)絡(luò)傳輸上的技術(shù)進(jìn)步, 還有開(kāi)發(fā)技術(shù)上的全面更新。以前的網(wǎng)站, 并沒(méi)有明確地區(qū)分前端后端開(kāi)發(fā)。以前淘寶的網(wǎng)站基本上都是基于MVC框架Webx, 架構(gòu)決定了前端只能依賴(lài)后端。所以他們的開(kāi)發(fā)模式依然是, 前端寫(xiě)好靜態(tài)Demo, 后端轉(zhuǎn)換成VM模版。

       目前大多數(shù)新網(wǎng)站均采取前后端分離, 將更多的交互邏輯分配給前端來(lái)處理, 如圖2所示, 后端專(zhuān)注于其本職工作, 負(fù)責(zé)數(shù)據(jù)模型Model層, 進(jìn)行權(quán)限控制以及進(jìn)行運(yùn)算工作。而前端開(kāi)發(fā)人員需要與后臺(tái)解耦, 獨(dú)立控制視圖View層。前端可以根據(jù)業(yè)務(wù)邏輯, 通過(guò)Ajax主動(dòng)去獲取后臺(tái)數(shù)據(jù) (Controller) , 并插入視圖層展示。前端需要獨(dú)立完成與用戶(hù)交互的整個(gè)過(guò)程。因此, 前端負(fù)責(zé)的內(nèi)容就變得更多了, 業(yè)務(wù)邏輯更多地交給前端去控制, 前端開(kāi)發(fā)人員需要引用更多的框架或者寫(xiě)更多的邏輯去實(shí)現(xiàn), 因此網(wǎng)頁(yè)會(huì)變得越來(lái)越復(fù)雜、臃腫。電商網(wǎng)站是圖片加載數(shù)量最多的網(wǎng)站類(lèi)型之一。在主流的電商網(wǎng)站中, 主頁(yè)的風(fēng)格, 大多數(shù)是商品的大圖展示, 往下滾動(dòng), 便是各種精美商品的中型圖片展示。一般電商網(wǎng)站都是做長(zhǎng)頁(yè)面的, 即一頁(yè)加載的內(nèi)容非常多, 方便用戶(hù)瀏覽, 不用通過(guò)點(diǎn)擊頁(yè)碼切換商品。因此, 圖片資源過(guò)多是導(dǎo)致電商網(wǎng)站臃腫的主要原因之一。

       電商企業(yè)之間的競(jìng)爭(zhēng)非常激烈, 電商網(wǎng)站會(huì)通過(guò)各種酷炫的網(wǎng)頁(yè)效果, 來(lái)吸引用戶(hù), 留存用戶(hù)。例如常見(jiàn)的圖片輪播、全屏紅包彈窗、各種精美動(dòng)畫(huà)等。除此復(fù)雜的設(shè)計(jì)外, 網(wǎng)站開(kāi)發(fā)人員還需要設(shè)計(jì)更多邏輯, 這個(gè)環(huán)節(jié)就很考驗(yàn)網(wǎng)站開(kāi)發(fā)人員的技術(shù)能力。如上述的各種動(dòng)效, 網(wǎng)上均有很多CMS模板或框架可以支持使用, 開(kāi)發(fā)者無(wú)需關(guān)心具體動(dòng)效實(shí)現(xiàn)細(xì)節(jié), 只需要引用開(kāi)源框架的所有代碼, 按照要求配置即可實(shí)現(xiàn)。這種做法得到大多數(shù)開(kāi)發(fā)者的青睞, 因?yàn)樗蟠鬁p少了開(kāi)發(fā)難度, 節(jié)省了時(shí)間。但是, 這種做法犧牲的是網(wǎng)頁(yè)的質(zhì)量。很多時(shí)候這種模板框架的功能是大而全的, 開(kāi)發(fā)者會(huì)因?yàn)樾枰玫侥硞€(gè)效果, 而需要引入整個(gè)框架。這種模板或框架, 通常也依賴(lài)多個(gè)其他的模板和框架, 結(jié)果為了實(shí)現(xiàn)一個(gè)效果, 引入了不少冗余的資源, 網(wǎng)站加載的JavaScript文件數(shù)量過(guò)多, 邏輯復(fù)雜, 會(huì)降低瀏覽器性能。

本文地址:http://m.hbbqcd.cn//article/24672.html
相關(guān)文章:
最新文章: