- 前端性能优化是提升用户体验的关键,页面加载速度、响应时间和交互流畅度直接影响用户的留存率和满意度。以下是常用的前端性能优化方法,从网络层、资源加载、JavaScript 执行、渲染性能等方面进行全方位优化。
减少 HTTP 请求
- 合并文件:将多个 CSS 和 JS 文件合并,减少请求次数。
- 使用图像精灵:将多个小图标合并到一张图片,通过 CSS 的 background-position 定位,减少图片请求数量。
文件压缩与打包
- 压缩代码:使用工具(如 Webpack、Gulp、UglifyJS 等)去除代码中的空格、注释等无关内容。
- 图片压缩:通过工具(如 TinyPNG、ImageOptim)优化图片文件大小。
启用浏览器缓存
- 通过设置 HTTP 头中的 Cache-Control 或 Expires,允许浏览器缓存静态资源,减少重复加载。
异步加载 JS 和 CSS
- JS 异步加载:使用 async 或 defer 属性异步加载脚本,避免阻塞页面渲染。
- CSS 资源加载优化:将关键 CSS 写入 HTML 的 ,非关键样式表异步加载。
减少 DOM 操作
- 频繁的 DOM 操作开销较大,尽量批量修改 DOM 或使用虚拟 DOM(如 React 中的 Virtual DOM)进行优化
使用现代浏览器特性
- 利用浏览器的预加载、预解析功能,如 prefetch、preload,提前加载后续可能需要的资源。
提升 CSS 选择器性能
- 尽量使用简单、高效的 CSS 选择器,避免使用层级过深的选择器。
减少重绘和回流
- 尽量减少对 DOM 的频繁修改,尤其是影响布局的修改,避免引发页面重绘(Repaint)和回流(Reflow)。
使用 HTTP/2
- 相较于 HTTP/1.1,HTTP/2 可以实现多路复用,提升传输效率。
服务端渲染 (SSR) 和静态生成 (SSG)
- 对于复杂的 JavaScript 框架(如 React、Vue 等),前端渲染可能导致首屏白屏时间过长。
可以考虑: - SSR (Server-Side Rendering):在服务器端预先渲染页面,用户访问时直接看到 HTML 内容,减少客户端的渲染负担。Next.js 和 Nuxt.js 是常用的支持 SSR 的框架。
- SSG (Static Site Generation):生成静态 HTML 文件用于服务,适合于内容不经常变动的网站,如博客等。
减少 JavaScript 运行时开销
过多的 JavaScript 会导致页面运行时性能下降,尤其是在低端设备上。可以通过以下方式优化:
- 减少第三方库的使用:许多第三方库(如 lodash)可能只用到其中一小部分功能,但引入整个库会造成代码冗余。可以通过 Tree Shaking 或按需引入解决:
import { debounce } from 'lodash'; // 仅引入特定功能
- 惰性初始化:将一些不必要的逻辑推迟到实际需要时再初始化,避免页面加载时的开销。
- 避免长任务:长时间运行的 JavaScript 会阻塞主线程,影响页面交互。可以使用 requestIdleCallback 或将任务分批次执行。
window.requestIdleCallback(() => {
// 在浏览器空闲时执行任务
});
优化图片和视频
- 响应式图片:使用 srcset 和 sizes 标签为不同设备提供不同尺寸的图片,确保移动设备不会加载过大的图片。
- 延迟加载非关键图片和视频:使用 loading=“lazy” 属性实现懒加载,或者结合 Intersection Observer API 延迟加载
<img src="image.jpg" loading="lazy" />
图片转 base64 格式
- 将小图片转换为 base64 编码字符串,并写入 HTML 或者 CSS 中,减少 http 请求
- 转 base64 格式的优缺点:
1)它处理的往往是非常小的图片,因为 Base64 编码后,图片大小会膨胀为原文件的 4/3,如果对大图也使用 Base64 编码,后者的体积会明显增加,即便减少了 http 请求,也无法弥补这庞大的体积带来的性能开销,得不偿失
2)在传输非常小的图片的时候,Base64 带来的文件体积膨胀、以及浏览器解析 Base64 的时间开销,与它节省掉的 http 请求开销相比,可以忽略不计,这时候才能真正体现出它在性能方面的优势
使用字体图标
- Tree shaking 的作用:消除无用的 JS 代码,减少代码体积
- tree-shaking 原理:
1)依赖于 ES6 的模块特性,ES6 模块依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,这就是 tree-shaking 的基础
2)静态分析就是不需要执行代码,就可以从字面量上对代码进行分析。ES6 之前的模块化,比如 CommonJS 是动态加载,只有执行后才知道引用的什么模块,就不能通过静态分析去做优化,正是基于这个基础上,才使得 tree-shaking 成为可能
合理使用 Tree shaking
内容传递网络 (CDN)
- CDN:利用全球分布的边缘服务器缩短请求路径,提升资源加载速度。CDN 还可以自动进行图片压缩和优化,提供不同设备适配的资源。
性能监控与分析工具
要持续优化前端性能,必须使用监控工具分析性能瓶颈:
- Lighthouse:Google 提供的开源工具,可以分析网页的性能、可访问性、SEO 等,并给出优化建议。
- Performance API:浏览器内置的性能 API,可以在代码中插入时间戳,记录任务执行时间:
performance.mark('startTask');
// 任务执行
performance.mark('endTask');
performance.measure('taskDuration', 'startTask', 'endTask');
- Webpack Bundle Analyzer:用于分析打包后文件的大小和组成,找到性能瓶颈,删除不必要的依赖。
预加载和预渲染 (Prefetching/Prerendering)
- Prefetch:提前加载用户可能访问的资源(如下一页所需的 JS、CSS、图片等),减少未来页面跳转时的加载时间。
<link rel="prefetch" href="next-page.html" />
- Prerender:提前在后台渲染用户可能访问的页面,当用户访问时能立即呈现内容。
<link rel="prerender" href="next-page.html">
路由懒加载
-
SPA 项目,一个路由对应一个页面,如果不做处理,项目打包后,会把所有页面打包成一个文件,当用户打开首页时,会一次性加载所有的资源,造成首页加载很慢,降低用户体验
加载前提的实现:ES6 的动态地加载模块——import() -
调用 import() 之处,被作为分离的模块起点,意思是,被请求的模块和它引用的所有子模块,会分离到一个单独的 chunk 中。
-
要实现懒加载,就得先将进行懒加载的子模块分离出来,打包成一个单独的文件 webpackChunkName 作用是 webpack 在打包的时候,对异步引入的库代码(lodash)进行代码分割时,设置代码块的名字。webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中
骨架屏优化白屏时长
- 使用骨架屏,可以缩短白屏时间,提升用户体验。国内大多数的主流网站都使用了骨架屏,特别是手机端的项目
- SPA 单页应用,无论 vue 还是 react,最初的 html 都是空白的,需要通过加载 JS 将内容挂载到根节点上,这套机制的副作用:会造成长时间的白屏
- 常见的骨架屏插件就是基于这种原理,在项目打包时将骨架屏的内容直接放到 html 文件的根节点中
requestAnimationFrame 制作动画
-
requestAnimationFrame 是浏览器专门为动画提供的 API,它的刷新频率与显示器的频率保持一致,使用该 api 可以解决用 setTimeout/setInterval 制作动画卡顿的情况
-
setTimeout/setInterval、requestAnimationFrame 三者的区别:
-
1)引擎层面
setTimeout/setInterval 属于 JS 引擎,requestAnimationFrame 属于 GUI 引擎
JS 引擎与 GUI 引擎是互斥的,也就是说 GUI 引擎在渲染时会阻塞 JS 引擎的计算 -
2)时间是否准确
requestAnimationFrame 刷新频率是固定且准确的,但 setTimeout/setInterval 是宏任务,根据事件轮询机制,其他任务会阻塞或延迟 js 任务的执行,会出现定时器不准的情况 -
3)性能层面
当页面被隐藏或最小化时,setTimeout/setInterval 定时器仍会在后台执行动画任务,而使用 requestAnimationFrame 当页面处于未激活的状态下,屏幕刷新任务会被系统暂停
长列表虚拟滚动
- 首页中不乏有需要渲染长列表的场景,当渲染条数过多时,所需要的渲染时间会很长,滚动时还会造成页面卡顿,整体体验非常不好
- 虚拟滚动——指的是只渲染可视区域的列表项,非可见区域的不渲染,在滚动时动态更新可视区域,该方案在优化大量数据渲染时效果是很明显的
相关链接
演示地址
获取更多
源码地址