一张浏览器加载时序图。以后有时间再分析

最新推荐文章于 2024-10-17 20:38:09 发布
转载 最新推荐文章于 2024-10-17 20:38:09 发布 · 3.5k 阅读 · 1
文章标签：

#html

本文详细介绍了网页加载过程中的各个关键时间点，包括从导航开始到页面完全加载完毕的整个过程中涉及到的重要时间标记，如DNS解析、连接建立、请求发送及响应接收等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


navigationStart

当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。

unloadEventEnd

如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0

redirectStart

如果是HTTP重定向，如果跳转都是同源的，则返回开始获取发起重定向的时间点，否则返回0

redirectEnd

如果是同源重定向，返回重定向请求接收完最后一字节的时间点，否则返回0

fetchStart

如果请求是用http get发起的，返回浏览器查缓存之前的时间点，否则返回发起获取资源的时间点

domainLookupStart

返回浏览器发起DNS查询的时间点，如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点

domainLookupEnd

返回结束DNS查询的时间点，如果是长连接或者请求文件来自缓存等本地存储则返回fetchStart时间点

connectStart

返回浏览器向服务器发起建立获取当前文档的连接请求的时间点，

如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点

connectEnd

返回与服务器建立完成连接的时间点，

如果是长连接或者请求文件来自缓存等本地存储则返回domainLookupEnd时间点

requestStart

返回浏览器发起请求的时间，不管是向server还是本地缓存或存储

responseStart

返回浏览器拿到第一个响应字节的时间点，包括从服务器、缓存或者其他本地存储

responseEnd

返回浏览器拿到最后一个响应字节或者传输连接关闭的时间点，包括从服务器、缓存或者其他本地存储

domLoading

返回浏览器将当前文档状态设置成loading的时间点

domInteractive

返回浏览器将当前文档状态设置成interactive的时间点

domContentLoadedEventStart

返回浏览器触发DOMContentLoaded事件执行之前的时间点

domContentLoadedEventEnd

返回浏览器触发DOMContentLoaded事件执行完成的时间点

domComplete

返回浏览器将当前文档状态设置成complete的时间点

loadEventStart

返回浏览器触发load事件执行之前的时间点，否则为0

loadEventEnd

返回浏览器触发load事件执行完成的时间点

 


