寫給產(chǎn)品經(jīng)理的技術(shù)書:客戶端、服務(wù)端和交互相關(guān)技術(shù)

43 評論 112120 瀏覽 2157 收藏 71 分鐘

產(chǎn)品經(jīng)理有三大領(lǐng)域的技術(shù)是需要去攻克的,分別是:客戶端相關(guān)技術(shù)、服務(wù)端相關(guān)技術(shù)、交互相關(guān)技術(shù)

一、客戶端相關(guān)技術(shù)

1.iOS和安卓產(chǎn)品差異

1.1 應(yīng)用的設(shè)備不同:

IOS和安卓最大的區(qū)別在于本身所應(yīng)用的設(shè)備不同。IOS系統(tǒng)主要是應(yīng)用在iPhone、IPad、itouch設(shè)備上的操作系統(tǒng),安卓系統(tǒng)主要是應(yīng)用在安卓智能手機(jī)上的操作系統(tǒng)。

1.2 面向人群不同:

IOS系統(tǒng)面向的是中高層收入的人群,有人稱它為“高富帥”系統(tǒng),而安卓系統(tǒng)則是面試中低層的大眾人群,有人稱它為“屌絲系統(tǒng)”。

1.3系統(tǒng)的開放性區(qū)別:

安卓擁有自己的開源計(jì)劃AOSP(Android Open Source Project),只要遵循GPL和Apache Licence 2.0開源協(xié)議,那么你就可以使用安卓源代碼進(jìn)行二次開發(fā)。而安卓由于源代碼開放,自然可玩性也比iOS高。此外,安卓比iOS開放了更多的應(yīng)用接口API,可以很自然地利用安卓實(shí)現(xiàn)很多在iOS上不折騰就沒法做的功能。在安卓,可以隨心隨意地更換輸入法,隨意用任何瀏覽器打開鏈接,隨意從任何途經(jīng)安裝程序,隨意調(diào)用第三方程序分享文件——這些在iOS上不越獄都做不到,即使越獄也未必比安卓做得更好。

1.4系統(tǒng)的安全性區(qū)別:

IOS系統(tǒng)是一款比較強(qiáng)大的操作系統(tǒng),在IOS系統(tǒng)運(yùn)行的程序不管程序多大都不會造成死機(jī),玩起來非常的流程,而且系統(tǒng)的安全性比較高。

安卓系統(tǒng)是屬于代碼系統(tǒng),如果所有的應(yīng)用程序需要下載下來之后才能玩,系統(tǒng)用久之后會經(jīng)常出現(xiàn)卡機(jī)或者是死機(jī)的現(xiàn)象,而且安卓系統(tǒng)還存在惡意的插件在系統(tǒng)上自動運(yùn)行,系統(tǒng)漏洞多,導(dǎo)致個人資料被盜、系統(tǒng)耗電大,流量消耗大等,系統(tǒng)安全性相對來說比較低。

1.5開發(fā)難度不同:

蘋果提供完整高效xcode,sdk等開發(fā)環(huán)境,ios系統(tǒng)一脈相承,ios版本之間的軟件通用,即開發(fā)一款產(chǎn)品蘋果所有設(shè)備都能運(yùn)行。其硬件的強(qiáng)大也讓開發(fā)變的更加容易。

2.Web前端技術(shù)-HTML、CSS、JavaScript

  • HTML、CSS、JavaScript共同構(gòu)建了你看到的任何一個網(wǎng)頁展示和交互:
  • HTML(HyperTextMarkup Language)超文本標(biāo)記語言
  • CSS(Cascading Style Sheets)級聯(lián)樣式表
  • JavaScript一種腳本語言,主要用于前端頁面的DOM處理

文本的意思,應(yīng)該大家都明白,就是你隨手在桌面上建立一個txt,這就是一個文本文件。

那什么是HTML超文本標(biāo)記語言呢?超文本就是超越文本的意思唄,超越文本的意思就是它已經(jīng)不僅僅是簡單的文本,比普通的txt要高級一些,那到底高級在哪里呢,是第二個詞Markup(標(biāo)記的意思),就是對一個普通的txt里面的文字進(jìn)行標(biāo)記,標(biāo)記其中的一段為title,標(biāo)記另一段應(yīng)該另起一行,標(biāo)記任意一段為某個意思。最后超越了普通文本的標(biāo)記,這些記號對普通文本的修飾,就構(gòu)成了一套規(guī)則,這套規(guī)則就是html。

CSS中文名叫級聯(lián)樣式表,也是一個超別扭的名字,但是樣式大家都應(yīng)該懂,就是長什么樣子,類比到生活中,就是HTML只是你的肉體,你總要穿上衣服,戴上牙套,穿雙鞋再出門吧。再舉剛才蓋房子的例子,你定義好了各個空間,并且房子也蓋起來了,你要裝修,比如客廳用什么壁紙,臥室的地板用什么樣子,CSS就是起裝修作用的,必須要和HTML一起配合使用。

JavaScript是一種腳本語言,他在網(wǎng)頁中使用的主要場景是控制HTML中的每一個元素,有時候可以把有些元素刪除,有時候要添加新元素,你常常遇到過這樣的場景,點(diǎn)了一個按鈕,這個時候會有一個網(wǎng)頁上從沒有過的元素出來,其實(shí)就是利用JavaScript實(shí)現(xiàn)的。你的房子已經(jīng)裝修好,貼上了墻紙,鋪上了地板,桌子,板凳,沙發(fā)都已經(jīng)擺好了,一切都完美了,可是一切都是靜態(tài)的,作為一個有生活情趣的人,你總是要買些新家具,或者想把茶幾換個位置,這個時候這種在這個屋子里的所有移動,添加,減少物件就只能靠JavaScript實(shí)現(xiàn)。

當(dāng)前互聯(lián)網(wǎng)上的任何一個網(wǎng)頁,都是由他們?nèi)齻€構(gòu)建起來的,雖然簡單,但你不可不知。

3.實(shí)時更新移動客戶端技術(shù)–React Native

做為一名產(chǎn)品經(jīng)理,你是否遇到過這樣的窘境,“幫我把字體調(diào)成16號唄,顏色變成#FFFF00FF,老大說這里最好改一下”,作為一名app的開發(fā)只能無奈但心里竊喜的告訴你,“只能等下個版本了,必須要重新發(fā)布才能改”,如果你問為什么不能改了就生效啊,那說明你對技術(shù)的理解要么真的很差,要么你就是知道這項(xiàng)React-Native新技術(shù)所爆發(fā)出來的力量。

React Native是Facebook推出的一個用JavaScript語言就能同時編寫ios,android,以及后臺的一項(xiàng)技術(shù),2015年9月發(fā)布了android版本,又在程序員里面掀起了一波小高潮,不斷有喜歡嘗鮮的程序員投入到這個領(lǐng)域。用大白話說,就是從此一名程序員自己就可以創(chuàng)業(yè)了,他只用這一門技術(shù),就可以同時寫出androidapp,ios app,以及后臺應(yīng)用程序,并且,請注意這里,它可以做到實(shí)時熱更新(就像網(wǎng)頁一樣,改了一個字體,隨時可上線),app也能做到隨時都能更新了,第一段講的那個需求可以分分鐘秒殺解決,不用新發(fā)版本,只需在服務(wù)器改動一下代碼即可,真的很牛逼。

4.Android應(yīng)用權(quán)限

目前國內(nèi)Top 100的熱門應(yīng)用,來看看它們最喜歡的申請的權(quán)限是什么,以及拿到這些權(quán)限后可用做些什么事情:

網(wǎng)絡(luò)訪問權(quán)限

互聯(lián)網(wǎng)產(chǎn)品,當(dāng)然要聯(lián)網(wǎng)才行啦,所以每個應(yīng)用都申請了這個權(quán)限

修改或刪除外置存儲中的內(nèi)容

往用戶的SDCard上隨意讀寫文件的權(quán)限。當(dāng)你的手機(jī)用了一段時間后,發(fā)現(xiàn)SDCard上面亂糟糟的,什么奇怪的文件名都有,就是因?yàn)檫@個權(quán)限,每個應(yīng)用都想著你手機(jī)里留下一些痕跡。其實(shí)為了存儲數(shù)據(jù),系統(tǒng)給了特定的存儲空間,這并不是應(yīng)用必須要用的權(quán)限。

讀取手機(jī)狀態(tài)和身份

有了這個權(quán)限,可以獲取到手機(jī)的唯一識別碼IMEI,很多應(yīng)用用它來做為單一用戶的標(biāo)識,沒什么可怕的。

查看WLAN連接

可以查看用戶當(dāng)前的WiFi接入點(diǎn)信息

控制振動

這個沒什么好說,就是要讓你手機(jī)有動次達(dá)次的效果

檢索正在運(yùn)行的應(yīng)用

可以查看用戶當(dāng)前運(yùn)行了哪些應(yīng)用,瞅瞅你平時喜歡用些什么應(yīng)用,也可以看看競品的活躍程度:)

防止手機(jī)休眠

在鎖屏后為了降低功耗系統(tǒng)會進(jìn)入休眠狀態(tài),但是很多應(yīng)用為了維持后臺運(yùn)行,就會申請這個權(quán)限,這也是Android系統(tǒng)比較耗電的原因之一,都是應(yīng)用希望知道用戶的位置(基于網(wǎng)絡(luò)),O2O這么火的年代,為了提供更個人化的服務(wù),各路應(yīng)用都希望知道用戶的當(dāng)前位置。

