知乎最新開發的「值乎」前端體驗為什麼那麼流暢快捷?

大家在使用值乎的時候有沒有發現無論是頁面的切換還是支付的拉起,都異常的流暢和快捷?是有什麼特別的技巧嗎?


@黑八 看了他的 github repo 上面拔下來的值乎的代碼,

前端狗表示應該是倆原因(先猜了一下,後面發現猜對了)

1. react 目測配上了 react router。

2. 提前載入了你點擊新頁面需要數據。

其實和我寒假寫的博客原理一致(我博客還是寫了不少前端方面的知識,非常值得工資1w 以內的前端一看) http://simplyy.space/ 我博客開發介紹 http://simplyy.space/article/56cb46564496cee272dea173

驗證

果然和我想的一樣,黑八倉庫里的代碼裡面有 react router (一搜就出來了有木有),json 文件很大,70+kb。

為什麼這麼快呢

首先 react router 用過的人就肯定知道,這就是傳說中的前端路由(也就是 spa 單頁應用開發),簡單的來說就是不需要去向後端請求一個新的 html,再去解析這個 html 來顯示,而是通過 js 來動態更改頁面和 history 即路由,這樣以來整個過程就是在客戶端發生的。

然後通常 ajax 的使用 是用戶點擊啥也就是發生了交互後,再去發起,我博客沒有這麼去開發,而是,分3步,用 promise 串列執行

1. 先ajax載入當前頁面渲染所需數據,

2. 然後 render 頁面,

3. render 完成後再去ajax載入用戶很有可能去點擊的頁面,並且這個數據不會太大(100kb 到1mb,這個大小要考慮用戶是手機還是電腦)

後來我在 ife 的博客裡面也看到類似的文章,裡面介紹了 spa 應用他就是這麼做的,並且更為複雜,他將載入的數據分成了3層,總之,就是大大減少了用戶交互時等待的時間,並且也和數據大小做了權衡,只載入常用數據。

總之這樣以來,用戶交互的時候,完全是直接在管理 state 的 Store (不知道值乎用的是不是 redux?)里把數據取出來,再 render,so easy so fast,完全不需要再發 ajax 請求。

ps:後來為了 seo,我博客近期改成了 react 後端渲染,也就是 react 同構開發,但是話說,,後端react 渲染性能很差啊,搜了一下 react 中文社區也說要從根本上解決這個問題,得等 facebook 優化 orz

ps2: 我看到了啥233

我真是預言帝,值乎果然用到了 redux


看這裡:GitHub - TTnode/zhi.zhihu.com: zhi.zhihu.com html js and json

昨天晚上搞下來的值乎前端代碼。


用了一下,體驗並不是很好,主要三個方面。

一、我這專業太冷門,好多天也不會有人問。

二、問的人要給我錢,來知乎的時候就是覺得知乎分享精神很好,而且大神們都很熱心。感覺收錢了就好像變了味道,無論回答得好與壞,都是一種壓力,原本技癢炫耀的熱情染上了一層銅臭味,總之我不喜歡。

三、直乎有點像芬答,娛樂明星八卦一下或許我會想聽,但專業的事情要花錢,好像和互聯網精神有些背離,如果這樣下去百度知道也要錢才回答,有問題要付錢才有答案。可能回答的人會把側重點放在賺錢上了,而且小V就算去了也根本不會有人問你的吧?

如果是為了賺錢而答題,娛樂可以,知識不行。賺錢可以跨界,比如優質的知乎回答會帶來相關的粉絲流量,值乎可能就比較難。再說了,幾十塊問一個問題,真把哥當要飯的呢?

其實每天都有粉絲問翡翠哥問題,或者找翡翠哥幫忙。翡翠哥從不問要紅包,但幫忙完了以後還是會有些小夥伴們給翡翠哥打紅包,有多有少,特別感謝大家的支持,這些錢我都會換成東西捐去慈善機構或者幫助有困難的人。翡翠哥本來也不是缺錢的人,何必非要給自己定個價呢?

有些時候我遇到的人有好也有壞。想回答的,不給錢我也會回答得很好,不想說的,一百萬我也不想和你說話。

我喜歡翡翠,沒道理的。就像我喜歡知乎沒道理的,就是喜歡這裡的氛圍,就是喜歡這裡任性的大神。至於值乎嘛,不做評價,拭目以待,有專業性問題在知乎問我吧,想知道個人生活娛樂內幕的或許值乎會更合適吧。


有一次付了錢沒打開答案。


為什麼我訪問知乎很快,但再打開值乎,兩天了,都沒打開,什麼原因?都看不到自己的問題了


因為知乎有一群優秀的工程師啊,當然了,不能忘記誇獎一下我們價值觀十分正確的鸛狸猿同學


因為是spa單頁面應用。路由拼接前端頁面,渲染


推薦閱讀:

如何評價「值乎」3.0?
「為了養肥我的貓,我決定成為偶像」
女孩權謀教學
關於昏答的叨叨之二(這次還要加上值乎)

TAG:知乎 | 前端開發 | 值乎 |