解决前端性能问题：如何优化大量数据渲染和复杂交互？


✨✨祝屏幕前的小伙伴们每天都有好运相伴左右，一定要天天开心！✨✨ 
🎈🎈作者主页： 喔的嘛呀🎈🎈

目录

引言

一、分页加载数据

二、虚拟滚动

三、懒加载

四、数据缓存

五、减少重绘和回流

六、优化图片和资源：

七、合并压缩文件

八、使用Web Workers 

引言

在前端开发中，遇到需要渲染大量数据或者实现复杂交互的情况是很常见的。这些情况可能会导致页面加载缓慢或者交互体验不佳。下面是一些优化策略，可以帮助你解决这类问题：

一、分页加载数据

当需要展示大量数据时，将数据分页加载是一种常见的优化方法，可以减少首次加载时的数据量，提高页面加载速度和用户体验。以下是一个简单的示例代码，演示了如何使用JavaScript实现分页加载数据的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页加载数据示例</title>
</head>
<body>
<div id="data-container"></div>
<button id="load-more-btn">加载更多</button>

<script>
const dataContainer = document.getElementById('data-container');
const loadMoreBtn = document.getElementById('load-more-btn');
let currentPage = 1;
const pageSize = 10; // 每页数据量

// 模拟获取数据的函数，返回一个Promise对象
function fetchData(page) {
    return new Promise((resolve, reject) => {
        // 模拟异步请求数据
        setTimeout(() => {
            const data = [];
            for (let i = 0; i < pageSize; i++) {
                data.push(`Item ${(page - 1) * pageSize + i + 1}`);
            }
            resolve(data);
        }, 500); // 模拟延迟
    });
}

// 加载更多数据的函数
async function loadMore() {
    const data = await fetchData(currentPage);
    if (data.length > 0) {
        // 渲染数据到页面
        data.forEach(item => {
            const itemElement = document.createElement('div');
            itemElement.textContent = item;
            dataContainer.appendChild(itemElement);
        });
        currentPage++;
    } else {
        loadMoreBtn.disabled = true; // 没有更多数据可加载时禁用按钮
    }
}

// 初始化页面，加载第一页数据
loadMore();

// 点击按钮加载更多数据
loadMoreBtn.addEventListener('click', loadMore);
</script>
</body>
</html>

在这个示例中，我们使用了一个fetchData函数来模拟异步请求数据的过程，每次请求返回一页数据。然后使用loadMore函数来加载更多数据，并将数据渲染到页面上。点击按钮时，会触发加载更多数据的操作，直到没有更多数据可加载为止。这样就实现了简单的分页加载数据的功能。

二、虚拟滚动

虚拟滚动是一种优化技术，用于处理大量数据的列表，在滚动时只渲染可见区域的数据，而不是渲染整个列表，从而提高页面的渲染效率。下面是一个使用JavaScript实现虚拟滚动的示例代码： 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟滚动示例</title>
<style>
#container {
  height: 300px; /* 可视区域高度 */
  overflow-y: scroll; /* 垂直滚动条 */
  border: 1px solid #ccc;
}

.item {
  height: 50px; /* 每项高度 */
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}
</style>
</head>
<body>
<div id="container" onscroll="handleScroll()">
  <div id="content" style="height: 5000px;"></div> <!-- 模拟大量数据 -->
</div>

<script>
const container = document.getElementById('container');
const content = document.getElementById('content');
const itemHeight = 50; // 每项高度
let visibleItemCount = Math.ceil(container.clientHeight / itemHeight); // 可见项数量
let start = 0; // 可见区域的起始索引

// 更新可见区域的内容
function updateVisibleItems() {
  start = Math.floor(container.scrollTop / itemHeight);
  content.style.marginTop = start * itemHeight + 'px'; // 设置内容的marginTop
  content.style.marginBottom = (content.scrollHeight - (start + visibleItemCount) * itemHeight) + 'px'; // 设置内容的marginBottom
}

// 滚动事件处理函数
function handleScroll() {
  updateVisibleItems();
}

// 初始渲染可见区域的内容
updateVisibleItems();
</script>
</body>
</html>

