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

前端优化页面加载速度的方法(持续更新)

提速方法方向

延迟脚本加载

  1. 使用 async 属性
       在这种方法中,脚本将在下载完成后立即执行,而不会阻塞其他页面资源的加载和渲染。这适用于那些不依赖于其他脚本和页面内容的脚本,例如分析脚本等。示例如下:

html <script src="your-script.js" async></script>    

注意:由于脚本是异步加载的,它们可能不会按照它们在 HTML 中出现的顺序执行,因此需要谨慎处理脚本之间的依赖关系。

  1. 使用 defer 属性
       使用 defer 属性的脚本会在整个文档解析完毕后、DOMContentLoaded 事件之前执行。这使得它们不会阻塞 HTML 的解析,但会在文档解析完成后按顺序执行。适用于那些需要在文档完全加载后执行的脚本,例如操作 DOM 的脚本。

html <script src="your-script.js" defer></script>    

使用这些属性时,要确保你的脚本不会依赖于页面中尚未加载的元素,否则可能会出现错误。根据脚本的性质和页面结构,选择适合的加载方式,以实现更好的性能和用户体验。

对于 Vue.js,通常不需要在 <script> 标签上使用 async 或 defer 属性,因为 Vue.js 在加载和初始化时不会阻塞页面的加载和渲染。Vue.js 应用通常在页面加载完成后再初始化,这使得它们不会影响页面的呈现速度。

当浏览器遇到普通的 Vue.js <script> 标签时,它会按顺序下载并执行脚本。Vue.js 在脚本执行期间会注册组件、创建实例等,但这些操作通常不会阻塞页面其他内容的加载。

简而言之,对于 Vue.js 应用,不需要显式地使用 async 或 defer 属性。

CDN

内容分发网络(CDN)是一种用于提供高性能、可靠性和可扩展性的网络架构,旨在将内容(例如网页、图像、视频等)传递给最终用户。CDN 的主要目标是减少用户访问内容时的延迟,提高内容的可用性,并减轻源服务器的负载。

 对于常见的库和框架(例如 jQuery、Vue.js、Bootstrap 等),您可以使用它们在 CDN 上托管的版本。这些资源通常已经在全球范围内进行了缓存,并能够更快地被用户加载。示例代码:

​<!-- 使用外部托管的 jQuery --><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><!-- 使用外部托管的 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

雪碧图

将多个小图标合并成一个雪碧图,减少请求次数;但是制作雪碧图和使用都不轻松。

懒加载

在 Vue 3 中实现组件的懒加载可以通过使用动态导入(Dynamic Import)的方式来完成。这可以帮助你在需要的时候才加载特定的组件,从而提高应用程序的性能。

以下是在 Vue 3 中实现组件懒加载的步骤:

1. 首先,确保已经正确地设置了 Vue 3 的开发环境,并且项目中使用了 Vue Router(如果需要在路由中进行懒加载)。

2. 在需要懒加载的地方,使用动态导入来加载组件。例如,在路由配置中,可以这样做:

const Foo = () => import('./components/Foo.vue');
const Bar = () => import('./components/Bar.vue');const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar },// ...
];

3. 在上面的例子中,`import('./components/Foo.vue')` 这样的语法会返回一个 Promise,这个 Promise 在组件加载完成后会被解析。Vue Router 会自动处理这些 Promise 并加载对应的组件。

4. 如果你需要在组件内部也进行懒加载,可以使用 `defineAsyncComponent` 函数。这个函数是 Vue 3 提供的一个工具,用于创建异步组件。

<template><div><!-- 按需加载 MyComponent 组件 --><MyComponent /></div>
</template><script>
import { defineAsyncComponent } from 'vue';// 创建异步组件const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));export default {components: {MyComponent,},
};
</script>

在上面的代码中,`defineAsyncComponent` 会返回一个异步组件,它在被渲染时才会动态加载 `MyComponent.vue`。

这些就是在 Vue 3 中实现组件懒加载的基本步骤。通过懒加载,可以在需要的时候按需加载组件,提高应用程序的性能和加载速度。

