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

前端代码优化方法

news 2026/2/10 4:32:05

1.封装的css样式，增加样式复用性。如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢
2.减少css嵌套，最好不要嵌套三层以上
3.不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完全是浪费性能
4.减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？
5.巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义
6.减少css表达式，表达式只是让你的代码显得更加酷炫，但是对性能的浪费可能超乎你想象
7.css压缩(在线压缩工具 YUI Compressor)
8.减少回流,可以适当重绘，避免不必要的DOM操作
9.减少dom层级，渲染速度页面加快
10.封装常用js,增加逻辑复用性。项目常用的js,可以全局引入
11.页面数据本地缓存，减少http请求次数（但是要注意数据更新）
12.尽量少的定义data数据，减少页面属性监听次数
13.路由懒加载
14.压缩本地图片，减少加载静态文件时间(https://tinypng.com/)
15.图片懒加载，页面骨架屏，降低网页未加载时用户的恐慌
16.图片上传时大体积图片压缩之后上传
17.合成所有icon图片，文件引入还可以更改颜色
18.开启gzip压缩，加快网站打开速度
19.清除页面死代码，如console.log，注释的代码
20.第三方资源不可控会影响页面的加载和显示，要异步加载第三方资源

相关文章：

前端代码优化方法

1.封装的css样式，增加样式复用性。如果页面加载10个css文件,每个文件1k，那么也要比只加载一个100k的css文件慢 2.减少css嵌套，最好不要嵌套三层以上 3.不要在ID选择器前面进行嵌套，ID本来就是唯一的而且权限值大，嵌套完…...

编程日记 2023/3/1 22:53:31

【批处理脚本】-1.16-文件内字符串查找增强命令findstr

"><--点击返回「批处理BAT从入门到精通」总目录--> 共9页精讲（列举了所有findstr的用法，图文并茂，通俗易懂） 在从事“嵌入式软件开发”和“Autosar工具开发软件”过程中，经常会在其集成开发环境IDE（CodeWarrior，S32K DS，Davinci，EB Tresos，ETAS…）中…...

编程日记 2023/3/1 22:52:26

三天吃透Redis面试八股文

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址&#xff1a;https://github.com/…...

编程日记 2023/3/1 22:51:20

数据湖架构Hudi（三）Hudi核心概念

三、Apache Hudi核心概念 3.1 基本概念 Hudi 提供了Hudi 表的概念&#xff0c; 这些表支持CRUD操作&#xff0c; 可以利用现有的大数据集群比如HDFS做数据文件存储&#xff0c; 然后使用SparkSQL或Hive等分析引擎进行数据分析查询。 Hudi表的三个主要组件&#xff1a; 有序的…...

编程日记 2023/3/1 22:50:16

在数字优先的世界中打击知识产权盗窃

在当今数据驱动的世界中&#xff0c;全球许多组织所面临的期望和需求正在达到前所未有的水平。 为了迎接挑战&#xff0c;数据驱动的方法是必要的&#xff0c;需要有效的数字化转型来提高运营效率、简化流程并从遗留技术中获得更多收益。 但是&#xff0c;虽然数字优先方法可…...

编程日记 2023/3/1 22:49:09

机器学习算法原理——逻辑斯谛回归

文章目录逻辑斯谛回归二项逻辑斯谛回归模型极大似然估计多项逻辑斯谛回归模型总结归纳逻辑斯谛回归 写在前面&#xff1a;逻辑斯谛回归最初是数学家 Verhulst 用来研究人口增长是所发现的&#xff0c;是一个非常有趣的发现过程&#xff0c; b 站有更详细的背景及过程推导&…...

编程日记 2023/3/1 22:48:01

【华为OD机试 】最优资源分配/芯片资源占用（C++ Java JavaScript Python）

文章目录 题目描述输入描述输出描述备注用例题目解析C++JavaScriptJavaPython题目描述 某块业务芯片最小容量单位为1.25G，总容量为M*1.25G，对该芯片资源编号为1，2，…，M。该芯片支持3种不同的配置，分别为A、B、C。 配置A：占用容量为 1.25 * 1 = 1.25G配置B：占用容量为 …...

编程日记 2023/3/1 22:46:57

600 条最强 Linux 命令总结

1、基本命令 uname -m 显示机器的处理器架构 uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 &#xff08;SMBIOS / DMI&#xff09; hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试性读取操作系统信息 arch 显示机器…...

编程日记 2023/3/1 22:45:52

python自学之《21天学通Python》(15)——第18章 数据结构基础

数据结构是用来描述一种或多种数据元素之间的特定关系&#xff0c;算法是程序设计中对数据操作的描述&#xff0c;数据结构和算法组成了程序。对于简单的任务&#xff0c;只要使用编程语言提供的基本数据类型就足够了。而对于较复杂的任务&#xff0c;就需要使用比基本的数据类…...

编程日记 2023/3/1 22:44:47

从功能到自动化，熬夜3天整理出这一份2000字学习指南~

学习自动化这个想法&#xff0c;其实自己在心里已经琢磨了很久&#xff0c;就是一直没付诸实践&#xff0c;觉得现在手工测试已经能满足当前的工作需要&#xff0c;不想浪费时间去学习新的东西&#xff0c;有点时间还不如刷刷视频、看看小说等。 第一次有学习Selenium的冲动是…...

编程日记 2023/3/1 22:43:42

客户端攻击（溯源攻击，获取客户端信息）

目录 背景 为什么 示例 探索HTML应用程序 HTA攻击行为（Powershell代码） 背景 如果创建的文件扩展名为.hta而不是.html，Internet Explorer将自动将其解释为html应用程序，并提供使...

编程日记 2023/3/1 22:42:37

visual studio 2022 社区版 c# 环境搭建及安装使用【图文解析-小白版】

visual studio 2022 社区版 c# 环境搭建及安装使用【图文解析-小白版】visual studio 安装 C# 环境安装流程创建c#窗体应用程序visual studio 安装 C# 环境 首先&#xff0c;进入其官网下载对应的visual studio社区版本&#xff0c;官网链接: https://visualstudio.microsoft…...

编程日记 2023/3/1 22:41:33

21- 神经网络模型_超参数搜索 (TensorFlow系列) (深度学习)

知识要点 fetch_california_housing&#xff1a;加利福尼亚的房价数据&#xff0c;总计20640个样本&#xff0c;每个样本8个属性表示&#xff0c;以及房价作为target 超参数搜索的方式: 网格搜索, 随机搜索, 遗传算法搜索, 启发式搜索 超参数训练后用&#xff1a; gv.estimat…...

编程日记 2023/3/1 22:40:27

《NFL橄榄球》：芝加哥熊·橄榄1号位

芝加哥熊&#xff08;英语&#xff1a;Chicago Bears&#xff09;是一支职业美式橄榄球球队。位于伊利诺伊州的芝加哥。现时为全国橄榄球联盟的国家联盟北区的球队。他们曾经赢出九次美式橄榄球比赛的冠军&#xff0c;分别为八次旧制全国橄榄球联盟和一次超级碗冠军&#xff08…...

编程日记 2023/3/1 22:39:23

【ES】Elasticsearch核心基础概念：文档与索引

es的核心概念主要是&#xff1a;index(索引)、Document(文档)、Clusters(集群)、Node(节点)与实例&#xff0c;下面我们先来了解一下Document与Index。 RESTful APIs 在讲解Document与Index概念之前&#xff0c;我们先来了解一下RESTful APIs&#xff0c;因为下面讲解Documen…...

编程日记 2023/3/1 22:38:19

实时手势识别(C++与python都可实现)

一、前提配置&#xff1a; Windows&#xff0c;visual studio 2019&#xff0c;opencv&#xff0c;python10&#xff0c;opencv-python&#xff0c;numpy&#xff0c;tensorflow&#xff0c;mediapipe&#xff0c;math 1.安装python环境 这里我个人使用的安装python10&#…...

编程日记 2023/3/1 22:37:13

15个Spring扩展点，一般人知道的不超过5个！

Spring的核心思想就是容器&#xff0c;当容器refresh的时候&#xff0c;外部看上去风平浪静&#xff0c;其实内部则是一片惊涛骇浪&#xff0c;汪洋一片。Spring Boot更是封装了Spring&#xff0c;遵循约定大于配置&#xff0c;加上自动装配的机制。很多时候我们只要引用了一个…...

编程日记 2023/3/1 22:36:08

Elasticsearch：以 “Painless” 方式保护你的映射

Elasticsearch 是一个很棒的工具&#xff0c;可以从各种来源收集日志和指标。 它为我们提供了许多默认处理&#xff0c;以便提供最佳用户体验。 但是&#xff0c;在某些情况下&#xff0c;默认处理可能不是最佳的&#xff08;尤其是在生产环境中&#xff09;&#xff1b; 因此&…...

编程日记 2023/3/1 22:35:04

js几种对象创建方式

适用于不确定对象内部数据方式一&#xff1a;var p new Object(); p.name TOM; p.age 12 p.setName function(name) {this.name name; }// 测试 p.setName(jack) console.log(p.name,p.age)方式二&#xff1a; 对象字面量模式套路&#xff1a;使用{}创建对象&#xff0c;同…...

编程日记 2023/3/1 22:33:59

阿里云服务器ECS适用于哪些应用场景？

云服务器ECS具有广泛的应用场景&#xff0c;既可以作为Web服务器或者应用服务器单独使用&#xff0c;又可以与其他阿里云服务集成提供丰富的解决方案。 云服务器ECS的典型应用场景包括但不限于本文描述&#xff0c;您可以在使用云服务器ECS的同时发现云计算带来的技术红利。 阿…...

编程日记 2023/3/1 22:32:50

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/2/1 7:05:28

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

编程新知 2025/12/4 2:32:37

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

边缘计算网关提升水产养殖尾水处理的远程运维效率

一、项目背景 随着水产养殖行业的快速发展&#xff0c;养殖尾水的处理成为了一个亟待解决的环保问题。传统的尾水处理方式不仅效率低下&#xff0c;而且难以实现精准监控和管理。为了提升尾水处理的效果和效率&#xff0c;同时降低人力成本&#xff0c;某大型水产养殖企业决定…...

编程新知 2026/2/1 16:16:37

stm32进入Infinite_Loop原因（因为有系统中断函数未自定义实现）

这是系统中断服务程序的默认处理汇编函数&#xff0c;如果我们没有定义实现某个中断函数&#xff0c;那么当stm32产生了该中断时&#xff0c;就会默认跑这里来了&#xff0c;所以我们打开了什么中断&#xff0c;一定要记得实现对应的系统中断函数&#xff0c;否则会进来一直循环…...

编程新知 2025/12/10 8:37:24

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

编程新知 2025/11/12 20:44:21