在这个示例中，我们通过设置container元素的height和overflow-y: scroll样式，创建了一个固定高度的可滚动区域。列表的实际内容由content元素表示，其高度为所有项的总高度。然后通过计算可见区域的起始索引start，并设置content元素的marginTop和marginBottom，实现了虚拟滚动的效果。只有可见区域的内容会被实际渲染，从而减少了不可见区域的渲染，提高了页面的渲染效率。

三、懒加载

懒加载是一种常见的优化技术，用于延迟加载页面中的图片、视频等资源，只有当它们进入用户的可视区域时才加载，从而减少了页面首次加载时的资源消耗，提高了页面的加载速度。下面是一个使用JavaScript实现图片懒加载的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载示例</title>
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>
<div id="container">
  <img data-src="image1.jpg" alt="Image 1"> <!-- 设置data-src属性存放真实图片地址 -->
  <img data-src="image2.jpg" alt="Image 2">
  <img data-src="image3.jpg" alt="Image 3">
  <img data-src="image4.jpg" alt="Image 4">
  <img data-src="image5.jpg" alt="Image 5">
</div>

<script>
function lazyLoadImages() {
  const images = document.querySelectorAll('img');
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom >= 0 && !img.src) {
      img.src = img.getAttribute('data-src'); // 加载真实图片
    }
  });
}

function handleScroll() {
  lazyLoadImages();
}

// 监听滚动事件
window.addEventListener('scroll', handleScroll);

// 初始加载可视区域内的图片
lazyLoadImages();
</script>
</body>
</html>

在这个示例中，我们将真实的图片地址存放在data-src属性中，而src属性为空。当图片进入用户的可视区域时，通过getBoundingClientRect方法获取图片相对于视口的位置，如果图片的顶部已经进入可视区域且底部未超出可视区域，则将data-src属性的值赋给src属性，从而实现图片的懒加载。这样可以减少首次加载时对图片资源的请求，提高页面加载速度。

四、数据缓存

据缓存是一种常见的优化技术，可以减少重复请求，提高数据访问速度。下面是一个简单的示例代码，演示了如何使用JavaScript实现数据缓存的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据缓存示例</title>
</head>
<body>
<button id="fetch-data-btn">获取数据</button>
<div id="data-container"></div>

<script>
const dataContainer = document.getElementById('data-container');
const fetchDataBtn = document.getElementById('fetch-data-btn');
let cachedData = null; // 缓存数据

// 模拟获取数据的函数，返回一个Promise对象
function fetchData() {
    return new Promise((resolve, reject) => {
        // 模拟异步请求数据
        setTimeout(() => {
            const data = ['Data 1', 'Data 2', 'Data 3'];
            resolve(data);
        }, 500); // 模拟延迟
    });
}

// 加载数据的函数
async function loadData() {
    if (!cachedData) {
        cachedData = await fetchData(); // 如果缓存数据为空，则从服务器获取数据
    }
    renderData(cachedData);
}

// 渲染数据到页面
function renderData(data) {
    dataContainer.innerHTML = '';
    data.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.textContent = item;
        dataContainer.appendChild(itemElement);
    });
}

// 点击按钮加载数据
fetchDataBtn.addEventListener('click', loadData);

// 初始化页面，首次加载数据
loadData();
</script>
</body>
</html>

五、减少重绘和回流

减少重绘和回流是优化页面性能的重要策略之一。重绘（Repaint）是指重新绘制元素的外观而不改变其大小和位置，而回流（Reflow）是指重新计算元素的大小和位置，会导致整个页面布局的重新排列。这些操作都会消耗大量的计算资源，影响页面的性能。以下是一些减少重绘和回流的方法：

  1. 使用transform和opacity代替top和left等属性：transform和opacity不会触发回流，可以用来移动元素或实现淡入淡出效果。

  2. 避免频繁操作样式：尽量一次性修改多个样式，而不是分开多次修改，可以减少重绘和回流的次数。

  3. 使用文档片段（DocumentFragment）：在DOM操作时，可以先将要操作的元素添加到文档片段中，然后再一次性将文档片段添加到页面中，减少了多次操作DOM元素导致的重绘和回流。

  4. 批量修改样式：可以使用classList来添加、移除或切换多个类，而不是直接操作元素的className，这样可以减少重绘和回流。

  5. 避免强制同步布局（Forced Synchronous Layouts）：在获取某些元素的布局信息（如宽高、位置等）时，会触发回流，可以通过getComputedStyle获取样式而不是直接访问offsetWidth、offsetHeight等属性来避免。

