深入理解前端性能优化:从网络到渲染

1. 网络优化

减少HTTP请求
  • 合并资源:通过合并CSS和JavaScript文件减少请求次数。
  • 资源内联:对于小的CSS和JavaScript,直接内联到HTML中。
使用HTTP/2
  • HTTP/2支持多路复用,减少请求阻塞,提高加载速度。
开启GZIP压缩

服务器端配置,压缩文本资源,减小传输体积。

缓存策略

利用HTTP缓存头,如Cache-Control,设置合适的缓存策略。

2. 资源加载优化

懒加载

只在资源即将进入视口时才加载,适用于图片和视频等。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy" />
<script>
document.addEventListener('DOMContentLoaded', function() {let lazyImages = document.querySelectorAll('.lazy');lazyImages.forEach(img => {img.src = img.dataset.src;});
});
</script>
预加载与预读取

使用<link rel="preload">提前加载关键资源。
使用<link rel="prefetch">预读取非关键资源。

3. 渲染优化

Critical CSS

将首屏渲染所需的CSS内联在HTML头部,避免阻塞渲染。

减少CSS和JavaScript的阻塞
  • 使用<link rel="stylesheet" media="print" onload="this.media='all'">延迟非关键CSS加载。
  • 使用asyncdefer属性异步加载JavaScript。
<script async src="script.js"></script>
避免强制同步布局
  • 使用requestAnimationFrame或CSS动画代替复杂的JavaScript动画,减少重排重绘。
图片优化
  • 选择合适的图片格式(如WebP),并使用正确的尺寸和分辨率。

4. Service Worker与离线存储

  • 使用Service Worker实现离线缓存和资源更新。
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js').then(registration => console.log('SW registered:', registration)).catch(error => console.error('SW registration failed:', error));});
}

5. 性能监控与分析

  • 使用Lighthouse、WebPageTest或Chrome DevTools等工具进行性能测试和分析。

6. 代码拆分与懒加载

动态导入

利用动态导入(import()表达式)按需加载代码块,减少初始加载时间。

button.onclick = async () => {const module = await import('./lazyModule.js');module.default();
};
路由级别代码拆分

在SPA应用中,利用框架提供的路由级别代码拆分功能,如Vue Router的懒加载。

// Vue Router 示例
const Foo = () => import('./Foo.vue');const routes = [{ path: '/foo', component: Foo },
];

7. 图像优化

响应式图片

利用<picture>元素或srcset属性,根据设备像素比或视口大小提供不同分辨率的图片。

<picture><source srcset="img/low-res.jpg" media="(max-width: 600px)"><source srcset="img/high-res.jpg" media="(min-width: 600px)"><img src="img/fallback.jpg" alt="Example">
</picture>

8. Web Workers

将耗时的计算任务移到Web Worker中,避免阻塞主线程,保持UI响应。

// main.js
const worker = new Worker('worker.js');
worker.postMessage([1024, 512]);// worker.js
self.onmessage = function(e) {const result = e.data[0] * e.data[1];self.postMessage(result);
};

9. 避免内存泄漏

定期清理不再使用的定时器、事件监听器和大型数据结构,防止内存泄漏。

window.addEventListener('resize', handleResize);
// 清理
window.removeEventListener('resize', handleResize);// 对于setTimeout或setInterval
let timerId = setInterval(() => { /*...*/ }, 1000);
clearInterval(timerId);

10. Web Vitals监控

关注LCP(最大内容绘制)、FID(首次输入延迟)和CLS(累计布局偏移)等Web Vitals指标,它们是衡量用户体验的关键指标。

// 使用Web Vitals库进行监控
import { getCLS, getFID, getLCP } from 'web-vitals';getCLS(console.log);
getFID(console.log);
getLCP(console.log);

2024年礼包2500G计算机入门到高级架构师开发资料超级大礼包免费送!

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

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

相关文章

Android获取系统常用阈值

问题 我自定义了一个控件&#xff0c;重写了其默认的OnTouch事件 这样系统自带的OnClickListener和OnLongClickListener就会失效 现在我想手动在OnTouch里实现Click和LongClick功能 这个很容易解决&#xff0c;通过touch时长就很容易实现 但是我想让LongClick触发的Time和系统…

LLVM中期报告

1&#xff0e;主要开展的工作 研究对LLVM IR层面进行代码混淆&#xff0c;分析IR的指令 &#xff0c;并且实现混淆 从LLVM代码混淆的角度出发&#xff0c;函数之间的正常调用构成了待混淆程序的原始控制流&#xff0c;不同的基础代码块构成了一个个的函数&#xff0c;每个基础…

Nginx-01-聊一聊 nginx

nginx 系列 Nginx-01-聊一聊 nginx Nginx-01-Nginx 是什么 Nginx-02-为什么使用 Nginx Nginx-02-Nginx Ubuntu 安装 windows10 WSL ubuntu 安装 nginx 实战笔记 Nginx-02-基本使用 Nginx-03-Nginx 项目架构 Nginx-04-Docker Nginx Nginx-05-nginx 反向代理是什么&…

自定义类型——结构体、枚举和联合

自定义类型——结构体、枚举和联合 结构体结构体的声明匿名结构体结构体的自引用结构体的初始化结构体的内存对齐修改默认对齐数结构体传参 位段枚举联合 结构体 结构是一些值的集合&#xff0c;这些值被称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 数组是…

