性能和资源
一个好的应用程序应该集功能性、可靠性、可用性、可复用性、效率、可维护性和可移植性等理想特性于一身。
有限的资源：
- 中央处理单元 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
在大多数语言中，抛出和接收异常的操作很耗资源，应尽量避免。在会影响性能的函数和循环中尽量不要使用。