hongyangwu

主题

资源请求优化 ​

HTTP2 ​

  • 二进制分帧层
  • 首部压缩
  • 多路复用
  • 服务器推送

详细可查看 Web/HTTP 优化#HTTP2.0的优化

缓存 ​

主文件使用协商缓存，其他使用强缓存

避免过多重定向 ​

每次重定向都会有请求耗时

Resource Hints ​

DNS 预读取 ​

DNS 解析在有的时候会十分耗时，对于即将要跳转的域名，可以提前预解析

  1. 在头部开启 DNS 预读取
html
<meta http-equiv="x-dns-prefetch-control" content="on">
  1. 开启对某个域名的读取
html
<link rel="dns-prefetch" href="//www.kingmusi.xyz">

使用场景：

  • 静态资源域名
  • 即将要跳转的域名
  • 要重定向的域名

预连接 ​

提前开启与某个服务器的 TCP 连接

html
<link rel="preconnect" href="//www.kingmusi.xyz">

预加载 ​

prefetch ​

让浏览器在空闲时间下载某资源，只会下载，不会执行

路由懒加载就是如此

js
{
  component: import('./xx')
}

打包后，会发现有 prefetch 的标签

html
<link rel="prefetch" as="script" href="xx.js">
perload ​

遇到 preload 的资源，会立即下载并执行，并将结果保存在内存中

html
<link rel="preload" as="script" href="xx.js">
prerender ​

遇到 prerender 的页面，会把页面及其所依赖的资源下载并处理

html
<link rel="prerender" href="xx.html">

CDN 错误处理 ​

CDN 会将资源的域名解析到离用户近、负载小的 CDN 服务器上。但由于各个用户不同的地理位置情况，可能会出现 CDN 解析失败，导致白屏的问题

通过监听 error 事件，监听到 CDN 加载失败

js
window.addEventListener('error', (e) => {
  if (!(e instanceof Error)) {
    // todo
  }
}, true)

解决方案

  1. 重新加载页面，window.reload(true)，配合 sessionStorage 有次数的刷新
  2. 更换 CDN 域名，使加载失败的文件重新加载，准备多个可替换的 CDN 域名，逐次尝试替换

服务器端渲染 / 预渲染 ​

SSR ​

使用服务端渲染，返回的 HTML 是有内容（数据）的，客户端能够立刻渲染出有意义的首屏内容

优点：

  1. 更好的seo
  2. 更快的首屏时间
  3. SSR 不依赖客户端环境，包括网络环境和设备性能

缺点：大流量情况下的成本高（扩容）

SSG ​

在编译时生成静态 HTML，把组件渲染工作完全前移到编译时，将生成的 HTML 静态资源托管到 Web 服务器或 CDN

Copyright © 2021-2024 hongyangwu