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

news2024/11/27 6:18:00

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

目录

引言

一、分页加载数据

二、虚拟滚动

三、懒加载

四、数据缓存

五、减少重绘和回流

六、优化图片和资源：

七、合并压缩文件

八、使用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 中执行耗时的计算任务，并将结果返回给主线程，最终在页面上显示出来。这样可以避免在主线程中执行耗时的计算任务，提高页面的响应速度。

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

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

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

相关文章

docker 安装rabbitmq并配置hyperf使用

docker 安装rabbitmq并配置hyperf使用

这里我想完成的是 制作消息&#xff08;多个协程制造&#xff09;——》推送到rabbitmq——》订阅消息队列——》消费消息&#xff08;ws协程客户端【一次消费多条】/ws前端&#xff09; 利用 WebSocket 协议让客户端和服务器端保持有状态的长链接&#xff0c;保存链接上来的客…
阅读更多...
Doris——纵腾集团流批一体数仓架构

Doris——纵腾集团流批一体数仓架构

目录 前言 一、早期架构 二、架构选型 三、新数据架构 3.1 数据中台 3.2 数仓建模 3.3 数据导入 四、实践经验 4.1 准备阶段 4.2 验证阶段 4.3 压测阶段 4.4 上线阶段 4.5 宣导阶段 4.6 运行阶段 4.6.1 Tablet规范问题 4.6.2 集群读写优化 五、总结收益 六…
阅读更多...
Scala 之舞：林浩然与杨凌芸的 IDEA 冒险

Scala 之舞：林浩然与杨凌芸的 IDEA 冒险

Scala 之舞&#xff1a;林浩然与杨凌芸的 IDEA 冒险 The Dance of Scala: The IDEA Adventure of Lin Haoran and Yang Lingyun 在那个阳光明媚的日子里&#xff0c;林浩然如同一位英勇的探险家&#xff0c;踏入了 Scala 的 IntelliJ IDEA 开发环境的奇妙领域&#xff0c;他带着…
阅读更多...
返回两个数组中每个对应位置的两个元素的最小值np.fmin()

返回两个数组中每个对应位置的两个元素的最小值np.fmin()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 返回两个数组中 每个对应位置的 两个元素的最小值 np.fmin() 选择题 以下代码输出的结果是&#xff1f; import numpy as np a1 [1,np.nan,3] a2 [3,2,1] print("【显示】a1",a1)…
阅读更多...
Vue3：OptionsAPI 与 CompositionAPI的比较

Vue3：OptionsAPI 与 CompositionAPI的比较

1、Vue2 Vue2的API设计是Options&#xff08;配置&#xff09;风格的。 Options API 的弊端 Options类型的 API&#xff0c;数据、方法、计算属性等&#xff0c;是分散在&#xff1a;data、methods、computed中的&#xff0c;若想新增或者修改一个需求&#xff0c;就需要分别…
阅读更多...
C#高级：Winform桌面开发中DataGridView的详解

C#高级：Winform桌面开发中DataGridView的详解

一、每条数据增加一个按钮&#xff0c;点击输出对应实体 请先确保正确添加实体的名称和文本&#xff1a; private void button6_Click(object sender, EventArgs e) {//SQL查询到数据&#xff0c;存于list中List<InforMessage> list bll.QueryInforMessage();//含有字段…
阅读更多...
2023年全国职业院校技能大赛网络系统管理网络模块（SMP+）

2023年全国职业院校技能大赛网络系统管理网络模块（SMP+）

SMP+配置：
阅读更多...
OpenCV学习笔记（一）——Anaconda下载和OpenCV的下载

OpenCV学习笔记（一）——Anaconda下载和OpenCV的下载

OpenCV是图象识别中有巨大的应用场景&#xff0c;本篇文章以Python为基础。当初学OpenCV的时候&#xff0c;推使用在Anaconda编写代码&#xff0c;原因比较方便&#xff0c;下面我们对于Anaconda的下载过程进行演示。 Anaconda的下载 首先打开官网www.anaconda.com/download找…
阅读更多...
Linux开发板移植rz、sz指令实现串口传输文件

Linux开发板移植rz、sz指令实现串口传输文件

一、开发环境 实现开发板和电脑通过串口来收发互传文件。 开发板&#xff1a;NUC980开发板 环境&#xff1a;Ubuntu 22.04.3 LTS 64-bit lrzsz的源码包:例如 lrzsz-0.12.20.tar.gz&#xff0c;下载地址https://ohse.de/uwe/software/lrzsz.html 二、移植步骤 在开发板上移植…
阅读更多...
RabbitMQ（SpringAMQP）

RabbitMQ（SpringAMQP）

