从输⼊ URL 到⻚⾯加载完成，发⽣了什么？

我们的性能优化策略，也是基于这个问题，针对每⼀步依次解析

步骤

1. ⽤户输⼊taobao.com
2. 域名解析 浏览器通过DNS，把url解析为IP
3. 发起TCP三次握手建立连接
4. 建立连接后发起http请求
5. 服务器响应请求，浏览器获取html源码
6. 浏览器收到⾸屏html，开始渲染
7. 解析html为dom
8. 解析css 为css-tree
9. dom+ css ⽣成render-tree 绘图
10. 加载script的js⽂件
11. 执⾏js

所谓性能优化，就是上⾯的步骤加⼀起，时间尽可能的短，所以基本也有两⼤⽅向
少加载⽂件
少执⾏代码

DNS

1. 查看dns缓存
2. 本地没缓存，发起dns请求，向本地配置的DNS服务器发请求(递归)
   优化： prefetch 预获取，⽐如使⽤了cdn的域名

TCP

IP TCP HTTP的关系
IP负责找到
TCP 负责数据完整性和有序型， 三次握⼿，粘包 ，滑动窗⼝等机制（ Vs udp）
http应⽤层，负责应⽤层数据，数据终⽌时机

优化策略：

1. ⻓连接
2. 减少⽂件体积
   js打包压缩
   图⽚压缩
   gzip
3. 减少⽂件请求次数
   1. 雪碧图
   2. js，css打包
   3. 缓存控制
   4. 懒加载
4. 减少⽤户和服务器的距离
   cdn
5. 本地存储

三次握⼿

1. 你在不
2. 我在呢
3. 那我开始发数据了呦
   ⽂件打包 可以节省这部分优化

HTTP

1. 携带 数据，⽐如header(cookie)
2. 合理利⽤缓存

浏览器缓存机制

通过⽹络获取内容既速度缓慢⼜开销巨⼤。较⼤的响应需要在客户端与服务器之间进⾏多次往返通信，
这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费⽤。因此，缓存并重复利⽤之前获取
的资源的能⼒成为性能优化的⼀个关键⽅⾯。
⼴义的缓存，可以分为这四个 ，⼤家对httpcache应该都⽐较熟悉了

1. Http Cache
2. Service Worker Cache
3. Memory Cache
4. Push Cache

http Cache

浏览器⼤佬： 需要获取main.js ，看下强缓存⾥有么有

1. Expires 和 Cache-Control两个header来控制强缓存

expires: Wed, 11 Mar  2019 16:12:18 Mar  GMT    expires: Wed, 11 16:12:18  GMT    
cache-control: max-age=31536000   // 1.1 精准 优先级⾼

2. 如果命中强缓存，就不会和服务器交互了，直接⽤强缓存

Status Code: 200  (from disk cache)

如果强缓存失效了，需要执⾏协商缓存
1、 服务器⼩⽼弟。浏览器⼤佬需要main.js 这个⽂件上次修改

  If-Modified-Since: Fri, 27 Oct 2017 06:35:57 GMT

2、 服务器： ⼩⽼弟，没改过，直接⽤缓存把，这次请求返回304 not Modified

如果有etag 类似⽂件的指纹，这个优先级更⾼ 因为更准确

ETag: W/"2aaa-129892f459"
If-None-Match: W/"2aaa-129892f459"

memory Cache

内存缓存，短命 ⽐如常⽤数据存js⾥，浏览器也有⾃⼰的策略， base64图⽚，体积⼩的静态资源

Service Worker Cache

Service Worker 是⼀种独⽴于主线程之外的 Javascript 线程。它脱离于浏览器窗体，算是幕后⼯作，可以实现离线缓存，⽹络代理等

window.navigator.serviceWorker.register('/kaikeba.js').then(
		   function () {
		      console.log('注册成功')
		console.log('注册成功')
		    }).catch(err => {
		      console.error("注册失败")
		console.error("注册失败")
    })

push cache

http2的缓存

⽂件打包

分析⽂件⼤⼩
只引入需要的部分

图⽚优化

图⽚通常是最占⽤流量的，PC端加载的平均图⽚⼤⼩时600K，简直⽐js打包后的⽂件还⼤了，所以针对 图⽚的优化，也是收益不错的
不同的场景，使⽤不同的⽂件⾥类型
jpg
 - 有损压缩
 - 体积⼩ 不⽀持透明
 - ⽤于背景图，轮播图
 png
 - ⽆损压缩，质量⾼，⽀持透明
 - ⾊彩线条更丰富，⼩图，⽐如logo，商品icon
 
 svg
 - ⽂本，体积⼩ ⽮量图
 - 渲染成本，学习成本
 
图⽚打包雪碧图 减少http请求次数 webpack-spritesmith

gzip

accept-encoding:gzip 开启gzip

HTTP 压缩就是以缩⼩体积为⽬的，对 HTTP 内容进⾏重新编码的过程
Gzip 压缩背后的原理，是在⼀个⽂本⽂件中找出⼀些重复出现的字符串、临时替换它们，从⽽使整个⽂
件变⼩。根据这个原理，⽂件中代码的重复率越⾼，那么压缩的效率就越⾼，使⽤ Gzip 的收益也就越
⼤。反之亦然。
基本上来说，Gzip都是服务器⼲的活，⽐如nginx

本地 存储

cookie localstroage， sessionStroage，indexDB

1. cookie
   最早，体积先定，性能浪费 ，所有请求都带上所有当前域名的cookie
2. Web Storage
   Local Storage 与 Session Storage
   存储量⼤，不⾃动发给服务端，js控制
3. indexdb
   运⾏在浏览器上的⾮关系型数据库
4. PWA
   基于缓存技术的应⽤模型

CDN

服务端渲染

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序

如果是SPA ⾸屏SSR就是性能优化的重要⼀环
SSR常用框架
nuxt 和 next
vue服务端渲染
nuxt.js 服务端渲染框架体验

1. 基于Vuejs
2. 服务端渲染
3. 路由
4. 热加载
5. ⽀持http2

 优点：
1.更快的响应速度
2.容易被爬虫爬到页面数据

缺点：
1.增加服务器压力
2.开发难度增大
3.可能会由于某些因素导致服务器端渲染的结果与浏览器端的结果不一致