開機(jī)啟動

要想日日夜夜的陪伴,那就得一開機(jī)就啟動,也是耗電的罪魁

相機(jī)

幫你打開相機(jī),掃一掃二維碼,拍一拍片片

在其他應(yīng)用之上顯示內(nèi)容

桌面上那些飄來飄去的東西,或者你正用著一個應(yīng)用,其它某個APP又突然蹦了出來蓋在上面,都是用的這個權(quán)限

精確位置(基于GPS和網(wǎng)絡(luò))

三胖想定點(diǎn)轟炸你,就得用這個權(quán)限,獲取精確的GPS位置

安裝快捷方式

很多應(yīng)用希望用戶更方便的啟動自己,都喜歡往桌面上發(fā)送一個快捷圖標(biāo),更有喪心病狂的應(yīng)用,會發(fā)送多個圖標(biāo)到桌面。往往新買一個手機(jī),安裝10個應(yīng)用,桌面上會出現(xiàn)20個以上圖標(biāo)的,就是因?yàn)樗?/p>

錄音

每個應(yīng)用都有一個成為微信的夢想

卸載快捷方式

悄悄的將自(友)己(商)的圖標(biāo)刪掉:)

讀取聯(lián)系人信息

大家都對這個權(quán)限很敏感,應(yīng)用有了這個權(quán)限,就可以讀取你的通訊錄,不懷好意的應(yīng)用還會偷偷上傳,哪天你收到垃圾短信也不必奇怪,也許是你的某個好基友“出賣”了你

停用屏幕鎖定

你得一直看著我,不要讓屏幕鎖定了

發(fā)送短信

有了這個權(quán)限,就可以花用戶的錢,給自己發(fā)條短信。感覺應(yīng)用都沒有什么正當(dāng)理由來獲取這個權(quán)限

讀取短信

查看用戶的短信,感覺這是老大哥干的事,普通應(yīng)用拿來是夠惡心的

5.Android休眠狀態(tài)

(1)任何一個應(yīng)用申請了wakelock鎖,待機(jī)(按:什么是待機(jī)?待機(jī)與屏幕黑、鎖屏、休眠的關(guān)系是什么?)時沒有釋放掉,系統(tǒng)是不會進(jìn)入待機(jī)的,直到所有應(yīng)用的wakelock鎖都釋放掉了,才會進(jìn)入待機(jī)。

(2)如果不進(jìn)行特別的設(shè)置,Android會在一定時間后屏幕變暗,在屏幕變暗后一定時間內(nèi),CPU也會休眠,大多數(shù)的程序都會停止運(yùn)行,從而節(jié)省電量。

(3)Android手機(jī)有兩個處理器,一個叫Application Processor(AP),一個叫Baseband?Processor(BP)。非通話時間,BP的能耗基本上在5mA左右,而AP只要處于非休眠狀態(tài),能耗至少在50mA以上,執(zhí)行圖形運(yùn)算時會更高。一般手機(jī)待機(jī)時,AP、LCD、WIFI均進(jìn)入休眠狀態(tài),這時Android中應(yīng)用程序的代碼也會停止執(zhí)行。Android為了確保應(yīng)用程序中關(guān)鍵代碼的正確執(zhí)行,提供了Wake Lock的API,使得APP可以通過之阻止AP進(jìn)入休眠。但不一定必要,首先,完全沒必要擔(dān)心AP休眠會導(dǎo)致收不到消息推送。通訊協(xié)議棧運(yùn)行于BP,一旦收到數(shù)據(jù)包(按:收到TCP數(shù)據(jù)包才會喚醒AP,UDP包不會喚醒),BP會將AP喚醒,喚醒的時間足夠AP執(zhí)行代碼完成對收到的數(shù)據(jù)包的處理過程。其它的如Connectivity事件觸發(fā)時AP同樣會被喚醒。那么唯一的問題就是程序如何執(zhí)行向服務(wù)器發(fā)送心跳包的邏輯。你顯然不能靠AP來做心跳計(jì)時。Android提供的Alarm Manager就是來解決這個問題的。Alarm應(yīng)該是BP計(jì)時(或其它某個帶石英鐘的芯片,不太確定,但絕對不是AP),觸發(fā)時喚醒AP執(zhí)行程序代碼。那么Wake Lock API有啥用呢?比如心跳包從請求到應(yīng)答,比如斷線重連重新登陸這些關(guān)鍵邏輯的執(zhí)行過程,就需要Wake Lock來保護(hù)(按:只在這些關(guān)鍵邏輯時,需要Wake Lock API確保不休眠)。而一旦一個關(guān)鍵邏輯執(zhí)行成功,就應(yīng)該立即釋放掉Wake Lock了。兩次心跳請求間隔5到10分鐘,基本不會怎么耗電。除非網(wǎng)絡(luò)不穩(wěn)定,頻繁斷線重連,那種情況辦法不多。

(4)Android設(shè)置–> WLAN–>點(diǎn)擊菜單鍵選擇高級–>休眠狀態(tài)下保持WLAN連接的下拉列表{始終、僅限充電時、從不(會增加數(shù)據(jù)流量)},如果設(shè)置不為始終,那么我們鎖屏休眠后,程序?qū)幱跓o網(wǎng)絡(luò)狀態(tài),相應(yīng)的app用戶會一直處于離線模式。

(5)可以設(shè)置不同的模式,讓其產(chǎn)生不同的休眠,比如讓cpu保持運(yùn)行。

  • Flag Value CPU Screen Keyboard
  • PARTIAL_WAKE_LOCK On Off Off
  • SCREEN_DIM_WAKE_LOCK On Dim Off
  • SCREEN_BRIGHT_WAKE_LOCK On Bright Off
  • FULL_WAKE_LOCK On Bright Bright

6.a(chǎn)pp推送原理

傳統(tǒng)的app架構(gòu)里,通常是app主動向服務(wù)器請求數(shù)據(jù),服務(wù)器被動的提供數(shù)據(jù)。以新聞客戶端app為例:app被用戶打開的時候,會通過網(wǎng)絡(luò)(無論3g、4g還是wifi)連接到服務(wù)器上,向服務(wù)器請求最新的新聞。服務(wù)器收到請求,從自己的數(shù)據(jù)庫里查詢最新的新聞,返回給app。app收到服務(wù)器返回的數(shù)據(jù),經(jīng)過一系列的解析處理操作,最終把最新的新聞呈現(xiàn)給用戶。一次通信就完成了。

沒推送功能,你好意思叫 app 嘛?

然而如果此時服務(wù)器上又有了新的新聞,無論多么重要,在用戶沒有主動刷新的情況下,是沒有辦法讓用戶看到的。推送就是為了解決這樣的困境的,它給了服務(wù)器一個展示自我的機(jī)會,主動連接上所有的app,告訴他們我有新的新聞了,你們再來請求一次吧,于是收到推送的app(即時此時已經(jīng)被用戶關(guān)閉了)又去服務(wù)器請求最新的新聞,這樣用戶就能看到最新的新聞了。

沒推送功能,你好意思叫 app 嘛?

從技術(shù)上來講,實(shí)現(xiàn)一個推送系統(tǒng)需要服務(wù)器端和終端的配合。一種方法是輪詢,也就是不停的向服務(wù)器發(fā)起請求。這其實(shí)很好理解,作為app,我既然不知道什么時候會發(fā)生新的新聞,那我一遍一遍的問好了,而且我知道這樣一定會成功的。顯而易見,這種方法app端費(fèi)時費(fèi)力不說,電量流量也扛不住啊,服務(wù)器要處理如此量大的請求,必然也是非常頭疼的。

另一種方法是服務(wù)器和app建立一個長時間連接的通道,通過這個通道,不僅app可以向服務(wù)器請求數(shù)據(jù),服務(wù)器也可以向app發(fā)送數(shù)據(jù),看起來非常完美,但是如果app被用戶關(guān)閉的話,通道就斷掉了。好在android系統(tǒng)給app提供了一個這樣的環(huán)境,app可以啟動一個后臺服務(wù)來維持這個通道,即使app被關(guān)掉了,服務(wù)依然可以運(yùn)行,通道依然還在工作(ios后面會講)?;氐角懊娴睦?,你在睡覺前關(guān)掉了淘寶,但是并沒有關(guān)閉淘寶的后臺服務(wù),淘寶依然可以接收服務(wù)器推送來的指令,把自己的喚醒。

那么如何維持這樣的一條長時間連接的通道呢?就好比兩個人打電話,一開始聊的熱情有來有往,后來慢慢沉默下來了,幾分鐘之后,電話的另一頭沒有任何動靜,如何知道那邊的人還在呢?很簡單,只需要另一頭的人每隔幾分鐘說一個字就行。同樣的道理,app會每隔一段時間向服務(wù)器報(bào)告自己還活著,就像心跳一樣,服務(wù)器收到后,就知道這個通道是可以繼續(xù)使用的了。