下面是一个简单的示例代码，演示了如何减少重绘和回流的操作：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>减少重绘和回流示例</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.3s ease; /* 添加过渡效果 */
}
</style>
</head>
<body>
<button onclick="moveBox()">移动盒子</button>
<div class="box"></div>

<script>
const box = document.querySelector('.box');

function moveBox() {
  // 避免直接修改top和left属性，改为使用transform
  box.style.transform = 'translateX(100px)';
}
</script>
</body>
</html>

在这个示例中，通过点击按钮移动盒子，使用transform属性而不是直接修改top和left属性，可以减少重绘和回流的次数，提高页面的性能。

六、优化图片和资源：

优化图片和其他资源是提高页面加载速度的重要步骤之一。通过压缩图片、使用适当的图片格式以及懒加载等方法，可以减少资源加载时间，提高用户体验。以下是一些优化图片和资源的常用方法：

  1. 压缩图片：使用图片压缩工具（如TinyPNG、ImageOptim等）对图片进行压缩，减小图片文件大小，加快加载速度。

  2. 使用适当的图片格式：根据图片内容选择适当的图片格式，如JPEG、PNG、WebP等。JPEG适用于照片和渐变色图片，PNG适用于图标和透明图片，WebP是一种现代的图像格式，支持有损和无损压缩，通常可以取得更好的压缩效果。

  3. 懒加载图片：对于页面中的图片，可以使用懒加载技术，只有当图片进入用户的可视区域时才加载，减少首次加载时的资源消耗。

  4. 使用CSS Sprites：将多个小图标合并成一个图片文件，并通过CSS的background-position属性来显示不同的图标，减少HTTP请求次数，提高加载速度。

  5. 延迟加载非关键资源：对于一些非关键的资源（如广告、统计代码等），可以延迟加载，等页面主要内容加载完毕再加载这些资源，提高页面加载速度。

  6. 使用CDN加速：使用内容分发网络（CDN）来加速图片和其他静态资源的加载，让用户从离他们更近的服务器获取资源，减少网络延迟。

下面是一个简单的示例代码，演示了如何使用懒加载技术加载图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>懒加载图片示例</title>
<style>
img {
  width: 100%;
  height: auto;
}
.placeholder {
  width: 100%;
  height: 200px; /* 设置一个占位高度，避免图片加载时页面布局抖动 */
  background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="container">
  <div class="placeholder"></div>
  <img data-src="image.jpg" alt="Image">
</div>

<script>
function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  images.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < window.innerHeight && rect.bottom >= 0) {
      img.src = img.getAttribute('data-src'); // 加载真实图片
      img.removeAttribute('data-src');
    }
  });
}

function handleScroll() {
  lazyLoadImages();
}

// 监听滚动事件
window.addEventListener('scroll', handleScroll);

// 初始加载可视区域内的图片
lazyLoadImages();
</script>
</body>
</html>

在这个示例中，我们将真实的图片地址存放在data-src属性中，而src属性为空。当图片进入用户的可视区域时，通过getBoundingClientRect方法获取图片相对于视口的位置，如果图片的顶部已经进入可视区域且底部未超出可视区域，则将data-src属性的值赋给src属性，从而实现图片的懒加载。这样可以减少首次加载时对图片资源的请求，提高页面加载速度。

七、合并压缩文件

合并和压缩CSS和JavaScript文件是优化页面加载速度的有效方法之一。合并文件可以减少HTTP请求次数，而压缩文件可以减小文件大小，从而提高文件加载速度。以下是一些常用的工具和技术来合并和压缩CSS和JavaScript文件：

  1. 使用构建工具：使用构建工具如Webpack、Gulp或Grunt等，可以方便地将多个CSS和JavaScript文件合并为一个文件，并对文件进行压缩处理。

  2. CSS压缩：可以使用工具如cssnano、CleanCSS等来对CSS文件进行压缩，去除空格、注释和不必要的代码，减小文件大小。

  3. JavaScript压缩：可以使用工具如UglifyJS、Closure Compiler等来对JavaScript文件进行压缩，去除空格、注释和不必要的代码，减小文件大小。

  4. 使用CDN：将合并和压缩后的文件托管到内容分发网络（CDN）上，可以加速文件的加载速度，提高用户访问网站的体验。

