性能优化原则

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

性能优化

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…

支持向量机——SVM

SVM 是一种机器学习算法,它的全称是支持向量机(Support Vector Machine)。它主要用于解决二分类问题,即给定一组数据,将它们分为两类。SVM 的基本思想是在特征空间中寻找一个最优的超平面,使得两类数据在该…

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

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

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

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

[leetcode]longest-consecutive-sequence 最长连续序列

. - 力扣(LeetCode) 哈希表 思路和算法 我们考虑枚举数组中的每个数 xxx,考虑以其为起点,不断尝试匹配 x1,x2,⋯x1, x2, \cdotsx1,x2,⋯ 是否存在,假设最长匹配到了 xyxyxy,那么以 xxx 为起点的最长连续序…

虚幻引擎启动报错记录

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…

LightGBM+深度学习=推荐模型==点击率预估

目录 LightGBM(Light Gradient Boosting Machine) 决策树模型 离散化处理 LightGBM和深度学习

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

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

ORA-00257:archiver error.Connect internal only,until freed.

问题现象 使用navicat连接oracle时无法连接上去,提示这个错误 问题原因 归档日志占用空间满了,注意这里分为两个 硬盘空间不足了硬盘空间足够但是归档日志空间不够了 解决方案 针对第一种情况,拓展本地硬盘空间,或删除之前日…

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

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

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

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

单片机家电产品--OC门电路

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 单片机家电产品–OC门电路 前言 记录学习单片机家电产品内容 已转载记录为主 一、知识点 1OC门电路和OD门电路的区别 OC门电路和OD门电路的区别 OC门:三极管…

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

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

神经网络与深度学习(三)

文章目录 一、VGG-161.1结构组成1.2应用场景1.3简单例子 二、残差网络2.1非残差网络的缺陷2.2梯度消失原因2.3残差网络的优势2.4简单例子 三、常用数据集3.1MNIST3.2Fashion-MNIST数据集3.3CIFAR 10数据集3.4PASCAL VOC数据集3.5MS COCO数据集3.6ImageNet数据集与ILSVRC 一、VG…

基于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停止更新&…