建站
咨詢
售后
建站咨詢
新聞中心
數(shù)周前，在倫敦 Heathrow 機(jī)場(chǎng)等飛機(jī)的空閑中，我順便處理了一些工作上的事情。不經(jīng)意間發(fā)現(xiàn) Github 在性能方面的一些問題，頗為詫異。通過新 tab 打開的頁面，其加載速度竟然比直接點(diǎn)擊鏈接打開的頁面要快。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),南澗企業(yè)網(wǎng)站建設(shè),南澗品牌網(wǎng)站建設(shè),網(wǎng)站定制,南澗網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,南澗網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
點(diǎn)擊鏈接的同時(shí)復(fù)制鏈接并在新的 tab 頁中打開?？梢钥吹?，盡管先點(diǎn)擊的是鏈接，但渲染更快的卻是新 tab 中打開的頁面。
有一說一
頁面加載的時(shí)候，瀏覽器會(huì)接收網(wǎng)絡(luò)數(shù)據(jù)流，并將其輸出(pipe)給 HTML 解析器，HTML 解析器再將數(shù)據(jù)輸出到文檔。這意味著，頁面是邊加載邊渲染的。對(duì)于一個(gè) 100k 的頁面來說，瀏覽器很可能在接收到 20k 數(shù)據(jù)的時(shí)候就開始渲染出一些可用內(nèi)容了。
這個(gè)偉大又古老的特性，常常被開發(fā)者們有意無意地忽略了。多數(shù)提高加載性能的建議都?xì)w結(jié)于一點(diǎn)，即“展示你所拿到的東西” —— 別怕，千萬不要傻傻等待一切加載完成之后再去展示內(nèi)容。
GitHub 當(dāng)然是關(guān)注性能的，所以他們使用服務(wù)端渲染。但在同一個(gè) tab 下瀏覽頁面時(shí)，他們用 JavaScript 重新實(shí)現(xiàn)了導(dǎo)航(navigation)功能，類似下面這樣：
- // …一堆重新實(shí)現(xiàn)瀏覽器導(dǎo)航功能代碼…
- const response = await fetch('page-data.inc');
- const html = await response.text();
- document.querySelector('.content').innerHTML = html;
- // …加載更多重新實(shí)現(xiàn)導(dǎo)航功能的代碼…
這違反了規(guī)則，因?yàn)樵?page-data.inc 下載完成之前什么事情都沒干。而服務(wù)端渲染版完全不會(huì)這樣囤積內(nèi)容，其內(nèi)容是流式的，這樣就要快得多了。就 Github 的客戶端渲染來說，很多 JavaScript 代碼完全減慢了渲染過程。
這里我僅僅只是拿 Github 舉例子 —— 這種反模式在單頁應(yīng)用中比比皆是。
在頁面之內(nèi)切換內(nèi)容可能確實(shí)有些好處，特別是存在大量腳本的情況下，無需重新執(zhí)行全部腳本即可更新內(nèi)容。但我們能否在不放棄流的情況下完成這樣的工作呢?我曾經(jīng)常說 JavaScript 沒有辦法對(duì)流進(jìn)行解析，但其實(shí)還是有的……