22、web前端开发之html5（三）

news2025/3/27 9:06:30

六. 离线存储与缓存

在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍Application Cache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。

1、Application Cache

Application Cache（应用程序缓存）是HTML5引入的一项技术，允许开发者指定哪些资源需要缓存，以便在离线或网络条件差的情况下，用户仍能访问和使用这些资源。

1.1. 工作原理
  • manifest文件：需要创建一个manifest文件，定义需要缓存的资源。
  • 缓存资源：浏览器会根据manifest文件下载并缓存指定的资源。
  • 离线访问：当用户离线时，浏览器会直接从缓存中加载这些资源，而不是尝试从服务器下载。
1.2. manifest文件结构

一个典型的manifest文件由以下几个部分组成：

CACHE MANIFEST  
# 版本号（可选）  
version 1.0  

# CACHE: 需要缓存的资源  
CACHE:  
index.html  
styles.css  
scripts.js  
images/logo.png  

# NETWORK: 需要从网络加载的资源（可用通配符*表示所有资源）  
NETWORK:  
*  

# FALLBACK: 网络资源无法访问时的回退资源  
FALLBACK:  
/images/offline.jpg
  • CACHE：明确列出需要缓存的资源文件。
  • NETWORK：指定哪些资源应该从网络上加载（可以使用通配符*表示所有资源，除非在CACHE或FALLBACK中指定）。
  • FALLBACK：当网络资源无法访问时，提供替代的本地资源。
1.3. 使用Application Cache的步骤

  1. 创建manifest文件：
    在你的项目中创建一个cache.manifest文件，定义需要缓存的资源。

  2. 在HTML中引入manifest文件：
    在<html>标签中添加manifest属性，指向你的cache.manifest文件。

    <!DOCTYPE html>  
<html manifest="cache.manifest">

  3. 更新缓存：
    浏览器会在首次加载页面时自动下载并缓存资源。对于已缓存的资源，浏览器会在页面加载时优先使用缓存版本。

  4. 更新manifest文件：
    如果需要更新缓存内容，只需修改cache.manifest文件（例如增加一个版本号），然后重新加载页面即可触发缓存更新。

1.4. 离线检测

Application Cache提供了事件来监控缓存的更新状态。通过以下事件，可以实时了解缓存的更新进度和状态：

// 监听缓存的更新进度  
window.applicationCache.onprogress = function(e) {  
    console.log(`缓存进度：${e.loaded}/${e.total}`);  
};  

// 监听缓存下载完成  
window.applicationCache.ondownloading = function() {  
    console.log('缓存下载中...');  
};  

// 监听缓存更新完成  
window.applicationCache.onupdateready = function() {  
    window.applicationCache.swapCache();  
    console.log('缓存更新完成！');  
};  

// 监听缓存出错  
window.applicationCache.onerror = function() {  
    console.error('缓存更新失败！');  
};
1.5. 优点与局限
  • 优点：
    • 用户可以在离线环境下访问关键资源。
    • 提高了页面加载速度，尤其是在网络条件差的情况下。
  • 局限：
    • 如果manifest文件中的资源路径发生变化，需要重新加载整个缓存。
    • 管理缓存的更新可能会比较麻烦，尤其是在大型应用中。
2、localStorage与sessionStorage

除了Application Cache，HTML5还引入了localStorage和sessionStorage，它们允许开发者在客户端存储非结构化的数据。

2.1. localStorage

localStorage是一种长期存储机制，存储的数据会在浏览器关闭后仍然保留，除非用户主动清除。

  • 特点：

    • 数据持久保存，除非用户手动清除。
    • 数据在同一网站的所有页面中共享。
    • 大小限制通常为5MB左右。

  • 使用示例：

    // 存储数据  
localStorage.setItem('username', 'alice');  

// 读取数据  
const username = localStorage.getItem('username');  
console.log(username); // 输出：alice  

// 删除数据  
localStorage.removeItem('username');  

// 清除所有数据  
localStorage.clear();
2.2. sessionStorage

sessionStorage与localStorage类似，但它的数据只会保留到当前会话结束（即浏览器关闭）。

  • 特点：

    • 数据只在当前会话中有效。
    • 数据在同一网站的所有页面中共享。
    • 大小限制通常为5MB左右。

  • 使用示例：

    // 存储数据  
