就給張一明打電話(huà)，詢(xún)問(wèn)這是啥意思。
這么專(zhuān)業(yè)的問(wèn)題，就一定不能用專(zhuān)業(yè)的說(shuō)法來(lái)解釋?zhuān)駝t大老板聽(tīng)的更迷糊🖆🐚🀞。好在張一明語(yǔ)言簡(jiǎn)潔，很快就給他解釋清楚了。
說(shuō)是網(wǎng)頁(yè)結構從萬(wàn)維網(wǎng)時(shí)代到現在🎽🖢🔒，并沒(méi)有發(fā)生明🁜🆫顯的變化，網(wǎng)頁(yè)加載過(guò)🔾🆓程，也是線(xiàn)性的。
一個(gè)網(wǎng)頁(yè)通常有多個(gè)模塊組成，比如背景模塊、頭部頁(yè)模塊、廣告模塊、主頁(yè)模塊、副頁(yè)模塊、邊欄模塊等等🟥🟍🛶。
傳統的加載方式，是第一個(gè)模塊記載完，開(kāi)始加載第二個(gè)模塊，然🆏🎥后是第三個(gè)、第四個(gè)，直到最后一個(gè)。所有模塊加載結束，頁(yè)面就算加載完成了。
可現在的網(wǎng)站內容🃝😮🄲都太豐富了🈲，模塊太多🚯了。
尤其是像☖⛁🗠朋友網(wǎng)這樣⛱的大網(wǎng)站，模塊數量可能有幾十個(gè)之多。這就🆏🎥會(huì )導致用戶(hù)在打開(kāi)朋友網(wǎng)的時(shí)候，速度會(huì )很慢。
要想解決這個(gè)😍問(wèn)題，就可以用分布式思維，重新設計加載方式。
假設一個(gè)網(wǎng)頁(yè)從上到下可能有5個(gè)屏幕大小，可用戶(hù)🁱其實(shí)打開(kāi)網(wǎng)頁(yè)的時(shí)候，🖆🐚🀞第一時(shí)間只會(huì )關(guān)☗注第1屏的內容。
比如背景板塊，是覆蓋整個(gè)網(wǎng)頁(yè)的，有5屏🏁🗉🙴的大小，全部加載完很耗時(shí)間?？蓪?shí)際🗢🝒上，只需要第一時(shí)間加載完第1屏的背景圖，其余4屏的內容沒(méi)必要第一時(shí)間加載，加🚄🐺🄻載了用戶(hù)也看不到。
也就是說(shuō)，背景模塊只加載最上層的2⚸🖋0%就夠了。把省出來(lái)的寬帶讓給其他并行的模塊。其他模塊也跟背景模塊一樣，第一時(shí)間只加載第1屏的內容。
讓頁(yè)面從上到下，像是瀑布一樣的加載。
用戶(hù)🕚🎩不會(huì )☖⛁🗠第一時(shí)間下拉頁(yè)面，就會(huì )🎽🖢🔒有一種打開(kāi)頁(yè)面之后，頁(yè)面迅速加載完成的錯覺(jué)。實(shí)際上只是最上部分加載完成了，下面的頁(yè)面還在加載。
但已經(jīng)不妨礙用戶(hù)瀏覽第1屏的內容了。
原本需🆖🏣要加載5屏的時(shí)間，現在只需要加🚯載1屏了。🁱
加載時(shí)間縮短為原來(lái)的20%！
通過(guò)分布式技術(shù)，讓一部分頁(yè)面先顯示，讓🏁🗉🙴用🞉💖👴戶(hù)感覺(jué)頁(yè)面加載的更快了。