【讀書筆記】讀《高性能網站建設指南》及《高性能網站建設進階指南:Web開發者性能優化最佳實踐》

  這兩本書就一起搞了,大多數已經理解,簡單作個標記。主要對本身不太瞭解的地方,作一些記錄。
 
1、讀《高性能網站建設指南》
  0> 黃金性能法則:只有10%~20%的最終用戶響應時間花在了下載HTML文檔上。其他的80%~90%時間花在了下載頁面中的全部組件上。
  1> 儘可能減小HTTP請求
  2> 使用CDN
  3> 添加Expires頭
  4> 採用Gzip壓縮組件
  5> 將樣式表放在頂部
  6> 將腳本放在底部
  7> 避免CSS表達式
  8> 使用外部JavaScript和CSS
  9> 減小DNS查找
  10> 精簡JavaScript
  11> 避免重定向
  12> 避免重複腳本
  13> 配置Etag
  14> 使Ajax可緩存
 
2、讀《高性能網站建設進階指南:Web開發者性能優化最佳實踐》
第一章:理解Ajax性能
1> 權衡——時間、質量和成本,三選二
2> 優化原則——下降程序的總體性能。
  把重點放在對程序總體開銷影響大的那部分。優化那些開銷不大的組件收效甚微。分析應用程序和分析算法密切相關。自習觀察程序的執行時間後,咱們會發現其大部分時間都消耗在循環上。因此,優化那些只執行一次的代碼獲得的回報微不足道,但優化內部循環的好處卻能達到立竿見影的效果。
  瀏覽器一般在運行JavaScript上花費的時間不多。絕大部分時間消耗在DOM上。
3> 善加利用ajax技術能使應用程序運行得更快,用好它的關鍵是在瀏覽器和服務器之間創建平衡。
 
第二章:建立快速響應的web應用
  足夠快的標準:
基於Web應用的響應時間準則和全部其餘應用同樣。37年來這些準則毫無變化。因此它們也不太可能因新技術的出現而發生變化。
 
0.1秒:用戶直接操做UI中對象的感受極限。好比,從用戶選擇表格中的一列到該列高亮或向用戶反饋已被選擇的時間間隔。理想狀況下,它也是對列進行排序的時間響應——這種狀況下用戶會感到他們正在給表格排序。
 
1秒:用戶隨意地在計算機指令空間進行操做而無需過分等待的感受極限。0.2~1.0秒的延遲意味着會被用戶注意到,所以感受到計算機出於對指令的「處理中」,這有別於直接響應用戶行爲的指令。例如:若是根據被選擇的列對錶格進行排序沒法再0.1秒內完成,那麼必須在1秒內完成,不然用戶將感受到UI變得緩慢且在執行任務中失去「流暢」的體驗。超過1秒的延遲要提示用戶計算機正在解決這個問題。例如改變光標的形狀。
 
10秒:用戶專一於任務的極限。超過10秒的任何操做都須要一個百分比完成指示器。以及一個方便用戶終端操做且有清晰標示的方法。假設用戶遭遇超過10秒延遲後才能返回到原UI的狀況,他們將須要從新適應。在用戶的工做中,超過10秒的延遲盡在天然中斷時能夠接受。好比切換任務時。
 
第三章:拆分初始化負載
  在初始化頁面的時候只加載必要的模塊(包括JavaScript和Css等),其他的按需加載。
 
第四章:無阻塞加載腳本
  1> XHR注入
  2> Script in Iframe
  3> Script DOM Element
  4> Script Defer
  5> document.write Script Tag
 
第五章:整合異步腳本
  對於無阻塞腳本加載的技術,須要整合行內腳本和其依賴的異步加載外部腳本的技術,解決加載順序等問題。
 
第六章:佈置行內腳本
  理解行內腳本位置對性能的影響——行內腳本阻塞並行下載
  a> 把行內腳本移至底部
  b> 異步啓動腳本
  c> 使用script的defer屬性
 
第七章:編寫高效的JavaScript
    避免過多的DOM交互、過多的循環、過多的遞歸
 
第八章:可伸縮的comet
 
第九章:超越Gzip
  最小化未壓縮文件的大小等
 
第十章:圖像優化
1> 合理選擇圖片格式
2> 自動化使用無損壓縮技術儘量削減圖片大小
 
第十一章:劃分主域
  域從一個增長到兩個對性能有所提升。但數量超過兩個時反而對加載時間有負面影響。最終數量取決於資源的大小和數量,但劃分域是個很好的經驗。
 
第十二章:儘早刷新文檔的輸出
 
第十三章:少用iframe
1> 開銷最高的DOM元素
2> 阻塞onload事件
......
 
第十四章:簡化CSS選擇符
    樣式系統從最後邊的選擇符開始向左匹配規則。只要當前選擇符的左邊還會有其餘選擇符,樣式系統就會繼續向左移動,直到找到和規則匹配的元素,或者由於不匹配而退出。
 
3、總結
  OK,剩餘的多實踐,很少說。
相關文章
相關標籤/搜索