【高效能網站建設進階指南】讀書筆記

WebSocket CSS · 發表 2018-09-15 15:31:47

摘要：高效能網站建設進階指南無阻塞載入指令碼無阻塞載入外鏈指令碼的方法有： XHR Eval，xhr 載入後 eval。 XHR 注入，xhr 載入後，建立 script 元素 scriptEle，然後把載入到的內容寫進 scriptEle 的 tex...

ofollow,noindex" target="_blank">高效能網站建設進階指南

無阻塞載入指令碼

無阻塞載入外鏈指令碼的方法有：

XHR Eval，xhr 載入後 eval。
XHR 注入，xhr 載入後，建立 script 元素 scriptEle，然後把載入到的內容寫進 scriptEle 的 text 屬性來執行。
Script in Iframe，通過 frames/contentWindow 以及 parent/top 等來在父子視窗間相互呼叫。
Script DOM Element，動態建立 script 元素，然後設定 src 屬性來載入外部指令碼。
Script Defer，延遲執行，但執行順序和宣告 defer 的順序一致，阻塞 DOMContentLoaded 事件。
document.write Script Tag，多個指令碼並行下載，但依然阻塞其它型別資源， document.write("<script src='a.js'><\/script>") 。

非同步指令碼保持執行順序的方法有：

Comet 是一個表示由服務端來控制資料流動的方案的概括術語，包括了輪詢（Polling）、長輪詢（Long Polling）、永久幀（Forever Frame）、XHR 流（XHR Streaming）以及 Socket/">WebSocket。

輪詢，用 ajax 來主動發起輪詢，收到響應結果後繼續發起下一次請求。

長輪詢，則是客戶端首先和服務端建立起連線，服務端直到有資料時才返回給瀏覽器並關閉當前連線，然後瀏覽器發起下一次連線，這樣，後續連線的發起是由服務端返回資料來驅動的，而不是瀏覽器主動輪詢實現。其中，可以結合定時器來做心跳，服務端也可以做超時控制。

永久幀，用一個一直在輸出內容不結束的 iframe 來父子通訊，如服務端一個 while 迴圈。

XHR 流，利用 xhr 在 readyState 變為 4 之前接收到資料流來不斷更新。

以上原基於 Ajax 的實現，可為了跨域需要而改為基於 JSONP 的實現。

API/WebSocket" rel="nofollow,noindex" target="_blank">WebSocket ，在這本書出版的時候，WebSocket 還沒廣泛支援，在 2018 年主流瀏覽器都支援了其基礎功能，服務端推送的需求應首選該方案。

防毒軟體以及代理軟體等客戶端或 Web 代理可能會修改請求頭，如移除或修改 Accept-Encoding ，從而導致雖然絕大部分客戶端（瀏覽器）都支援 Gzip，結果卻返回未壓縮的內容。

這裡關注的是無失真壓縮

優化 PNG 格式的影象： pngcrush 、 PNGOUT 、 OptiPNG 、 PngOptimizer 。

剝離 JPEG 元資料（註釋、APP 自定義資訊、EXIF 等）： jpegtran 。

把 GIF 轉換為 PNG： ImageMagick 。

優化 GIF 動畫： Gifsicle 。

樣式系統從最右邊的選擇符開始向左匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，知道找到和規則匹配的元素，或者因為不匹配而退出。