Web前端性能优化合集

简介

自互联网兴起以来,从最初的静态网页到如今的动态交互、单页应用(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前端性能优化

相关推荐
GIS程序媛—椰子18 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00124 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端27 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100931 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439141 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt