Web项目图片视频加载缓慢/首屏加载白屏
Web项目图片视频加载缓慢/首屏加载白屏
文章目录
- Web项目图片视频加载缓慢/首屏加载白屏
- 一、原因
- 二、 解决方案
- 2.1、 图片和视频的优化
- 2.1.1、压缩图片或视频
- 2.1.2、 选择合适的图片或视频格式
- 2.1.3、 使用图片或视频 CDN 加速
- 2.1.4、Nginx中开启gzip
- 三、压缩工具推荐
一、原因
通常是由以下原因导致的:
- 图片或视频格式不当:如果图片或视频格式选择不当,比如选择了无损压缩格式,可能会导致文件大小过大,从而影响加载速度。
- 页面中同时加载了大量的图片和视频,导致请求次数过多,网络传输速度受限,从而影响页面加载速度。
- 页面中的图片和视频没有进行优化处理,比如没有进行压缩、没有使用 CDN 加速等。
- 页面的 HTML、CSS、JavaScript 代码没有进行优化,比如没有使用 webpack 进行打包、没有使用代码分割技术等,导致页面加载时间过长。
- 页面中的图片和视频没有使用懒加载技术,导致页面一次性加载过多的资源,从而导致页面加载速度变慢。
- 网络状况不佳,比如网络延迟、带宽受限等,都可能导致图片和视频加载缓慢。
- 服务器响应时间过长:如果服务器响应时间过长,会导致页面请求资源的时间变慢,从而影响页面加载速度。
- 使用了不稳定的第三方库:如果使用了不稳定的第三方库或者组件,可能会导致页面加载速度变慢。
- 浏览器缓存策略不当:如果浏览器缓存策略设置不当,可能会导致浏览器重复请求资源,从而影响页面加载速度。
- 网络安全策略较为严格:如果网络安全策略较为严格,可能会导致浏览器请求资源时遇到一些限制,从而影响页面加载速度。
二、 解决方案
图片和视频加载缓慢、导致首屏加载白屏的问题,通常可以从以下几个方面入手来解决:
1. 图片和视频的优化
2. 懒加载
3. 骨架屏
4. 代码优化
2.1、 图片和视频的优化
可以通过图片压缩、视频压缩等技术来减小文件大小,CDN 加速来加快资源加载速度,可以从以下几个方法入手:
1. 压缩图片或视频
2. 选择合适的图片或视频格式
3. 使用图片或视频 CDN 加速
4. 使用懒加载技术
2.1.1、压缩图片或视频
可以使用图片或视频压缩工具,将文件大小压缩至合适的大小。对于图片,可以使用在线图片压缩工具或者 Photoshop 等图片编辑软件进行压缩;对于视频,可以使用视频压缩软件,如 HandBrake 等进行压缩。
2.1.2、 选择合适的图片或视频格式
选择合适的图片或视频格式也可以减小文件大小。例如,对于图片,可以选择 JPEG 或者 WebP 格式,对于视频,可以选择 H.264 或者 H.265 格式。
2.1.3、 使用图片或视频 CDN 加速
可以使用图片或视频 CDN 加速,将图片或视频资源分布在全球各地的 CDN 节点上,从而加快资源的传输速度,提高页面加载速度。
2.1.4、Nginx中开启gzip
http {log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;client_max_body_size 200m;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 4096;include /etc/nginx/mime.types;default_type application/octet-stream;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;gzip_proxied any;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;
}
其中这一段为开启gzip,开启后对js,json,xml有一定的加速
gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_http_version 1.1;gzip_comp_level 2;gzip_types gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;gzip_proxied any;
补充说明:
gzip on;
:- 启用Gzip压缩功能。开启此功能后,Nginx会压缩响应数据以减少传输体积。
gzip_min_length 1k;
:- 指定Gzip压缩的最小响应体积。
- 这里设置为
1k
(1千字节),意味着只有当响应体积大于1KB时才会进行压缩,避免对小文件进行不必要的压缩。
gzip_buffers 4 16k;
:- 设置用于存储压缩结果的缓冲区数量和大小。
4 16k
表示Nginx会使用4个16KB的缓冲区来存储Gzip的压缩数据。
gzip_http_version 1.1;
:- 指定Gzip压缩的最低HTTP协议版本。
- 这里设置为
1.1
,意味着只有在客户端使用HTTP/1.1或更新版本时才会启用Gzip压缩。
gzip_comp_level 2;
:- 设置Gzip的压缩级别,范围是1到9。
2
表示较低的压缩级别,压缩速度快,占用较少的CPU资源。较高的压缩级别(如9)会产生更小的文件,但会消耗更多的CPU资源。
gzip_types
:- 指定哪些MIME类型的响应会进行压缩。
- 这里列出了多种常见的类型,包括:
text/plain
(纯文本)、text/css
(CSS样式表)、application/json
(JSON数据)、application/javascript
(JavaScript文件)、text/xml
和application/xml
(XML数据)等。
gzip_proxied any;
:- 指定在何种情况下对通过代理的请求启用Gzip压缩。
any
表示不论请求头中包含哪些信息,只要是代理请求都进行压缩。
三、压缩工具推荐
1、TinyPNG(亲测好用):
- TinyPNG(tinypng.com)
TinyPNG 是一个免费的在线图片压缩工具,可以将 PNG 和 JPEG 格式的图片压缩至合适的大小,而且不会影响图片质量。
2、Compressor.io(compressor.io)
Compressor.io 是一个免费的在线图片压缩工具,可以压缩 JPEG、PNG、SVG 和 GIF 等格式的图片。它可以将图片压缩至较小的大小,而且不会影响图片质量。
3、Kraken(kraken.io)
Kraken 是一个在线图片优化和压缩服务,可以将 JPEG、PNG 和 GIF 等格式的图片压缩至最小的文件大小。Kraken 还提供了 API 接口,可以方便地集成到项目中。
4、ImageOptim(imageoptim.com)
ImageOptim 是一个免费的图片优化工具,它可以自动压缩 JPEG、PNG 和 GIF 等格式的图片,并且可以自动删除图片中的元数据和不必要的信息,从而减小文件大小。
相关文章:
Web项目图片视频加载缓慢/首屏加载白屏
Web项目图片视频加载缓慢/首屏加载白屏 文章目录 Web项目图片视频加载缓慢/首屏加载白屏一、原因二、 解决方案2.1、 图片和视频的优化2.1.1、压缩图片或视频2.1.2、 选择合适的图片或视频格式2.1.3、 使用图片或视频 CDN 加速2.1.4、Nginx中开启gzip 三、压缩工具推荐 一、原因…...
Java系统对接企业微信审批项目流程
若依做的一个系统需求需要对接企业微信的人员去审核订单 回款之类,以下是详细步骤. 1.首先登入企业微信管理后台: 企业微信 2.找到应用管理 3.自建一个应用 4.这些数据都可以拿到 5.配置可信Ip 6.进入有两种方法让你去配置 ,第一种用公司的…...
MacOS 命令行详解使用教程
本章讲述MacOs命令行详解的使用教程,感谢大家观看。 本人博客:如烟花般绚烂却又稍纵即逝的主页 MacOs命令行前言: 在 macOS 上,Terminal(终端) 是一个功能强大的工具,它允许用户通过命令行直接与系统交互。本教程将详细介绍 macOS…...
易语言鼠标轨迹算法(游戏防检测算法)
一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…...
java-使用druid sqlparser将SQL DDL脚本转化为自定义的java对象
java-使用druid sqlparser将SQL DDL脚本转化为自定义的java对象 一、引言二、环境三、待解析的DDL四、解析后的对象结构五、完整的UT类六、控制台输出总结 一、引言 在日常开发中,有些需要对SQL进行解析的场景,比如读取表结构信息,生成文档、…...
靜態IP與DHCP的區別和用法
IP地址可以是靜態的,即固定不變,也可以是動態的,定期更改或每次連接後更改。 什麼是靜態 IP? 靜態IP地址是固定的,手動分配的IP地址,不會隨時間而變化。分配後,此 IP 保持不變,並由…...
【C#】Debug和Release的区别和使用
在 C 或 C# 开发中,Debug 和 Release 是两种不同的编译配置,主要用于开发过程中的不同阶段。它们的主要区别如下: 1. Debug 版本 Debug 版本是为了开发和调试程序而优化的构建模式。 特点: 包含调试信息: Debug 版本…...
Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label
最近刚进行 Vue3 Element plus 项目实践,在进行表单二次封装的时候,表单元素 select 下拉框组件选中一个选项后显示的是 value 而不是 label,下面上代码: 原来的写法: <el-selectv-if"v.type select"…...
Redis - 消息队列 Stream
一、概述 消息队列 定义 消息队列模型:一种分布式系统中的消息传递方案,由消息队列、生产者和消费者组成消息队列:负责存储和管理消息的中间件,也称为消息代理(Message Broker)生产者:负责 产…...
【多维DP】【hard】力扣1269. 停在原地的方案数
有一个长度为 arrLen 的数组,开始有一个指针在索引 0 处。 每一步操作中,你可以将指针向左或向右移动 1 步,或者停在原地(指针不能被移动到数组范围外)。 给你两个整数 steps 和 arrLen ,请你计算并返回&…...
Android显示系统(11)- 向SurfaceFlinger申请Surface
Android显示系统(01)- 架构分析 Android显示系统(02)- OpenGL ES - 概述 Android显示系统(03)- OpenGL ES - GLSurfaceView的使用 Android显示系统(04)- OpenGL ES - Shader绘制三角…...
OpenCV实验篇:识别图片颜色并绘制轮廓
第三篇:识别图片颜色并绘制轮廓 1. 实验原理 颜色识别的原理: 颜色在图像处理中通常使用 HSV 空间来表示。 HSV 空间是基于人类视觉系统的一种颜色模型,其中: H(Hue):色调,表示颜色…...
鸿蒙-应用内悬浮窗
//悬浮窗工具类 import { window } from kit.ArkUI; import { BusinessError } from kit.BasicServicesKit; import { Logger } from mbbase/common-ui; import * as FloatedWindowPage from ./FloatedWindowPage; // 导入命名路由页面 const TAG [FloatedWindowUtils]; ex…...
Ubuntu Linux操作系统
一、Ubuntu简介 Ubuntu Linux是由南非人马克沙特尔沃思(Mark Shuttleworth)创办的基于Debian Linux的操作系统,于2004年10月公布。Ubuntu是一个以桌面应用为主的Linux发行版操作系统。Ubuntu拥有庞大的社区力量,用户可以方便地从社区获得帮助。其官方网…...
Linux下SVN客户端保存账号密码
参考文章:解决:Linux上SVN 1.12版本以上无法直接存储明文密码_linux svn 保存密码-CSDN博客新版本svn使用gpg-agent存储密码-CSDN博客svn之无法让 SVN 存储密码,即使配置设置为允许_编程设计_ITGUEST 方法一:明文方式保存密码 首…...
【DBeaver】连接带kerberos的hive[Apache|HDP]
目录 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 1.2 环境配置 二、基于Cloudera驱动创建连接 三、基于Hive原生驱动创建连接 一、安装配置Kerberos客户端环境 1.1 安装Kerberos客户端 在Kerberos官网下载,地址如下:https://web.mit.edu/kerberos…...
Android-Glide详解
目录 一,介绍 二,使用 三,源码分析思路 四,with源码分析 五,模拟Glide生命周期管理 一,介绍 Glide目前是安卓最主流的加载图片的框架,也是源码最为复杂的框架之一。 要想完完全全吃透Glide的源…...
【容器】k8s学习笔记原理详解(十万字超详细)
Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器,这些容器可以分为两类: 用户程序所在的容器,数量可多可少Pause容器,这是每个Pod都会有的一个根容器,它的作用有两个: 可以以它为依据&am…...
SQL Server通过存储过程实现自定义邮件格式并定时发送
在 SQL Server 中,可以通过存储过程实现自定义邮件格式并定时发送。这通常涉及以下几个步骤: 1. 配置 Database Mail:首先需要配置 SQL Server 的 Database Mail 功能。 2. 创建存储过程:编写存储过程来生成自定义邮件格式并发送邮件。 3. 设置 SQL Server 代理作…...
通过增强的 vSphere 集成增强你的 vSphere 监控
作者:来自 Elastic Ishleen Kaur•Lalit Satapathy vSphere 是 VMware 的云计算虚拟化平台,提供一套功能强大的虚拟化资源管理套件。它允许组织创建、管理和优化虚拟环境,提供高可用性、负载平衡和简化资源分配等高级功能。vSphere 可以高效利…...
C++ 并发专题 - C++线程同步的几种方法
一:概述 线程同步是多线程编程中的一个重要概念,它用于控制多个线程之间对共享资源的访问,避免竞态条件(race condition)和数据不一致的问题。线程同步确保在多线程环境中,多个线程访问共享数据时能够按照某…...
[java]网络编程
java.net.*包下提供了网络编程的解决方案 通信架构 CS架构 客户端 客户端需要开发 用户需要安装 服务端 需要开发 BS架构 浏览器 不需要开发 需要安装浏览器 服务器 需要开发 网络通信三要素 IP地址 是设备在网络中的唯一标识, 全称 互联网协议地址 分类 公网IP 可…...
[C++]类的继承
一、什么是继承 1.定义: 在 C 中,继承是一种机制,允许一个类(派生类)继承另一个类(基类)的成员(数据和函数)。继承使得派生类能够直接访问基类的公有和保护成员…...
2024安装hexo和next并部署到github和服务器最新教程
碎碎念 本来打算写点算法题上文所说的题目,结果被其他事情吸引了注意力。其实我之前也有过其他博客网站,但因为长期不维护,导致数据丢失其实是我懒得备份。这个博客现在部署在GitHub Pages上,github不倒,网站不灭&…...
【spring】@Qualifier注解
目录 1. 说明2. 用法示例2.1 标注在字段上2.2 标注在方法上2.3 标注在类上2.4 在自定义注解上的应用 3. 注意事项 1. 说明 1.Qualifier是Spring框架中的一个注解,主要用于解决依赖注入时的歧义性问题。2.定义:Qualifier是一个限定符注解,用于…...
uniapp 应用的生命周期、页面的生命周期、组件的生命周期
uniapp 作为一款跨平台的移动应用开发框架,其生命周期分为应用生命周期、页面生命周期和组件生命周期。下面分别介绍这三种生命周期的具体内容: 应用生命周期 应用生命周期仅适用于整个应用,在 App.vue 中可以监听到以下生命周期函数&#…...
热更新解决方案4——xLua热补丁
概述 运行时不在执行C#中的代码,而是执行Lua中的代码,相当于是打了个补丁。 1.第一个热补丁 2.多函数替换 3.协程函数替换 在原HotfixMain脚本中只加个协程函数即可(和在Start中启动协程函数) 4.索引器和属性替换 在HotfixMain中…...
【MARL】深入理解多智能体近端策略优化(MAPPO)算法与调参
📢本篇文章是博主强化学习(RL)领域学习时,用于个人学习、研究或者欣赏使用,并基于博主对相关等领域的一些理解而记录的学习摘录和笔记,若有不当和侵权之处,指出后将会立即改正,还望谅…...
3.2.1.2 汇编版 原子操作 CAS
基本原理说明 在 x86 和 ARM 架构上,原子操作通常利用硬件提供的原子指令来实现,比如 LOCK 前缀(x86)或 LDREX/STREX(ARM)。以下是一些关键的原子操作(例如原子递增和比较交换)的汇…...
关于llama2:从原始llama-2-7b到llama-2-7b-hf的权重转换教程
1.首先,我是从各个教程里面选了一个实际操作的教程(这样更加靠谱):下载llama2-7b并转hf模型_huggingface 下载llama2-7b-chat-hf-CSDN博客 2.但是,其实我在另外一篇更好的教程里面看到过一个坑(这篇好像是腾…...
物理机内网穿透
前言: 本文主要讲述如何使用内网穿透以及其安全性。 将带领大家在公网上搭建几个常用靶场。 一,什么是内网穿透。 大多数情况下,我们的个人电脑都处于内网,即没有可公开访问的独立 IP 地址,因此其他内网用户找不到…...
构建一个rust生产应用读书笔记四(实战1)
我们需要从访客那里收集哪些信息,以便将其登记为电子邮件通讯的订阅者? 电子邮件地址:这是最基本的要求,因为我们需要通过电子邮件地址向订阅者发送内容。姓名:虽然这不是强制性的,但我们希望收集一个名字…...
[LeetCode-Python版]206. 反转链表(迭代+递归两种解法)
题目 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1] 示例 2: 输入:head [1,2] 输出:[2,1] 示例 3࿱…...
shardingsphere分库分表跨库访问 添加分片规则
shardingsphere分库分表跨库访问 添加分片规则 建立 JDBC 环境 创建表 t_order: CREATE TABLE t_order (tid bigint(20) NOT NULL,tname varchar(255) DEFAULT NULL,goods_id bigint(20) DEFAULT NULL,tstatus varchar(255) DEFAULT NULL,PRIMARY KEY (tid) ) E…...
【NLP 15、深度学习处理文本】
目录 一、反向传播 编辑 1.反向传播运算过程 2.前向传播和反向传播的作用 前向传播 反向传播 3.定义模型(torch包) 4.手动实现 ① 线性层 ② sigmoid激活函数 ③ 手动实现MSE均方差损失函数 ④ 前向传播 ⑤ 手动实现梯度计算 ⑤ 权重的更新:…...
Android Studio创建新项目并引入第三方so外部aar库驱动NFC读写器读写IC卡
本示例使用设备:https://item.taobao.com/item.htm?spma21dvs.23580594.0.0.52de2c1bbW3AUC&ftt&id615391857885 一、打开Android Studio,点击 File> New>New project 菜单,选择 要创建的项目模版,点击 Next 二、输入项目名称…...
3D视觉[一]3D计算机视觉
3D视觉[一]3D计算机视觉 3D计算机视觉概述 像机标定 文章目录 3D视觉[一]3D计算机视觉前言一、人类视觉二、计算机视觉2.1 计算机视觉的研究目的2.2 计算机视觉的研究任务2.3 计算机视觉的研究方法2.4 视觉计算理论2.5 马尔框架中计算机视觉表达的四个层次2.5.1 图像ÿ…...
Linux权限(超详细彻底搞懂Linux的权限)
🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:Linux常见指令(初学者必看) 🔖流水不争,争的是滔滔不 一、Linux下的两种用户超级用户&…...
Ubuntu22.04安装docker desktop遇到的bug
1. 确认已启用 KVM 虚拟化 如果加载了模块,输出应该如下图。说明 Intel CPU 的 KVM 模块已开启。 否则在VMware开启宿主机虚拟化功能: 2. 下一步操作: Ubuntu | Docker Docs 3. 启动Docker桌面后发现账户登陆不上去: Sign in | …...
网新恒天八股总结
Java的基本数据类型 四类八种 整数类型:byte,short,int,long 浮点类型:float,double 字符类型:char 布尔类型:boolean char类型的范围 0 ~ 65535,可以表示16位无符号整数 equals和的区别 &,&&a…...
【AIGC】与模型对话:理解与预防ChatGPT中的常见误解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯模型的工作原理和用户期望差异人工智能模型的基本工作原理认知上的局限与误解用户期望与模型实际能力的差距精确理解用户意图的重要性实际应用中的建议 &…...
09篇--图片的水印添加(掩膜的运用)
如何添加水印? 添加水印其实可以理解为将一张图片中的某个物体或者图案提取出来,然后叠加到另一张图片上。具体的操作思想是通过将原始图片转换成灰度图,并进行二值化处理,去除背景部分,得到一个类似掩膜的图像。然后…...
Qt 使用modbus协议
Qt 框架下 使用modbus协议 一,使用Qt原生的 QModbusClient ,比如QModbusTcpClient 1,因为modbus的读写 需要在同一个线程中,所以需要在主线程中利用moveToThread的方式,将业务逻辑封装到 子线程中。 2,m…...
pip离线安装一个github仓库
要使用pip安装一个本地Git仓库,你可以按照以下步骤操作: 确保你已经克隆了Git仓库到本地。 进入仓库所在的目录。 使用pip安装。 以下是具体的命令: 克隆Git仓库到本地(替换下面的URL为你的仓库URL) git clone https…...
【ETCD】【源码阅读】深入分析 storeTxnWrite.Put方法源码
该方法是 storeTxnWrite 类型中的核心方法,负责将键值对存储到数据库,同时处理键的元数据(如版本、修订号、租约)并管理租约关联。 目录 一、完整代码二、方法详解方法签名1. 计算修订号并初始化变量2. 检查键是否已存在3. 生成索…...
桥接模式的理解和实践
桥接模式(Bridge Pattern),又称桥梁模式,是一种结构型设计模式。它的核心思想是将抽象部分与实现部分分离,使它们可以独立地进行变化,从而提高系统的灵活性和可扩展性。本文将详细介绍桥接模式的概念、原理…...
【Rust自学】3.2. 数据类型:标量类型
3.2.0. 写在正文之前 欢迎来到Rust自学的第三章,一共有6个小节,分别是: 变量与可变性数据类型:标量类型(本文)数据类型:复合类型函数和注释控制流:if else控制流:循环 通过第二章…...
【Leetcode Top 100】199. 二叉树的右视图
问题背景 给定一个二叉树的 根节点 r o o t root root,想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值。 数据约束 二叉树的节点个数的范围是 [ 0 , 100 ] [0,100] [0,100] − 100 ≤ N o d e . v a l ≤ 100…...
Java并发编程框架之其他并发工具
选错了就选错了,不要一遍一遍的后悔,总是一遍遍的想,当时怎么样就好了,不要欺负当时的自己,当时你一个人站在迷雾中,也很迷茫,就算重新来一遍,以你当时的阅历和心智,还是…...
MinerU:PDF文档提取工具
目录 docker一键启动本地配置下载模型权重文件demo.py使用命令行启动GPU使用情况 wget https://github.com/opendatalab/MinerU/raw/master/Dockerfile docker build -t mineru:latest .docker一键启动 有点问题,晚点更新 本地配置 就是在Python环境中配置依赖和…...