Web前端性能优化合集

简介

自互联网兴起以来，从最初的静态网页到如今的动态交互、单页应用（SPA）、PWA（Progressive Web Apps）等，互联网技术正在飞速发展，随着用户体验成为核心竞争力之一，前端性能直接影响网站或应用的加载速度、交互流畅度，进而影响用户留存率和业务转化率。

高清图片、视频内容的普及增加了页面负载，要求更高效的资源加载策略，不同屏幕尺寸和性能的设备访问同一网页，需优化以适应各种环境，实时通信、大数据处理等技术的应用，要求前端能更快速响应用户操作。

由此，前端性能优化极其重要，以下内容为学习一前端性能优化课程所做的xmind笔记。

干货

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

前端性能优化
	- 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前端性能优化