性能优化原则

news/2024/5/18 14:26:03/文章来源:https://blog.csdn.net/qq_21087199/article/details/137600475

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

性能优化

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.luyixian.cn/news_show_1045542.aspx

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

相关文章

每日一题 — 最大连续 1 的个数III

解法一:暴力枚举 先定义left和right双指针,left先固定在起始位置,遍历right当值等于1的时候,直接跳过,等于0的时候,zero计数器加一当zero等于k的时候,就开始记录此时最大长度是多少然后left加一…

深度剖析:网络安全中的红蓝对抗策略

红蓝对抗 红蓝对抗服务方案 在蓝队服务中,作为攻击方将开展对目标资产的模拟入侵,寻找攻击路径,发现安全漏洞和隐患。除获取目标系统的关键信息(包括但不限于资产信息、重要业务数据、代码或管理员账号等)外&#x…

Python | 超前滞后分析

Nino SST Indices (Nino 12, 3, 3.4, 4; ONI and TNI) 有几个指标用于监测热带太平洋,所有这些指标都是基于海表温度(SST)异常在一个给定的区域的平均值。通常,异常是相对于30年的周期来计算的。厄尔尼诺3.4指数(Nio 3.4 index)和海洋厄尔尼诺指数(Ocea…

Chrome谷歌下载入口

​hello,我是小索奇 发现好多人说谷歌浏览器在哪里下载呀,哪里可以找到? 你可能会心想,一个浏览器你还不会下载啊? 还真是,有很多伙伴找不到下载入口,为什么呢? Bing进行搜索&am…

java程序 .exe启动nginx防止重复启动,已解决

java代码生成好的.exe启动nginx服务程序 根据nginx占用端口来解决nginx服务重复启动问题(下面代码了解代码逻辑后根据自己的业务需求修改即可) 代码: package org.example;import javax.swing.*; import java.awt.*; import java.io.*; …

C#/WPF 使用开源Wav2Lip做自己的数字人(无需安装环境)

实现效果 Speaker Wav2Lip概述 2020年,来自印度海德拉巴大学和英国巴斯大学的团队,在ACM MM2020发表了的一篇论文《A Lip Sync Expert Is All You Need for Speech to Lip Generation In The Wild 》,在文章中,他们提出一个叫做Wa…

ChatGPT 4.0报错 :“Hmm…something seems to have gone wrong.”

ChatGPT报错,GPT-3.5模型正常,GPT-4.0报错:“Hmm…something seems to have gone wrong.” 说明:嗯…好像出了什么问题。 原因: 部分用户在使用GPT-3.5模型时提问正常,GPT-4.0模型提问时,出现这…

Open CASCADE学习|求曲面的参数空间

在三维空间中,任意的曲面都可以通过特定的方法映射到一个二维参数平面上,从而对其进行详细的几何分析和处理。首先,我们需要从三维模型中提取出特定的曲面,这通常被称为“Face”。一个face可以被视为三维空间中的一个封闭区域&…

xss.pwnfunction-Ah That‘s Hawt

<svg/onloadalert%26%2340%3B1%26%2341%3B> <svg/>是一个自闭合形式 &#xff0c;当页面或元素加载完成时&#xff0c;onload 事件会被触发&#xff0c;从而可以执行相应的 JavaScript 函数

【日期】获取当天以及未来三天的日期和周几

// 获取当天以及未来三天的日期和周几getDates() {const today new Date();const dayOfWeek ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];const todayDate today.toDa…

专业测评:哪个平台提供大数据信用风险检测?

在贷款申请过程中&#xff0c;大数据信用评估变得越来越重要。许多人对此感到困惑&#xff0c;不清楚如何获取自己的大数据信用风险等级。本文将为您解答疑惑&#xff0c;介绍如何正确地查询和理解大数据信用报告。 市场上的大数据信用报告查询服务乱象 目前&#xff0c;市场上…

网工内推 | 安全运维、服务工程师,软考中级、CISP优先,六险一金

01 华成峰科技 招聘岗位&#xff1a;安全运维工程师 职责描述&#xff1a; 1、负责安全产品的运维管理&#xff0c;包括设备升级变更、策略配置优化、设备巡检等&#xff1b; 2、负责7*24小时安全监控与应急响应&#xff0c;包括态势感知日志监测、安全事件分析及处置等&#…

VMware vSphere虚拟化基础管理平台

VMware简介 VMware介绍 官网&#xff1a;https://www.vmware.com/cn.html VMware公司成立于1998年&#xff0c;2003年存储厂商EMC以6.35亿美元收购了VMware&#xff1b;2015年10月&#xff0c;戴尔宣布以670亿美元收购EMC。VMware公司在2018年全年收入79.2亿美元。 VMware主…

C++修炼之路之string模拟实现

目录 前言 一&#xff1a;构造函数析构函数拷贝构造函数 二&#xff1a;c_str size capacity operator operator[] 三&#xff1a;普通迭代器 const迭代器范围for 四&#xff1a;关系操作符重载 五&#xff1a;reserveresize 六&#xff1a;push_back …

【C++第三阶段】deque容器评委打分案例

以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 构造函数赋值操作大小操作插入删除数据存取排序评委评分案例描述 deque容器 双端数组&#xff0c;可以对头端插入删除操作。 如下图所示。 头部有插入删除操作&#xff0c;尾部亦然…

three.js尝试渲染gbl模型成功!(三)

参照教程&#xff1a;https://cloud.tencent.com/developer/article/2276766?areaSource102001.5&traceId88k805RaN_gYngNdKvALJ &#xff08;作者&#xff1a;九仞山&#xff09; 通过最近两天查three.js入门教程了解到 这玩应支持包括 .obj、.gltf等类型的模型结构。 g…

【微服务】------服务注册

在 微服务的基建工作 中提到过&#xff0c;在云原生、微服务时代&#xff0c;如果还是手动修改服务地址&#xff0c;是几乎不可完成的工作&#xff0c;需要一种机制完成自动上报和获取服务地址的支撑组件&#xff0c;可以保障服务的快速上线和下线&#xff0c;这就是服务注册/发…

vue vue3 手写 动态加载组件

效果展示 一、需求背景&#xff1a; # vue3 项目涉及很多图表加载、表格加载 #考虑手写一个动态加载组件 二、实现思路 通过一个加载状态变量&#xff0c;通过v-if判断&#xff0c;加载状态的变量等于哪一个&#xff0c;动态加载组件内部就显示的哪一块组件。 三、实现效果…

酷开科技 |酷开系统全视频化升级,让电视回归视频属性

随着消费升级浪潮的兴起&#xff0c;家庭互联网这一概念也在资本的注入下&#xff0c;成为了新风口。酷开系统全视频化升级&#xff0c;让电视回归视频属性&#xff0c;酷开系统在之前瀑布流板块设计的基础上&#xff0c;增加了视频流图文融合的并行界面&#xff0c;同时酷开系…

AWS入门实践-利用S3构建一个静态网站

使用Amazon S3托管静态网站是一个流行的选择&#xff0c;因为它简单、成本效益高&#xff0c;并且易于维护。静态网站由不含服务器端脚本的文件组成&#xff0c;如HTML、CSS和JavaScript文件。下面是使用S3托管静态网站的操作步骤&#xff1a; 如果大家没有AWS免费账号&#x…