前端性能指标总结

前端开发在完成任务之余，必须做好性能优化，现总结前端页面响应时间指标如下：

1.Start Render：用户在页面上看到第一个内容的时间，包括发起请求到服务器返回数据的时间、加载返回的HTML文档的时间、HTML头部解析完成的时间

优化方面：(1) 服务器响应时间(2) HTML文档的大小(3) Head中资源使用情况

2.Dom Ready：页面解析完成的时间文档的解析至少包括以下操作：HTML文档分析以及DOM树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，但是不包括图片、iframe等其它资源的加载。所以说Dom Ready是交互功能最早可用的时间，且由于图片、iframe等其他资源加载时间不算在内，Dom Ready比window.onload的时间点靠前。Dom Ready组成部分：浏览器开始渲染的时间（Start Render）、Dom树创建所耗时间、Body中所有脚本加载和执行的时间。

优化方面：(1) DOM结构的复杂程度 (2-重点) BODY中脚本使用情况

3.：Page Load：window.onload时间触发时间，包括Dom就绪时间（Dom Ready）和图片、iframe等静态资源加载时间

优化方面：(1) 静态资源大小

4.TTI(Time To Interact)：页面可交互的时间，因为目前大多页面javascript都会在dom ready后才进行解析和绑定，所以TTI大多等于Dom Ready时间

优化方面：(1) Start Render时间 - 只有内容渲染出来了，才可以谈交互，因此渲染时间的快与慢会直接影响TTI时间 (2) 核心功能相关HTML元素的显示时间 - 决定着核心功能可见的时间 (3) 核心功能相关Javascript功能的绑定时间 - 决定着核心Javascript功能可交互的时间