阅读 624

性能优化第01期 - 建立性能知识体系

本文正在参与 “性能优化实战记录” 话题征文活动

作为一名合格的程序员,性能优化是一个必修的课题

只要我们对底层的原理进行理解和掌握,性能优化会变得非常简单,只需要对症下药就可以了

优化准则

  • 不宜过早优化

    在典型的互联网开发模式中,追求的是快速的迭代和试错,过早的优化往往会成为一种无用功

  • 不宜过度优化

    在项目的不同阶段,对系统的性能都会有不一样的要求

    在能够满足使用预期的情况下,就没有必要花费时间精力去做优化

  • 要追求合适的性价比

    在项目的不同阶段采用合理的方案来达到预期的使用体验即可

页面加载过程

  • DNS解析

    通过 DNS 服务器将主机域名转换为 IP 地址

    dns.jpg

  • 建立TCP连接

    通过三次握手,客户端与服务器利用 SYN 报文段交换彼此的初始序列号,互相维持一个具有连接特性的状态

handshake.jpeg

  • 客户端发起HTTP请求 && 服务端响应请求

    process.jpeg

  • 浏览器解析渲染页面

    1、根据 HTML 解析出 DOM 树

    2、根据 CSS 解析出 CSS 规则树

    3、结合 DOM 树和 CSS 规则树,生成渲染树

    4、根据渲染树计算 DOM 节点的信息(节点的大小、位置)

    5、根据计算好的信息绘制页面(CSS的颜色、背景、字体等)

render.jpeg

  • 关闭TCP连接

    通过四次挥手,确保数据传输的完整性,当被动方的数据全部传输给主动方后进行连接的关闭

wave.jpeg

性能参考指标

  • 浏览器图示

time.png

  • 各指标描述

    Stalled(阻塞时间)

    TCP 连接数超过上限,其余请求就会被阻塞,等待新的可用连接

    由于 JS 单线程的特性,脚本的执行也会产生阻塞

    DNS Lookup(域名解析时间)

    请求某域名下的资源时,先要通过 DNS 解析器得到该域名的 IP 地址,才会建立 TCP 连接

    Initial connection(初始化连接时间)

    建立 TCP 连接的三次握手时间

    Request sent(发送HTTP请求时间)

    从第一个 bit 到最后一个 bit 所耗费的时间

    Waiting(等待响应时间)

    通常是耗费时间最长的,从发送请求到收到响应之间的空隙时间

    Content Download(下载响应内容的时间)

    下载响应头和响应体数据所消耗的时间

HTTP1.1协议

  • 概述

    超文本传输协议,是互联网应用最为广泛的一种网络协议,它规范了浏览器和服务器的数据通信规则

  • 特性

    灵活性

    允许传输任意类型的数据对象,使用 Content-Type 加以标记即可

    持久连接

    支持 TCP 连接的复用,持久连接在默认情况下是激活的,即响应头 Connection: keep-alive

    管线化

    对 HTTP 请求每次只能是请求一次回答一次的模式进行改进

    允许在第一个应答被完全发送之前就可以发送第二个请求(可以一次性发送多个请求),以降低通信延迟

    在接收响应报文时,必须依赖请求顺序接收;如果前一个请求遇到了阻塞,后面的请求即使已经处理完毕了,仍然需要等待阻塞的请求处理完,也叫队头阻塞

    pipeline.jpeg

    无状态

    每一次请求都是独立的,无法根据之前的请求状态进行当前的请求处理,这样可以减少服务器的 CPU 占用以及内存资源的消耗

请求的缓存

  • 缓存过程分析

    cache.png

    浏览器与服务器的通信方式为应答模式,即:浏览器发起HTTP请求 - 服务器响应该请求

    由图可得:

    1、浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识

    2、浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

  • 强制缓存

    man-cache.png

    通过 ExpiresCache-Control 两个响应头字段来控制,如果同时存在,则后者优先级高于前者

    Expires: Mon, 06 Apr 2020 12:08:42 GMT (HTTP1.0标准) 使用客户端时间和服务端返回的时间做对比,容易产生误差

    Cache-Control: max-age=3600 (HTTP1.1标准)时间单位为秒,表示 1 小时

    符合强制缓存策略时,使用本地的缓存,不再向服务器发送请求,状态为 Status Code: 200 OK (from disk cache)Status Code: 200 OK (from memeory cache)

  • 协商缓存

    neg-cache.png

    通过 Last-ModifiedEtag 两个响应头字段来控制,如果同时存在,则后者优先级高于前者

    Last-Modified: Wed, 25 Mar 2020 08:33:53 GMT

    Etag: "5e7b16bd-a0ba" 资源文件的唯一标识,由服务器生成

    强制缓存失效后,浏览器携带缓存标识(If-Modified-Since / If-None-Match)向服务器发起请求,如果文件未修改过,可继续使用本地缓存,状态为 Status Code: 304 Not Modified

  • 清除缓存

    Cache-Control: no-cache, no-store, max-age=0, must-revalidate

    no-store 完全禁止缓存,用于某些变化非常频繁的数据

    no-cache 可以在客户端缓存资源,但每次都需要向服务端去做新鲜度校验,来决定从服务端获取新的资源(200)还是使用客户端缓存(304)

    注意:在客户端发送GET请求时也可通过添加时间戳参数来禁用缓存

HTTP2协议

  • 概述

    HTTP2 为 HTTP 协议提供了优化传输,它支持 HTTP1.1 的所有核心功能,但旨在以多种方式提高效率

  • 特性

    二进制传输

    将请求和响应的数据分割为更小的帧,并对它们采用二进制编码

    头部压缩

    头部 headers 是以纯文本传输且请求越多导致消耗在头部的流量就越多,尤其是每次都要传输 User-Agent 和 Cookie 这类不会频繁变动的内容,完全是一种浪费

    1、维护一份相同的静态字典(Static Table),包含常见的头部名称,以及特别常见的头部名称与值的组合

    2、维护一份相同的动态字典(Dynamic Table),可以动态地添加内容

    多路复用

    multiple.jpeg

    使用同一个连接传输所有的并行请求和响应,而交错的多个并行请求响应却不受阻塞影响

    服务器推送

    为单个客户端请求发送多个响应的能力

文章分类
前端