集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web前端培训哪家好?chrome如何分析页面加载时间

发布者: 成都达内     浏览次数:     发布时间:2020-06-15 14:33:11

以chrome为例,开发者模式中跟页面加载时间相关的是network面板。network面板的DOMContentLoaded和load打开Network面板后,刷新页面,面板底部有这三个时间。...

  以chrome为例,开发者模式中跟页面加载时间相关的是network面板。

  network面板的DOMContentLoaded和load打开Network面板后,刷新页面,面板底部有这三个时间:

  成都web前端培训哪家好?chrome如何分析页面加载时间

  finish:页面最后一个请求截止的时间,如果页面加载完成后,触发了ajax请求,那么该时间会变更。

  DOMContentLoaded:dom内容加载并解析完成的时间,即页面白屏时间

  load:页面所有的资源(图片、音频、视频等)加载完成的时间。

  当页面的初始的标记被解析完成时,会触发DOMContentLoaded,它在Network面板上的两个位置显示:

  在Overview窗格中的蓝色垂直线表示这个事件。

  在Summary窗格中,可以查看这个事件的确切耗时。

  当页面完全加载时触发load事件,它显示在三个地方:

  在Overview窗格的红色垂直线表示这个事件。

  在Request Table中的红色垂直线也表示这个事件。

  在Summary中,可以查看该事件的确切时间。

  查看网络时序

  点击Timing选项卡可以查看单个资源的请求生命周期的明细分类。

  成都web前端培训哪家好?chrome如何分析页面加载时间

  Queuing 队列

  Stalled 停滞

  DNS lookup DNS查找

  initial connection 初始连接

  SSL handshake SSL握手

  Request sent 请求发送

  Waiting 等待,具体指到开始下载第一个字节的时间(TTFB:time for first byte)

  Content Download 内容下载

  资源加载时序

  所有网络请求都被视为资源,当它们通过网络检索时,分为不同的生命周期。

  一个完整请求生命周期的主要阶段如下

  Redirect 重定向

  立即开始 startTime如果发生重定向,redirectStart也会开始计时

  如果重定向发生在此阶段结束,那么redirectEnd被采用

  App Cache 应用程序缓存

  如果浏览器有缓存,将采用fetchStart时间

  DNS

  domainLookupStart 记录DNS请求开始时间

  domainLookupEnd记录DNS请求结束的时间

  TCP

  connectStart 记录开始连接到服务器的时间

  如果用了TLS或者SSL,secureConnectionStart记录开始连接时间

  connectEnd记录连接完毕时间

  Request 请求

  requestStart记录请求发生到服务器的时间

  Response 响应

  responeseStart记录最开始的响应时间

  responseEnd记录响应结束时间

  成都web前端培训哪家好?chrome如何分析页面加载时间

  timing面板信息详解

  Queuing 排队 如果一个请求排队,则表明:

  请求被渲染引擎推迟,因为它比关键资源(如脚本/样式)的优先级低。例如,images。

  这个请求被搁置,在等待一个即将被释放的不可用的TCP socket

  这个请求被搁置,因为浏览器限制。在HTTP 1协议中,每个源上只能有6个TCP连接。

  正在生成磁盘缓存条目(通常非常快)

  Stalled/Blocking 停止/阻塞

  发送请求之前的等待时间。它可能因为进入队列的任意原因而被阻塞。这个时间包括代理协商的时间。

  Proxy Negotiation 代理协商

  与代理服务器连接协商花费的时间

  DNS Lookup DNS查找

  执行DNS查找所用的时间。页面上的每个新域都需要完整的往返(roundtrip)才能进行DNS查找。

  Initial Connection/Connecting 初始连接/连接

  连接连接所需的时间,包括TCP握手/重试和协商SSL。

  SSL

  完成SSL握手所用的时间

  Request Sent/Sending 请求已经发送/正在发送

  发出网络请求所花费的时间,通常是几分之一毫秒

  Waiting(TTFB) 等待

  等待初始响应所花费的时间。这个时间包含:等待服务器传递响应花费的时间、捕获到服务器发送数据的延迟时间

  Content Download/Downloading 内容下载/下载

  接收响应数据所花费的时间:从接收到第一个字节开始,到下载完最后一个字节结束。

  Network面板诊断网络问题

  排队或者阻塞:很多个请求队列被阻塞。这表示单个客户端检索的资源太多。在HTTP 1.0/1.1连接协议中,Chrome限制每个域名最多执行6个TCP连接。

  成都web前端培训哪家好?解决方法:分域,即用多个字域名提供服务资源,将资源拆分到多个子域中,均匀分配。

  HTTP2,TCP连接支持多路复用,消除了HTTP 1的6个连接限制,并且可以通过单个连接同时传输多个资源。

  接收到第一个字节的时间很慢:很多绿色。

  解决方法:1、尽量减少网络连接。理想情况下,在本地托管应用程序(部署在本地)。2、优化应用程序的响应速度

  加载缓慢:很多蓝色。

  解决方法:减少响应的字节。例如,优化图片。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56