前端性能指标总结

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

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功能可交互的时间


你可能感兴趣的:(性能优化)