然而天下沒有免費(fèi)的午餐,發(fā)送心跳是有代價(jià)的,一般手機(jī)鎖屏之后,為了省電CPU是出于休眠狀態(tài)的,然而發(fā)送心跳就會喚醒CPU,必然會增加電量的消耗。這還只是一個長連接通道的情況,如果手機(jī)里裝了2、30個帶有推送的app呢?先別急著抱怨,聰明的android工程師和ios工程師早就想到了這一點(diǎn),他們分別設(shè)計(jì)了GCM和APNS來解決多個app有多個長連接通道的問題。

以APNS為例,ios開通了一條系統(tǒng)級別的長連接通道,通道的一端是手機(jī)的所有app,另一端是蘋果的服務(wù)器。app的服務(wù)器如果有新的消息需要推送的話,先把消息發(fā)送到蘋果的服務(wù)器上,再利用蘋果的服務(wù)器通過長連接通道發(fā)送到用戶手機(jī),然后通知具體的app。這樣就做到了即使手機(jī)安裝了100個app,也只需要向一條通道里發(fā)送心跳。

沒推送功能,你好意思叫 app 嘛?

回到Android,系統(tǒng)提供的GCM只能在Android2.2以上才能使用,3.0以下必須要安裝Google play并登陸了Google賬號才能支持。而國內(nèi)發(fā)行的手機(jī)大多是閹割掉了google服務(wù)的。因此,對于Android系統(tǒng)來說,各家app只能各顯神通,開發(fā)自己的專用長連接通道了。然而這時候他們遇到了app的天敵:管家和衛(wèi)士們。

前文說了,app想要及時收到服務(wù)器推送的消息,關(guān)鍵在于自己與服務(wù)器的長連接通道不被關(guān)閉,也就是自己的后臺服務(wù)可以一直在后臺運(yùn)行,而管家和衛(wèi)士們的一鍵清理功能就是專治這種“毒瘤”的。道高一尺魔高一丈,app在與管家和斗士們的長期斗爭中,總結(jié)了一系列躲避被清理掉的方法,什么定時自啟能力、什么相互喚醒、什么前臺進(jìn)程等等,當(dāng)然這就是另一個話題了,我們后面會講到。

總結(jié)起來,app和后臺的連接方式有兩種。一種叫pull,也叫輪詢,就是定期的不斷向后臺請求,缺點(diǎn)是耗電,費(fèi)流量,不環(huán)保。對于一名有追求的程序員,他應(yīng)該會比較惡心這種方式的,你千萬不要對他說,我不管你怎么實(shí)現(xiàn),我就要這種效果這種笨蛋話了,凡事應(yīng)該找到最優(yōu)路徑。

另一種叫push,app和后臺一直維持了一條通信通道,兩端不定期的就會偷摸的約會,告訴對方“I‘m Here”,也能順帶把信息互相攜帶了。缺點(diǎn)是要維持一條長連接通道,這條通道容易被其他程序殺死,要多想復(fù)活辦法。

7.應(yīng)用程序、進(jìn)程和線程

應(yīng)用程序都是用來“應(yīng)用”的,也就是我們平時所說的“打開”、“運(yùn)行”某個應(yīng)用程序。

在每個平臺上,應(yīng)用程序都會有一個供操作系統(tǒng)使用的“入口”,這個“入口”就是讓系統(tǒng)通知應(yīng)用程序“運(yùn)行”的關(guān)鍵所在,也就是系統(tǒng)啟動應(yīng)用程序的門戶。當(dāng)我們點(diǎn)擊桌面上應(yīng)用的圖標(biāo),系統(tǒng)就會收到一條指令:“啟動XX應(yīng)用”,這時系統(tǒng)的應(yīng)用加載器就會找到應(yīng)用程序的安裝目錄,并為應(yīng)用程序創(chuàng)建一個“進(jìn)程”,進(jìn)程創(chuàng)建后,系統(tǒng)就會利用“入口”把應(yīng)用程序的“邏輯”和“數(shù)據(jù)”加載起來,并根據(jù)應(yīng)用程序的需要為進(jìn)程分配資源,如內(nèi)存、cpu等,這樣,應(yīng)用程序“運(yùn)行”的條件就滿足了。

進(jìn)程中會包含若干“線程”,這些“線程”共享進(jìn)程的資源,并且按照應(yīng)用程序中指定的“邏輯”完成既定的任務(wù),如啟動閃屏,播放視頻,響應(yīng)用戶的交互操作等。

8.同步和異步

有一天,你找到公司剛來的程序員小 T,跟他說:“我們要加個需求,你放下手里的事情優(yōu)先支持,我會一直等你做完再離開”。小 T 微笑著答應(yīng)了,眼角卻滑過一絲不易覺察的殺意。

切入正題。世界上的所有事情大致可以分為同步去做和異步去做兩種。你打電話去訂酒店,電話另一邊的工作人員需要查下他們的管理系統(tǒng)才能告訴你有沒有房間。這時候你有兩種選擇,一種是不掛電話一直等待,直到工作人員查到為止(可能幾分鐘也可能幾個小時,取決于他們的辦事效率),這就是同步的。另一種是工作人員問了你的聯(lián)系方式就掛斷了電話,等他們查到之后再通知你,這就是異步的,這時候你就可以干點(diǎn)其他事情,比如把機(jī)票也定了之類的。

同步和異步的區(qū)別就在于,在下達(dá)了執(zhí)行任務(wù)的命令后,是等到執(zhí)行完成之后才能得到結(jié)果呢,還是馬上就知道了結(jié)果(盡管是不確定的答案)。

計(jì)算機(jī)世界也是如此。我們寫的代碼是交給CPU去執(zhí)行的,在這個過程中經(jīng)常面臨是讓CPU同步執(zhí)行還是異步執(zhí)行的選擇。比如我寫了一個APP,它可以幫你下載網(wǎng)絡(luò)上的一個文件。當(dāng)你輸入一個文件的網(wǎng)址,按下下載按鈕的一瞬間,CPU就收到了一個下載文件的任務(wù)。

聊聊同步、異步和回調(diào)

我們先想象一下同步執(zhí)行時什么情況。CPU立刻停掉了手頭的事情,包括繪制界面、對用戶的點(diǎn)擊做出響應(yīng)等等,傾盡全力去幫你下載文件。但是,這時候你會發(fā)現(xiàn),你的屏幕再也沒有響應(yīng)了,整個系統(tǒng)就像死了一樣(廢話,CPU都被你的下載任務(wù)搶走了)。過幾秒鐘,如果是Android系統(tǒng)則會彈出一個的提示,用戶非常感動,然后無情的卸載了這個APP(尼瑪褲子都脫了,你讓我看這個)。同樣的情況異步執(zhí)行要好很多。CPU馬上告訴你任務(wù)已經(jīng)被受理了,等下載完成我會通知你的。于是呢,屏幕照樣刷新,用戶點(diǎn)擊都能做出處理,就好像沒有下載過一樣。然而CPU并沒有閑著,它開啟了一個線程,專門處理這個下載任務(wù)(還記得之前講過的線程的概念嗎?不用擔(dān)心我們下面會詳細(xì)講)。過了幾個小時下載完了,你會收到一個通知,告訴你任務(wù)執(zhí)行的結(jié)果。

聊聊同步、異步和回調(diào)

一般情況下計(jì)算機(jī)通過多線程來實(shí)現(xiàn)同步,你可以把線程看做是富土康生產(chǎn)iPhone的一條生產(chǎn)線。它給生產(chǎn)一臺完整的iPhone提供了所有必須的資源:包括人力,原料,設(shè)計(jì)圖紙等等。生產(chǎn)任務(wù)來的時候,如果是同步的,那一條生產(chǎn)線就夠了,所有的小伙伴們蜂擁而上,不一會兒就搞定了。如果是異步的,那就必須新建一條生產(chǎn)線(好在CPU創(chuàng)建線程的成本并不高),分一部分資源到新的生產(chǎn)線上,這樣可以同時生產(chǎn)兩臺手機(jī)。那么生產(chǎn)線可以無限制增加嗎?答案是不行的。一是異步會面臨資源競爭的問題。比如說8條生產(chǎn)線都要組裝電池,但是電池原料只有4份,那么必然會存在其他4條生產(chǎn)線等待的其情況,如果資源競爭比較頻繁,甚至異步的執(zhí)行效率要低于同步。二是異步會導(dǎo)致狀態(tài)難以管理。比如車間主任想要統(tǒng)計(jì)一共生產(chǎn)了多少iPhone,就必須要詢問完所有生產(chǎn)線才能得出結(jié)論,而且這個詢問過程必須要停掉所有的生產(chǎn)線,同步來做。

講到這里,回調(diào)的概念呼之欲出。上面異步任務(wù)的整個過程是首先你要把自己的信息給異步任務(wù)執(zhí)行者,等執(zhí)行完成的時候,執(zhí)行者可以通過這些信息找到你,并給你一個通知。把自己信息給別人的過程叫做注冊,別人找到你給你通知的過程就叫做回調(diào)。上面的例子,你把自己的聯(lián)系方式給了酒店工作人員叫做注冊,工作人員完成任務(wù)后聯(lián)系你叫做回調(diào)。但是回調(diào)的概念其實(shí)非常廣,這里可以抽象成先把要做的事情注冊給別人,等條件滿足的時候別人再回過頭來調(diào)用你的模型。程序上響應(yīng)一個按鈕點(diǎn)擊之后要做的事情也是用回調(diào)來做的。程序員先把用戶點(diǎn)了按鈕要做的事情先寫好(比如要下載文件),注冊給系統(tǒng)。等用戶點(diǎn)擊到按鈕的時候,系統(tǒng)就會回調(diào)你下載文件的代碼。

