https://www.bilibili.com/video/BV1Xy4y1f7gv/?p=2&spm_id_from=pageDriver&vd_source=3d5529582ad68dbbeb463ce1e1db2ecd

指标设定

  1. 以用户体验为中心

    1. 页面加载速度

    2. 用户交互

    3. 视觉稳定性（CLS）

  2. 可以度量：分位值，秒开率

    1. 白屏时间：300ms

    2. 首页时间：1s，2.5s

首屏时间

首屏时间 = 白屏时间 + 数据接口响应、图片加载时间等

白屏时间 = dns + tcp + 服务器响应等

页面加载过程

url -> 页面渲染 全过程

url -dns-> ip -http-> 数据响应 -渲染-> 页面

优化策略

  1. 缓存

    1. 强缓存：通过响应头 expires 和 cache-control 判断是否命中

    2. 协商缓存（httpcode 304）：先发请求到服务端，通过 last-modified 和 e-tag 来确认本地缓存有效

  2. dns：dns预获取

  3. http请求

    1. 浏览器最多并发数：6个（针对同域名）

      1. 域名规划：制定域名优先级，优先请求重要资源

      2. 域名散列：多地址随机选取，增加并发连接数。不是越多越好，可能会影响多域名下的资源缓存问题

    2. 服务端处理：

      1. http处理

      2. 权限校验

      3. 数据处理

      4. 数据返回

        1. gzip压缩

缓存优化策略

  1. 【浏览器】借助 Service Worker 数据接口进行缓存

  2. 【浏览器】借助本地存储对数据缓存

  3. 【服务器】CDN

资源重定向

  1. 服务端 302 重定向

  2. META标签重定向

  3. 前端 window.location 重定向

导致DNS重新查询

浏览器处理

解析：原始 html 转成 dom 树 和 cssom 树，用来表示页面结构或css结构的树形数据结构

渲染：渲染主线程根据 dom 树 和 cssom 树，渲染出页面布局结构