前端性能优化全面指南

news2024/11/26 12:42:36
  • 前端性能优化是提升用户体验的关键,页面加载速度、响应时间和交互流畅度直接影响用户的留存率和满意度。以下是常用的前端性能优化方法,从网络层、资源加载、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 当页面处于未激活的状态下,屏幕刷新任务会被系统暂停

长列表虚拟滚动

  • 首页中不乏有需要渲染长列表的场景,当渲染条数过多时,所需要的渲染时间会很长,滚动时还会造成页面卡顿,整体体验非常不好
  • 虚拟滚动——指的是只渲染可视区域的列表项,非可见区域的不渲染,在滚动时动态更新可视区域,该方案在优化大量数据渲染时效果是很明显的

相关链接

演示地址
获取更多
源码地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2201955.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

markdown里粘贴图片的同时保存路径 在vscode里实现

下载扩展Markdown Image 设置保存路径 参考链接 https://blog.cxplay.org/works/vscode-to-markdown-editor/#markdown-image

HDLBits中文版,标准参考答案 | 3.2.5 Finite State Machines | 有限状态机(2)

关注 望森FPGA 查看更多FPGA资讯 这是望森的第 17 期分享 作者 | 望森 来源 | 望森FPGA 目录 1 Lemmings 1 2 Lemmings 2 3 Lemmings 3 4 Lemmings 4 5 One-hot FSM | 独热 FSM 6 PS/2 packet parser | PS/2 数据包解析器 7 PS/2 packet parser anddatapath | PS/2 数…

55 WebSocket

55 WebSocket 参考资料 WebSocket SpringBoot使用WebSocket SpringBoot 集成WebSocket详解 前言 WebSocket是HTML5下一种新的协议&#xff08;websocket协议本质上是一个基于tcp的协议&#xff09;它实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和…

AI大模型微调产品经理面试必备全攻略,非常详细收藏我这一篇就够了

前言 这两天跟很多做程序员的朋友聊天&#xff0c;怎么看全网火爆的大模型。让我挺意外的是&#xff0c;大家的反馈普遍都很焦虑 。 在AI大模型微调领域的产品经理面试中&#xff0c;总会遇到一系列与技术细节、项目经验、市场趋势以及职业规划相关的问题。以下是一些建议的面…

RabbitMQ中如何解决消息堆积问题,如何保证消息有序性

RabbitMQ中如何解决消息堆积问题 如何保证消息有序性 只需要让一个消息队列只对应一个消费者即可

cdr激活码序列号coredraw2024安装包破解版coreldraw2024永久序列号最新

&#x1f31f;设计界的新宠儿来啦&#xff01;CorelDRAW 2024震撼登场&#x1f389; ### &#x1f308; 开篇狂想曲&#xff1a;设计师们的“瑞士军刀”升级记&#xff01;&#x1f3a8; 嘿&#xff0c;亲爱的创意达人们&#x1f44b;&#xff01;今天&#xff0c;就让我们共同…

6.将扩散模型与其他生成模型的关联(1)

在本章中&#xff0c;我们首先介绍其他5种重要的生成模型&#xff0c;包括变分自编码器抗网络、归一化流、自回归模型和基于能量的模型&#xff0c;分析它们的优点和局限性&#xff0c;并说明这些生成模型是如何通过纳入扩散模型而得到促进的。1 .变分自编码器与扩散模型 …

Java | Leetcode Java题解之第455题分发饼干

题目&#xff1a; 题解&#xff1a; class Solution {public int findContentChildren(int[] g, int[] s) {Arrays.sort(g);Arrays.sort(s);int m g.length, n s.length;int count 0;for (int i 0, j 0; i < m && j < n; i, j) {while (j < n &&…

鸿蒙开发之ArkUI 界面篇 二十五 点赞综合案例

要实现如下图效果&#xff0c;红框处是点赞数&#xff0c;点击会变色和数字增加1&#xff1a; 我们首先分析布局结构&#xff0c;整体式垂直方向的布局&#xff0c;外层容器自然是Colum&#xff0c;上层是图片组件Image&#xff0c;接下来是Text组件&#xff0c;接下来是Row组件…

Unity实战案例全解析 类宝可梦回合制的初级案例 源码分析(加了注释和流程图)

