性能优化原则

news2025/9/21 18:09:54

相关链接:【运行环境】加载资源的形式

性能优化

1 性能优化原则

多使用内存、缓存或其他方法
减少CPU计算量,减少网络加载耗时
(适用于所有编程的性能优化----空间换时间)

2 从何入手

  • 性能优化-让加载更快
    减少资源体积:压缩代码
    减少访问次数:合并代码,合并图片(雪碧图)SSR服务端渲染,缓存(配置webpack的时候增加contenthash . 打包的时候 如果文件更改了 才重新加载 没有变化则用缓存)
    使用更快的网络:cdn
  • 性能优化-让渲染更快
    css放在head ,js放在body 下面
    尽早开始执行js, 用DOMContentLoaded触发
    懒加载(图片懒加载 上滑加载更多)
    对DOM查询进行缓存
    频繁DOM操作,合并到一起插入DOM结构
    节流 throttle 防抖 debounce . (让渲染更加流畅)
    ● 缓存
    webpack 配置缓存资源
    静态资源增加hash 后缀,根据文件内容计算hash
    文件内容不变,则hash不变,则url 不变
    url和文件不变,则会自动触发http 缓存机制,返回304
    ● SSR
    服务器端渲染:将网页和数据一起加载,一起渲染
    非SSR(前后端分离):先加载网页 ,再加载数据,再渲染数据
    早先的JSP ASP PHP ,现在的vue react SSR 都是服务端渲染
    ● 缓存DOM查询
    在这里插入图片描述
  • 多个DOM操作一起插入到DOM结构中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1583966.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java程序生成exe文件启动时,在没有java环境计算机运行

1.idea项目配置工件 2. 开始构建java程序成jar包 3. 生成exe启动程序 注:下面的输入框中写错了,应该是.\jre才对 4. 在已经选择的生成exe存放文件夹找到已经生成exe启动程序

你不可不知的5款小众神器

Hey小伙伴们👋,是不是还在为工作中的效率不高而烦恼呢?别急,今天我就给大家安利5款超实用的国产小众工作效软件,让你的工作台效率翻倍,轻松应对各种工作挑战!🌟 1️⃣ 亿可达 ycoda…

nexus搭建maven与docker镜像的私有仓库

引言 通过nexus搭建maven与docker镜像的私有仓库,实现jar包与镜像动态更新、共享、存储。 一、nexus部署 通过docker-compose部署nexus name: java services:#############################环境#############################env-nexus:restart: always## 3.58.1image: so…

Linux CPU利用率

Linux CPU利用率 在线上服务器观察线上服务运行状态的时候,绝大多数人都是喜欢先用 top 命令看看当前系统的整体 cpu 利用率。例如,随手拿来的一台机器,top 命令显示的利用率信息如下 这个输出结果说简单也简单,说复杂也不是那么…

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日,国内网络环境中出现的大流量攻击事件频发,且攻击规模呈指数级增长,部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源,通过复杂的网络技术和协议转换,将国际IPv4/IPv6流量巧妙伪装并转…

4.1Python的流程控制语句之分支语句

流程控制语句是计算机编程中用于控制程序执行流程的语句。它们允许根据条件来控制代码的执行顺序和逻辑,从而使程序能够根据不同的情况做出不同的决策。流程控制实现了更复杂和灵活的编程逻辑。 顺序语句 顺序语句是按照编写的顺序依次执行程序中的代码。代码会按照…

【测试开发学习历程】python迭代、可迭代对象、迭代器、生成器

1 迭代Iteration 迭代Iteration:所谓迭代就是重复运行一段代码语句块的能力,就好比在一个容器中进行一层一层遍历数据,在应用过程中for循环最为突出。迭代就是从某个容器对象中逐个地读取元素,直到容器中没有元素为止。迭代迭代&…

利用强化学习训练“井字棋”下棋策略的详细介绍