sessionStorage.setItem('tempData', '12345');  

// 读取数据  
const tempData = sessionStorage.getItem('tempData');  
console.log(tempData); // 输出：12345  

// 删除数据  
sessionStorage.removeItem('tempData');
2.3. 两者的区别
特性localStoragesessionStorage
数据生命周期持久保存只在当前会话有效
作用域全局全局
容量限制通常为5MB通常为5MB
数据清除用户手动清除浏览器关闭后自动清除
2.4. 使用场景
  • localStorage：
    • 用户偏好设置（如主题颜色、字体大小）。
    • 长期有效的数据（如用户凭证、游戏进度）。
  • sessionStorage：
    • 临时数据（如购物车内容、表单填写进度）。
    • 会话级别的信息（如用户ID、临时凭证）。
3、IndexedDB

IndexedDB是一种客户端存储技术，允许开发者在浏览器中存储和管理结构化的数据（如文档、元数据等）。它支持大容量数据存储和事务操作，适合复杂的数据管理需求。

3.1. 核心概念
  • 数据库：IndexedDB以数据库为单位存储数据，每个数据库可以包含多个对象存储空间。
  • 对象存储空间：类似于表格，存储一组结构类似的数据。
  • 索引：用于加速数据查询，类似于数据库中的索引。
  • 事务：支持事务操作，确保数据的完整性。
3.2. 使用步骤

  1. 创建或打开数据库：

    const request = window.indexedDB.open('myDatabase', 1);

  2. 处理数据库创建事件：

    request.onupgradeneeded = function(event) {  
    const db = event.target.result;  
    // 创建对象存储空间  
    const objectStore = db.createObjectStore('users', { keyPath: 'id' });  
    // 创建索引  
    objectStore.createIndex('nameIndex', 'name', { unique: false });  
};

  3. 存储数据：

    const transaction = db.transaction(['users'], 'readwrite');  
const objectStore = transaction.objectStore('users');  

const request = objectStore.add({  
    id: 1,  
    name: 'alice',  
    email: 'alice@example.com'  
});  

request.onsuccess = function() {  
    console.log('数据存储成功！');  
};

  4. 读取数据：

    const transaction = db.transaction(['users'], 'readonly');  
const objectStore = transaction.objectStore('users');  

const request = objectStore.get(1);  
request.onsuccess = function() {  
    const user = request.result;  
    console.log(user); // 输出：{ id: 1, name: 'alice', email: 'alice@example.com' }  
};

  5. 关闭数据库：

    db.close();
4、Service Worker

Service Worker是一种脚本，运行在浏览器的后台，允许开发者代理网络请求、实现离线缓存，以及提高网页性能。

4.1. 核心功能
  • 离线缓存：通过拦截网络请求，实现资源的缓存和离线访问。
  • 网络代理：可以修改请求和响应，实现自定义的缓存策略。
  • 推送通知：支持推送通知，提升用户体验。
4.2. 使用示例

  1. 注册Service Worker：

    if ('serviceWorker' in navigator) {  
    navigator.serviceWorker  
        .register('/sw.js')  
        .then(function(registration) {  
            console.log('Service Worker注册成功！');  
        })  
        .catch(function(err) {  
            console.error('Service Worker注册失败：', err);  
        });  
}

  2. 实现缓存逻辑（在sw.js中）：

    const CACHE_NAME = 'my-cache-v1';  
const ASSETS = [  
    '/',  
    '/index.html',  
    '/styles.css',  
    '/scripts.js',  
    '/images/logo.png'  
];  

self.addEventListener('install', function(event) {  
    event.waitUntil(  
        caches.open(CACHE_NAME)  
            .then(function(cache) {  
                return cache.addAll(ASSETS);  
            })  
    );  
});  

self.addEventListener('fetch', function(event) {  
    event.respondWith(  
        caches.match(event.request)  
            .then(function(response) {  
                if (response) {  
                    return response;  
                }  
                return fetch(event.request);  
            })  
    );  
});
5、缓存策略