一.SpringAMQP Spring的官方基于RabbitMQ提供了一套消息收发的模板工具&#xff1a;SpringAMQP。并且基于SpringBoot对其实现了自动装配 SpringAMQP官方地址:SpringAMQP SpringAMQP提供的功能: 自动声明队列、交换机及其绑定关系 基于注解的监听器模式&#xff0c;异步接收…
阅读更多...
UBOOT和LINUX 调试等级设置

UBOOT和LINUX 调试等级设置

比较好的网页 UBOOT LINUX 设置相关 方法1&#xff1a; echo 5 > /proc/sys/kernel/printk 缺点&#xff1a;方法1无法修改在内核启动时的输出信息 方法2&#xff1a; 通过uboot的环境变量bootargs传递打印级别的参数 set bootargs root/dev/nfs init/linuxrc nfsroot19…
阅读更多...
TQTT X310 软件无线电设备的FLASH固件更新方法

TQTT X310 软件无线电设备的FLASH固件更新方法

TQTT X310 除了PCIE口全部兼容USRP 官方的X310&#xff0c;并配备两块UBX160射频子板以及GPSDO。TQTT X310可以直接使用官方的固件&#xff0c;但是不支持官方的固件升级命令。这篇BLOG提供烧写刷新FLASH的方法。 1&#xff0c;使用的是WINDOWS系统。首先给X310接入电源并开机…
阅读更多...
MongoDB获评2023年Gartner®云数据库管理系统“领导者”

MongoDB获评2023年Gartner®云数据库管理系统“领导者”

MongoDB 很荣幸在《2023 年 Gartner 云数据库管理系统 (CDBMS) 魔力象限》报告中被评为领导者。我们相信这一成就让 MongoDB 成为唯一一家连续两年斩获“领导者”称号的纯应用程序数据库服务提供商。 社区及开发者数据平台用户的需求一向是 MongoDB 关注的重点&#xff0c;而这…
阅读更多...
音视频开发之旅——音频基础概念、交叉编译原理和实践（LAME的交叉编译）（Android）

音视频开发之旅——音频基础概念、交叉编译原理和实践（LAME的交叉编译）（Android）

本文主要讲解的是音频基础概念、交叉编译原理和实践&#xff08;LAME的交叉编译&#xff09;&#xff0c;是基于Android平台&#xff0c;示例代码如下所示&#xff1a; AndroidAudioDemo 音频基础概念 在进行音频开发的之前&#xff0c;了解声学的基础还是很有必要的。 声音…
阅读更多...
Redis之事务（详细解析）

Redis之事务（详细解析）

请直接看原文:不能回滚的Redis事务还能用吗 - 知乎 (zhihu.com) ------------------------------------------------------------------------------------------------------------------------------ 1、Redis事务的概念&#xff1a; Redis 事务的本质是一组命令的集合。…
阅读更多...
HCIA-Datacom题库（自己整理分类的）_38_IPv6多选【20道题】

HCIA-Datacom题库（自己整理分类的）_38_IPv6多选【20道题】

1.IPV6地址包含以下哪些类型&#xff1f; 任播地址 组播地址 单播地址 广播地址 2.IPv6有以下哪几种地址&#xff1f; 任播地址 链路本地地址 组播地址 单播地址 广播地址 3.下面关于IPv6描述正确的是&#xff1f; IPv6的地址长度为128bits IPv6的地址长度为64bit…
阅读更多...
android插件化开发指南，字节跳动安卓开发面试题

android插件化开发指南，字节跳动安卓开发面试题

Android进阶延伸点 1、如何进行单元测试&#xff0c;如何保证App稳定 &#xff1f; 参考回答&#xff1a; 要测试Android应用程序&#xff0c;通常会创建以下类型自动单元测试 本地测试&#xff1a;只在本地机器JVM上运行&#xff0c;以最小化执行时间&#xff0c;这种单元测…
阅读更多...
1.Zookeeper理论基础

1.Zookeeper理论基础

1.Zookeeper的基本概念 是一个分布式应用协调框架 &#xff0c;java编写的。客户端 /服务端 的架构模式。CP设计(一致性&#xff0c;分区容错) 它主要是用来解决分布式应用中经常遇到的一些数据管理问题&#xff0c;如&#xff1a;服务注册服务、状态同步服务、集群管理、分布…
阅读更多...
对于爬虫的学习

对于爬虫的学习

本地爬取 package MyApi.a08regexdemo;import java.util.regex.Matcher; import java.util.regex.Pattern;public class RegexDemo03 {public static void main(String[] args) {//要求&#xff1a;找出里面所有javaxxString str"Java自从95年问世以来&#xff0c;经历了…
阅读更多...
爬虫逆向网站案例

爬虫逆向网站案例

一、相关网页 东方财富人气排行榜 二、查找url 三、寻找curl并复制 四、打开Convert curl commands to code (curlconverter.com) 五、修改并执行代码 import requestscookies {st_si: 73974981954644,st_pvi: 39724919122964,st_sp: 2024-03-05%2018%3A27%3A22,st_inirUrl:…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023