前端性能调优
前端性能调优可以考虑以下这个方面:
1.页面渲染 css、html
2.页面加载 js
3.缓存
4.代码分割(就是把js文件的大小压缩,没有需要的js不会进行加载)
代码分割
当项目越做越大时,体积过大会导致加载速度过慢。把一个大的文件拆分成N个小文件,再进行动态导入,将模块分离成单独的文件,在需要的时候再加载进来
- 基于路由的代码拆分
- 基于模块拆分
前端缓存
分为HTTP缓存和浏览器缓存
其中HTTP缓存是在HTTP请求传输时用到的缓存,主要在服务器代码上设置;而浏览器缓存则主要由前端开发在前端js上进行设置。(数据请求来说,可以分为发起网络请求、后端处理、浏览器响应)
强缓存
控制强制缓存的字段分别是Expires(HTTP1.1之后,已经被cache-control代替,因为地区时区不一致)和Cache-Control,其中Cache-Contral优先级比Expires高
(发现其实有很多前端的文件其实都是no_cache的)
缓存又可以分为memory cache, disk cache
HTTP 协议头的那些字段,都属于 disk cache 的范畴
它们的优先级是:(由上到下寻找,找到即返回;找不到则继续)
- Service Worker
- Memory Cache(内存中的缓存)
- Disk Cache(硬盘中的缓存)
- 网络请求
前端性能排查
https://segmentfault.com/a/1190000016163966
前端性能分析工具
ps://segmentfault.com/a/1190000016163966
前端性能分析工具
https://www.sohu.com/a/270479773_216613