在现代Web开发中，缓存策略扮演着至关重要的角色。它不仅可以显著提升网页的加载速度，还能优化用户体验，尤其是在网络条件较差或需要离线访问的场景下。然而，缓存策略的选择和实施并非一刀切，每种技术都有其特定的应用场景和优缺点。通过合理的缓存策略，可以在性能、用户体验和开发效率之间取得平衡。本节将详细介绍如何选择合适的缓存技术、管理缓存的生命周期、避免缓存污染以及如何在开发与生产环境中分离缓存策略。

5.1 选择合适的缓存技术

选择合适的缓存技术是实现高效缓存策略的第一步。根据项目需求、数据规模和性能要求，我们可以选择不同的缓存技术。以下是几种常见的缓存技术及其适用场景：

1. Application Cache

Application Cache（应用程序缓存）是一种通过manifest文件管理资源缓存的技术，适用于需要离线访问完整页面的场景。它允许开发者指定哪些资源需要缓存，以便在离线或网络条件差的情况下，用户仍能访问和使用这些资源。

适用场景：

  • 需要离线访问的完整网页。
  • 希望通过预加载资源提升首次加载速度的应用。
  • 在网络不稳定的环境中，确保关键资源可用的场景。

示例：一个需要在离线环境中访问的移动应用，可以通过Application Cache缓存所有必要的HTML、CSS、JavaScript和图像文件。

2. localStorage与sessionStorage

localStorage和sessionStorage是HTML5引入的一种轻量级存储技术，适用于小规模的数据存储。它们允许开发者在客户端存储非结构化的数据，以提升数据的读写效率。

适用场景：

  • 存储用户偏好设置，如主题颜色、字体大小等。
  • 存储临时数据，如购物车内容、表单填写进度等。
  • 存储需要持久化的数据，如用户凭证（Token）、游戏进度等。

优点：

  • 数据持久保存（localStorage）或仅在当前会话有效（sessionStorage）。
  • 便于通过JavaScript操作，API简单易用。
  • 支持较大的存储空间（通常为5MB左右）。

示例：在电商网站中，可以通过localStorage存储用户的购物车内容，确保即使在用户关闭浏览器后，购物车数据仍然保留。

3. IndexedDB

IndexedDB是一种客户端存储技术，允许开发者在浏览器中存储和管理结构化的数据。它支持大容量数据存储和事务操作，适用于需要复杂数据管理的应用场景。

适用场景：

  • 需要存储大量结构化数据的应用，如电子商务平台的产品数据库。
  • 需要高效查询和管理数据的场景，如搜索引擎的本地缓存。
  • 需要在离线环境中访问复杂数据的应用，如移动端的CRM系统。

优点：

  • 支持大容量数据存储（通常为数百MB）。
  • 支持事务操作，确保数据的完整性。
  • 支持索引，提升数据查询的效率。

示例：在一个在线音乐播放器中，可以通过IndexedDB存储用户的音乐库，包括歌曲元数据、专辑封面等信息，以便在离线环境下访问。

4. Service Worker

Service Worker是一种脚本，运行在浏览器的后台，允许开发者代理网络请求、实现离线缓存，以及提高网页性能。Service Worker的功能远超传统的缓存技术，适用于需要复杂网络请求代理和离线支持的应用。

适用场景：

  • 需要实现离线访问的现代Web应用，如Progressive Web Apps（PWA）。
  • 需要代理和拦截网络请求的场景，如自定义缓存策略、数据压缩等。
  • 需要推送通知的应用，如新闻客户端、社交媒体应用等。

优点：

  • 提供灵活的缓存控制，允许开发者自定义缓存逻辑。
  • 支持推送通知，提升用户体验。
  • 能够代理和修改网络请求，适用于需要自定义请求处理的场景。

示例：在一个新闻客户端中，可以通过Service Worker缓存常访问的文章和资源，实现离线阅读功能，并在后台推送最新新闻通知。

5.2 管理缓存的生命周期

缓存的有效性和性能在很大程度上依赖于缓存的生命周期管理。合理的缓存生命周期管理可以避免缓存过期、数据不一致等问题，确保应用始终拥有最新且有效的数据。

1. 为缓存设置合理的过期时间

