一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情
前言
现如今，随着互联网发展，访问一个网站，如让用户等待时常过长，用户可能直接就不用了。所以，除了开发基本的业务逻辑，对于网站性能的优化也是相当重要。那么，在web前端开发过程中，我们应该关注哪些性能衡量指标？从而根据这些客观指标衡量判断页面的性能呢？并且如何优化我们的性能呢？接下来，就根据查阅的网络资料和过往的开发经验，来浅聊一下。
了解页面加载过程
下图为W3C Navigation Timing Level2规范。
如上图，大概包括了从输入url开始访问网页到网页被加载出来的整个过程。
前面几个指标unloadEventStart，unloadEventEnd是指前一页面卸载开始和结束
redirectStart，redirectEnd是指重定向开始和结束
如无，则以上值为零。则页面开始加载
1.首先进行DNS查询，根据域名查找到对应的ip
2.接着进行TCP连接，完成三次握手。请求页面文档。
3.接着开始加载DOM并解析。
统计页面性能指标，可以通过window.performance.timing内的内容查看
常用的指标计算附录如下：
重定向时间 = redirectEnd - redirectStart;
DNS查询时间 = domainLookupEnd - domainLookupStart;
TCP连接时间 = connectEnd - connectStart;
HTTP请求时间 = responseEnd - responseStart;
解析DOM树时间 = domComplete - domInteractive;
白屏时间 = responseStart - navigationStart;
DOMready时间 = domContentLoadedEventEnd - navigationStart;
onload时间 = loadEventEnd - navigationStart;
基本指标
一般我们需要关注以下几种：
-
白屏时间(First Paint,FP) :是指浏览器响应url网址到检测到渲染时被触发的时间。
计算方式：白屏时间 = firstPaint - pageStartTime
-
首屏内容绘制(First Cibrebrful Paint,FCP) :是指浏览器响应url网址，到响应出文本，图片，非白色canvas的事件。一般而言，0-950ms说明较快，950-1600为中等，超过1600则较慢。
计算方式：首屏时间 = firstContentTime - pageStarTime
-
可交互事件(Time to Interative,TTI) :页面第一次完全达到可交互状态的时间点。一般而言，0-2500ms说明较快，2500-4500为中等，超过4500则较慢。
计算方式：
1.FCP 时间为起始时间
2.查找到指示有5s的静默窗口时间（没有长任务并且不超过两个正在执行的GET请求）。
3.向后搜索静默窗口前的最后一个长任务，如果没有找到长任务，则在FCP上停止。
4.TTI 是在安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与FCP相同）
-
最大内容绘制(Largest Contentful Paint,LCP) 表示视口内可见最大内容元素开始出现在屏幕上的时间点。最好在2.5s内进行最大内容渲染。
下一篇文章就来总结以下如何使用chrome控制台查看网络衡量指标