下面是一个简单的示例代码，演示了如何使用Gulp来合并和压缩CSS和JavaScript文件：

首先，安装Gulp及相关插件：

npm install gulp gulp-concat gulp-uglify --save-dev

然后，创建一个gulpfile.js文件，配置Gulp任务：

const gulp = require('gulp');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// 合并压缩JavaScript文件
gulp.task('scripts', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// 默认任务
gulp.task('default', gulp.series('scripts'));

在上面的示例中，我们定义了一个scripts任务，用于合并和压缩src/js目录下的所有JavaScript文件，并将结果保存为all.min.js文件到dist/js目录中。然后通过运行gulp命令来执行该任务。

需要注意的是，合并和压缩文件可能会影响代码的可读性和调试性，因此在生产环境中使用这些优化方法时，应该保留源文件的备份以便于调试。

八、使用Web Workers 

使用 Web Workers 可以在浏览器中运行脚本，这些脚本运行在与主线程分离的线程中。这样可以避免在主线程中执行复杂的计算任务，从而提高页面的响应速度。以下是一个简单的示例代码，演示了如何使用 Web Workers 来执行一个计算任务：

首先，创建一个名为 worker.js 的文件，内容如下：

// worker.js
self.addEventListener('message', function(e) {
  // 接收主线程传递过来的数据
  const data = e.data;

  // 模拟一个耗时的计算任务
  let result = 0;
  for (let i = 0; i < data; i++) {
    result += i;
  }

  // 向主线程发送计算结果
  self.postMessage(result);
});

然后，在主线程中，可以这样使用 Web Workers：

// main.js
let resultElement = document.getElementById('result');
let calculateBtn = document.getElementById('calculate');

// 创建一个新的 Web Worker
let worker = new Worker('worker.js');

// 监听 Web Worker 返回的消息
worker.addEventListener('message', function(e) {
  resultElement.textContent = e.data;
});

// 监听计算按钮的点击事件
calculateBtn.addEventListener('click', function() {
  let number = document.getElementById('number').value;

  // 向 Web Worker 发送数据
  worker.postMessage(number);
});

 在这个示例中，当用户点击计算按钮时，主线程将用户输入的数据发送给 Web Worker，在 Web Worker 中执行耗时的计算任务，并将结果返回给主线程，最终在页面上显示出来。这样可以避免在主线程中执行耗时的计算任务，提高页面的响应速度。

通过以上优化策略，可以有效地提高页面的加载速度和交互体验，为用户提供更好的使用体验

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

is not valid JSON at JSON.parse

is not valid JSON at JSON.parse

在后台读取一个文件里的JSON数据&#xff0c;转换成字符串返回给前端&#xff0c;前端使用JSON.parse转换JSON报错。在将JSON校验和压缩后发现前端还是转换失败。在返回结果的时候可以看见一个小红点 最后排查&#xff0c;不带BOM的识别是Java遗留的一个bug。 解决方案&#…
阅读更多...
OSI 的七层模型

OSI 的七层模型

OSI七层模型 一般指开放系统 互连参考模型 (Open System Interconnect 简称OSI) 是国际标准化组 织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式互连信息系 统提供了一种功能结构的框架。 应用层&#xff1a;各种应用程序协议&#xff0c;比…
阅读更多...
第八篇：预测受众（Predictive audience）技术是如何赋能数字化营销生态的？- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

第八篇：预测受众（Predictive audience）技术是如何赋能数字化营销生态的？- 我为什么要翻译介绍美国人工智能科技巨头IAB公司

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒…
阅读更多...
CSS字体样式的使用，先收藏了

CSS字体样式的使用，先收藏了

CSS 篇 link 与 import 的区别 link 是 HTML 方式&#xff0c; import 是CSS方式link 最大限度支持并行下载&#xff0c; import 过多嵌套导致串行下载&#xff0c;出现 FOUC (文档样式短暂失效)link 可以通过 rel"alternate stylesheet" 指定候选样式浏览器对 lin…
阅读更多...
spark 实验二 RDD编程初级实践

spark 实验二 RDD编程初级实践

目录 一. pyspark交互式编程示例&#xff08;学生选课成绩统计&#xff09; 该系总共有多少学生&#xff1b; 该系DataBase课程共有多少人选修&#xff1b; 各门课程的平均分是多少&#xff1b; 使用累加器计算共有多少人选了DataBase这门课。 二.编写独立应用程序实现数…
阅读更多...
【深圳五兴科技】Java后端面经

【深圳五兴科技】Java后端面经

本文目录 写在前面试题总览1、java集合2、创建线程的方式3、对spring的理解4、Spring Boot 和传统 Spring 框架的一些区别5、springboot如何解决循环依赖6、对mybatis的理解7、缓存三兄弟8、接口响应慢的处理思路9、http的状态码 写在前面 关于这个专栏&#xff1a; 本专栏记录…
阅读更多...
微信小程序云开发教程——墨刀原型工具入门（页面交互+交互案例教程）

微信小程序云开发教程——墨刀原型工具入门（页面交互+交互案例教程）

引言 作为一个小白&#xff0c;小北要怎么在短时间内快速学会微信小程序原型设计&#xff1f; “时间紧&#xff0c;任务重”&#xff0c;这意味着学习时必须把握微信小程序原型设计中的重点、难点&#xff0c;而非面面俱到。 要在短时间内理解、掌握一个工具的使用&#xf…
阅读更多...
AlibabaCloud微服务：Linux 部署 Sentinel 流量控制

AlibabaCloud微服务：Linux 部署 Sentinel 流量控制

目录 一、实验 1.环境 2.Linux 部署 Sentinel 3. 微服务接入Sentinel配置 二、 问题 1.Linux本地启动Sentinel控制台 2.JDBC连接失败 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统软件版本IP备注Linuxopenjdk 1.8.0192.168.204.200 maven3.5.0nac…
阅读更多...
基于QGIS的研究区域遥感影像裁切下载方法-以岳麓区为例

基于QGIS的研究区域遥感影像裁切下载方法-以岳麓区为例

目录 前言 一、数据说明 1、遥感影像 2、矢量范围 二、按矢量范围导出 1、第一步、导出影像 2、第二步、设置输出格式 3、设置裁切范围 4、设置分辨率 三、按矢量范围掩膜 1、第一步、打开裁剪工具 2、第二步、参数设置 ​编辑 3、执行掩膜 四、webgis支持 1、生成运行…
阅读更多...
【Redis】Redis持久化模式AOF

【Redis】Redis持久化模式AOF

目录 引言 AOF持久化模式​编辑​编辑 AOF与RDB的混合持久化(4.x后的新特性) AOF的优缺点 修复破损aof文件 到底用RDB还是AOF 引言 AOF就相当于上面的日志形式。是追加式备份。所有发生的写操作&#xff0c;新增啊&#xff0c;修改啊&#xff0c;删除啊&#xff0c;这些命…
阅读更多...
AI大模型与小模型之间的“脱胎”与“反哺”（第四篇）

AI大模型与小模型之间的“脱胎”与“反哺”（第四篇）

76. **动态领域适应网络&#xff08;Dynamic Domain Adaptation Networks, DDANs&#xff09;**&#xff1a; 创建能动态调整自身参数以适应新行业特性的网络结构&#xff0c;使得AI大模型能在不完全重新训练的情况下快速适应新的业务场景和环境变化。 77. **元学习中的元策略优…
阅读更多...
SoraAI优先体验资格注册教程

SoraAI优先体验资格注册教程

SoraA1视频工具优先体验资格申请 申请网址&#xff1a;https://openai.com/form/red-teaming-network 申请步骤&#xff1a; 填写基础信息 请使用英文根据内容填写以下内容&#xff0c;名、姓、电子邮件、居住国家、组织隶属关系(如果有)、教育水平 、学位&#xff08;哪个领…
阅读更多...
【数据结构】顺序表+链表

【数据结构】顺序表+链表

目录 1.顺序表 1.1初始化顺序表 1.2销毁顺序表 1.3检查容量并扩容 1.4把某个元素插入到下标为pos的位置 1.5头插和尾插 1.6删除下标为pos的元素 1.7头删和尾删 2.顺序表的问题及思考 3.链表 3.1链表的访问 3.2链表的增删查改 1.顺序表 顺序表的本质其实就是一个数组…
阅读更多...
整合力-整合思维模型和领导力

整合力-整合思维模型和领导力

整合力和领导力是组织成功的两大关键因素。在当今复杂多变的商业环境中&#xff0c;整合力和领导力的结合对于推动组织发展至关重要。本文将探讨整合力和领导力的概念、重要性以及如何有效整合二者以促进组织的成功发展。 ### 整合力的重要性 整合力指的是组织内部各个部门、…
阅读更多...
【3GPP】【核心网】【5G】5G核心网协议解析(三)（超详细）

【3GPP】【核心网】【5G】5G核心网协议解析(三)（超详细）

5G协议 NAS协议消息&#xff1a;UE 与 AMF 之间 UE通过5G NAS协议与AMF建立起安全的信令连接&#xff0c;进行用户数据传输和网络服务请求等操作 消息格式&#xff1a;NAS-PDU ------------------------- | Header | NAS Message(s) | ------------------------- Header…
阅读更多...
毕业之前准备材料

毕业之前准备材料

文章目录 说明第一波截止时间待办事情&#xff08;共计2&#xff09;1、读书报告审核&#xff08;吴海梅老师审核&#xff09;2、课程学分审核&#xff08;吴海梅老师审核&#xff0c;曹主216办公室&#xff09; 第二波外审截止时间待办事情&#xff08;王移花老师审核&#xf…
阅读更多...
Linux下du命令和df命令的使用

Linux下du命令和df命令的使用

du命令作用是估计文件系统的磁盘已使用量&#xff0c;常用于查看文件或目录所占磁盘容量。df命令是统计磁盘使用情况&#xff0c;可以用来查看磁盘已被使用多少空间和还剩余多少空间。du命令语法du [选项] [文件或目录名称]参数&#xff1a;-a&#xff1a;--all&#xff0c; 列…
阅读更多...
第七篇：人工智能与机器学习技术VS量测（Measurement）- 我为什么要翻译介绍美国人工智能科技巨头IAB公司 - 它是如何赋能数字化营销生态的？

第七篇：人工智能与机器学习技术VS量测（Measurement）- 我为什么要翻译介绍美国人工智能科技巨头IAB公司 - 它是如何赋能数字化营销生态的？

IAB平台&#xff0c;使命和功能 IAB成立于1996年&#xff0c;总部位于纽约市。 作为美国的人工智能科技巨头社会媒体和营销专业平台公司&#xff0c;互动广告局&#xff08;IAB- the Interactive Advertising Bureau&#xff09;自1996年成立以来&#xff0c;先后为700多家媒…
阅读更多...
（每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理 第13章 项目资源管理（四）

（每日持续更新）信息系统项目管理（第四版）（高级项目管理）考试重点整理 第13章 项目资源管理（四）

项目建议与立项申请、初步可行性研究、详细可行性研究、评估与决策是项目投资前使其的四个阶段。在实际工作中&#xff0c;初步可行性研究和详细可行性研究可以依据项目的规模和繁简程度合二为一&#xff0c;但详细可行性研究是不可缺少的。升级改造项目制作初步和详细研究&…
阅读更多...
电脑提示“由于仅部分匹配或匹配不明确，因此无法迁移设备”怎么办？

电脑提示“由于仅部分匹配或匹配不明确，因此无法迁移设备”怎么办？

“由于仅部分匹配或匹配不明确&#xff0c;因此无法迁移设备”错误可能会在将较旧的系统更新到较新的系统版本或者安装了双系统之后出现&#xff0c;此外&#xff0c;驱动程序不兼容、系统文件损坏、计算机接口故障、系统不支持出现错误的外接设备等也可能导致该错误出现。了解…
阅读更多...
最新文章

Copyright @ 2022~2023