谷歌浏览器控制台入门笔记

常用的功能有四个

元素(Elements):用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。
控制台(Console):控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。
源代码(Sources):该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。


网络(Network):网络页面主要用于查看header等与网络连接相关的信息。

  • Header:面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

Header面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

  • Preview:预览面板,用于资源的预览。
  • Response:响应信息面板包含资源还未进行格式处理的内容
  • Timing:资源请求的详细信息花费时间

Timing界面

参数具体含义:

  • Queueing:请求文件顺序的排序。浏览器是有线程限制的,发请求也不能所有的请求同时发送,会将请求加入队列中(Chrome的最大并发连接数是6)。此参数表示从添加到待处理队列,到实际开始处理的时间间隔标示。

  • Stalled(阻塞):浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等。浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载;

    优化措施
    1、将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能;
    2、脚本置于页面底部;

  • DNS Lookup:请求某域名下的资源,浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前,浏览器不能从主机名那里下载到任何东西。DNS查询的时间,当本地DNS缓存没有的时候,这个时间可能是有一段长度的,但是比如你一旦在host中设置了DNS,或者第二次访问,由于浏览器的DNS缓存还在,这个时间就为0了。

    优化措施
    1、利用DNS缓存(设置TTL时间);
    2、利用Connection:keep-alive特性建立持久连接,可以在当前连接上进行多个请求,无需再进行域名解析;

  • Initial connection:建立TCP连接的时间,就相当于客户端从发请求开始到TCP握手结束这一段,包括DNS查询+Proxy时间+TCP握手时间。

  • SSL(包含于HTTPS连接中):http是超文本传输协议,以明文方式发送内容,不提供任何方式的数据加密,如果被不法分子截取浏览器和服务器之间的传输报文,会获取其中的信息。
    https 是安全套接字层超文本传输协议,就是在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。
    因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。

  • Request sent(发送请求):发送HTTP请求的时间(从第一个字节发出前到最后一个字节发出后的时间)

    优化措施
    1、减少HTTP请求,可以使用CSS Sprites、内联图片、合并脚本和样式表等;
    2、对不常变化的组件添加长久的Expires头(相当于设置久远的过期时间),在后续的页面浏览中可以避免不必要的HTTP请求;

  • Waiting(TTFB) :请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte),发送请求完毕到接收请求开始的时间;通常是耗费时间最长的。从发送请求到收到服务器响应的第一字节之间的时间,受到线路、服务器距离等因素的影响。
    注意:网页重定向越多,TTFB越高,所以要减少重定向

    优化措施
    使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求,提高响应速度;

  • Content Download(下载):收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间。

    优化措施
    1、通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;
    2、移除重复脚本,精简和压缩代码,如借助自动化构建工具grunt、gulp等;
    3、压缩响应内容,服务器端启用gzip压缩,可以减少下载时间;

原文链接:https://blog.csdn.net/lhz_333/article/details/93544313

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 黑客帝国 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值