前端的性能优化
想要了解前端的性能优化，必须要先知道浏览器运行的步骤，从中进行优化
1，浏览器渲染的步骤
- 1，对网址进行 DNS域名解析，得到对应的IP地址
- 2，根据IP找到对应的服务器，发起 TCP 三次握手
- 3，建立 TCP 连接后，发送 http 请求
- 4，服务器响应 http 请求，浏览器得到 html 代码
- 5，浏览器解析 html 请求，并请求 html 代码中的资源
解析 html 文件结构 DOM 树
解析 css 文件构成渲染树
边解析，边渲染
js 是单线程，js有可能修改DOM结构，意味着js执行完成前，后续所有资源的下载是没有必要的，所有js是单线程，会阻塞后续资源下载
- 6，浏览器对页面进行渲染，呈现给客户
- 7，服务器关闭 tcp 连接，四次挥手
既然了解了浏览器渲染的步骤，我们就从中选择进行优化
2，http 缓存控制（浏览器缓存）
1，常见定义
浏览器缓存：http 缓存，cookie，localstore
是否缓存： expires，cache-control
缓存命中率：从缓存中得到的数据与所有请求数据的比率
过期内容：超过设置的有效时间
验证：验证缓存中过期内容任然有效，验证通过刷新过期时间
失效：把内容从缓存中移除，当内容发生改变时，就必须移除失效内容
2，缓存分类
1，定义
缓存分类：强缓存，协商缓存
强缓存：浏览器根据http请求头判断是强缓存，是则不需要发送请求到服务器
协商缓存：服务器判断浏览器本地缓存是否失效，没失效，不用发请求服务器，从浏览器缓存中加载资源，如果失效了，发送请求服务器，浏览器加载新资源，并更新缓存
3，强缓存标志
强缓存：是利用http返回头中 expires 与 cache-control 字段控制表示资源的缓存时间
1，expires：定义缓存时间（服务端绝对时间，年月日时分秒）— 由于客户端时间修改后，会导致缓存混乱，所以=> cache-control,
2，cache-control：相对时间（3600s）— 优先级高（max-age：指定时间长度，3600s）
* public 表示响应可以被客户端和代理服务器缓存
* private 表示响应只可以被客户端缓存
* max-age=30 缓存30秒后过期，需要重新请求
* s-maxage=30 覆盖 max-age，作用一样，只在代理服务器中生效
* no-store 不缓存任何响应
* no-cache 资源被缓存，但会立即失效，下次会发送请求验证资源是否过期
* max-stale=30 30秒内，即使缓存过期，也要用该缓存
* min-fresh=30 希望在30秒内获取最新的响应
3，强缓存标志：状态码 200，cache-control 有值
4，协商缓存标志
1，协商缓存：是利用http返回头中 last-modify/if-modify-since 与 etag/if-none-match 字段判断是否协商缓存
2，协商缓存：状态码 304
3，协商原理：浏览器与与服务器文件是否更新，更新，重新加载，不更新，使用缓存
5，为什么使用缓存
对于网站优化性能方便，有很大的提升
3，浏览器性能优化
1，css阻塞优化
1，渲染DOM步骤
* 渲染DOM
* 渲染CSSDOM
* 布局计算=回流（定义：生成DOM与CSSDOM后渲染，会计算他们设备视口内的确切大小与位置，这个计算阶段叫布局或重排）
* 布局计算=绘制（根据渲染与回流得到的几何信息，得到节点的绝对像素叫绘制或栅格化）
2，优化点
- 标签语义化和避免深层次嵌套,
- 尽可能的提高外部css加载速度
* style行内标签：内容要少
* import：避免阻塞JS加载，放在底部
* <style/> 引入，由html解析，不阻塞浏览器渲染与DOM渲染，当文件足够大会产生闪品现象，用户体验不好
* link：引入css，要放在顶部
* 由css解析器解析，是同步解析
* 阻塞页面渲染，浏览器渲染，与DOM渲染
* 但不阻塞后面JS 渲染
* 但是会避免闪屏现象
- 通过懒加载方式处理图片加载
对于小图标，可以使用 iconfont来解决
对于彩色小图片，可以使用雪碧图来解决
- 部分代码可以实现资源懒加载
加载资源时候，但是代码没有执行，可以实现部分资源懒加载
3，优化核心点
1，使用CDN节点进行外部资源加速
2，对css进行压缩（利用打包工具）
3，减少http请求数，讲多个css文件合并
4，图片压缩
5，优化样式表代码
6，部分资源懒加载
7，减少 DOM 操作
8，减少http请求，尽可能减少前端资源的数量与大小
注：
真正渲染到页面的时候，一定发生在DOM树与CSSDOM树都已经完成了 html 与 css 都是阻碍页面渲染的东西
link 是异步请求，import是同步请求，真实项目中，应该减少 import 阻塞渲染的请求
style 不多时候，用行内样式，多是话用link，否则拉DOM树时，会花费很多时间
style 是在拿html时候，就已经拿回来了，他在三者之间，是最好的
css 预编辑器
滥用 层级嵌套
css 有一长串 非常恶心的选择器
层级嵌套要慎重
2，js阻塞优化
1，阻塞 DOM 解析
2，页面渲染：要等js解析完了，才能渲染页面DOM
3，后续js执行
defer 作用：紧随页面DOM解析之后，执行的操作
3，js 与 css 阻塞 ：
1，css 解析与ja执行是互斥的，css解析时，js停止执行，js执行时，css 是停止的
2，无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片，视频，样式，脚本等），因为浏览器始终处于一种“先把请求发出去”，只要涉及到网络请求内容，都会先发送请求去获取资源，至于资源到本地以后什么时候用，就由浏览器自己协调，
3，webkit 与 firefox都进行了预解析优化，在执行js脚本时，浏览器的其他线程会预解析文档
的其余部分，找出并加载需要通过网络加载的其他资源，通过这种方式，资源可以在并行链接上加载，提高总体速度
4，CDN加速
优化点：把静态资源，放在CDN上，实现CDN加速
