Web前端性能优化合集

简介

自互联网兴起以来，从最初的静态网页到如今的动态交互、单页应用（SPA）、PWA（Progressive Web Apps）等，互联网技术正在飞速发展，随着用户体验成为核心竞争力之一，前端性能直接影响网站或应用的加载速度、交互流畅度，进而影响用户留存率和业务转化率。
高清图片、视频内容的普及增加了页面负载，要求更高效的资源加载策略，不同屏幕尺寸和性能的设备访问同一网页，需优化以适应各种环境，实时通信、大数据处理等技术的应用，要求前端能更快速响应用户操作。
由此，前端性能优化极其重要，以下内容为学习一前端性能优化课程所做的xmind笔记。

干货

首先，将相关的笔记知识点记录下来，下面再进行分析归纳。

前端性能优化- css和js1、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、serviceworkers2、缓存优化方案：合理利用cache-control、Expires、Last-modified、etag设置有效期- SSR方案：构建通用模板、服务端渲染 将数据和DOM一起返回

参考资料

参考教程：Web前端性能优化