欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

面试题:在浏览器输入url后发生了什么整理

程序员文章站 2022-05-12 16:33:32
...

W3C对浏览器的实现标准如下图所示,回答了该问题

  1. 重定向
  2. 缓存
  3. DNS解析
  4. TCP连接
  5. HTTP请求
  6. HTTP响应
  7. 渲染页面
  8. 装载

下面是详细介绍

浏览器实现标准

performance.timing属性介绍
面试题:在浏览器输入url后发生了什么整理

属性说明:

是一个无符号long long 型的毫秒数 表示某个时间的unix时间戳

  • PerformanceTiming.navigationStart:浏览器上下文上一个页面unload的时间戳,如果没有上一个文档,这个值会和PerformanceTiming.fetchStart相同
  • PerformanceTiming.unloadEventStart:unload事件抛出时的时间戳,如果没有上一个文档或者上一个文档与重定向中的一个不同源 这个值回返回0
  • PerformanceTiming.unloadEventEnd: unload事件结束的时间戳,如果没有上一个文档或者上一个文档与重定向的下一个文档不同源 这个值回返回0
  • PerformanceTiming.redirectStart :第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向,或者重定向中的一个不同源,这个值会返回0
  • PerformanceTiming.redirectEnd:最后一个HTTP重定向完成时的UNIX时间错,如果没有重定向,或者重定向中的一个不同源,这个值会返回0
  • PerformanceTiming.fetchStart:浏览器准备好使用HTTP请求来获取文档的UNIX时间戳,这个时间点会在检查任何应用缓存之前
  • PerformanceTiming.domainLookupStart: 域名查询开始的UNIX时间戳,如果使用了持续连接(persistent connection)或者这个信息存储到了缓存或者本地资源上,这个值将和Performance.fetchStart 一致
  • PerformanceTiming.domainLookupEnd: 域名查询结束时间戳,如果使用了持续连接(persistent connection)或者这个信息存储到了缓存或者本地资源上,这个值将和Performance.fetchStart 一致
  • PerformanceTiming.connectStart: 返回HTTP请求开始向服务器发送的Unix时间戳,如果是用来持续连接,则返回值等用于fetchStart
  • PerformanceTiming.connectEnd:浏览器与服务器连接建立(握手和认证过程结束)的毫秒时间戳。
  • PerformanceTiming.secureConnectionStart: 浏览器与服务器开始安全连接的握手时的时间戳,如果当前网页不要求安全连接,则返回0
  • PerformanceTiming.requestStart: 浏览器向无武器发出HTTP请求时(或开始读取本地缓存)时的时间戳。
  • PerformanceTiming.responseStart: 浏览器从服务器收到(或东本地缓存读取)第一个字节时的Unix毫秒时间戳,如果传输层在开始请求之后失败并且连接被重开,该属性将会被数制成新的请求的相对应的发起时间。
  • PerformanceTiming.responseEnd: 浏览器从服务器收到(或重本地缓存读取,或从本地资源读取)最后一个字节时(如果在此之前HTTP连接已经关闭,则返回关闭时)的时间戳
  • PerformanceTiming.domLoading: 返回当前网页DOM结构开始解析时(即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时)的Unix毫秒时间戳。
  • PerformanceTiming.domInteractive: 当前网页结构结束解析,开始加载内嵌资源时(即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时)的Unix毫秒时间戳
  • PerformanceTiming.domContentLoadedEventStart: 解析器发送DOMContentLoaded 事件,纯HTML被完全加载以及解析时(而不必等待样式表,图片或者子框架完成加载)时的Unix毫秒时间戳
  • PerformanceTiming.domContentLoadedEventEnd: 所有需要立即执行的脚本已经被执行(不论执行顺序)时的Unix毫秒时间戳
  • PerformanceTiming.domComplete: 当前文档解析完成,即Document.readyState 变为 'complete’且相对应的readystatechange 被触发时的Unix毫秒时间戳
  • PerformanceTiming.loadEventStart: 该文档下,load事件被发送时的Unix毫秒时间戳。如果这个事件还未被发送,它的值将会是0
  • PerformanceTiming.loadEventEnd: load事件结束,即加载事件完成时的Unix毫秒时间戳。如果这个事件还未被发送,或者尚未完成,它的值将会是0.

1. performance 应用

1.关键时间节点

 window.onload = function(){
            setTimeout(function(){
                let t = performance.timing
                console.log('DNS查询耗时 :' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0))
                console.log('TCP链接耗时 :' + (t.connectEnd - t.connectStart).toFixed(0))
                console.log('request请求耗时 :' + (t.responseEnd - t.responseStart).toFixed(0))
                console.log('解析dom树耗时 :' + (t.domComplete - t.domInteractive).toFixed(0))
                console.log('白屏时间 :' + (t.responseStart - t.navigationStart).toFixed(0))
                console.log('domready时间 :' + (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0))
                console.log('onload时间 :' + (t.loadEventEnd - t.navigationStart).toFixed(0))
 
                if(t = performance.memory){
                    console.log('js内存使用占比 :' + (t.usedJSHeapSize / t.totalJSHeapSize * 100).toFixed(2) + '%')
                }
            })
        }

面试题:在浏览器输入url后发生了什么整理
2. 实现一个 sortTiming 函数,满足:1)按照时间顺序展示;2)计算所有时间戳跟最早的时间戳的差值

Object.entries(performance.timing.toJSON()).filter(item=>item[1]).sort((a,b)=>a[1]-b[1]).map((item, index, arr)=>[...item, item[1] - arr[0][1]])

面试题:在浏览器输入url后发生了什么整理


2. 其他知识点

1. document.readyState
  • loading / 正在加载 document 仍在加载。
  • interactive / 可交互 文档已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。
  • complete / 完成 文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。

当这个属性的值变化时,document 对象上的readystatechange 事件将被触发。

相关标签: 性能优化