回到前文,了解了同步、異步以及回調(diào)之后,你會這樣跟小 T 說:” 我們要加個需求,你抽時間支持下,等你做完了記得通知我?!靶?T 欣然接受,眼角閃過理解萬歲的淚光,回頭就把這事兒忘了。

9.渲染

計(jì)算機(jī)、瀏覽器、手機(jī)app的渲染道理一模一樣,你在顯示器上看到的一切也都經(jīng)歷了類似的過程,大致分為三步:測量、排版、繪制。拿支付寶手機(jī)App舉例,我們進(jìn)入界面之后看到了那么多按鈕或TAB,計(jì)算機(jī)是如何知道哪個按鈕該擺在何處,應(yīng)該多寬多高,以及程序啟動的時候應(yīng)該是呈現(xiàn)出什么樣子呢?

當(dāng)我們談?wù)搫赢嫷臅r候,我們在談?wù)撌裁? /></p>
<p>計(jì)算機(jī)里面存儲的全部是01組成的串(這些串既有程序代碼也有相應(yīng)的數(shù)據(jù)),他們靜靜的躺在你的硬盤或sd卡中,當(dāng)你點(diǎn)擊手機(jī)app上的支付寶圖標(biāo)的時候,這個時候存儲設(shè)備中的代碼和數(shù)據(jù)迅速被載入內(nèi)存,并加載執(zhí)行。當(dāng)程序運(yùn)行到構(gòu)造界面的時候,這個時候計(jì)算機(jī)像畫家一樣開始測量,每一個按鈕的寬高(其中是有一大堆算法或者說規(guī)則在默默的計(jì)算,比如一個按鈕在另一個上方,如何不和其他的按鈕重疊等等)。知道了多寬多高之后,計(jì)算機(jī)開始計(jì)算每一個按鈕應(yīng)該擺在屏幕上的什么位置。大小、位置都明確之后,計(jì)算機(jī)開始繪制,也就是把相應(yīng)的顏色或者圖片資源從CPU輸送到顯卡,顯卡把這些數(shù)據(jù)發(fā)送給顯示器的緩沖區(qū),屏幕的下一次刷新將這些新數(shù)據(jù)更新到顯示器上,整個渲染(呈現(xiàn))過程結(jié)束。</p>
<p>說了很多廢話,想說清楚的是,渲染是通過一些列計(jì)算并呈現(xiàn)的過程,其中包括測量、排版、繪制。你在任何屏幕上看到的任何一個圖形,無一例外,都經(jīng)過了這三個過程。下次和程序界的朋友溝通展示慢,頓問題的時候,你可以很隨意的說句,感覺整個渲染過程不是很流暢,保證你們的交流會很得心應(yīng)手。</p>
<h3>10.QQ快的原因</h3>
<p><b>(1)QQ會在用戶上傳、下載圖片等連接服務(wù)器操作時,結(jié)合其網(wǎng)絡(luò)情況選擇周邊最快的</b><b>服務(wù)器;</b></p>
<p><b>(2)QQ會對用戶每天使用的網(wǎng)絡(luò)進(jìn)行記錄和分析,預(yù)測出用戶在哪個時段可能用哪個網(wǎng)</b><b>絡(luò)(如3G/4G/WIFI),并在相應(yīng)時段自動連接相應(yīng)情況下最優(yōu)的服務(wù)器;</b></p>
<p><b>(3)圖片下載優(yōu)化:</b></p>
<ol>
<li>漸進(jìn)傳輸:先傳輸圖片部分?jǐn)?shù)據(jù)和像素模糊顯示,后續(xù)再將剩余數(shù)據(jù)和像素傳輸完成從而清晰顯示;</li>
<li>圖片轉(zhuǎn)碼:同等圖片質(zhì)量下圖片更小的編碼技術(shù);</li>
<li>圖片適配:較慢網(wǎng)絡(luò)如2G或較低像素終端情況下,下載較低質(zhì)量但更小的圖片,前者為提高速度,后者為節(jié)省流量;</li>
<li>預(yù)加載:為方便用戶快速打開而預(yù)加載一些大圖,可通過銀行家算法加以控制,用戶看了的話就加載對了,沒看的話就說明無效加載了,累計(jì)的無效加載到一定閥值就不再進(jìn)行預(yù)加載。</li>
</ol>
<h3>11.圖片資源處理</h3>
<p>相信廣大的產(chǎn)品經(jīng)理同學(xué)肯定希望自己的產(chǎn)品UI能夠美美的,讓用戶們賞心悅目。要做到這一點(diǎn),主要就靠咱們偉大的視覺設(shè)計(jì)師出的各種圖片資源。小到應(yīng)用程序的圖標(biāo)或者按鈕,大到啟動時的閃屏,無不是出自設(shè)計(jì)師之手。當(dāng)圖片被打包到程序中后,他們就被正式的賦予了為廣大用戶謀眼福的使命。</p>
<p>然而,圖片的大小是固定的,而使用圖片的設(shè)備分辨率卻千變?nèi)f化。比如一張1280×720分辨率的全屏閃屏圖片,可能會被加載到1080P、720P、480P甚至320P的設(shè)備上,除了720P的設(shè)備外,在其他三款設(shè)備上1280×720的圖片都會產(chǎn)生“縮放”。我們都知道,圖片的內(nèi)容都是由像素組成的,比如1280×720的圖片由921,600個像素構(gòu)成,720P的顯示設(shè)備屏幕上也正好是921,600個像素,這樣圖片的每一個點(diǎn)都可以與屏幕上的點(diǎn)一一對應(yīng),進(jìn)而完美的呈現(xiàn)圖片的細(xì)節(jié)。480P乃至320P的設(shè)備,他們屏幕上的像素點(diǎn)個數(shù)遠(yuǎn)遠(yuǎn)小于921,600(480P設(shè)備38萬個像素點(diǎn),320P設(shè)備15萬個像素點(diǎn)),屏幕上的像素?zé)o法做到與1280×720圖片像素的一一對應(yīng),這種情況下,為了讓低像素?cái)?shù)的屏幕能夠完全呈現(xiàn)高像素?cái)?shù)圖片的內(nèi)容,圖片的一些細(xì)節(jié)(像素)就會被丟棄,以480P的設(shè)備為例,1280×720的圖片就會被顯示成800×480個像素,圖片看起來被“縮小”了,也就是系統(tǒng)對圖片進(jìn)行了“縮放”。這種“尺寸”(分辨率)從大到小的縮放會丟失一些細(xì)節(jié)。</p>
<p>當(dāng)1280×720的圖片被加載到1080P(207萬像素)時,情況就更糟了。我們期望自己的圖片可以占滿用戶的屏幕,但是即便把圖片中的每一個像素都一一對應(yīng)的填充到屏幕上,還是會有一半的像素沒有內(nèi)容,這種效果大家可以想象。不過好在聰明的軟件工程師們早就實(shí)現(xiàn)了一系列的方法來讓大家避免陷入這種圖片被“放大”或“縮小”后圖片質(zhì)量變差的窘境,這些方法被叫做“插值算法”。</p>
<p>顧名思義,“插值算法”就是在原有的像素值基礎(chǔ)上,插入或修改一些像素值,并盡最大可能保證原圖的特征。當(dāng)前比較流行的插值算法主要有“鄰近插值”和“雙線性插值”,具體的算法這里不再冗述,感興趣的同學(xué)可以在網(wǎng)上隨處搜到。</p>
<p>通過上面兩段的描述,我們可以看到,當(dāng)圖片的內(nèi)容無法與屏幕上的像素點(diǎn)進(jìn)行一一對應(yīng)的時候,就會產(chǎn)生“縮放”,雖然當(dāng)前有一些手段可以盡量的避免縮放對圖片質(zhì)量造成的影響,但顯示效果或多或少都會收到影響,并且縮放的程度越大,效果損失的越嚴(yán)重。所以有的系</p>
<p>統(tǒng)會提供另外的機(jī)制盡量避免“縮放”的產(chǎn)生,或者把“縮放”帶來的副作用降低到最小。比如安卓系統(tǒng)就為應(yīng)用程序的圖片資源定義了一組文件夾,每個文件夾對應(yīng)一種屏幕的像素密度/分辨率,在不同像素密度/分辨率的設(shè)備上從對應(yīng)的文件夾中取圖片資源,盡量的減少或避免“縮放”,進(jìn)而最大化的還原設(shè)計(jì)師們的原始設(shè)計(jì)。</p>
<h3>12.Cookie和廣告聯(lián)盟</h3>
<p>相信大家都有相同的經(jīng)歷,在瀏覽網(wǎng)頁的時候,有的廣告竟然知道我近期搜索過的關(guān)鍵詞,也有一些廣告竟然知道我近期要買的東西。那到底是什么東西悄悄的把我們的信息出賣了呢?答案就是本文的主角:Cookie。</p>
<p>之前的文章講過我們?yōu)g覽一個網(wǎng)頁的時候,瀏覽器在做什么事情。它不斷的向服務(wù)器請求數(shù)據(jù),服務(wù)器不斷的回答數(shù)據(jù)。但是這個過程有個缺點(diǎn),就是每次請求都是獨(dú)立的,服務(wù)器并不會記下客戶端的信息。打個比方說,你每天都去樓下馬大姐那里吃烤串兒,但是馬大姐記性不好,你一走她就不認(rèn)識你了。這時候你就想,如果我每次去吃烤串的時候,主動給馬大姐提供一些自己的身份信息,說不定還能打個折呢。這個身份信息,在技術(shù)上就叫做Cookie。</p>
<p>Cookie是瀏覽器每次向網(wǎng)站服務(wù)器請求數(shù)據(jù)的時候,攜帶的一些額外信息,這些信息一般非常少(最多4KB),主要就是為了解決服務(wù)器記性不好的問題。當(dāng)然Cookie究竟需要攜帶什么信息,其實(shí)是由服務(wù)器決定的,比如你登錄了新浪微博之后,服務(wù)器就會要求瀏覽器把你的賬號寫到Cookie里,下次你請求你的關(guān)注列表,瀏覽器就會帶上這個Cookie,一起發(fā)送到服務(wù)器,這樣服務(wù)器就會知道你是誰了。</p>
<p>Cookie每個網(wǎng)站都會有很多,但它們是隔離開的。也就是說,百度只能訪問到百度存在瀏覽器的Cookie,微博只能訪問到微博存在瀏覽器的Cookie,百度是拿不到微博的Cookie的,這一點(diǎn)由瀏覽器保證。</p>
<p>現(xiàn)在我們來看下開頭廣告的事情。我們的搜索關(guān)鍵詞被百度保存在了瀏覽器的Cookie里,但是這個廣告是出現(xiàn)在一個博客網(wǎng)站上的,按上文的理論,這個博客網(wǎng)站只能訪問到它自己存在我們?yōu)g覽器的Cookie,為什么能訪問到百度的Cookie呢?這時我不禁想起程序界有一位祖師爺?shù)慕逃?xùn):你所有的痛苦和困惑,都可以從源代碼里找到答案(read the?fucking source code)。小弟看了下這個頁面源碼后,發(fā)現(xiàn)廣告其實(shí)是博客網(wǎng)站的程序員從百度那里拿了一段代碼放到自己的頁面上,用戶在請求廣告圖片的時候,還是去百度請求的,自然百度也就能拿到帶著搜索關(guān)鍵詞的Cookie了。拿到Cookie的百度就可以根據(jù)關(guān)鍵詞匹配他們的廣告推薦給你,這種廣告因?yàn)橥扑偷亩际怯脩舾信d趣的內(nèi)容,殺傷力特別大,被稱為精準(zhǔn)廣告。</p>
<p>成千上萬的網(wǎng)站加入了搜索引擎的廣告聯(lián)盟,這樣你在瀏覽其他網(wǎng)站的時候,都會看到帶有自己關(guān)鍵詞的廣告,哪天你搜索了一些不想讓人知道的東西,嘿嘿,這些廣告就會跳出來出賣你。</p>
<h3>13.動畫原理</h3>
<p>我們先來說幾個簡單的概念。動畫過程中的某一張靜止畫面叫做一幀(Frame),一個動畫每秒鐘播放的幀數(shù)叫做幀率(單位是FPS),一般來說當(dāng)幀率達(dá)到30幀每秒的時候,人們就會覺得這個動畫很連貫了,當(dāng)幀率達(dá)到60幀每秒的時候,這個動畫就會非常流暢了。像下面這個點(diǎn)擊按鈕彈出菜單的動畫,要達(dá)到每秒鐘60幀的幀率流暢運(yùn)行,每一幀要花多久來展示呢?如果我沒算錯的話,應(yīng)該是16毫秒左右。</p>
<p>16毫秒,也就是留給是你的手機(jī)渲染一幀的時間。還記得我們之前講過的渲染的概念嗎?在這16毫秒期間,你需要為屏幕上的所有圖片、按鈕、文字測量好大小,排布好位置,然后交給顯卡繪制出來?,F(xiàn)在手機(jī)配置越來越強(qiáng)大,但是屏幕分辨率也越來越大。分辨率越大意味著每一幀要畫的像素越多,CPU和顯卡的負(fù)擔(dān)也越重。這時候萬一哪個2B程序員插了一段從網(wǎng)絡(luò)上同步下載蒼老師.avi的代碼進(jìn)去,導(dǎo)致每一幀繪制都需要100多毫秒,這時候用戶就會看到動畫一卡一卡的,這個用戶多半是要流失了。</p>
<p>那么從技術(shù)上來講如何實(shí)現(xiàn)一個動畫呢?這里需要操作系統(tǒng)提供三個東西,一個是刷新屏幕的命令,我們假設(shè)叫refresh,我們的程序發(fā)出了這個命令后,手機(jī)就會刷新一次屏幕。另一個是繪制圖形的命令,假設(shè)叫drawFrame,這個是一個代表,具體可以是drawCircle(在屏幕上畫個圓圈)、drawRect(畫個長方形)、drawText(畫一段文字)等等。最后一個是定時器,假設(shè)叫scheduleNextFrame,它的作用是告訴操作系統(tǒng)下一幀的時間。</p>
<p><b>假設(shè)我們要繪制一個500毫秒的動畫,它展示一個圓放大30倍的動畫過程。程序員會這樣</b></p>
<ul>
<li>寫程序:</li>
<li>動畫開始:</li>
<li>第一幀:drawCircle(1倍)—>refresh—>scheduleNextFrame</li>
<li>第二幀: drawCircle(2倍)—>refresh—>scheduleNextFrame</li>
<li>第三幀: drawCircle(3倍)—>refresh—>scheduleNextFrame</li>
<li>…</li>
<li>第30幀: drawCircle(30倍)—>refresh</li>
<li>動畫結(jié)束。</li>
</ul>
<p>這種動畫實(shí)現(xiàn)起來非常簡單,iOS和Android都內(nèi)置了幾種常見動畫類型,如縮放、平移、漸變、旋轉(zhuǎn)等等。程序員只需要設(shè)置好動畫時長(前面的500毫秒),動畫中要變化的東西(前面放大多少倍),然后發(fā)出start的命令就可以了。</p>
<p>還有一種動畫叫有交互的動畫。它由用戶手指的操作觸發(fā)刷新屏幕,一個典型的場景是我們滑動朋友圈列表的時候,列表之所以跟著手指動,就是因?yàn)槭种傅囊苿佑|發(fā)了屏幕的刷新。這個場景延伸出去就是游戲了,游戲的界面刷新也是由用戶控制的。從實(shí)現(xiàn)成本上來說,程序要要實(shí)現(xiàn)一個沒有交互的動畫很簡單的,如果動畫不是特別復(fù)雜,基本上從設(shè)計(jì)師那里拿到資源和設(shè)計(jì)稿,就可以大概做出個雛形。有交互的動畫因?yàn)橐幚碛脩羰种傅挠|摸事件,會稍微麻煩一點(diǎn),但基本原理都是相通的。</p>
<h2  id=二、服務(wù)端相關(guān)