每个缓存条目都应该有一个合理的过期时间，确保缓存不会永久有效。过期时间的长短取决于数据的更新频率和业务需求。

示例：在电商网站中，用户的购物车数据可以设置为30天过期，而商品价格信息可能需要更短的缓存时间（如15分钟），以确保及时更新。

2. 提供清理缓存的接口

在数据更新时，需要及时清理相关的缓存条目，确保应用使用最新的数据。可以通过以下方式提供缓存清理接口：

  • 手动清理：在管理后台提供清理缓存的按钮，允许管理员手动清理特定或所有缓存。
  • 自动清理：在数据更新时，自动触发缓存清理逻辑。
  • 版本控制：通过版本号或哈希值来管理缓存，确保更新时自动识别和清理旧缓存。

示例：在社交媒体平台中，当用户更新个人资料时，后台系统自动清理与该用户相关的缓存，确保前端获取最新的用户信息。

3. 监控缓存的使用情况

通过监控工具监控缓存的使用情况，了解缓存的命中率、存储空间的使用情况等指标，及时优化缓存策略。

示例：使用Google Analytics或类似的监控工具，跟踪用户访问的资源，分析缓存命中率，以优化缓存策略，确保高频访问的资源得到充分缓存。

5.3 避免缓存污染

缓存污染是指不同资源被错误地缓存或读取，导致数据不一致或错误。为了避免缓存污染，需要采取以下措施：

1. 确保不同的资源有不同的缓存版本

每个资源都应该有唯一的标识符，如URL、版本号或哈希值，确保不同的资源不会被错误地缓存或读取。

示例：在网页中，JavaScript文件和CSS文件可以通过添加版本号或哈希值作为查询参数，确保每次更新时，浏览器下载最新的文件。

<script src="script.js?v=1.0.0"></script>  
<link rel="stylesheet" href="style.css?v=1.0.0">

九. Web Workers（多线程）

1. 背景
  • 单线程限制：JavaScript在主线程执行，繁重任务会阻塞UI。
  • Web Workers：在后台运行JavaScript，避免阻塞。
2. 使用方法
  1. 创建Worker：new Worker('worker.js')
  2. 通信：通过postMessage发送消息。
  3. 处理消息：onmessage事件监听。
3. 示例
<!-- 主线程 -->  
<script>  
const worker = new Worker('worker.js');  
worker.onmessage = function(event) {  
  console.log('收到从Worker的消息:', event.data);  
};  
worker.postMessage('开始计算');  
</script>  

<!-- worker.js -->  
self.onmessage = function(event) {  
  const result = performExpensiveTask(event.data);  
  self.postMessage(result);  
};

十、表单增强

随着Web开发的不断进步，HTML5引入了许多新的表单输入类型和验证功能，大大增强了表单的功能性和用户体验。通过这些增强功能，开发者可以创建更加智能、用户友好的表单，减少前端验证的需求，同时提高数据的准确性。以下是详细的讲解。

1、新增输入类型

HTML5新增了多种输入类型，使得表单字段能够更精确地匹配用户输入的数据类型，从而提高表单的整体体验和数据的准确性。

1.1 Email 输入类型

  • 类型：email

  • 功能：用于输入电子邮件地址。

  • 优势：

    • 自动验证邮箱格式。
    • 在支持的设备上会显示邮箱键盘（如移动设备）。

  • 示例：

    <input type="email" name="email" required placeholder="输入邮箱">

1.2 URL 输入类型

  • 类型：url

  • 功能：用于输入网页地址。

  • 优势：

    • 自动验证URL格式。
    • 在支持的设备上会显示URL键盘。

  • 示例：

    <input type="url" name="website" placeholder="输入网站地址">

1.3 电话号码输入类型

  • 类型：tel

  • 功能：用于输入电话号码。

  • 优势：

    • 在移动设备上会自动显示电话键盘。
    • 可以配合pattern属性进行自定义验证。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="输入电话号码">

1.4 数字输入类型

  • 类型：number

  • 功能：用于输入数字。

  • 优势：

    • 只允许输入数字。
    • 可以通过min和max属性限制输入范围。

  • 示例：

    <input type="number" name="age" min="18" max="100" placeholder="输入年龄">

