前端--性能优化【上篇】--网络优化与页面渲染优化
一、网络优化
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)来实现。它允许开发人员将任务分解为小块,并在空闲时间执行,以避免主线程被占用。
时间切片常用于:
- 大规模数据的渲染
- 复杂的计算或数据处理
- 异步请求的处理
- 动画和交互的流畅性维护
可以解决以下四种问题:
- 降低主线程压力:长时间运行的任务,如大型计算或复杂的数据处理,会占用主线程,导致页面失去响应性。
- 提高用户体验:通过将任务拆分成小块,时间切片可以确保用户界面在执行任务的同时保持流畅,不会出现卡顿或阻塞。
- 优化任务并发:时间切片可以更好地管理并发任务,确保任务不会相互干扰。
- 降低电池消耗:通过将任务分散到多个时间片段,时间切片可以减少CPU的使用,延长移动设备的电池寿命。
2、虚拟列表
虚拟列表通常运行在前端的UI层,主要用于提高前端渲染性能。虚拟滚动技术只渲染可见区域内的数据,而不是全部数据,从而提高性能。这可以通过使用虚拟滚动库
(如react-window、vue-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安装及错误解决 本文根据一篇知乎文章链接在此进行配置,记录在配置过程中遇到的一些问题,原文作者的教程很详细,在此对原作者表示感谢~ 直接进行知乎原文的第2.2 有效安装过程(避坑) 2.注意上…...
设计模式截图记录
设计模式截图记录...
代碼隨想錄算法訓練營|第三十九天|738.单调递增的数字、968.监控二叉树、第八章 贪心算法總結。刷题心得(c++)
目录 讀題 738.单调递增的数字 自己看到题目的第一想法 看完代码随想录之后的想法 968.监控二叉树 自己看到题目的第一想法 看完代码随想录之后的想法 738.单调递增的数字 - 實作 思路 Code 968.监控二叉树 - 實作 思路 Code 贪心算法 總結 贪心理论基础 貪心…...
前言:自动化框架的设计模式
1、UI自动化框架的设计模式 自动化测试框架有很多种,常见的自动化框架分类如下: 在使用上面的自动化框架时,通常会结合使用分层思想,也就是一些自动化框架设计模式,今天重点分享一下UI自动化框架设计使用比较多的一种…...
Web架构安全分析/http/URL/Cookie攻击
Web 架构安全分析 Web 工作机制及基本概念 传统 Web 架构 LAMP 网页 概念 网页就是我们可以通过浏览器上网看到的精美页面,一般都是经过浏览器渲染过的 .html 页面,html 语言在浏览器中渲染。其中包含了CSS、JavaScript 等前端技术。通过浏览器访问…...
.git 目录中有什么?
好吧,我想你们中的大多数人每天都或多或少地使用 git,但是您是否研究过 git 创建的 .git 文件夹中的内容?本文[1]我们将一起探索一下,了解里面到底发生了什么。 ❝ 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全景打造沉浸式家装体验
当下,用户对生活品质要求日益提升,越来越多的用户对多功能家装用品需求较大,由此造就了VR全景家装开始盛行。VR全景家装打破传统二维空间模式,通过视觉、交互等功能让用户更加真实、直观的体验和感受家居布置的效果。 一般来说&am…...
Ubuntu服务器 Clash Dashboard
正文发不出来 链接:【Linux】解决Ubuntu服务器版本无法使用Clash Dashboard的问题 这个图展示了RNA-Seq实验数据生成的流程。下面是该流程的逐步解释: mRNA或总RNA提取:首先,从细胞或组织样本中提取mRNA或总RNA。mRNA是经过剪切…...
创建数据库表的命令
创建数据库表的通用语法: CREATE TABLE table_name (column1 datatype constraint,column2 datatype constraint,...columnN datatype constraint ); 其中,table_name 为要创建的表名,column1 到 columnN 为表的列名,datatype …...
ubuntu18.04 LTS卸载qtcreator-10.0.2
之前通过命令,通过.run文件,安装了Qt Creator 默认安装路径是/opt/ 卸载 在安装路径下,可以看到QtCreatorUninstaller文件 命令行运行该执行文件,会弹出卸载窗口,记得勾选下面的“仅卸载”...
通过字符设备驱动并编写应用程序控制三盏灯亮灭
现象 键盘按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 下使用初步
前言 在微服务中,随着服务越来越多,对调用链的分析越来越复杂。如何能够分析调用链,定位微服务中的调用瓶颈,并对其进行解决。 本篇博客介绍springCloud中用到的链路追踪的组件,Spring Cloud Sleuth和Zipkin…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
基于Flask实现的医疗保险欺诈识别监测模型
基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施,由雇主和个人按一定比例缴纳保险费,建立社会医疗保险基金,支付雇员医疗费用的一种医疗保险制度, 它是促进社会文明和进步的…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
