前端性能优化

前言

前段性能优化：

1.文件获取优化

     - 加载 文件css,js

     - http 协议的细节

    - 从输入url到页面渲染完毕，发生了什么

2.代码执行优化

     - 节流 防抖

     - 重绘  回流

    - vue react(ssr)  常见优化 代码执行的更少

   - 浏览器如何渲染页面

 

从输入url到页面渲染完毕，发生了什么

 

 

 

 

DNS

 

     1. 查看Dns 缓存

      2.本地没缓存，发起DNS请求，象本地配置的DNS服务器请求（递归）

 

 

 

少加载文件

   1.合理利用浏览器文件缓存

   列子：

    1.首次加载  http请求 ，server正常返回

         1.返回响应头加上强缓存的说明(真是事实)

         2.expires:wed 11 2049 10:20:00 (过期实践)

         3.cache-control : max-age = 300000 ()

          4.2个header 都是后端告诉浏览器，这个文件，多少时间内， 不过期(比如一个小时)

          5.浏览器接收到上面的两个header 就会文件保存起来

   2.一个小时内在请求这个文件：

       1.浏览器识别 强缓存， 请求不发出，直接用本地的缓存文件 状态码 200 from cache

   3.2个小时后，在请求这个文件，强缓存失效，使用协商缓存

       1.浏览器不会直接发出请求，而是问一下后端，header 带上请求头

             1.if-modified-since:日期 后端 这个文件没有修改过

             2.后端告诉你 没该改过，请使用缓存  相应是304 not modified

             3. 浏览器直接用缓存

             4.优先级更高的，是etag  文件指纹 内容不变，指纹不变

 

 

     4.如果后端告诉你 ，改过了 ，那只能从先加载了

 

 

文件缓存 虽然js 控制不到，浏览器控制，可以通过工程化来利用缓存

高效利用缓存：

 

 

 

 

 

 

 

 

  

 

 

少执行代码

 

那么从网络协议的方面来看：

 

http2 缓存

 

 

 

 

 图片优化

 

 

 

性能监控