简介
自互联网兴起以来,从最初的静态网页到如今的动态交互、单页应用(SPA)、PWA(Progressive Web Apps)等,互联网技术正在飞速发展,随着用户体验成为核心竞争力之一,前端性能直接影响网站或应用的加载速度、交互流畅度,进而影响用户留存率和业务转化率。
高清图片、视频内容的普及增加了页面负载,要求更高效的资源加载策略,不同屏幕尺寸和性能的设备访问同一网页,需优化以适应各种环境,实时通信、大数据处理等技术的应用,要求前端能更快速响应用户操作。
由此,前端性能优化极其重要,以下内容为学习一前端性能优化课程所做的xmind笔记。
干货
首先,将相关的笔记知识点记录下来,下面再进行分析归纳。
text
前端性能优化
- css和js
1、css和js的装载执行:css和js执行时都会阻塞对方的执行,
方案:css置顶、link代替import、js置底、合理使用js异步加载
2、重绘与回流:重绘不影响布局,回流代价更大
方案:尽量避免使用触发重绘、回流的css属性,将重绘、回流限制在单独的图层里。
3、懒加载与预加载:懒加载 到可视区域再加载,预加载 在使用之前提前加载
方案:监听scroll事件、动态设置img的src、图片占位,preloadjs库、display nonoe
- 资源合并与压缩
1、普通资源
方案:压缩css js html文件,js使用mixin,合并gzip传输,合并共用库
2、图片
方案:根据实际场景使用图片格式,图片压缩,css雪碧图、base64格式、矢量图svg iconfont、 安卓使用webp格式
- 浏览器存储
1、浏览器存储
方案:合理使用cookie、localStorage、sessionStorage、indexedDB、PWA、serviceworkers
2、缓存优化
方案:合理利用cache-control、Expires、Last-modified、etag设置有效期
- SSR
方案:构建通用模板、服务端渲染 将数据和DOM一起返回
参考资料
参考教程:Web前端性能优化