当前位置: 首页 > news >正文

前端--性能优化【上篇】--网络优化与页面渲染优化

一、网络优化

1、DNS预解析

link标签的rel属性设置dns-prefetch,提前获取域名对应的IP地址

2、CDN(网络分发系统)

用户与服务器的物理距离对响应时间也有影响。

内容分发网络(CDN)是一组分散在不同地理位置的 web 服务器,用来给用户更高效地发送内容。典型地,选择用来发送内容的服务器是基于网络距离的衡量标准的。

3、html离线缓存

优点:提高页面加载速度和用户体验
在启用HTML 离线缓存后,浏览器会始终从缓存中读取文件,因此每次更新页面时,需要更新描述文件中的版本号以确保浏览器能够获取新的文件内容

4、强协商缓存

浏览器内部保存有url的相关信息,在网络层面上会减轻服务器的压力,快速得到数据,解析到IP地址

5、多域名

浏览器内部都有票对同域名限制并发下载数

6、避免图片src为空

假如src为空的话,浏览器仍会发起一次HTTP请求,白白加载一次资源,导致加载时间变长,影响首屏加载时间

二、页面渲染优化

1、时间切片

用于页面渲染和任务处理的技术,旨在提高应用程序的响应性和用户体验。它将长时间运行的任务分解成小的时间片段,这些任务在多个帧之间分散执行,以确保主线程不会长时间被阻塞,从而保持页面的流畅性

使用浏览器的requestIdleCallback API或第三方库(如React的react-suspense)来实现。它允许开发人员将任务分解为小块,并在空闲时间执行,以避免主线程被占用。

时间切片常用于:

  • 大规模数据的渲染
  • 复杂的计算或数据处理
  • 异步请求的处理
  • 动画和交互的流畅性维护

可以解决以下四种问题:

  1. 降低主线程压力:长时间运行的任务,如大型计算或复杂的数据处理,会占用主线程,导致页面失去响应性。
  2. 提高用户体验:通过将任务拆分成小块,时间切片可以确保用户界面在执行任务的同时保持流畅,不会出现卡顿或阻塞。
  3. 优化任务并发:时间切片可以更好地管理并发任务,确保任务不会相互干扰。
  4. 降低电池消耗:通过将任务分散到多个时间片段,时间切片可以减少CPU的使用,延长移动设备的电池寿命。

2、虚拟列表

虚拟列表通常运行在前端的UI层,主要用于提高前端渲染性能。虚拟滚动技术只渲染可见区域内的数据,而不是全部数据,从而提高性能。这可以通过使用虚拟滚动库

(如react-windowvue-virtual-scroller)来实现

些库会在前端应用的UI层处理数据的显示,通过动态渲染DOM元素来提高性能。

3、分页+异步

分页异步加载通常涉及到前端应用与后端服务器之间的通信。在这种情况下,前端应用通常会发出分页请求,然后后端服务器根据请求来提供相应的数据页。这种分页请求通常是异步的,通常使用AJAX、Fetch或类似的机制。分页异步加载会涉及到前端应用的业务逻辑层,以便发送请求和处理响应。前端应用通常会将从服务器获取的数据渲染到虚拟列表或其他UI组件中。

在请求头中添加page字段,来向后端获取具体需要的页码内容

虚拟列表通常在前端的UI层运行,用于提高前端渲染性能,而分页异步加载涉及前端应用的业务逻辑层和与后端服务器的通信,用于获取分页数据。两者可以结合使用,以在前端显示大量数据并实现分页加载。

相关文章:

前端--性能优化【上篇】--网络优化与页面渲染优化

一、网络优化 1、DNS预解析 link标签的rel属性设置dns-prefetch,提前获取域名对应的IP地址 2、CDN(网络分发系统) 用户与服务器的物理距离对响应时间也有影响。 内容分发网络(CDN)是一组分散在不同地理位置的 web…...

git 删除分支

目录 1,查看分支2,删除本地分支3,删除远程分支 1,查看分支 # 查看本地分支 git branch# 查看远程分支 git branch -r# 查看所有分支 git branch -a2,删除本地分支 # -d 是 --delete 的简写,会在删除前检查…...

SQLite Write-ahead Logging

1. 概述2. WAL如何工作 2.1 检验指示(Checkpointing)2.2 并发性(Concurrency)2.3 性能考虑(Performance Considerations)3. 激活并配置WAL模式 3.1 自动checkpoint3.2 应用开始的checkpoint3.3 WAL模式的持久性4. 只读数据库5. 避免过大的WAL文件6. WAL索引的共享内存应用7. 不…...

手机有什么爬虫App工具?

随着智能手机的普及和应用的繁盛,越来越多的人开始对手机App进行数据爬取和分析。那么,在进行手机App爬虫的过程中,我们可以借助哪些工具呢?让我们一起来了解一下吧! 1、Fiddler Fiddler是一款功能强大的网络调试工具…...

290_C++_截取的一部分FTP视频上传代码,任务信息中读取视频帧数据并将其提供给 libcurl 用于上传。

1、这些结构体和枚举类型的设计是为了在上传过程中有效地存储和传递不同类型的任务信息,以便在上传操作中使用这些信息来管理和跟踪不同类型的上传任务。它们提供了不同类型上传任务所需的特定信息和状态变量 enum UploadTaskType {UTT_Common,UTT_Video };struct UploadInfo…...

读《Gaitset: Regarding gait as a set for cross-view gait recognition》

