雙十一電商顏值那些事：你的秒殺系統(tǒng)如何設計？（獲獎名單已公布）

shenlanyouyu

獲得技術圖書《HTML 5與CSS 3權威指南》的用戶有：

jszxcyit
thinkeasy
chenxing2

請以上獲獎者在2016年3月1日前將姓名，公司，職務，行業(yè)，電話，郵箱，QQ，地址，所選紀念品，站內(nèi)短信發(fā)送給王楠w_n以便及時給您快遞獎品。

發(fā)不了站短的，請在原帖下方跟帖留言。

至于QQ現(xiàn)因兩個編輯輪番值班登陸，可能會有遺漏的情況，有任何問題請盡量在原帖下方跟帖留言或在站務版塊反饋，謝謝！

注：因特殊原因，每次活動的獲獎者我都會通知各位，如果大家在截止日期之前還未聯(lián)系到管理員，那么本次活動的得獎資格將被取消，所以請大家及時的與管理員取得聯(lián)系，謝謝合作！

---

---

話題背景：
11.11，這一民間自發(fā)形成的全民性定期狂歡如期而至，單身者努力脫光，女網(wǎng)友們瘋狂網(wǎng)購敗家，在電商“雙十一”的促銷大戰(zhàn)中，已成為網(wǎng)購一族的狂歡節(jié)。成千上萬人同時秒殺一件商品，讓消費變得有趣、讓消費渠道變得寬廣。網(wǎng)購全球化、無線化的趨勢顯現(xiàn)，或?qū)⒏淖內(nèi)�世界的消費模式。被無數(shù)“敗家女人”成就的馬云，靠的顏值嗎？
在一個大型的大型電子商務網(wǎng)站技術架構中，前端架構一定是一項必不可少的工作，大型的互聯(lián)網(wǎng)公司有非常強大的前端技術人員，淘寶UED團隊就有好幾十人。前端擔負著全站人機交互界面的實現(xiàn)和品質(zhì)保證的重任， 雙十一當天，天貓將會上線各種雙十一特有界面及數(shù)百個分會場。雙十一，電商顏值的那些事兒，歡迎大家暢所欲言。


討論話題：
1、秒殺系統(tǒng)的頁面該如何設計？
2、大并發(fā)量和大流量面前，為了減輕后端服務的壓力及提升前端性能，如何對頁面的部分內(nèi)容進行分級、降級處理？
3、前端頁面如何在PC和移動設備上跨終端實現(xiàn)？
4、數(shù)百個運營活動涉及到非常多的內(nèi)容維護和策略調(diào)整，如何保證不出現(xiàn)錯誤圖片、錯誤連接及性能保持高效？


討論時間：
2015-11-4至2015-12-03


活動獎勵：
活動結束后將選取4名討論精彩的童鞋，每人贈送一本《HTML 5與CSS 3權威指南》圖書一套作為獎勵。


獎品簡介：   
作者： 陸凌牛
出版社：機械工業(yè)出版社
出版日期：2011 年4月
開本：16開
頁碼: 416


內(nèi)容簡介：
如果你是一位有前瞻性的Web前端工作者，那么你一定會從本書中受益，因為它就是專門為你打造的�！禜TML 5與CSS 3權威指南》內(nèi)容系統(tǒng)而全面，詳盡地講解了HTML 5和CSS 3的所有新功能和新特性；技術新穎，所有知識點都緊跟HTML 5與CSS 3的最新發(fā)展動態(tài)（HTML 5和CSS 3仍在不斷完善之中）；實戰(zhàn)性強（包含246個示例頁面），不僅每個知識點都配有精心設計的小案例（便于動手實踐），而且還有兩個綜合性的案例（體現(xiàn)用HTML 5與CSS 3開發(fā)Web應用的思維和方法）。本書不僅能滿足你全面而系統(tǒng)地學習理論知識的需求，還能滿足你需要充分實踐的需求。無論你是未入門或剛入門的前端新人，還是有多年工作經(jīng)驗的資深前端工程師，這本書都會很適合你。



樣章試讀： HTML5與CSS3權威指南（第三版）下.pdf (3.42 MB, 下載次數(shù): 71)

2015-11-04 11:38 上傳

點擊文件名下載附件

jieforest

占個坑先。。。。。


1、秒殺系統(tǒng)的頁面該如何設計？
秒殺系統(tǒng)的頁面上的元素盡可能少，頁面盡可能簡單。
秒殺系統(tǒng)的頁面沒有較大的JS腳本、CSS腳本需要加載。
秒殺系統(tǒng)的頁面不要使用Flash技術。
秒殺系統(tǒng)的頁面沒有加載緩慢的項。
秒殺系統(tǒng)的頁面可以利用HTML5的一些新技術來解決復雜的需求。比如：
1）如果業(yè)務確實需要秒殺頁面要做得很復雜，那么可以考慮HTML5的離線存儲技術。
2）如果業(yè)務確實需要客戶端與服務器端保持長連接，那么可以考慮HTML5的WebSocket技術。
3）Cache、本地緩存等也是考慮之列。
4）用CDN節(jié)點加速秒殺頁面的靜態(tài)內(nèi)容。

