基础//性能优化

基础——性能优化

1.1 性能优化的原则

① 多使用内存、缓存或者其他方法
② 减少 CPU 计算、减少网络

1.2 提升性能的方法有哪些？

1）加载资源优化

①资源压缩合并，减少HTTP请求
②非核心代码异步加载 → 异步加载方式 → 异步加载的区别
③利用浏览器缓存 → 缓存分类 → 缓存原理
④使用CDN 让资源加载更快
⑤预解析DNS
meta http-equiv=“x-dns-prefetch-control” content=“on”>
link rel=“dns-prefectch” href="//host_to_prefetch.com">
⑥使用 SSR 后端渲染，数据直接输出到 HTML 中

• *CDN
  (content delivery network)内容分发网站
  属于网络优化。尤其第一次打开一个网站时，这个必须说出。
• *DNS预解析
  在一些较高级的浏览器中，a标签是默认打开DNS预解析的。
  若网站以 Https 协议开头，很多浏览器默认关闭DNS预解析。
• *异步加载
  方式 | 区别

①动态脚本加载  |
②defer        |  defer在HTML解析完后才执行，如果是多个，按照加载的顺序执行
③async        |  async是在加载完后立即执行，如果是多个，执行顺序和加载顺序无关

• *浏览器缓存
  ① 强缓存（不问服务器资源副本是否过期，直接那本地缓存用）

Expires    Expires: Thu, 21 Jan 2017 23:39:02 GMT（服务器与浏览器存在时间差）
Cache-Control    Cache-Control: max-age:3600 （相对时间）

② 协商缓存（问服务器是否过期，再用）

Last-Modified If-Modified-Since    Last-Modified: Web,26 Jan 2017 00:35:11 GMT
Etag If-None-Match

2）渲染优化

①CSS 放前面，JS 放后面
②懒加载（图片懒加载、下拉加载更多）
③减少 DOM 查询，对 DOM 查询做缓存
④减少 DOM操作，多个操作尽量合并在一起操作
⑤事件节流 ⑥尽早执行操作（如 DOMContentLoaded）

1.3 与缓存有关的http协议头有哪些

Expires / Cache-Control / Last-Modified / if-Modified-Since / Etag / If-None-Match