2019在AAAI(还有一版叫GaitSet: Regarding Gait as a Set for Cross-View Gait Recognition,大体上一样) 摘要 现有的步态识别方法要么利用步态模板,难以保存时间信息,要么利用保持不必要的顺序约束的步态序列&#x…...

驱动实现LED点灯

demo.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include "head.h" //定义三个指针指向映射后的虚拟内存 unsigned int *vir_moder; unsigned …...

【Reinforcement Learning】Ubuntu中mujoco210 mujoco_py D4RL安装及错误解决

Ubuntu中mujoco210 mujoco_py D4RL安装及错误解决 本文根据一篇知乎文章链接在此进行配置&#xff0c;记录在配置过程中遇到的一些问题&#xff0c;原文作者的教程很详细&#xff0c;在此对原作者表示感谢&#xff5e; 直接进行知乎原文的第2.2 有效安装过程(避坑) 2.注意上…...

设计模式截图记录

设计模式截图记录...

代碼隨想錄算法訓練營|第三十九天|738.单调递增的数字、968.监控二叉树、第八章 贪心算法總結。刷题心得(c++)

目录 讀題 738.单调递增的数字 自己看到题目的第一想法 看完代码随想录之后的想法 968.监控二叉树 自己看到题目的第一想法 看完代码随想录之后的想法 738.单调递增的数字 - 實作 思路 Code 968.监控二叉树 - 實作 思路 Code 贪心算法 總結 贪心理论基础 貪心…...

前言:自动化框架的设计模式

1、UI自动化框架的设计模式 自动化测试框架有很多种&#xff0c;常见的自动化框架分类如下&#xff1a; 在使用上面的自动化框架时&#xff0c;通常会结合使用分层思想&#xff0c;也就是一些自动化框架设计模式&#xff0c;今天重点分享一下UI自动化框架设计使用比较多的一种…...

Web架构安全分析/http/URL/Cookie攻击

Web 架构安全分析 Web 工作机制及基本概念 传统 Web 架构 LAMP 网页 概念 网页就是我们可以通过浏览器上网看到的精美页面&#xff0c;一般都是经过浏览器渲染过的 .html 页面&#xff0c;html 语言在浏览器中渲染。其中包含了CSS、JavaScript 等前端技术。通过浏览器访问…...

.git 目录中有什么?

好吧&#xff0c;我想你们中的大多数人每天都或多或少地使用 git&#xff0c;但是您是否研究过 git 创建的 .git 文件夹中的内容&#xff1f;本文[1]我们将一起探索一下&#xff0c;了解里面到底发生了什么。 ❝ git 在基本层面上只是一堆通过文件名相互链接的文本文件。 ❞ in…...

Debian11系统简单配置

debian11系统简单配置 网卡配置 修改/etc/network/interfaces address 192.168.0.188 gateway 192.168.0.1 netmask 255.255.255.0重启网卡systemctl restart networking.service systemctl restart networking 执行apt 报错 rootdebian:~# apt update 忽略:1 cdrom://[D…...

家装、家居两不误,VR全景打造沉浸式家装体验

当下&#xff0c;用户对生活品质要求日益提升&#xff0c;越来越多的用户对多功能家装用品需求较大&#xff0c;由此造就了VR全景家装开始盛行。VR全景家装打破传统二维空间模式&#xff0c;通过视觉、交互等功能让用户更加真实、直观的体验和感受家居布置的效果。 一般来说&am…...

Ubuntu服务器 Clash Dashboard

正文发不出来 链接&#xff1a;【Linux】解决Ubuntu服务器版本无法使用Clash Dashboard的问题 这个图展示了RNA-Seq实验数据生成的流程。下面是该流程的逐步解释&#xff1a; mRNA或总RNA提取&#xff1a;首先&#xff0c;从细胞或组织样本中提取mRNA或总RNA。mRNA是经过剪切…...

创建数据库表的命令

创建数据库表的通用语法&#xff1a; ​CREATE TABLE table_name (column1 datatype constraint,column2 datatype constraint,...columnN datatype constraint ); 其中&#xff0c;table_name 为要创建的表名&#xff0c;column1 到 columnN 为表的列名&#xff0c;datatype …...

ubuntu18.04 LTS卸载qtcreator-10.0.2

之前通过命令&#xff0c;通过.run文件&#xff0c;安装了Qt Creator 默认安装路径是/opt/ 卸载 在安装路径下&#xff0c;可以看到QtCreatorUninstaller文件 命令行运行该执行文件&#xff0c;会弹出卸载窗口&#xff0c;记得勾选下面的“仅卸载”...

通过字符设备驱动并编写应用程序控制三盏灯亮灭

现象 键盘按1三灯全亮 按0三灯全灭 头文件.h #ifndef __HEAD_H__ #define __HEAD_H__ #define PHY_LED1_MODER 0X50006000 #define PHY_LED1_ODR 0X50006014 #define PHY_RCC 0X50000A28#define PHY_LED2_MODER 0X50007000 #define PHY_LED2_ODR 0X50007014#defin…...

SpringCloud链路追踪——Spring Cloud Sleuth 和 Zipkin 介绍 Windows 下使用初步

前言 在微服务中&#xff0c;随着服务越来越多&#xff0c;对调用链的分析越来越复杂。如何能够分析调用链&#xff0c;定位微服务中的调用瓶颈&#xff0c;并对其进行解决。 本篇博客介绍springCloud中用到的链路追踪的组件&#xff0c;Spring Cloud Sleuth和Zipkin&#xf…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...