这是一个老教程了&#xff0c;但是对于没有写过回合制的初级程序同学来讲是比较适合的&#xff0c;也可以直接看源码&#xff0c;半小时内可以解决战斗 当然&#xff0c;我也没写过回合制系统所以就到处找&#xff0c;思路明白了就能自己修改了 视频教程 - 油管链接 Turn-Bas…

ComfyUI | 5分钟部署最新Flux大模型

Midjourney 和 Stable Diffusion 都是目前流行的 AI 图像生成工具&#xff0c;它们能够根据文本描述生成高质量的图像。都是基于深度学习技术的文本到图像生成模型&#xff0c;但它们各自基于不同的大模型。 但最近推出了一款比前两者更强大&#xff0c;生成图像更加逼真&…

UE4 材质学习笔记04(着色器性能优化)

一.着色器性能优化 1.衡量着色器的性能 衡量着色器性能的主要方法有三个 第一个&#xff1a;可以使用场景的视图模式的优化视图模式的着色器复杂度 下面的滑条代表了着色器指令的复杂度 如果场景大部分是绿色的&#xff0c;说明着色器耗能低&#xff0c;反之白色则是很糟糕…

VS Code安装以及配置

安装 1. 下载安装 VScode官网 注意&#xff0c;这一步最好全部打勾 2. 设置默认terminal为cmd 3. 修改Run Code的配置 参考&#xff1a; https://blog.csdn.net/weixin_46474921/article/details/132841711

2024年诺贝尔物理学奖 机器学习与神经网络领域前景面面观 如何抉择

近日&#xff0c;2024年诺贝尔物理学奖颁发给了机器学习与神经网络领域的研究者&#xff0c;这是历史上首次出现这样的情况。这项奖项原本只授予对自然现象和物质的物理学研究作出重大贡献的科学家&#xff0c;如今却将全球范围内对机器学习和神经网络的研究和开发作为了一种能…

【element-tiptap】如何增加一个扩展项,为文字渲染颜色?

源码地址&#xff1a; https://github.com/Leecason/element-tiptap 可以看到&#xff0c;当前这个页面的文字&#xff0c;都是黑色的&#xff08;除了链接&#xff09; 酱紫有些单调&#xff0c;我喜欢五颜六色的。那么这篇文章就来看下菜单项里面如何增加一个颜色的扩展&…

Anaconda保姆安装教程

步骤1&#xff1a;下载Anaconda安装包 访问官网&#xff1a; 进入Anaconda官网下载页面&#xff0c;官网会根据电脑的操作系统自动选择适合的操作系统安装程序。 尝试进入清华大学开源软件镜像站&#xff0c;选择想要的版本进行下载&#xff0c;通常下载速度较快。 本文以从…

OpenAI重磅发布交互界面canvas,让ChatGPT成为写作和编程利器

OpenAI 宣布推出类似 Anthropic 的 Artifacts 的应用 canvas&#xff0c;并称「这是一种使用 ChatGPT 写作和编程的新方式」。 在 Claude 中试过 Artifacts 的朋友都知道&#xff0c;这能极大提升 LLM 输出结果的表现力&#xff0c;其支持输出文本文件、代码、网页、SVG 等等。…

Windows11 24H2 64位专业精简版:告别卡顿,流畅运行!

今日&#xff0c;系统之家小编给您分享2024年最新发布的Windows11 24H2精简版系统下载&#xff0c;该版本系统采用微软官方Windows11 24H2 26100.2033 专业版离线制作&#xff0c;安全无毒&#xff0c;不符合硬件要求的电脑也能升级。本次更新修复了系统蓝屏、绿屏的安全问题&a…

【赵渝强老师】K8s中的有状态控制器StatefulSet

在K8s中&#xff0c;StatefulSets将Pod部署成有状态的应用程序。通过使用StatefulSets控制器&#xff0c;可以为Pod提供持久存储和持久的唯一性标识符。StatefulSets控制器与Deployment控制器不同的是&#xff0c;StatefulSets控制器为管理的Pod维护了一个有粘性的标识符。无论…

数据科学初学者都应该知道的 15 个基本统计概念

一、介绍 数据科学的核心是统计学&#xff0c;它已经存在了几个世纪&#xff0c;但在当今的数字时代仍然至关重要。为什么&#xff1f;因为基本的统计概念是数据分析的支柱&#xff0c;使我们能够理解每天生成的大量数据。这就像与数据对话&#xff0c;统计学可以帮助我们提出正…