细节提速

border等不用0px

border:0和border:none比肯定是要更耗时的,border:0需要渲染border,而none不需要

相关文章:

前端优化页面加载速度的方法(持续更新)

提速方法方向 延迟脚本加载 使用 async 属性&#xff1a; 在这种方法中&#xff0c;脚本将在下载完成后立即执行&#xff0c;而不会阻塞其他页面资源的加载和渲染。这适用于那些不依赖于其他脚本和页面内容的脚本&#xff0c;例如分析脚本等。示例如下&#xff1a; html …...

利用SSL证书的SNI特性建立自己的爬虫ip服务器

今天我要和大家分享一个关于自建多域名HTTPS爬虫ip服务器的知识&#xff0c;让你的爬虫ip服务器更加强大&#xff01;无论是用于数据抓取、反爬虫还是网络调试&#xff0c;自建一个支持多个域名的HTTPS爬虫ip服务器都是非常有价值的。本文将详细介绍如何利用SSL证书的SNI&#…...

HTML和CSS

HTML HTML(Hyper Text Markup Language):超文本语言 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了文字信息&#xff0c;还可以定义图片、音频、视频等内容。 标记语言&#xff1a;由标签构成的语言 HTML标签都是预定义好的。例如&#xff1a;使用&l…...

C#的IndexOf

在 C# 中&#xff0c;IndexOf 是一个字符串、数组或列表的方法&#xff0c;用于查找指定元素的第一个匹配项的索引。它返回一个整数值&#xff0c;表示匹配项在集合中的位置&#xff0c;如果未找到匹配项&#xff0c;则返回 -1。 IndexOf 方法有多个重载形式&#xff0c;可以根…...

深度学习2.神经网络、机器学习、人工智能

目录 深度学习、神经网络、机器学习、人工智能的关系 大白话解释深度学习 传统机器学习 VS 深度学习 深度学习的优缺点 4种典型的深度学习算法 卷积神经网络 – CNN 循环神经网络 – RNN 生成对抗网络 – GANs 深度强化学习 – RL 总结 深度学习 深度学习、神经网络…...

利用LLM模型微调的短课程;钉钉宣布开放智能化底座能力

&#x1f989; AI新闻 &#x1f680; 钉钉宣布开放智能化底座能力AI PaaS&#xff0c;推动企业数智化转型发展 摘要&#xff1a;钉钉在生态大会上宣布开放智能化底座能力AI PaaS&#xff0c;与生态伙伴探寻企业服务的新发展道路。AI PaaS结合5G、云计算和人工智能技术的普及和…...

软件工程(七) UML之用例图详解

1、UML-4+1视图 UML-4+1视图将会与后面的架构4+1视图会一一对应上 视图往往出现在什么场景:我们看待一个事物,我们觉得它很复杂,难以搞清楚,为了化繁为简,我们会从一个侧面去看,这就是视图。而4+1视图就是分不同角度去看事物。 逻辑视图(logical view) 一般使用类与对…...

pd.cut()函数--Pandas

1. 函数功能 将连续性数值进行离散化处理&#xff1a;如对年龄、消费金额等进行分组 2. 函数语法 pandas.cut(x, bins, rightTrue, labelsNone, retbinsFalse, precision3, include_lowestFalse, duplicatesraise, orderedTrue)3. 函数参数 参数含义x要离散分箱操作的数组&…...

DataBinding的基本使用

目录 一、MVC、MVP和MVVM框架的使用场景二、Java使用 一、MVC、MVP和MVVM框架的使用场景 MVC&#xff1a; 适用于小型项目&#xff0c;够灵活&#xff0c; 缺点&#xff1a;Activity不仅要做View的事情还要做控制和模型的处理&#xff0c;导致Activity太过臃肿&#xff0c;管理…...

eslint和prettier格式化冲突