1. 302狀態(tài)碼

在互聯(lián)網(wǎng)世界里面,已經(jīng)存在數(shù)億量級的網(wǎng)頁,如何管理及標(biāo)識每一個網(wǎng)頁以及方便瀏覽器尋址到此網(wǎng)頁并展示呢?其中,每個網(wǎng)頁都對應(yīng)著一個URL(Uniform?ResourceLocation)地址,也叫網(wǎng)址,類似于一個真實(shí)世界中的門牌地址一樣,真實(shí)世界中標(biāo)識了物理地址(如北京市朝陽區(qū)某小區(qū)張大媽家的門牌號)。同樣道理,網(wǎng)址標(biāo)識了一個web頁面所在的互聯(lián)網(wǎng)里面的真實(shí)地址(這個頁面處于www.baidu.com/file/1.html,處于baidu服務(wù)器file路徑下的1這個文件)。

當(dāng)你用瀏覽器點(diǎn)擊一個頁面鏈接的時候,隨即你看到了一個新的網(wǎng)頁展示在瀏覽器內(nèi),在這個過程中,瀏覽器其實(shí)是在不斷的接收服務(wù)器端的應(yīng)答(這個應(yīng)答是服務(wù)器端的狀態(tài),所以返回碼叫狀態(tài)碼),從而來決策下一步來做什么(盡管大部分情況下,你毫無感知的就打開了你想要的頁面),這個應(yīng)答即狀態(tài)碼(status code),在http協(xié)議里面,以三位數(shù)標(biāo)識,共分為五類:分別為1××,2××,3××,4××,5××。一些常用狀態(tài)碼如下所示:

給產(chǎn)品經(jīng)理講技術(shù)丨什么是HTTP 302跳轉(zhuǎn)?

301和302表示重定向,301表示這個網(wǎng)頁已經(jīng)永久的由服務(wù)器的A路徑下移動到路徑B下,而302表示臨時移動到B路徑下,對應(yīng)到Url地址也即http://baidu.com/file/A/1.html到http://baidu.com/file/B/1.html,當(dāng)瀏覽器訪問前面一個地址的時候,這個時候服務(wù)器會告知瀏覽器,請到B路徑下獲取這個文件,隨后瀏覽器重新發(fā)起網(wǎng)絡(luò)請求,請求B路徑下的頁面,經(jīng)過渲染,呈現(xiàn)給用戶,例如淘寶的例子,請求taobao.com,收到302,從而瀏覽器再次請求www.taobao.com獲得頁面內(nèi)容。

