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

前端代码优化方法

news 2026/1/24 5:49:14

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

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2026/1/21 9:06:43

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/22 20:52:53

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/23 6:49:43

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2026/1/20 16:23:32

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2026/1/22 16:42:10

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/15 6:50:35

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2026/1/21 11:05:24