zoukankan      html  css  js  c++  java
  • chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后端功能,在百度上也有很多关于该功能的使用说明,而其中很多都是抄来抄去的,很多概念模糊不清,甚至错误的也发了出来,鄙人实在看不下去了,就来给大家讲解我们PHP工程师需要用到的功能,重点在后面的TimeLine;

    好了,闲话少说,首先打开chrome浏览器,按F12键进入调试模式,选择NetWork,打开一个网页,这里我以百度为例,请大家看看下面这张图片

    .NetWork里面分别出现以下信息,这里我一个个给大家讲讲

    Name and Path:请求资源的路径和名称

    Method:请求方法:如GET,POST

    Status and Text:HTTP请求状态码和文本信息

    Type:请求的MIME类型

    Initiator:发送请求的对象,主要包含Parser和Script

    我们来看看上图第二个请求资源中的Initiator一列,显示的是www.baidu.com/:4[Parser],这里表示该css文件是从百度首页HTML中第四行解析出来的,大家不妨查看一下网页源代码看看

    有的资源Initiator一列为Script,表示该资源是通过某JS文件加载的,例如一些图片

    Size and Content:size是http请求中传输的真实大小,包括响应头和响应体;content表示响应体解压后的大小(如果有压缩的话,一般为gzip压缩),如果采用了gzip编码传输,content比size大,否则content小于size

    我们可以看到上图中的第一个资源,也就是百度首页的HTML代码,size为32.1KB,Content为138KB,说明使用请求该资源时,服务器采用压缩的方式传输资源,大小为32.1KB,我们来点击一下这个资源看看里面的headers,看下图,说明百度采用的是gzip方式压缩的

    经过浏览器解压后真正的内容大小为138KB,这是减少服务器带宽压力的一种方式,这种功能Nginx和Apache都是支持的;在第一张图片中的第8,9个资源的size为from cache,说明该资源是从缓存中读取的;想要关闭缓存功能,将图中的Disable cache勾上就可以;

    Time and Latency:Time表示从发送请求到接收响应的最后一个字节所花的时间,即请求一个资源花的总时间,Latency表示从发送请求到接收响应的第一个字节所花的时间,即延迟;那么Time减去Latency就反应带宽问题了,包括客户端和服务器带宽;在时间上chrome又多了一个TimeLine走势图,下面来看看时间到底花在哪里了;

    TimeLine:响应时间的详细报告(上图),其中包括

    Stalled:是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接时间等;

    Proxy Negotiation:与代理服务器的连接时间;

    DNS LookUp:表示DNS查找时间,如果第一次访问的是域名就需要查找,IP地址的话不需要,上图中没有这个参数,说明我本地缓存了百度域名的服务器地址,浏览器不需要查询,直接通过IP请求服务器;

    Initail Connection:建立连接的时间,包括TCP,SSL握手/重试和谈判

    Request sent:发送请求到服务器的传输时间,即上传时间;

    Waiting(TTFB):发送请求后到收到响应的第一个字节所花费的时间,TTFB(time to first bytes);这是服务器优化的重要指标,服务器优化的目的就是减少这个时间;

    Content Download:获取响应资源时间,下载时间,即上面的Time减去Latency的时间,这是反应带宽的重要指标

    今天只是给大家讲了PHP工程师需要了解的功能,关于查看headers方式我就不讲了,相信很多同学都知道,下次我给大家讲讲前端调试功能,敬请期待哦;

    以上是个人总结出来的,语文老师死得早,讲的不好的地方希望大家谅解,如果大家有什么纠结的地方可以直接发消息给我,我会第一时间回复的,鄙人很乐意为大家解答,如果您对我的文章有什么建议或者意见,也欢迎提出来,再次感谢您的阅读;

  • 相关阅读:
    团队项目-第一阶段冲刺7
    团队项目-第一阶段冲刺6
    Spring Boot 揭秘与实战(七) 实用技术篇
    Spring Boot 揭秘与实战(七) 实用技术篇
    Spring Boot 揭秘与实战(六) 消息队列篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(五) 服务器篇
    Spring Boot 揭秘与实战(四) 配置文件篇
  • 原文地址:https://www.cnblogs.com/xiaozong/p/4961929.html
Copyright © 2011-2022 走看看