2.升級及下載加速原理

升級檢測和升級方式

動檢測或者用戶點(diǎn)擊檢查更新以后,會像云端檢索最新的版本號,md5等等。然后與本地的版本號核對。若一致,則告訴用戶”您正在使用的是最新版本“若不一致,就下載最新版本。這兒分兩種。

一種是全部下載。換句話說就和你當(dāng)初安裝這個軟件出不多,只是下載那步他幫你完成了。數(shù)據(jù)也得到了保留。

一種是增量升級。其實(shí)增量升級的原理很簡單,即首先將應(yīng)用的舊版本Apk與新版本Apk做差分,得到更新的部分的補(bǔ)丁,例如舊版本的APK有5M,新版的有8M,更新的部分則可能只有3M左右(這里需要說明的是,得到的差分包大小并不是簡單的相減,因?yàn)槠鋵?shí)需要包含一些上下文相關(guān)的東西),使用差分升級的好處顯而易見,那么你不需要下載完整的8M文件,只需要下載更新部分就可以,而更新部分可能只有3、4M,可以很大程度上減少流量的損失。

增量更新原因

增量更新對于版本更新不是很頻繁的軟件來說還可以,但對于更新較頻繁的軟件,使用增量更新每更新一次工作量都會很大,因?yàn)槟阈枰紤]各個版本升級到最新版本的兼容性問題。比如一個APP有V1.0、V1.1、V1.2、V1.3、V1.4、V1.5幾個版本,現(xiàn)在有V2.0需要發(fā)布,如果做增量升級的話需要做之前每個版本升級到V2.0的差分包,因?yàn)槟悴荒鼙WC用戶手中的APP都是V1.5版本,這對于測試驗(yàn)證來說工作量太大了,并且管理起來也很麻煩。

升級離線下載原理

假如,你現(xiàn)在要下載QQ,普通下載,使用普通下載(瀏覽器),只能從騰訊服務(wù)器下載,并且只有一條下載路徑。就好比上學(xué)的時候缺錢,只能從老爸手上要錢。如果你使用迅雷下載,就有機(jī)會同時獲得以下幾種加速方式:

多線程下載(免費(fèi))

依舊只能從騰訊服務(wù)器下載,但是能夠獲得多條下載路徑,提升下載速度。

偶然知道生活拮據(jù),姑姑伯伯舅舅開始偷偷塞錢給你,你手中的現(xiàn)金開始富余。

P2S下載(免費(fèi))

P2S=Point to Server點(diǎn)對服務(wù)器

除了多線程下載之外,迅雷支持從全網(wǎng)的其他有QQ軟件的服務(wù)器下載,比如金山服務(wù)器等等,提升下載速度。

后來你認(rèn)識了富二代的朋友,他們時不時請你吃飯,給你買單,你幾乎不用從老爸(原始地址)那里要錢了。

P2P下載(免費(fèi))

p2p=Peer to Peer點(diǎn)對點(diǎn)

有了多線程和P2S加速之后,當(dāng)其他用戶同時在下載QQ時,你也可以直接從對方PC下載,而不用經(jīng)過服務(wù)器。(目前手機(jī)暫不支持P2P)

再后來,你有能力了,開始計(jì)劃創(chuàng)業(yè)了,幾個天使投資人對你感興趣,給你投資,你再也不用找家里人要錢。

會員高速CDN下載(迅雷會員)

CDN=Content Delivery Network內(nèi)容分發(fā)網(wǎng)絡(luò)

通過購買服務(wù)器,迅雷在用戶下載的同時,把文件快速下載到迅雷服務(wù)器(強(qiáng)大的帶寬和網(wǎng)速),用戶再從距離最近的迅雷服務(wù)器進(jìn)行下載(從迅雷服務(wù)器到迅雷客戶端的下載速度極快)。

然后你公司慢慢做大做強(qiáng),幾個大型的投資機(jī)構(gòu),如日本軟銀、紅杉資本又給你注入了資金,你已經(jīng)向高富帥邁進(jìn)了!

DCDN加速(迅雷會員)

DCDN=CDN 2.0

用戶通過協(xié)議之后,迅雷會把相關(guān)資源片段存儲在用戶PC,把每一臺PC都當(dāng)成服務(wù)器,其他用戶下載QQ時,可以獲得極快下載速度。在此過程中,迅雷須向提供存儲空間的用戶付費(fèi),作為對用戶的一種補(bǔ)償。

最后,突然發(fā)現(xiàn)巴菲特是你失散多年的干爹!于是,化身高富帥,贏取白富美,你登上了人生巔峰!??!

以上是迅雷加速的幾種原理,用戶能夠獲得遠(yuǎn)遠(yuǎn)高于原始下載的速度,這也是迅雷下載如此迅速的原因。

3.代理服務(wù)器

代理就是代為處理的意思,現(xiàn)實(shí)生活中有很多事情我們不想自己親自動手,就花點(diǎn)錢找個代理擺平,說的就是這個意思。這年頭,各種各樣的代理都有。你看到別人名片上寫著阿迪王北京總代理,就應(yīng)該知道他是替阿迪王公司賣鞋的;看到有人喜當(dāng)?shù)?,就?yīng)該知道他是在替別人的孩子當(dāng)爸爸。他們有個共同特點(diǎn),就是代理和本人干的是一樣的事情,外人很難分辨出來。

切入正題,今天我們要講的代理服務(wù)器,是指在我們上網(wǎng)的過程中訪問某個服務(wù)器的時候,并不是親自訪問真正的服務(wù)器,而是先找了一個代理,由它向真正的服務(wù)器發(fā)出請求。到這里各位看官應(yīng)該明白了,代理服務(wù)器架在客戶端和真正服務(wù)器中間,干的是替客戶端訪問真正服務(wù)器的工作。

那么這里有人要說了,不對啊,小學(xué)語文老師教過我們兩點(diǎn)之間線段最短,為什么你們不直接去真正服務(wù)器拿數(shù)據(jù),還要到代理服務(wù)器里繞個路呢?這里可能有幾種情況:一是真正的服務(wù)器藏于千里之外,我們連接不上。二是我們訪問真正的服務(wù)器的速度太慢,比不上我們訪問代理服務(wù)器+代理服務(wù)器訪問真正服務(wù)器的速度。還有一種情況,就是通過代理服務(wù)器訪問真正服務(wù)器可以隱藏訪問者的身份,保護(hù)訪問者。同理,我們在網(wǎng)絡(luò)世界中一定要懂得保護(hù)自己,一次看似不經(jīng)意的瀏覽,背后可能有好多雙眼睛在盯著你。他們可以通過各種途徑查到你的IP地址,然后上門找到你。所以請記住一句話,代理用的好,不怕查水表。

光說理論太枯燥,我們看幾個例子。下面的截圖是我們通過百度搜索點(diǎn)開了一個網(wǎng)站,上面提示“原網(wǎng)頁已由百度轉(zhuǎn)碼,已方便在移動設(shè)備上查看”。也就是說,這時候我們訪問的并不是這個網(wǎng)站真正的服務(wù)器,而是百度提供的代理服務(wù)器。這個代理服務(wù)器把真正服務(wù)器的內(nèi)容返回給我們的時候,把原網(wǎng)頁的內(nèi)容改成了現(xiàn)在這個樣子,“順便”還插入了自己的廣告(下方紅框)。

現(xiàn)在很多手機(jī)瀏覽器都有省流加速功能,其實(shí)就是通過代理服務(wù)器來達(dá)到節(jié)省流量的目的。假如我要訪問的原網(wǎng)頁A需要800K的流量,但是我開啟了省流加速功能后,瀏覽器會幫我自動連接上A的代理服務(wù)器B,B從A拿到真正的數(shù)據(jù)后,進(jìn)行一些數(shù)據(jù)的壓縮操作,那么我再訪問代理服務(wù)器B的時候,可能只需要100K就可以瀏覽網(wǎng)頁A的內(nèi)容了。

4.輕量級虛擬機(jī)–DOCKER

軟件開發(fā)中需要面對的一個挑戰(zhàn)就是環(huán)境管理問題,因?yàn)檐浖⒉皇仟?dú)立運(yùn)行的,它依賴了很多其它的軟件,包括操作系統(tǒng)、運(yùn)行時、依賴庫等等,而且對每個依賴軟件還有版本要求,有一個依賴關(guān)系稍微不對,那就可能造成軟件的運(yùn)行異常。產(chǎn)品同學(xué)應(yīng)該有過這種經(jīng)歷,從開發(fā)哥那里要一個最新版的軟件來體驗(yàn)功能,結(jié)果裝在自己的電腦上打開就掛掉,這個時候找開發(fā)哥來解決,開發(fā)哥一看就會說“哦,你這環(huán)境不對,換個Win8吧,這軟件只能在Win8以上運(yùn)行”,或者說“這個軟件需要.Net框架,你裝個.Net就好了”。

Docker,改變程序世界的箱子

