性能优化原则

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

性能优化

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.mzph.cn/news/806270.shtml

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

相关文章

iPad手绘+Ai二合一课程,Procreate+Mj+SD零基础到精通(10节视频课)

课程内容: 1 系统课 AI辅助设计流-从零进阶轻松驾驭AI设计,mp4 2 商务沟通阶段 ChatGPT Midjourney-聊天机器人 项目调研资料收集 ,mp4 3_商务沟通阶段 ChatGPT_Midjourney-Midjourney基础 界面初识初步设置 .mp4 4_商务沟通阶段 ChatGPT_Midjourney-Midjourney…

康谋分享 | aiSim5 物理相机传感器模型验证方法(一)

摘要: aiSim5可以实时模拟复杂的传感器配置,在多GPU分布式渲支持的支持下,aiSim可以渲染20多个摄像头、10多个雷达和10多个激光雷达在同一环境下运行。aiSim5独有的实时渲染引擎能够满足对物理精确环境和天气模拟的所有要求,具有…

【MATLAB源码-第3期】基于MATLAB的256QAM误码率曲线,使用IQ调制解调,以及星座图展示。

1、算法描述 正交幅度调制(QAM,Quadrature Amplitude Modulation)是一种在两个正交载波上进行幅度调制的调制方式。这两个载波通常是相位差为90度(π/2)的正弦波,因此被称作正交载波。这种调制方式因此而得…

虚幻引擎启动报错记录

0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法:首先查看堆栈信息,我的项目启动是因为默认场景编译不过,进到编辑器配置文…

蓝桥杯真题代码记录(直线

目录 1. 题目:2. 我的代码:小结: 1. 题目: 本题为填空题,只需要算出结果后,在代码中使用输出语句将所填结果输出即可。 在平面直角坐标系中,两点可以确定一条直线。如果有多点在一条直线上&…

新零售SaaS架构:客户管理系统架构设计(万字图文总结)

什么是客户管理系统? 客户管理系统,也称为CRM(Customer Relationship Management),主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理,吸引和留存客户,实现缩短销售周…

CentOS上使用cgroup限制进程使用内存

安装cgroup 要使用cgroup首先需要系统支持,需要安装两个rpm包 yum install libcgroup libcgroup-tools 创建限制内存的cgroup组 cgroup组需要在/sys/fs/cgroup/memory目录下创建,我们创建一个限制进程内存大小为10M的cgroup组,这个组中内存…

CUDA 12.4文档2 内核线程架构

本博客参考官方文档进行介绍,全网仅此一家进行中文翻译,走过路过不要错过。 官方网址:https://docs.nvidia.com/cuda/cuda-c-programming-guide/ 本文档分成多个博客进行介绍,在本人专栏中含有所有内容: https://bl…

C++设计模式:单例模式(十)

1、单例设计模式 单例设计模式,使用的频率比较高,整个项目中某个特殊的类对象只能创建一个 并且该类只对外暴露一个public方法用来获得这个对象。 单例设计模式又分懒汉式和饿汉式,同时对于懒汉式在多线程并发的情况下存在线程安全问题 饿汉…

【优选算法专栏】专题十三:队列+宽搜(一)

本专栏内容为:算法学习专栏,分为优选算法专栏,贪心算法专栏,动态规划专栏以及递归,搜索与回溯算法专栏四部分。 通过本专栏的深入学习,你可以了解并掌握算法。 💓博主csdn个人主页:小…

智能边缘自动化:HDMI接口钡铼ARM工业电脑实践案例

一款具备HDMI接口的高性能ARM工业计算机应运而生,为实现在工业4.0时代的关键数据实时处理与可视化管理提供了强有力的硬件支撑。这款计算机依托其独特的边缘计算能力,完美解决了工业环境中大规模数据传输至云端的高延迟问题,成功实现了OT&…

Asp .Net Core 系列:集成 Refit 和 RestEase 声明式 HTTP 客户端库

背景 .NET 中 有没有类似 Java 中 Feign 这样的框架?经过查找和实验,发现 在 .NET 平台上,虽然没有直接的 Feign 框架的端口,但是有一些类似的框架和库,它们提供了类似的功能和设计理念。下面是一些在 .NET 中用于声明…

基于springboot实现宠物咖啡馆平台管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现宠物咖啡馆平台演示 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了基于Spring Boot的宠物咖啡馆平台的设计与实现的开发全过程。通过分析基于Spring Boot的宠物咖啡馆平台的设计与实现管理…

ExoPlayer停止更新,建议升级到AndroidX Media3

1. 大家常用的ExoPlayer地址:GitHub - google/ExoPlayer: An extensible media player for Android ExoPlayer是谷歌官方提供的媒体播放库,大家在开发项目中经常使用ExoPlayer播放音视频,谷歌官方已经明确表示该库在2024-04-03停止更新&…

【图论】详解链式前向星存图法+遍历法

细说链式前向星存图法 首先要明白,链式前向星的原理是利用存边来进行模拟图。 推荐左神的视频–建图、链式前向星、拓扑排序 比方说有这样一张图,我们用链式前向星来进行模拟时,可以将每一条边都进行编号,其中,红色的…

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书)

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书) 前言 现在https大行其道, ssl又是必不可少的环节. 今天就教大家用开源工具openssl自己生成ssl证书的文件和私钥 环境 MAC电脑 openssl工具自行搜索安装 正文 1、终端执行命令 //生成rsa私钥&…

自动化 单元测试Test

XCTest测试框架(单元测试XCTests、性能测试XCPPerformanceTests、用户界面测试XCUItests) 单元测试XCTests:测试应用中事件或逻辑是否预期工作。 用户界面测试XCUItests:测试用户与应用的UI交互(如点击按钮、滑动屏幕)。 性能测试XCPPerformanceTests&am…

云手机解决海外社媒运营的诸多挑战

随着海外社交媒体运营的兴起,如何有效管理多个账户成为了一项挑战。云手机作为一种新兴的解决方案,为海外社媒运营带来了前所未有的便利。 云手机的基本原理是基于云计算和虚拟化技术,允许用户在物理手机之外创建和使用多个虚拟手机。这种创新…

校园论坛系统

文章目录 校园论坛系统一、项目演示二、项目介绍三、10000字论文参考四、系统部分功能截图五、部分代码展示六、底部获取项目和10000字论文参考(9.9¥) 校园论坛系统 一、项目演示 校园论坛系统 二、项目介绍 基于springbootvue的前后端分离…

SpringBoot3 + uniapp 对接 阿里云0SS 实现上传图片视频到 0SS 以及 0SS 里删除图片视频的操作(最新)

SpringBoot3 uniapp 对接 阿里云0SS 实现上传图片视频到 0SS 以及 0SS 里删除图片视频的操作 最终效果图uniapp 的源码UpLoadFile.vuedeleteOssFile.jshttp.js SpringBoot3 的源码FileUploadController.javaAliOssUtil.java 最终效果图 uniapp 的源码 UpLoadFile.vue <tem…