Steve Souders 開了一個「Performance of 3rd Party Content」,分析 3rd party script 的效能。目前已經分析了四個 js。
看完四個 js 的分析後,可以看出來一些 pattern:
- 用 async script。Google 曾經介紹 Google Analytics 可以使用 async script:「Google Analytics Launches Asynchronous Tracking」。
- 當使用 async script 時無法使用
document.write
(會有奇怪的結果),就算不是 async script 也應該儘量避免使用。常見的方法是建立一個帶有id
的div
,然後在 script 內用document.getElementById()
或是等價的方式取得後在裡面插入元素,或是直接修改innerHTML
。 - 用
div
再修改的模式時,如果可以先確定div
的大小,最好在class
與對應的 CSS 上先定義 (像是廣告的版位),可以避免頁面 re-layout。 - 在
Cache-Control
內設定夠長的 max-age (尤其是幾乎不會改動的圖片)。 - 如果是 tracking 機制,應該傳回 204 而非 200。
這個計畫應該還會再繼續分析,有興趣的人可以訂 RSS 看。