前端性能调优

前端性能调优

前端性能调优可以考虑以下这个方面：

1.页面渲染 css、html

2.页面加载 js

3.缓存

4.代码分割(就是把js文件的大小压缩，没有需要的js不会进行加载)

代码分割

当项目越做越大时，体积过大会导致加载速度过慢。把一个大的文件拆分成N个小文件，再进行动态导入，将模块分离成单独的文件，在需要的时候再加载进来

1. 基于路由的代码拆分
2. 基于模块拆分

前端缓存

分为HTTP缓存和浏览器缓存

其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。(数据请求来说，可以分为发起网络请求、后端处理、浏览器响应)

强缓存

控制强制缓存的字段分别是Expires(HTTP1.1之后，已经被cache-control代替，因为地区时区不一致)和Cache-Control，其中Cache-Contral优先级比Expires高

(发现其实有很多前端的文件其实都是no_cache的)

缓存又可以分为memory cache, disk cache

HTTP 协议头的那些字段，都属于 disk cache 的范畴

它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)

1. Service Worker
2. Memory Cache(内存中的缓存)
3. Disk Cache(硬盘中的缓存)
4. 网络请求
   

前端性能排查

https://segmentfault.com/a/1190000016163966

前端性能分析工具

ps://segmentfault.com/a/1190000016163966

前端性能分析工具

https://www.sohu.com/a/270479773_216613