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

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端