
64
第十一章
負載資料量(Payload)
將這些頁面(http://wh.yslow.org/css3-logo-payload)架設在本地端的 Apache 伺服器
上,我能夠藉由
curl
(http://curl.haxx.se/)以壓縮或未壓縮的形式(
Accept-Encoding:
gzip,deflate
)來截取它們,為 CSS3 與 data URI 的頁面取得內容長度(content length),
而真實圖像的 URL 顯然沒有壓縮。經由壓縮最小化的長度被用為此次效能評估中,每個
頁面的負載資料量(圖 11-3)。
描繪(Rendering)
在這些頁面的底部加上一小段指令稿(script,http://wh.yslow.org/css3-logo-rendering),
以 1 秒鐘的間隔重新載入頁面 100 次,使用
sessionStorage
(https://developer.mozilla.org/
en/DOM/Storage#sessionStorage)進行計數,並用 Chrome Developer Tools: Timeline Panel
(http://code.google.com/chrome/devtools/docs/timeline.html)記錄頁面的活動,我就能夠
匯出記錄下來的資料(http://wh.yslow.org/css3-logo-logs)。然後透過一段 NodeJS 指令稿
(http://wh.yslow.org/