1.5 滑块输入类型

  • 类型：range

  • 功能：用于输入一个范围内的值。

  • 优势：

    • 提供滑块选择，用户友好。
    • 可以通过min、max和step属性控制范围和步长。

  • 示例：

    <input type="range" name="rating" min="1" max="10" step="1">

1.6 日期和时间输入类型

  • 类型：date、datetime、month、time、week

  • 功能：

    • date：选择日期（年、月、日）。
    • datetime：选择日期和时间。
    • month：选择月份和年份。
    • time：选择时间（小时、分钟）。
    • week：选择周和年份。

  • 优势：

    • 提供标准的日期时间选择界面。
    • 自动验证格式。

  • 示例：

    <input type="date" name="birthday" required>  
<input type="time" name="appointment_time">
2、表单验证

表单验证是确保用户输入数据符合预期格式和要求的关键步骤。HTML5提供了内置的验证功能，减少了对JavaScript的依赖。

2.1 必填字段（required）

  • 属性：required

  • 功能：指定该字段必须填写，否则无法提交表单。

  • 示例：

    <input type="email" name="email" required>
2.2 正则表达式验证（pattern）

  • 属性：pattern

  • 功能：通过正则表达式验证输入内容。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="输入11位电话号码">
2.3 输入长度限制（maxlength 和 minlength）

  • 属性：

    • maxlength：指定输入的最大字符数。
    • minlength：指定输入的最小字符数。

  • 示例：

    <input type="text" name="username" maxlength="20" minlength="4" placeholder="输入4-20个字符">
2.4 占位符提示（placeholder）

  • 属性：placeholder

  • 功能：在输入字段为空时显示提示文本。

  • 示例：

    <input type="email" name="email" placeholder="例如：user@example.com">
3、综合示例

以下是一个综合了多种输入类型和验证功能的表单示例：

<form>  
  <div>  
    <label for="username">用户名：</label>  
    <input type="text" id="username" name="username"   
           maxlength="20" minlength="4" required placeholder="输入4-20个字符">  
  </div>  

  <div>  
    <label for="email">邮箱：</label>  
    <input type="email" id="email" name="email" required placeholder="输入邮箱地址">  
  </div>  

  <div>  
    <label for="phone">电话：</label>  
    <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="输入11位电话号码">  
  </div>  

  <div>  
    <label for="age">年龄：</label>  
    <input type="number" id="age" name="age" min="18" max="100" placeholder="输入年龄">  
  </div>  

  <div>  
    <label for="rating">评分：</label>  
    <input type="range" id="rating" name="rating" min="1" max="10" step="1">  
  </div>  

  <div>  
    <label for="birthday">生日：</label>  
    <input type="date" id="birthday" name="birthday" required>  
  </div>  

  <button type="submit">提交</button>  
</form>
4、最佳实践
  1. 结合输入类型和验证：根据需要选择合适的输入类型，并配合required、pattern等属性进行验证。
  2. 提供反馈：使用浏览器的内置验证功能，同时可以通过JavaScript提供更详细的错误反馈。
  3. 响应式设计：确保表单在不同设备上的显示效果一致。
  4. 测试：在不同浏览器和设备上测试表单的兼容性和验证效果。

十一. 响应式设计

1. viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒体查询

@media (max-width: 600px) {  
  body {  
    font-size: 14px;  
  }  
}
3. 弹性盒布局（Flexbox）
.container {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
}  
.item {  
  flex: 1;  
  width: 300px;  
}

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

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

相关文章

git revert 用法实战：撤销一个 commit 或 merge

git revert 用法实战：撤销一个 commit 或 merge

git revert 1 区别 • 常规的 commit &#xff08;使用 git commit 提交的 commit&#xff09; • merge commit 2 首先构建场景 master上的代码 dev开发分支上&#xff0c;添加一个a标签&#xff0c;并commit这次提交 切到master上&#xff0c;再次进行改动和提交 将de…
阅读更多...
修形还是需要再研究一下

修形还是需要再研究一下