其實(shí)解決依賴環(huán)境的辦法很簡單,那就是所有機(jī)器都用同一套環(huán)境。但是對于一些web服務(wù),它所依賴的軟件及關(guān)聯(lián)軟件可能有上百個,讓你去配一臺機(jī)器已經(jīng)要吐血了,如果讓你把這個服務(wù)發(fā)布到100臺不同的機(jī)器上,那么你就應(yīng)該會陣亡了。同時,很有可能因?yàn)椴煌臋C(jī)器已有的環(huán)境不同,你安裝這些依賴的同時還要保證不能影響其它已有應(yīng)用。

說了這么多,其實(shí)就是三個大問題,如何解決環(huán)境依賴?如何解決大規(guī)模部署?如何解決應(yīng)用與應(yīng)用的互相影響?Docker就是這些問題的一種解決方案,它是一個容器,也可以說是一個軟件集裝箱,這個箱子里面可以塞入特定版本的操作系統(tǒng)、數(shù)據(jù)庫、服務(wù)器程序和web應(yīng)用,這樣一套完整的web服務(wù)就集成在這個箱子里面了,當(dāng)要發(fā)布服務(wù)的時候,直接將這個集裝箱放在我們的服務(wù)器船上。如果你想發(fā)布到100臺機(jī)器上,沒問題,只需要ctrl-c、ctrl-v,將這些集裝箱復(fù)制到100臺機(jī)器上,它不會在乎船的配置高低,只要能放得下就行。

如果你想發(fā)布10個不同的服務(wù),還是沒問題,你只需將這10個不同的集裝箱依次排列在服務(wù)器船上,它們之間完全不會互相影響,因?yàn)楦髯员绘i在不同的箱子里。

有的同學(xué)可能會說了,這不就是虛擬機(jī)嘛…是的,Docker算是一種輕量級的虛擬機(jī),它比起傳統(tǒng)的虛擬機(jī)更快,更節(jié)省資源。打個比方,虛擬機(jī)就是輪船上的豪華包間,即使它用不了這么多資源,它也霸占著不讓別人使用,而Docker容器就是一個簡單的集裝箱,它只占據(jù)它需要的資源。

三、交互相關(guān)

1.網(wǎng)頁與原生App如何交互

想想平時用的 App,你非常確信在瀏覽一個網(wǎng)頁,然而需要登錄時,它卻喚起了你手機(jī)里的 QQ 或是微信,你不再需要輸入帳號和密碼就可以讓你瀏覽的網(wǎng)頁獲取你的登錄信息,這一切只發(fā)生在你指尖的兩次點(diǎn)擊。

網(wǎng)頁與原生 app 如何交互

而在手機(jī)上,網(wǎng)頁越來越炫酷,你都很難區(qū)分你在點(diǎn)擊的是一個原生界面(指 Native 應(yīng)用程序,說人話就是 android app 或 ios 應(yīng)用)或僅僅是一個 H5 頁面。你的操作一直穿梭在網(wǎng)頁與原生界面之間,比如一個網(wǎng)頁中的電話號碼,點(diǎn)擊就可以撥打電話,這種網(wǎng)頁和 app 交互這一切是如何實(shí)現(xiàn)的呢?

這項(xiàng)能力在安卓中叫做Js2Java(ios上也提供類似的技術(shù)),很好理解,從Js到Java,從網(wǎng)頁到app,他們是雙向通信,可互相調(diào)用的,市面上大量的App程序,都在利用這項(xiàng)技術(shù),微信更是本質(zhì)上利用這項(xiàng)技術(shù)打造了公眾帳號整個體系,使得創(chuàng)業(yè)者用一個簡簡單單的網(wǎng)頁就打通了帳號、身份、支付、客服、售后等一系列操作,雖然簡單,但是真的將移動互聯(lián)網(wǎng)的Web生態(tài)囊括了更廣闊的內(nèi)容,也是移動互聯(lián)網(wǎng)較PC互聯(lián)網(wǎng)更優(yōu)越、更猛烈的點(diǎn)之一。

以Android系統(tǒng)為例,Android手機(jī)上的App是使用Java語言編寫的,而網(wǎng)頁中則運(yùn)行著一些Html、Javascript編寫的代碼。Android的App是通過WebView(請親理解成一個組件,想象WebView就是一個沒有任何操作按鈕的瀏覽器,你輸入baidu.com他就打開了百度的頁面)來展示一個網(wǎng)頁的,同時WebView為網(wǎng)頁和原生App建立一個橋梁,讓網(wǎng)頁和原生App能夠看到彼此暴露的一些方法,從而達(dá)到互相操作的目的。

當(dāng)然,這些操作是需要前端頁面和終端程序互相協(xié)商的。雖然很多App遵守了一些相同的原則,使網(wǎng)頁在不同的APP中都能具備相同的能力,但是如果你看到同一個網(wǎng)頁在一個App中能夠調(diào)用一些安卓系統(tǒng)的能力,而在另一個APP中卻沒有對應(yīng)的能力也不要覺得奇怪(找對應(yīng)App的開發(fā)勾兌一下就好了)。

一個原生應(yīng)用為網(wǎng)頁開放的能力越多,網(wǎng)頁對原生系統(tǒng)的操作能力就越強(qiáng),就越能做出逼近原生應(yīng)用的體驗(yàn)。但是,這卻是一把雙刃劍,因?yàn)樵鶤pp開放的能力有可能會被惡意的頁面利用,對用戶造成傷害,如何控制能力的開放,也是需要產(chǎn)品和開發(fā)一起思考的問題。

例如微信是一個終端能力的宿主,擁有支付,登錄,分享,獲取App信息等能力,并以Js接口的形式提供給前端頁面使用,前端開發(fā)則需要在微信申請對應(yīng)的Js接口使用權(quán)限,才能夠在微信中正常使用對應(yīng)的能力。

最后總結(jié)一下,網(wǎng)頁塑造界面的優(yōu)勢在于靈活,隨時可以更新,而原生APP塑造的界面則能夠提供更流暢的用戶體驗(yàn),但是卻無法熱更新,只能依靠發(fā)布版本來提供新功能。通過上面說的這種技術(shù),就可以利用各自的優(yōu)勢,規(guī)避各自的劣勢來提供更好用戶體驗(yàn),例如在微信中購物的展示是網(wǎng)頁形式的,方便運(yùn)營快速更新,通過Js接口調(diào)用起原生的支付界面,給用戶更流暢的支付體驗(yàn),提高支付成功率。

2.應(yīng)用下載劫持

其實(shí)一次網(wǎng)絡(luò)下載的過程,就像一次“網(wǎng)購”,當(dāng)我們點(diǎn)擊下載按鈕時,就跟下載服務(wù)器下了一份“訂單”,“訂購”了一個文件(當(dāng)然大部分是免費(fèi)的),服務(wù)器確認(rèn)“訂單”后,就會將文件在網(wǎng)絡(luò)中“快遞”(傳輸)到用戶的終端(手機(jī)、PC等)。下載劫持一般出現(xiàn)在“下訂單”的過程中。

舉個栗子,假設(shè)我們通過微信官網(wǎng)的鏈接下載微信安卓版本的客戶端。鏈接地址為:http://dldir1.qq.com/weixin/android/weixin637android660.apk,整個流程大概是這個樣子:

當(dāng)點(diǎn)擊了下載按鈕后,客戶端會通過url中的“域名”“dldir1.qq.com”來向DNS服務(wù)器獲取確認(rèn)“訂單(下載)服務(wù)器”的IP地址,IP地址在互聯(lián)網(wǎng)中相當(dāng)于日常生活中“電話號碼”,有了它,就可以連接到這臺“訂單(下載)服務(wù)器”,而DNS服務(wù)器就像一個存貯著大量“姓名”(域名)和“電話號碼”(IP地址)的黃頁。當(dāng)客戶端獲得了“訂單(下載)服務(wù)器”的“電話號碼”(ip地址)后,就會連接“訂單(下載)服務(wù)器”,并告知“訂單(下載)服務(wù)器”客戶端需要獲取服務(wù)器上的“微信安卓版”apk文件,一般情況下,服務(wù)器在這個階段確認(rèn)了“訂單”后,就會向客戶端“快遞”(傳輸)對應(yīng)的apk文件,當(dāng)客戶端將文件下載完畢后,這次“網(wǎng)購”也就完成了。

下面,我們引入運(yùn)營商(電信、聯(lián)通等)網(wǎng)關(guān)的概念。運(yùn)營商網(wǎng)關(guān)可以類比成日常生活中的“總機(jī)”,接入運(yùn)營商的互聯(lián)網(wǎng)設(shè)備想要能夠“上網(wǎng)”,都需要經(jīng)過“總機(jī)”(運(yùn)營商網(wǎng)關(guān))的轉(zhuǎn)接。也就是說,在上圖中的第二步,我們并不能直接通過“訂單(下載)服務(wù)器”的“電話號碼”(IP地址)聯(lián)系到“訂單(下載)服務(wù)器”,而是需要先連接到“總機(jī)”(網(wǎng)關(guān)),并且告訴它,我們要向某某某服務(wù)器下“訂單”,經(jīng)過“總機(jī)”的轉(zhuǎn)接,我們才能真正連接到“訂單(下載)服務(wù)器”。整個過程如下圖:

