性能和資源
一個好的應用程序應該集功能性、可靠性、可用性、可複用性、效率、可維護性和可移植性等理想特性於一身。
有限的資源：
- 中央處理單元 CPU
- 圖形處理單元 GPU
- 內存 RAM
- 硬盤（HDD）和固態硬盤（SSD）
- 網絡吞吐量
性能指標
可用性
響應時間
- 等待時間：該請求等待其他較早產生的請求完成所花的時間
- 服務時間：完成服務所消耗的時間
- 傳輸時間：任務單元完成後該響應會被髮送回請求者。傳輸響應所消耗的時間爲傳輸時間
處理速度
時鐘頻率，處理單元（CPU或GPU）的運行頻率。
延遲
網絡數據通信中發生的延遲
帶寬
數據傳輸速率
可伸縮性
系統處理更大規模任務的能力
性能分析
網絡性能分析
window.performance 性能計時
Chrome-developer-Network
- DOMContentLoaded事件在引擎解析完文檔後發生
- load在頁面資源加載完成後觸發
當鼠標懸浮在timing列，可以看到每一個性能計時API數據點
網絡性能與用戶體驗
網絡性能最佳實踐和規則
- 避免頁面重定向
- 啓用壓縮
- 優化服務器響應時間
- 善用瀏覽器緩存
- 壓縮靜態資源
- 優化圖片尺寸
- 優化CSS加載
- 優化考慮首屏內容
- 移除阻塞渲染的JavaScript
- 使用異步腳本
- 使用CDN
- 避免空的src和href屬性
- 把樣式表放在頂部
- 把腳本放在底部
- 避免css表達式（動態屬性）
- 把JavaScript和CSS放到外部鏈接
- 減少DNS查詢
- 移除重複腳本
- 配置ETags
- AJAX多用GET請求
- 減少DOM節點數目
- 避免404錯誤
- 減小cookie大小
- 爲組件使用無cookie站點
- 避免過濾
- 不在HTML中擴展圖片
- 將favicon.ico壓縮並存儲
GPU性能分析
- 每秒傳輸幀數 FPS 即幀率
CPU性能分析
內存性能分析
垃圾回收器
避免內存泄露
- 及時清除計時器
- 及時清除事件監聽
- 閉包會記住上下文環境，即佔用部分內存
- 使用對象組合時，若存在循環引用，也會有部分變量佔據內存導致無法釋放的情況
性能自動化
性能自動優化
主要集中在將應用組件文件進行拼接和壓縮，可用Gulp。Gulp的諸多插件可以完成合並壓縮、優化圖片、生成緩存清單以及其他自動化性能優化的任務。
性能監測自動化
通過收集數據進行性能比較，收集方式有
- 真實用戶監測：在瀏覽器中加載小段js實現，主要用於收集數據、發現性能趨勢和模式
- 模擬瀏覽器：收集模擬瀏覽器的性能數據，但是不能準確模擬用戶操作
- 真實瀏覽器監測
性能測試自動化
- 加載測試
- 壓力測試
- 滲透測試
- 峯值測試
- 配置測試
錯誤處理
Error類
擴展
module CustomException {
export declare class Error {
public name : string
public message : string
public stack : string
constructor(message?: string)
}
export class Exception extends Error {
constructor(public message: string) {
super(message)
this.name = 'Exception'
this.message = message
this.stack = (<any>new Error()).stack
}
toString() {
return this.name + ':' + this.message
}
}
}
聲明瞭一個Error類，該類存在於運行時，但並非TS自帶，所以需要自己聲明，然後創建一個繼承自Error的Exception類，最後創建了customError繼承自Exception類
try.catch和throw
在大多數語言中，拋出和接收異常的操作很耗資源，應儘量避免。在會影響性能的函數和循環中儘量不要使用。