最近有不少小伙伴问到修形和蜗杆砂轮的问题&#xff0c;之前虽然研究过一段时间&#xff0c;但是由于时间问题放下了&#xff0c;最近想再捡起来。 之前计算的砂轮齿形是一整段的&#xff0c;但是似乎这种对于有些小伙伴来说不太容易接受&#xff0c;希望按照修形的区域进行分…
阅读更多...
AI本地部署之dify

AI本地部署之dify

快捷目录 Windows 系统一、环境准备：首先windows 需要准备docker 环1. 安装Docker desktop2. 安装Docker3. 配置Docker 镜像路径4. 配置Docker 下载镜像源5. 重启Docker服务二、Dify 下载和安装1. Dify下载2. Dify 配置3. Dify 安装附件知识：4. Dify创建账号三、下载Ollama d…
阅读更多...
安恒春招一面

安恒春招一面

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…
阅读更多...
Python应用指南：利用高德地图API获取POI数据（关键词版）

Python应用指南：利用高德地图API获取POI数据（关键词版）

都说“为一杯奶茶愿意赴一座城”&#xff0c;曾经不知有多少年轻人为了一口茶颜悦色不惜跨越千里来到长沙打卡&#xff0c;而如今也有不少年轻人被传说中的“奶茶界的海底捞”所吸引&#xff0c;千里迢迢来到安徽只为尝一口卡旺卡奶茶。要说起来这卡旺卡奶茶&#xff0c;尽管这…
阅读更多...
Linux网络相关概念和重要知识（2）（UDP套接字编程、聊天室的实现、观察者模式）

Linux网络相关概念和重要知识（2）（UDP套接字编程、聊天室的实现、观察者模式）

目录 1.UDP套接字编程 &#xff08;1&#xff09;socket编程 &#xff08;2&#xff09;UDP的使用 ①socket ②bind ③recvfrom ④sendto 2.聊天室的实现 &#xff08;1&#xff09;整体逻辑 &#xff08;2&#xff09;对sockaddr_in的封装 &#xff08;3&#xff09…
阅读更多...
JVM 03

JVM 03

今天是2025/03/24 15:21 day 11 总路线请移步主页Java大纲相关文章 今天进行JVM 5,6 个模块的归纳 首先是JVM的相关内容概括的思维导图 5. 优化技术 JVM通过多种优化技术提升程序执行效率&#xff0c;核心围绕热点代码检测和编译优化实现动态性能提升。 热点代码检测 JVM…
阅读更多...
【VUE】day07 路由

【VUE】day07 路由

【VUE】day07 路由 1. 路由2. 前端路由的工作方式3. 实现简易的前端路由4. 安装和配置路由4.1 安装vue-router包4.2 创建路由模块4.3 导入并挂在路由模块 5. 在路由模块中声明路由的对应关系5.1 router-view 1. 路由 在 Vue.js 中&#xff0c;路由&#xff08;Routing&#xf…
阅读更多...
内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

内网穿透的应用-本地部署ChatTTS教程：Windows搭建AI语音合成服务的全流程配置

文章目录 前言1. 下载运行ChatTTS模型2. 安装Cpolar工具3. 实现公网访问4. 配置ChatTTS固定公网地址 前言 各位开发者小伙伴们&#xff01;今天我要给大家推荐一个超级火的AI项目——ChatTTS。这个开源文本转语音&#xff08;TTS&#xff09;项目的火爆程度简直让人难以置信&a…
阅读更多...
2025-03-21 Unity 网络基础3——TCP网络通信准备知识

2025-03-21 Unity 网络基础3——TCP网络通信准备知识

文章目录 1 IP/端口类1.1 IPAddress1.2 IPEndPoint 2 域名解析2.1 IPHostEntry2.2 Dns 3 序列化与反序列化3.1 序列化3.1.1 内置类型 -> 字节数组3.1.2 字符串 -> 字节数组3.1.3 类对象 -> 字节数组 3.2 反序列化3.2.1 字节数组 -> 内置类型3.2.2 字节数组 -> 字…
阅读更多...
静态时序分析：SDC约束命令set_min_pulse_width详解

静态时序分析：SDC约束命令set_min_pulse_width详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 最小脉冲宽度检查用于确保一个单元的时钟引脚和异步置位/复位引脚的的脉冲宽度满足最小要求&#xff0c;如果违反该要求&#xff0c;则可能出现功能错误。严格意…
阅读更多...
推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