2、大并發(fā)量和大流量面前，為了減輕后端服務的壓力及提升前端性能，如何對頁面的部分內(nèi)容進行分級、降級處理？
肯定是把頁面上的內(nèi)容按業(yè)務/功能進行拆分，從而進行分級處理。
比如頁面上的搜索框，它的功能由后端搜索服務器提供，就應該獨立于業(yè)務服務器，單獨做搜索服務器集群。
頁面上的靜態(tài)元素、資源文件（比如圖片、CSS腳本等），通過CDN加速非常合適。
頁面上的動態(tài)內(nèi)容，根據(jù)實際的并發(fā)情況，可以按業(yè)務拆分，做成微服務架構，每一個微服務支撐獨立的小塊業(yè)務，共同支撐大并發(fā)量和大流量。

3、前端頁面如何在PC和移動設備上跨終端實現(xiàn)？
實現(xiàn)跨終端的頁面的技術有很多，要做到這一點并不難。以前常說的自適應網(wǎng)頁技術說的就是這個。
常見的BootStrap就是很適合的技術。
還有React框架、KISSY、Sprite3D.js等框架。
不僅要在網(wǎng)頁上適應各種屏幕尺寸，還要通過一套統(tǒng)一的API實現(xiàn)對各種移動設備的本地功能的調(diào)用，完成同樣的功能。這就需要像PhoneGap這類的框架，實現(xiàn)跨終端的功能的統(tǒng)一。

4、數(shù)百個運營活動涉及到非常多的內(nèi)容維護和策略調(diào)整，如何保證不出現(xiàn)錯誤圖片、錯誤連接及性能保持高效？
這個涉及到的因素有很多，我大致歸納一下，如下：
1）業(yè)務服務器保持健壯、高可用、高可靠；
2）機房服務器的組網(wǎng)正確，尤其是混合組網(wǎng)，保持各主機間的暢通；
3）數(shù)據(jù)庫、文件服務器等同樣保持健壯、高可用、高可靠。
......

王楠w_n

給力 回復 2# jieforest


   

demilich

應景，茲持 !!

kns1024wh

大數(shù)據(jù)系統(tǒng)嗎？

shang2010

聽說很多打折很便宜，請問作為消費者怎么優(yōu)選來自商家五花八門的讓利

wsysx

不懂前端技術，純屬支持

forgaoqiang

是時候占個坑看看情況了~

hiyachen

1、秒殺系統(tǒng)的頁面該如何設計？
     簡單適用、頁面數(shù)據(jù)小。

2、大并發(fā)量和大流量面前，為了減輕后端服務的壓力及提升前端性能，如何對頁面的部分內(nèi)容進行分級、降級處理？
      實時不高的降級處理，少些事務提交，盡量用緩存。
      前段不要太復雜。

3、前端頁面如何在PC和移動設備上跨終端實現(xiàn)？
     這是不實用的技術，在移動設備上的頁面數(shù)據(jù)量小。

4、數(shù)百個運營活動涉及到非常多的內(nèi)容維護和策略調(diào)整，如何保證不出現(xiàn)錯誤圖片、錯誤連接及性能保持高效？
     exception,例外處理做的不錯。網(wǎng)絡重寫也要到位。

thinkeasy

1、秒殺系統(tǒng)的頁面該如何設計？
頁面稍稍復雜一些，在適當?shù)姆秶鷥?nèi)，占用用戶時間可以長一點，以減輕后臺數(shù)據(jù)壓力。
2、大并發(fā)量和大流量面前，為了減輕后端服務的壓力及提升前端性能，如何對頁面的部分內(nèi)容進行分級、降級處理？
如果內(nèi)容太多，可以分批分場對進行架構設計，以將用戶分流到不同的服務器上，增加抗壓能力，即使個別服務器掛了，也只影響到某個專場或產(chǎn)品。
3、前端頁面如何在PC和移動設備上跨終端實現(xiàn)？
這個沒有捷徑，因為顯示的方式不同，如果要達到良好的效果，還是重新設計，制作不同的頁面吧。
4、數(shù)百個運營活動涉及到非常多的內(nèi)容維護和策略調(diào)整，如何保證不出現(xiàn)錯誤圖片、錯誤連接及性能保持高效？
這個不難，只要后臺正常，維護人員正確上傳圖片，就沒有問題，程序是不會把圖片搞錯的，主要看活動組織者的認真程度了。