下载插件 ESLint 和 Prettier ESLint 进入setting.json中 setting.json中配置 {"editor.tabSize": 2,"editor.linkedEditing": true,"security.workspace.trust.untrustedFiles": "open","git.autofetch": true,"…...

matlab使用教程(26)—常微分方程的求解

1.求解非刚性 ODE 本页包含两个使用 ode45 来求解非刚性常微分方程的示例。MATLAB 提供几个非刚性 ODE 求解器。 • ode45 • ode23 • ode78 • ode89 • ode113 对于大多数非刚性问题&#xff0c;ode45 的性能最佳。但对于允许较宽松的误差容限或刚度适中的问题&…...

尚硅谷宋红康MySQL笔记 14-18

是记录&#xff0c;不会太详细&#xff0c;受本人知识限制会有错误&#xff0c;会有个人的理解在里面 第14章 视图 了解一下&#xff0c;数据库的常见对象 对象描述表(TABLE)表是存储数据的逻辑单元&#xff0c;以行和列的形式存在&#xff0c;列就是字段&#xff0c;行就是记…...

香港全新的虚拟资产服务商发牌制度

香港证监会2023年2月20日通告&#xff0c;原有虛擬資產交易平台如要符合資格參與當作為獲發牌的安排&#xff0c;必須在2023 年6 月1 日至2024 年2 月29 日期間(即由2023 年6 月1 日37起計九個月內)內&#xff0c;根據《打擊洗錢條例》下的虛擬資產服務提供者制度在網上提交完全…...

C# 泛型

目录 一、前言 二、相关内容 1、什么是泛型&#xff1f; 2、泛型类 3、泛型方法 4、限定类型参数 4.1、 类型参数的基本约束 4.2、接口约束 4.3、基类约束 4.5、泛型参数与限定类型参数的关系 4.6、自定义约束 5、使用泛型的好处 5.1、代码复用性 5.2、类型安全…...

servlet,Filter,责任的设计模式,静态代理

servlet servlet是前端和数据库交互的一个桥梁 静态网页资源的技术&#xff1a;在前端整个运行的过程中 我们的网页代码不发生改变的这种情况就称为静态的网页资源技术动态网页资源的技术&#xff1a;在前端运行的过程中 我们的前端页面代码会发生改变的这种情况就称为 动态的网…...

C++中的运算符总结(5):按位运算符(上)

C中的运算符总结&#xff08;5&#xff09;&#xff1a;按位运算符&#xff08;上&#xff09; 9、按位运算符 NOT&#xff08; &#xff5e;&#xff09;、 AND&#xff08; &&#xff09;、 OR&#xff08; |&#xff09;和 XOR&#xff08; ^&#xff09; 逻辑运算符和…...

8.Oracle中多表连接查询方式

表连接分类&#xff1a; 内连接、外连接、交叉连接、自连接 1 内连接 内连接是一种常见的多表关联查询方式&#xff0c;一般使用关键字INNER JOIN来实现。其中&#xff0c;INNER关键字可以省略&#xff0c;当只使用JOIN关键字时&#xff0c;语句只表示内连接操作。在使用内连…...

Linux 安装mysql(ARM架构)

添加mysql用户组和mysql用户 安装依赖libaio yum install -y libaio* 下载Mysql wget https://obs.cn-north-4.myhuaweicloud.com/obs-mirror-ftp4/database/mysql-5.7.27-aarch64.tar.gz安装mysql 解压Mysql tar xvf mysql-5.7.27-aarch64.tar.gz -C /usr/local/ 重命名 …...

git:git clone报错提示permissions xxxx for xxxxxx are too open

问题&#xff1a; 如题 参考&#xff1a; [密钥权限过大错误]ssh “permissions are too open” error 解决办法&#xff1a; 将id_rsa和id_rsa.pub的权限改为600...

elasticSearch数据的导入和导出

http://wget https://nodejs.org/dist/v10.13.0/node-v10.13.0-linux-x64.tar.gz 解压即可&#xff1a; 1、将索引中的数据导出到本地 myindex 是我的索引 elasticdump --inputhttp://localhost:9200/myindex--output/home/date/myindex.json2、将本地数据导入es中 elasticdum…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...