文章目录 1. 引言2. 基本要素2.1 棋盘状态2.2 智能体(棋手)2.3 用户交互接口 3. 训练过程3.1 模拟对弈过程3.2 策略的训练及检验3.3 用户实践 本篇文章的强化学习例子的完整代码来自刘建平老师的Github仓库。 1. 引言 井字棋游戏(Tic-Tac-T…

GitLab教程(一):安装Git、配置SSH公钥

文章目录 序一、Git安装与基本配置(Windows)下载卸载安装基本配置 二、SSH密钥配置 序 为什么要使用代码版本管理工具: 最近笔者确实因为未使用代码版本管理工具遇到了一些愚蠢的问题,笔者因此认为代码版本管理工具对于提高团队…

每日Bug汇总--Day03

Bug汇总—Day03 一、项目运行报错 二、项目运行Bug 1、问题描述:Vue前端项目运行后台管理平台订单管理页面下的三个子页面出现点击不同的路由还是会出现相同的页面,导致页面和数据不匹配 解决办法: 在监听器中添加状态来根据路由地址变化…

2024地平线古月居核心开发者招募

2024地平线&古月居核心开发者招募 机器人,作为一个集成了多学科技术的复杂系统,其开发过程充满了挑战。为了帮助开发者们更好地克服这些挑战,提升项目的开发效率和质量,我们特别推出了[2024地平线&古月居核心开发者招募]…

【Gem5】获取构建教程

gem5-tutorial-hpca-2023 1 介绍 1.1 Gem5是什么1.2 Gem5可以用来做什么1.3 获取并构建gem5 gem5-tutorial-hpca-2023 打开网址: github 创建教程代码空空间 “Code” -> “Codespaces” -> “Create Codespace on master” GitHub Codespaces 是一个由…

DSP笔记6-C2000的中断机制

中断Interrupt: 单核CPU顺序执行程序 中断源,引起计算机中断的时间,解放cpu,提高效率。 三个等级:CPU中断,PIE中断,外设中断 cpu定时器,EPWM,ADC,eCAP&…

git bash用法-批量修改文件名

在win系统上安装git bash可以使用命令行模式操作,比较方便 1.原始文件名 2.代码 for file in *3utr*; do mv "$file" "$(echo "$file" | sed s/3utr/5utr/)"; done3.修改后的文件名

PS入门|学PS一定要先知道图层这玩意儿

前言 开始学习PS的小伙伴肯定是会遇到很多问题,最常见的莫过于为啥我调整了某些参数之后,并没有任何作用。 这个就涉及到图层的问题了。 学PS一定要知道,图层面板怎么看。 正文开始 首先咱们讲的图层面板基本上是在PS里100%会用到的功能。…

solidworks镜像实体怎么用

在SolidWorks中,镜像实体功能用于复制并反转实体或特征,使其沿着指定的基准面对称。以下是使用SolidWorks镜像实体的基本步骤: 1. 打开模型:首先打开SolidWorks软件,并加载您想要镜像的三维实体模型。 2. 找到镜像命…

蓝桥2021A组C题

货物摆放 问题描述格式输入格式输出评测用例规模与约定解析参考程序难度等级 问题描述 格式输入 无 格式输出 输出答案 评测用例规模与约定 无 解析 数字给的相当大所以我们不能直接给他暴力了,不然等很久都跑不出来。由题目我们可以得到让nLxWxH,所…

[leetcode]remove-duplicates-from-sorted-list

. - 力扣(LeetCode) 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 示例 1: 输入:head [1,1,2] 输出:[1,2]示例 2: 输入&…

Linux——线程同步与生产者消费者模型

目录 前言 一、线程同步 二、生产者消费者模型 三、条件变量 1.理解条件变量 2.条件变量接口 2.1 条件变量初始化与销毁 2.2 条件变量等待 2.3 条件变量唤醒等待 2.4 条件变量接口运用 2.5 条件变量进行抢票 3.条件变量的细节 四、基于BlockingQueue的生产者消费者…

SL4010 低压升压恒压芯片 2.7-24V输入 输出30V/10A 300W功率

SL4010是一款高效能、宽电压范围的低压升压恒压芯片,其卓越的性能和广泛的应用领域使其在市场上备受瞩目。该芯片支持2.7-24V的宽输入电压范围,能够提供稳定的30V/10A输出,最大输出功率高达300W,为各种电子设备提供稳定可靠的电源…