【随笔】Git 高级篇 -- 远程跟踪分支 git checkout -b | branch -u(三十五)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

go语言函数/方法入参对象方法 接口interface约束示例

go语言使用泛型接口约束可以约束指定的对象参数 必须具备指定的方法 或者必须实现了指定的接口 1个或者多个接口&#xff08;通过接口继承实现&#xff09;&#xff0c; 这个在面向api的接口编程中应用非常广泛&#xff0c;也非常实用&#xff0c;废话不多说&#xff0c;直接上…

向银行家应用程序添加日期

● 首先我们将下面图片上的时间更换成现在的时间 const now new Date(); const day now.getDate(); const month now.getMonth() 1; const year now.getFullYear(); const hour now.getHours(); const min now.getMinutes();labelDate.textContent ${day}/${month}/$…

parallelsdesktop19密钥激活 PD19虚拟机完整图文安装教程

Parallels Desktop 19 &#xff08;简称 PD 19)是最新发布的 macOS 平台的 windows 虚拟机&#xff0c;本文是使用 Parallels Desktop 19 虚拟机安装 Windows 的详细图文破解安装教程。 一下载安装 Parallels Desktop 软件下载完成后打开&#xff0c;双击打开 安装.dmg Para…

3. 深度学习笔记--优化函数

深度学习——优化器算法Optimizer详解&#xff08;BGD、SGD、MBGD、Momentum、Adagrad、Adadelta、RMSprop、Adam、Nadam、AdaMax、AdamW &#xff09; 0. GD &#xff08;梯度下降&#xff09; Gradient Descent&#xff08;梯度下降&#xff09;是一种迭代优化算法&#xf…

【C】每日一题 53 最大子数组和

给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 这是一个经典的动态规划问题&#xff0c;可以通过遍历数组并利用动态规划的思想来解决。…

汇昌联信电商:拼多多新手怎么做店铺的免费流量会慢慢起来?

在拼多多上开店&#xff0c;新手们往往面临着如何吸引免费流量的挑战。毕竟&#xff0c;流量是店铺生存和发展的血脉&#xff0c;没有流量&#xff0c;就没有销量&#xff0c;店铺也就失去了生命力。那么&#xff0c;作为拼多多新手&#xff0c;如何做才能让店铺的免费流量慢慢…

初识C语言——第十九天

for循环 1.简单概述 2.执行流程 3.建议事项&#xff1a;

RuoYi-Vue-Plus (SpringCache、CacheManager、@Cacheable、缓存雪崩、击穿、穿透)

一、概述 1、SpringCache是Spring提供的一个缓存框架&#xff0c;在Spring3.1版本开始支持将缓存添加到现有的spring应用程序中&#xff0c;在4.1开始&#xff0c;缓存已支持JSR-107注释和更多自定义的选项。 2、SpringCache利用了AOP&#xff0c;实现了基于注解的缓存功能&…

Android中使用USB进行通信的4种方式

在Android设备中&#xff0c;通过USB与外部设备通信是一种常见的需求&#xff0c;尤其是在嵌入式系统、IoT设备、以及各种专业硬件的交互中。以下是Android设备通过USB进行通信的四种主要方法&#xff1a; 1. 控制传输&#xff08;Control Transfer&#xff09; 控制传输是所…

基于Java的qq截图工具参考论文(论文 + 源码)

【免费】基于Java的qq截图工具.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89304179 基于Java的qq截图工具 摘要 当今时代是飞速发展的信息时代&#xff0c;人们在对信息的处理中对图像的处理量与日俱增&#xff0c;这一点在文档人员上显得非常突出。 本软…

Linux下Telemac-Mascaret源码编译安装及使用

目录 软件介绍 基本依赖 其它可选依赖 一、源码下载 二、解压缩 三、编译安装 3.1 修改环境变量设置文件 3.2 修改配置文件 3.3 编译安装 四、算例运行 软件介绍 TELEMAC-MASCARET是法国电力集团(EDF)的法国国立水利与环境实验室开发的一款研究水动力学和水文学领域的…

宿舍管理系统代码详解(登录界面)

之前已经对这个管理系统进行了大体上的结构的展现&#xff0c;后面的篇章将对其中的前端代码进行详细的介绍与展示。 目录 一、数据库建表 二、登录界面前端代码 1.样式展示 2.代码详解 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部…

DC/DC 隔离定电,压输入电源(0.1-3W)介绍

定电压输入非稳压输出 SMD(0.25-2W)系列&#xff0c;典型性能:直流输入、直流输出隔离型模块电源SMD 表贴型产品&#xff0c;完全实现采用全自动贴片机来组装和满足回流焊工艺&#xff0c;大大提高产能和人工费用。此产品小&#xff0c;效率高&#xff0c;低输出纹波及提供 300…

Flutter 中的 MaterialButton 小部件:全面指南

Flutter 中的 MaterialButton 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;MaterialButton 是 Material Design 风格中的一种按钮&#xff0c;它提供了一种简单而直观的方式来创建符合 Material Design 指南的按钮。MaterialButton 支持多种形状、颜色和大小&#x…

SSH 免密登录,设置好仍然需要密码登录解决方法

说明&#xff1a; ssh秘钥登录设置好了&#xff0c;但是登录的时候依然需要提供密码 查看系统安全日志&#xff0c;定位问题 sudo cat /var/log/auth.log或者 sudo cat /var/log/secure找到下面的信息 Authentication refused: bad ownership or modes...&#xff08;网上的…