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

前端代码优化方法

news 2025/8/28 21:47:31

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/8/27 12:55:04

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/8/28 1:09:32

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/8/24 4:18:25

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/8/3 22:07:32

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/7/29 21:54:16

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/8/28 20:27:04

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/8/25 11:18:43

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/8/25 17:02:52

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/8/25 11:57:51