前端小技巧(2)-performance.timing属性介绍
weixin_34351321的博客
11-27 1405
performance.timing属性介绍: navigationStart 加载起始时间 redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0） redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间...
利用window.performance.timing检测页面加载速度
xhmz的专栏
01-06 5062
如何在浏览器中查看当前页面请求各个指标数据 在控制台中输入window.performance.timing(html5的属性);即可            各字段的含义： ·         navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 ·   unloadEve
Web性能时机API「Web Performance Timing API」-crx插件
03-09
使用性能定时API从您当前的网站上绘制常见的性能计时数据。 利用Web Performance API快速查看网站的网站性能。 它适用于软件工程师和一般对Web性能感兴趣的人员。 支持语言:English (United States)
performance-timing
lay136362687的博客
08-14 1596
performance的兼容性 performance.timing对应时间节点 performance的获取方式 window.performance performance.timing的常用监测时间 DNS解析时间： domainLookupEnd - domainLookupStart TCP建立连接时间： connectEnd - connectStart 白...
performance.timing
liangshanbo1215的博客
10-17 958
是 Web 性能 API 的一部分，用于获取页面加载过程中的各个时间戳。这些时间戳可以帮助开发者分析页面加载性能，找出潜在的瓶颈。返回一个对象，该对象包含了多个属性，每个属性代表页面加载过程中的某个特定事件的时间戳。以下是一些常用的fetchStartconnectEnddomLoadingloadload。
页面打开计算性能 利用performance.timing进行性能分析
lotte
07-04 4268
window.onload = function(){ setTimeout(function(){ let t = performance.timing console.log('DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)) console.log('...
用PerformanceTiming来检测页面性能
weixin_33874713的博客
06-19 337
window.performance.timing下的属性 navigationStart 当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 unloadEventStart 如果前一个网页与当前网页属于同一个域名，则返回前一个网页的unload事件发生时的U...
performance.timing各字段含义 网页从url到最终显示过程 性能优化
wgod
07-08 376
performance.timing各字段含义 网页从url到最终显示过程 性能优化
window.performance.timing属性详解
tree_stretch的博客
03-26 2045
指文档解析完成的时刻，包括在“传统模式”下被阻塞的通过script标签加载的内容（除了使用defer或者async属性异步加载的情况）。如果已经没有任何延迟加载的事件（所有图片的加载）阻止load事件发生，浏览器窗口上表示页面还在加载的图标停止旋转，那么该时刻将会将document.readyState属性设置为"complete"，此时刻就是domComplete。如果被请求的文档来自于前一个同源（同源策略）的文档，那么该属性存储的是浏览器开始卸载前一个文档的时刻。表示同源的前一个文档卸载完成的时刻。
探索Web性能优化利器：`performance-timing`库
gitblog_00009的博客
04-20 369
探索Web性能优化利器：performance-timing库 在前端开发中，性能是衡量用户体验的重要指标之一。为了更好地监控和优化网页加载与交互性能，我们今天要向您推荐一个开源项目——。这是一个轻量级的JavaScript库，它封装了浏览器的原生Performance API，让你更方便地获取和分析Web应用的性能数据。 项目简介 performance-timing库是由开发者tjuking创...
PerformanceTiming
weixin_33690963的博客
08-20 131
navigationStart （前一个文档的卸载时间）准备加载新页面的时间，如果没有前一个文档，那么就返回timing.fetchStart的值 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart 如果是H...
slack的网站性能报告使用performancetiming
08-10
slack的网站性能报告使用performance.timing
h5中performance.timing轻松获取网页各个数据 如dom加载时间 渲染时长 加载完触发时间...
热门推荐
AI天才研究院
09-15 1万+
在控制台中输入window.performance.timing(html5的属性); 各字段的含义： · navigationStart：当前浏览器窗口的前一个网页关闭，发生unload事件时的Unix毫秒时间戳。如果没有前一个网页，则等于fetchStart属性。 · unloadEventStart：如果前一个网页与当前网页属于同...
Performance timing API 中文解释
12点
07-02 246
Performance timing API 中文解释 navigationStart 当访问一个新页面时，当前页面卸载完成所返回的时间点，如果没有当前页面，则返回fetchStart时间点。 unloadEventEnd 如果要打开的页面和当前的页面同源，则返回用户unload事件执行完成后的时间点，如果当前文档不存在或者不同源，则返回0 redirectStart ...
JS - 利用performance.timing进行性能分析
技术共享，共同进步！
03-09 1060
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))
前端性能监控window.performance.timing
xxc_yc的博客
07-01 640
window.performance
window.performance.timing 字段说明和主要性能指标
scorpio的世界
10-28 5124
window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。 字段说明： connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。 domComplete：html文档完全解析完毕的时间节点。 domContentLoadedEventStart 和domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMConte.
performance介绍
qq_42880714的博客
07-16 2239
performance介绍
深入了解Performance API：优化网页性能的利器
俊刚的博客
01-08 1463
在现代Web开发中，优化网页性能是至关重要的。用户对于加载速度和交互性能的要求越来越高，而Performance API作为一组用于测量和监控网页性能的JavaScript接口，为开发者提供了丰富的工具和信息。本文将深入探讨Performance API的各个方面，帮助读者更好地理解和利用这一强大工具来优化网页性能。
PlantUML代码执行时序图
最新发布
02-04
### 使用 PlantUML 创建时序图 #### 定义参与者 在创建时序图之前，定义参与交互的对象是必要的。这些对象被称为参与者，在PlantUML中使用`participant`关键字来声明。 ```plantuml participant "Web Browser" as WB participant "Server" as S ``` 此段代码定义了两个参与者：“Web Browser”和“Server”，并分别为它们设定了简短的标签WB和S以便后续引用[^5]。 #### 发送消息 一旦参与者被定义好之后，就可以开始描述他们之间的互动过程。这通常涉及到一方给另一方发送消息的动作。在PlantUML里，这种动作可以通过箭头符号来表达： ```plantuml WB -> S: Request Page Load S --> WB: Send HTML Document ``` 这里展示了浏览器向服务器请求页面加载的过程以及服务器响应HTML文档的消息传递方式。 #### 添加激活期 为了更清晰地展示某个时间段内哪个参与者处于活跃状态，可以利用activate命令标记活动区间： ```plantuml WB -> S: Request Resource activate S S --> WB: Return Resource Data deactivate S ``` 这段脚本说明了当资源请求发生时，服务端进入工作模式直到返回数据完成为止[^3]。 #### 自动化循环结构 如果存在重复性的交互行为，则可采用loop语句简化书写复杂度： ```plantuluml loop every 1 second WB -> S: Polling Status Update S --> WB: Respond with Latest Info end loop ``` 以上实例模拟了一个每隔一秒就会发生的轮询更新机制[^4]。 #### 整合示例 下面给出一个完整的例子，综合运用前面介绍过的各个要素构建出一张较为复杂的时序图： ```plantuml @startuml title Web Application Interaction Sequence Diagram actor User participant "Web Client" as WC participant "Application Server" as AS participant Database as DB User -> WC: Open Website URL WC -> AS: HTTP GET /index.html AS --> WC: Response Index Page Content WC -> AS: Submit Login Form activate AS AS -> DB: Verify Credentials DB --> AS: Return Authentication Result deactivate AS AS --> WC: Redirect to Dashboard or Error Message loop Periodic Health Check Every Minute AS -> DB: Query System Metrics DB --> AS: Provide Metric Values end loop @enduml ``` 这张图表描绘了一位用户访问网站登录流程中的主要步骤，包括打开网址、提交表单验证身份直至最后周期性健康检查等一系列操作[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值