聊一聊 没想到现在还有人喜欢听广播。 我一直以为听广播必须要用那种小广播机才可以。 原来手机或电脑上也是可以的。 今天给大家分享一款可以在电脑和手机上听广播的软件。 软件介绍 龙卷风收音机 电台广播收音机分电脑和手机两个版本。 电脑端无需安装&#xff0c;下载…
阅读更多...
HO与OH差异之Navigation

HO与OH差异之Navigation

在上一篇的内容中我们进一步的了解了Navigation的用法&#xff0c;但是既然写到这里了我就再来扩充一下有关Navigation的内容。 HarmonyOS与OpenHarmony之间有些写法与内容是有差异的&#xff0c;就比如Navigation的跳转。以下内容中HarmonyOS我都简称为HO&#xff0c;OpenHar…
阅读更多...
模糊规则激活方法详解（python实例对比）

模糊规则激活方法详解（python实例对比）

前文我们已经了解了多种隶属函数&#xff0c;如三角形、梯形、高斯型、S型和Z型&#xff0c;并且讨论了模糊推理的基本过程&#xff0c;包括模糊化、规则评估、聚合和解模糊化。我们还了解了如何生成模糊规则的方法&#xff0c;比如专家经验、聚类分析、决策树、遗传算法和ANFI…
阅读更多...
Web前端考核 JavaScript知识点详解

Web前端考核 JavaScript知识点详解

一、JavaScript 基础语法 1.1 变量声明 关键字作用域提升重复声明暂时性死区var函数级✅✅❌let块级❌❌✅const块级❌❌✅ 1.1.1变量提升的例子 在 JavaScript 中&#xff0c;var 声明的变量会存在变量提升的现象&#xff0c;而 let 和 const 则不会。变量提升是指变量的声…
阅读更多...
Spring Boot3 配置文件

Spring Boot3 配置文件

统一配置文件管理 SpringBoot工程下&#xff0c;进行统一的配置管理&#xff0c;你想设置的任何参数&#xff08;端口号、项目根路径、数据库连接信息等等)都集中到一个固定位置和命名的配置文件&#xff08;application.properties或application.yml&#xff09;中&#xff0…
阅读更多...
消防设施操作员考试：巧用时间高效备考攻略

消防设施操作员考试：巧用时间高效备考攻略

合理规划时间是备考消防设施操作员考试的关键&#xff0c;能让学习事半功倍。​ 一、制定详细时间表​ 根据备考时间和考试内容&#xff0c;制定每日、每周的学习计划。将学习时间合理分配给理论知识学习、技能实操练习和模拟考试。例如&#xff0c;每天安排 3 - 4 小时学习理…
阅读更多...
深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习技术与应用的未来展望：从基础理论到实际实现

深度学习作为人工智能领域的核心技术之一&#xff0c;近年来引起了极大的关注。它不仅在学术界带来了革命性的进展&#xff0c;也在工业界展现出了广泛的应用前景。从图像识别到自然语言处理&#xff0c;再到强化学习和生成对抗网络&#xff08;GAN&#xff09;&#xff0c;深度…
阅读更多...
FastStoneCapture下载安装教程（附安装包）专业截图工具

FastStoneCapture下载安装教程（附安装包）专业截图工具

文章目录 前言FastStoneCapture下载FastStoneCapture安装步骤FastStoneCapture使用步骤 前言 在日常工作与学习里&#xff0c;高效截图工具至关重要。本教程将为你呈现FastStoneCapture下载安装教程&#xff0c;助你轻松拥有。 FastStoneCapture下载 FastStone Capture 是一款…
阅读更多...
26考研——图_图的遍历（6）

26考研——图_图的遍历（6）

408答疑 文章目录 三、图的遍历图的遍历概述图的遍历算法的重要性图的遍历与树的遍历的区别图的遍历过程中的注意事项避免重复访问遍历算法的分类遍历结果的不唯一性 广度优先搜索广度优先搜索&#xff08;BFS&#xff09;概述BFS 的特点广度优先遍历的过程示例图遍历过程 BFS …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023