返回文章

你一定要经历的 web 页面性能优化之旅 · 01

Network 面板 是否开启 network 的日志，灰色未开启，红色已开启 点击清除 network 日志 是否开启捕获屏幕，灰色未开启，蓝色已开启，开启后的效果如 11 是否开启过滤 是否使用更大区域显示请求记录 是否使用概括显示请求记录 是否对网络请求分组 是否跳转页面后保留旧的网络请求 是否开启缓存开关 filter 区域，控制 request 具体显示哪些内容 屏幕捕获区域，以时间为轴…

Network 面板

  1. 是否开启 network 的日志，灰色未开启，红色已开启
  2. 点击清除 network 日志
  3. 是否开启捕获屏幕，灰色未开启，蓝色已开启，开启后的效果如 11
  4. 是否开启过滤
  5. 是否使用更大区域显示请求记录
  6. 是否使用概括显示请求记录
  7. 是否对网络请求分组
  8. 是否跳转页面后保留旧的网络请求
  9. 是否开启缓存开关
  10. filter 区域，控制 request 具体显示哪些内容
  11. 屏幕捕获区域，以时间为轴，获取不同时间下的资源加载情况
  12. 显示获取资源的时间轴信息
  13. response table 默认按请求时间列出各个请求的概要信息
  14. 显示请求数，数据传输量，加载时间

Network 的 response table

  1. initiator

    1. Parser：请求是由页面的 HTML 解析时发送的；
    2. Redirect：请求是由页面重定向发送的；
    3. Script：请求是由 script 脚本处理发送的；
    4. Other：请求是由其他过程发送的，比如页面里的 link 链接点击，在地址栏输入 URL 地址

  2. size

    1. from memory cache：存在内存中的，非持久的，关闭浏览器后就失效了
    2. from disk cache：：存在磁盘中的，持久的

  1. 当点击 response table 的某个资源 Name 时，右边有一个 tab

    tab 包含 Headers 、Preview 、Response 、Cookies 、Timing

    Timing

    1. Queuing：排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数；

    2. Stalled：从 HTTP 连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间；

    3. Proxy Negotiation：与代理服务器连接的时间花费；

    4. DNS Lookup ：执行 DNS 查询的时间。网页上每一个新的域名都要经过一个 DNS 查询。第二次访问浏览器有缓存的话，则这个时间为 0；

    5. Initial Connection： 建立连接的时间花费，包含了 TCP 握手及重试时间；

    6. SSL：完成 SSL 握手的时间花费；

    7. Request sent：发起请求的时间；

    8. Waiting (Time to first byte (TTFB))： 发送请求后收到响应的第一个字节所花费的时间，它包含了 TCP 连接时间，发送 HTTP 请求时间和获得响应消息第一个字节的时间；这个是服务器优化重要指标

    9. Content Download 获取 Response 响应数据的时间花费。反映带宽的重要指标

Network 的页面加载时间分析

  1. finish：页面上所有 http 请求发送到响应完成的时间，http1.0 协议限定，单域名请求并发量为 6 个，finish 时间就是所有请求（xhr，img，js，css 等需要 http 请求的资源），在并发量为 6 限制下完成的时间
  2. DOMContentLoaded： dom 树加载完毕的时间，不包含 css，图片等加载完成时间 对应资源时间轴的蓝线
  3. load ：dom 树加载完成，继续加载 html/css 中的图片等外部资源对应资源时间轴的红线
  4. 标记捕获帧捕获的具体时间记录对应资源时间轴的黄线
  • finish
  1. finish 时间不总是比 load 时间大，如果只是一个纯 html，没有 http 请求，那么 finish 时间比 load 时间短

暂无评论