可以發(fā)現(xiàn),DNS服務(wù)器和網(wǎng)關(guān)的決策,確定了客戶端“訂單”(下載請求)的走向。而“下載劫持”也就發(fā)生在這兩個關(guān)鍵節(jié)點(diǎn)上。

假設(shè)客戶端獲取下載服務(wù)器“電話號碼”的DNS服務(wù)器被篡改,那么客戶端可能會通過“dldir1.qq.com”查詢到一個“騙子服務(wù)器”的“電話號碼”(IP地址),當(dāng)我們聯(lián)系到這個“騙子服務(wù)器”時,我們的“訂單”(下載請求)可能會換來一些奇奇怪怪的“商品”。

當(dāng)我們遇到這種情況時,可以手動修改DNS服務(wù)器IP(具體方法請問度娘)來解決。然而當(dāng)運(yùn)營商的“總機(jī)”(網(wǎng)關(guān))“出了問題”(這些“問題”一般是運(yùn)營商主動造成的)時,就沒那么容易解決了。假設(shè)當(dāng)客戶端拿著“訂單(下載)服務(wù)器”的電話號碼要求“總機(jī)”(網(wǎng)關(guān))轉(zhuǎn)接到我們指定的“訂單(下載)服務(wù)器”時,“總機(jī)”(網(wǎng)關(guān))對客戶端說“哎呀,不要去A家下載微信了,你去我給你介紹的B家下載“XX助手”吧,比微信好用”(這個過程在技術(shù)上是被一個叫做302跳轉(zhuǎn)的機(jī)制完成的,如果你不知道什么是302,出門左轉(zhuǎn),查詢我們星期一的文章)??蛻舳耸莻€實(shí)在人,就這樣被“引誘”到B家的服務(wù)器上下載了。

“總機(jī)”(網(wǎng)關(guān))和服務(wù)器B就這樣沆瀣一氣,來騙客戶端的下載量。

3.前端和后臺的數(shù)據(jù)交互與協(xié)議

目前,除了一些特別簡單非聯(lián)網(wǎng)類應(yīng)用(比如計(jì)算器、鬧鐘等),幾乎所有的應(yīng)用均是聯(lián)網(wǎng)應(yīng)用(比如新聞客戶端,微信等等),這些app客戶端基本都只是負(fù)責(zé)用戶的交互與數(shù)據(jù)收集與展示,真正的數(shù)據(jù)和服務(wù)均存儲在云端。

那移動端究竟如何和后臺來交換數(shù)據(jù)并展示呢?我們打個比喻,其實(shí)整個過程跟去燒烤店兒擼串一樣一樣的。

拿任意一個新聞客戶端舉例,當(dāng)用戶刷新的那一刻(你萌生了吃燒烤的想法),客戶端開始組織數(shù)據(jù)請求(你開始穿衣洗臉打扮,并思考該去哪一家吃呢),當(dāng)用戶界面開始展示 loading 的時候(這個時候你正走在 “馬大姐燒烤店” 的路上),經(jīng)過幾百毫秒的時間,這個時候請求數(shù)據(jù)已經(jīng)到了服務(wù)器(你已經(jīng)坐在了馬大姐燒烤店的桌子上),服務(wù)器開始查看客戶端想要請求哪方面的數(shù)據(jù),是請求財(cái)經(jīng)頻道的,還是請求汽車頻道的數(shù)據(jù)(服務(wù)員遞來了菜單,問你想吃啥),服務(wù)器看懂了客戶端的想法開始準(zhǔn)備數(shù)據(jù)(你點(diǎn)了 20 個肉串,10 個大腰子),服務(wù)器看到你請求的是汽車頻道和財(cái)經(jīng)頻道的數(shù)據(jù)(光著膀子的烤串師傅開始烤這 20 個串和 10 個大腰子),并給回到服務(wù)員,服務(wù)員一路小跑,將你要的串和腰子遞到你的面前,這個時候相當(dāng)于數(shù)據(jù)已經(jīng)傳回到了客戶端,客戶端 loading 消失,你看到了最新的兩個頻道的數(shù)據(jù)。

那客戶端和服務(wù)器之間傳輸數(shù)據(jù)的格式是怎么樣的呢?

現(xiàn)在流行的做法通常有兩種,一種是類似于PB(Protocol?Buffer,Google定義的一個數(shù)據(jù)傳輸協(xié)議,以簡潔,省流,易用出名)的二進(jìn)制數(shù)據(jù)(二進(jìn)制數(shù)據(jù)的意思就是你打開這個文件你只能看到0和1組成的數(shù)字串,是沒辦法和你生活中任何認(rèn)識的字母聯(lián)系在一起的)傳輸,這種格式的好處是包小,重復(fù)的字段會被節(jié)省。

另一種是JSON(JavaScriptObject?Notation),這也是一種輕量級的數(shù)據(jù)傳輸格式,就是用一堆中括號把數(shù)據(jù)組織起來,不像二進(jìn)制,這種格式是人可讀的,并且比較輕巧,所以也有大量的應(yīng)用場景。下面這段數(shù)據(jù)就是JSON格式,簡單解讀一下,就是people對應(yīng)了三個人,三個人分別是中括號間的三個花括號中的人。

聊聊前端和后臺的數(shù)據(jù)交互與協(xié)議

總結(jié)起來,十分簡單,移動端提出需求,服務(wù)器按要求組織好數(shù)據(jù)發(fā)給你,針對不同的格式,移動端自己解析,展示,完活兒。其實(shí),不止移動端,前端網(wǎng)頁和后臺,后臺和后臺之間也是這個道理。

#專欄作家#

給產(chǎn)品經(jīng)理講技術(shù),微信公眾號(pm_teacher),人人都是產(chǎn)品經(jīng)理專欄作家。資深程序猿,專注客戶端開發(fā)若干年,對前端、后臺技術(shù)略懂,熱衷于對新的科技領(lǐng)域的探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 分兩次讀完的,感謝分享

    來自陜西 回復(fù)
  2. 花了兩個小時才讀完。。。信息量爆炸。滿滿的干貨,感謝作者!

    回復(fù)
  3. 同步和異步是不是說反了呢?原諒我這只杠精。。。

    來自廣東 回復(fù)
  4. 絕對的大神,剛?cè)氘a(chǎn)品不久 一字一字讀完,收益匪淺

    來自安徽 回復(fù)
  5. 看了很久還做了筆記終于做完了,覺得前面app的部分很是受益,非常贊!!

    來自北京 回復(fù)
  6. 贊,滿滿的干貨

    回復(fù)
  7. 收益了,非常棒

    來自廣東 回復(fù)
  8. 干貨很多,受益匪淺,非常感謝。

    來自廣東 回復(fù)
  9. 。。。。。蘋果面向中高層人士????這觀點(diǎn),有數(shù)據(jù)支撐嗎

    回復(fù)
  10. 完整讀完,受益匪淺,感謝作者大神!NB的大神往往能夠,用通俗的語言,把NB的事兒,講給通俗的人聽懂。
    再次感謝分享,會經(jīng)?;仡櫟膥

    來自上海 回復(fù)
  11. 干貨不少,分多次看完的,贊一個!不過,感覺有些地方說的過深了。

    來自河北 回復(fù)
  12. 老司機(jī) ??

    來自四川 回復(fù)
  13. 奈斯~

    來自四川 回復(fù)
  14. 希望能學(xué)到更多,受教了

    回復(fù)
  15. 很適合自己當(dāng)前的狀態(tài),豐富又易懂。

    來自浙江 回復(fù)
  16. 很好,很強(qiáng)大

    來自廣東 回復(fù)
  17. 看完后,獲益良多,就喜歡這種干貨類的文章,同時又不缺幽默性的文章,贊

    來自北京 回復(fù)
  18. 看完的都是真愛,不過介紹深度和廣度很適合自己當(dāng)前的狀態(tài),感謝分享

    來自北京 回復(fù)
  19. 都是干貨,不過一下寫出來太多了,感覺分幾次發(fā)出來效果會好些

    來自北京 回復(fù)
  20. 來晚了…已讀已關(guān)注,贊賞買了書~

    回復(fù)
  21. 超棒 ,滿滿干貨 詼諧易懂 ??

    來自湖北 回復(fù)
  22. :mrgreen:

    來自浙江 回復(fù)
  23. 作者用比較通俗移動的文字講述了每一個深奧(對于非技術(shù)人員來說)的技術(shù)實(shí)現(xiàn)原理,就喜歡這種簡單明了的描述。我等非技術(shù)產(chǎn)品汪受益良多啊。以后裝xx有資本了 ??

    來自廣東 回復(fù)
  24. 看完 打卡!受益很多感謝作者

    來自北京 回復(fù)
  25. 看了此文,發(fā)現(xiàn)自己不懂的太多

    來自四川 回復(fù)
  26. 已關(guān)注公共賬號

    來自廣東 回復(fù)
  27. 居然看完了,受益匪淺 ??

    來自上海 回復(fù)
  28. 請問 什么是待機(jī)?待機(jī)與屏幕黑、鎖屏、休眠的關(guān)系是什么?

    來自北京 回復(fù)
  29. 太贊了,通俗易懂,學(xué)到了好多

    來自北京 回復(fù)
  30. 學(xué)渣表示讀完需要耐性??!

    來自四川 回復(fù)