前言大家好。我是林三鑫。用最通俗易懂的话讲最难的知识点是我的座右铭。基础是进阶的前提。当时优化首屏时间是绕不开的优化方向，但是有多少人想过这两个东西的区别：白屏时间首屏时间以及这两个时间的计算方式有什么区别？接下来小编就来给大家说一说吧！什么是白屏时间？白屏时间是指：页面开始显示内容的时间。即：如何计算浏览器显示第一个字符或元素的时间？我们只需要知道浏览器开始显示内容的时间点，也就是页面白屏的结束时间，就可以得到页面的白屏时间。因此，我们通常认为浏览器开始渲染
标签或者解析完标签的时刻就是页面白屏结束的时刻。浏览器支持performance.timing
Document浏览器不支持performance.timing
DocumentWhat是第一屏时间？首屏时间是指从用户打开网站到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户体验一个网站的重要因素。为什么不直接使用生命周期呢？有朋友会说：为什么不直接在App.vue的挂载生命周期中计算时间呢？大家可以看一下，官网说mounted的执行并不代表首屏的所有元素都加载完了，所以mounted计算的时间会比较短。为什么不直接使用nextTick？回调nextTick时会渲染首屏的DOM，但是首屏时间的计算不需要渲染所有的DOM，所以计算出来的时间会偏长，如何计算？我们需要使用MutationObserver来监控DOM变化，监控每次DOM变化的分数，计算规则为：（1+层数*0.5），我举个例子：
上面DOM结构的得分为：1.5+2+2.5+2.5=8.5（分）其实首屏加载会涉及到DOM的增加、修改和删除，所以会多次触发MutationObserver，所以会统计不同阶段的分数。我们将这些分数存储在数组observerData中，这在首次屏幕时间练习中非常有用。现在让我们开始计算首屏时间吧！前期准备index.html：html页面
computed.js：计算首屏时间的文件constobserverData=[]letobserver=newMutationObserver(()=>{//计算从页面加载开始的时间conststart=window.performance.timing.navigationStartconsttime=newDate().getTime()-startconstbody=document.querySelector('body')constscore=computedScore(body,1)//添加到数组observerDataobserverData.push({score,time})})observer.observe(document,{childList:true,subtree:true})functioncomputedScore(element,layer){letscore=0consttagName=element.tagName//排除这些标签if(tagName!=='SCRIPT'&&tagName!=='STYLE'&&tagName!=='META'&&tagName!=='HEAD'){constchildren=element.childrenif(children&&children.length){//递归计算分数for(leti=0;i{returnnewPromise((resolve)=>{setTimeout(()=>{结果lve([1,2,3,4,5,6,7,8,9])},1000)})}constulbox=document.getElementById('ulbox')//模拟请求数据渲染列表constrenderList=async()=>{constlist=awaitrequestList()constfragment=document.createDocumentFragment()for(leti=0;i{constli=document.createElement('li')li.innerText='addto'ulbox.appendChild(li)}(async()=>{//模拟请求数据渲染列表awaitrenderList()//模拟稍微修改列表addList()})()observerDatawhen我们都准备好后运行代码，我们得到了observerData，让我们看看它是什么样子的？计算首屏时间我们如何根据observerData计算首屏时间？我们可以这样计算：将下一个分数比上一个分数增加最多的时间作为首屏时间。很多人会问，为什么不把最后一项的时间作为首屏时间呢？大家要注意：并不是所有的DOM都会在首屏上渲染。我以刚才的代码为例。渲染列表后，我们添加一个li。那你觉得哪个时间段是首屏呢？应该算作列表渲染后的第一屏，因为后面只加了一里，分数的提升很小，可以忽略不计。那么让我们开始计算：constobserverData=[]letobserver=newMutationObserver(()=>{//每次修改DOM时计算从页面开始加载的时间conststart=window.performance.timing.navigationStartconsttime=newDate().getTime()-startconstbody=document.querySelector('body')constscore=computedScore(body,1)observerData.push({score,time})//完成后调用unmountObserverif(document.readyState==='complete'){//只计算10秒以内的渲染时间unmountObserver(10000)}})observer.observe(document,{childList:true,subtree:true})functioncomputedScore(element,layer){letscore=0consttagName=element.tagName//排除这些标签if(tagName!=='SCRIPT'&&tagName!=='STYLE'&&tagName!=='META'&&tagName!=='HEAD'){constchildren=element.childrenif(children&&children.length){//递归计算Scorefor(leti=0;i{//输出首屏时间console.log(getFirstScreenTime())//终止MutationObserver监控observer.disconnect()observer=nullclearTimeout(timer)},delay)}计算首屏时间1020ms综上所述，我的计算方法其实有很多漏洞，没有考虑删除的元素，但是我想让大家知道计算首屏时间的计算思路。这是最重要的事情。我希望每个人都能理解这个计算。结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友一起钓鱼。
