20.前端中常用的优化策略有哪些？

1.网络优化

减少 HTTP 请求数，合并JS、CSS,合理内嵌CSS、JS
- 关键资源个数越多，首次页面加载时间就会越长
- 关键资源的大小，内容越小，下载时间越短

合理设置服务端缓存，提高服务器处理速度。 (强制缓存、对比缓存)

// Expires/Cache-Control   Etag/if-none-match/last-modified/if-modified-since

// Expires/Cache-Control   Etag/if-none-match/last-modified/if-modified-since

避免重定向，重定向会降低响应速度 (301,302)
使用dns-prefetch,进行DNS预解析
采用域名分片技术，将资源放到不同的域名下。接触同一个域名最多处理 6 个 TCP 链接问题。
采用CDN加速加快访问速度。(指派最近、高度可用)
gzip压缩优化对传输资源进行体积压缩 (html,js,css)
js
```
// Content-Encoding: gzip
```
```
// Content-Encoding: gzip
```
加载数据优先级 : preload（预先请求当前页面需要的资源） prefetch（将来页面中使用的资源）将数据缓存到 HTTP 缓存中
html
```
<link rel="preload" href="style.css" as="style" />
```
```
<link rel="preload" href="style.css" as="style" />
```
使用SSR加速首屏加载（耗费服务端资源），有利于SEO优化。首屏利用服务端渲染，后续交互采用客户端渲染。

2.存储优化

cookie: cookie 过期时间内一直有效，存储大小4k左右、同时限制字段个数，不适合大量的数据存储，每次请求会携带cookie,主要可以利用做身份检查。
- 设置cookie有效期
- 根据不同子域划分cookie较少传输
- 静态资源域名和cookie域名采用不同域名，避免静态资源访问时携带cookie

localStorage: chrome 下最大存储5M, 除非手动清除，否则一直存在。利用localStorage存储静态资源

function cacheFile(url) {
  let fileContent = localStorage.getItem(url);
  if (fileContent) {
    eval(fileContent);
  } else {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function () {
      let reponseText = xhr.responseText;
      eval(reponseText);
      localStorage.setItem(url, reponseText);
    };
    xhr.send();
  }
}
cacheFile("/index.js");

function cacheFile(url) {
  let fileContent = localStorage.getItem(url);
  if (fileContent) {
    eval(fileContent);
  } else {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onload = function () {
      let reponseText = xhr.responseText;
      eval(reponseText);
      localStorage.setItem(url, reponseText);
    };
    xhr.send();
  }
}
cacheFile("/index.js");

sessionStorage: 会话级别存储，可用于页面间的传值

indexDB:浏览器的本地数据库（基本无上限）

let request = window.indexedDB.open("myDatabase");
request.onsuccess = function (event) {
  let db = event.target.result;
  let ts = db.transaction(["student"], "readwrite");
  ts.objectStore("student").add({ name: "zf" });
  let r = ts.objectStore("student").get(5);
  r.onsuccess = function (e) {
    console.log(e.target.result);
  };
};
request.onupgradeneeded = function (event) {
  let db = event.target.result;
  if (!db.objectStoreNames.contains("student")) {
    let store = db.createObjectStore("student", { autoIncrement: true });
  }
};

let request = window.indexedDB.open("myDatabase");
request.onsuccess = function (event) {
  let db = event.target.result;
  let ts = db.transaction(["student"], "readwrite");
  ts.objectStore("student").add({ name: "zf" });
  let r = ts.objectStore("student").get(5);
  r.onsuccess = function (e) {
    console.log(e.target.result);
  };
};
request.onupgradeneeded = function (event) {
  let db = event.target.result;
  if (!db.objectStoreNames.contains("student")) {
    let store = db.createObjectStore("student", { autoIncrement: true });
  }
};

3.体验优化 PWA（Progressive Web App）

webapp 用户体验差（不能离线访问），用户粘性低（无法保存入口），pwa 就是为了解决这一系列问题,让 webapp 具有快速，可靠，安全等特点

Web App Manifest：将网站添加到桌面、更类似 native 的体验
Service Worker：离线缓存内容,配合 cache API
Push Api & Notification Api：消息推送与提醒
App Shell & App Skeleton App 壳、骨架屏

20.前端中常用的优化策略有哪些？ ​

1.网络优化 ​

2.存储优化 ​

3.体验优化 PWA（Progressive Web App） ​

20.前端中常用的优化策略有哪些？

1.网络优化

2.存储优化

3.体验优化 PWA（Progressive Web App）