经纬恒润一面

1. 请尽可能详细地说明，浏览器有哪些本地存储方式，区别是什么，应用场景是什么？你的回答中不要写出示例代码。

浏览器提供了多种本地存储方式，主要包括以下几种：

1. Cookies

定义：Cookies 是一种存储在用户计算机上的小型文本文件，由服务器发送并由浏览器保存。Cookies 可以包含一些信息，如用户身份验证令牌、会话信息等。

特点：

存储容量有限，通常每个域名下最多可以存储 4KB 的数据。
每次 HTTP 请求都会携带 Cookies，可能会增加网络传输的开销。
可以设置过期时间，过期后数据会被自动删除。

应用场景：

用户身份验证和会话管理。
跨页面会话跟踪。
个性化设置和偏好。

2. Web Storage

定义：Web Storage 是 HTML5 引入的一种本地存储方式，包括 localStorage 和 sessionStorage 两种。

localStorage：

数据永久保存，除非用户手动清除或使用代码删除。
存储容量较大，通常每个域名下最多可以存储 5MB 的数据。
不会随 HTTP 请求发送，减少了网络传输的开销。

sessionStorage：

数据仅在当前会话期间有效，关闭浏览器窗口或标签页后数据会被清除。
存储容量与 localStorage 相同，为 5MB。
不会随 HTTP 请求发送。

特点：

提供键值对存储方式，操作简单方便。
数据存储在客户端，不会泄露给服务器。

应用场景：

临时存储用户输入的数据，如表单数据。
保存用户的个性化设置和偏好。
实现简单的本地缓存。

3. IndexedDB

定义：IndexedDB 是一种基于 JavaScript 的事务数据库系统，用于在浏览器端存储大量结构化数据。

特点：

存储容量较大，通常每个域名下可以存储数十 MB 甚至更多的数据。
支持复杂的查询和索引操作，适用于存储和检索大量数据。
基于事务处理，保证数据的一致性和完整性。

应用场景：

离线应用和数据同步。
大型数据的存储和检索，如离线地图、阅读器等。
实现复杂的本地数据管理和应用逻辑。

4. Cache API

定义：Cache API 是 Service Worker 提供的一种缓存机制，用于缓存网络请求的响应。

特点：

可以缓存各种类型的网络资源，如 HTML、CSS、JavaScript、图片等。
支持缓存策略的灵活配置，如缓存优先、网络优先等。
可以与 Service Worker 结合使用，实现离线访问和性能优化。

应用场景：

实现离线访问和数据同步。
提高应用的加载速度和性能。
缓存频繁访问的资源，减少网络请求。

区别

存储容量：Cookies 存储容量最小，Web Storage 次之，IndexedDB 存储容量最大。
数据传输：Cookies 会随 HTTP 请求发送，可能增加网络传输的开销；Web Storage 和 IndexedDB 不会随 HTTP 请求发送。
数据生命周期：Cookies 可以设置过期时间，sessionStorage 数据仅在当前会话期间有效，localStorage 数据永久保存，IndexedDB 和 Cache API 可以根据需要配置数据的生命周期。
查询和索引：IndexedDB 支持复杂的查询和索引操作，适用于存储和检索大量数据；其他存储方式主要用于简单的键值对存储。

总结

不同的本地存储方式具有不同的特点和应用场景。在选择合适的存储方式时，需要根据数据的大小、生命周期、访问频率以及是否需要支持复杂的查询和索引操作等因素进行综合考虑。

2. 请尽可能详细地说明，flex属性的语法，怎么使用？

点击图片出现预览弹窗

实现点击图片出现预览弹窗通常涉及以下几个步骤：

HTML 结构：
- 创建一个包含图片的容器，并为每张图片添加一个点击事件监听器。
- 创建一个用于显示预览图片的弹窗容器，初始状态下设置为隐藏。
CSS 样式：
- 为弹窗容器添加样式，使其在显示时覆盖整个页面，并确保图片在弹窗中居中显示。
- 使用 CSS 控制弹窗的显示和隐藏，例如通过 display 属性或 visibility 属性。
JavaScript 逻辑：
- 为每张图片添加点击事件监听器，当图片被点击时，获取图片的 URL 并显示在弹窗中。
- 可以使用 alert、confirm 或自定义的模态框（Modal）来实现弹窗效果。
- 添加关闭弹窗的功能，例如点击弹窗外部区域或按钮关闭弹窗。

使用 a 标签实现图片的下载

使用 a 标签实现图片的下载通常涉及以下几个步骤：

HTML 结构：
- 创建一个 a 标签，并设置其 href 属性为目标图片的 URL。
- 设置 a 标签的 download 属性，指定下载文件的名称。
JavaScript 逻辑（可选）：
- 如果需要动态生成下载链接，可以使用 JavaScript 创建一个 a 标签，并设置其 href 和 download 属性。
- 触发 a 标签的点击事件，开始下载文件。
- 可以使用 URL.createObjectURL 方法创建一个指向文件的 Blob URL，以便在下载前对文件进行处理。

详细说明

点击图片出现预览弹窗

HTML 结构：

<div class="image-container"><img src="image1.jpg" alt="Image 1" class="preview-image" /><img src="image2.jpg" alt="Image 2" class="preview-image" /><!-- 其他图片 -->
</div>
<div class="preview-modal" id="previewModal"><img src="" alt="Preview" class="preview-image" id="previewedImage" /><button id="closeModal">关闭</button>
</div>

CSS 样式：

.preview-modal {display: none; /* 初始状态下隐藏 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;
}
.preview-image {max-width: 90%;max-height: 90%;
}

JavaScript 逻辑：

const images = document.querySelectorAll('.preview-image');
const previewModal = document.getElementById('previewModal');
const previewedImage = document.getElementById('previewedImage');
const closeModalButton = document.getElementById('closeModal');images.forEach(image => {image.addEventListener('click', () => {previewedImage.src = image.src;previewModal.style.display = 'flex';});
});closeModalButton.addEventListener('click', () => {previewModal.style.display = 'none';
});

使用 a 标签实现图片的下载

HTML 结构：

<a href="image.jpg" download="downloaded-image.jpg">下载图片</a>

JavaScript 逻辑（可选）：

function downloadImage(url, filename) {const link = document.createElement('a');link.href = url;link.download = filename;document.body.appendChild(link);link.click();document.body.removeChild(link);
}// 示例调用
downloadImage('image.jpg', 'downloaded-image.jpg');

通过以上步骤，可以实现点击图片出现预览弹窗和使用 a 标签实现图片的下载功能。

3. 请尽可能详细地说明，css实现水平垂直居中布局有哪些方法？

CSS 实现水平垂直居中布局有多种方法，以下是一些常见的方法：

1. 使用 Flexbox 布局

Flexbox 是 CSS3 引入的一种布局模型，非常适合用于实现水平垂直居中。

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

优点：

简单易用，适用于各种布局场景。
支持响应式设计，能够自动调整布局。

缺点：

需要设置父容器的 display 属性为 flex。

2. 使用 Grid 布局

CSS Grid 是另一种强大的布局模型，适用于二维布局，也可以轻松实现水平垂直居中。

.container {display: grid;justify-content: center; /* 水平居中 */align-content: center; /* 垂直居中 */
}

优点：

支持二维布局，更加灵活。
可以精确控制行和列的位置。

缺点：

相对于 Flexbox，学习曲线较陡峭。
需要设置父容器的 display 属性为 grid。

3. 使用绝对定位和 transform

通过绝对定位和 transform 属性，可以实现元素的水平垂直居中。

.container {position: relative;
}.centered-element {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

优点：

不需要设置父容器的 display 属性。
适用于各种布局场景。

缺点：

需要使用绝对定位，可能会影响其他元素的布局。

4. 使用表格布局

通过将容器设置为表格布局，可以实现子元素的水平垂直居中。

.container {display: table;width: 100%;height: 100%;
}.centered-element {display: table-cell;vertical-align: middle;text-align: center;
}

优点：

兼容性好，适用于旧版浏览器。
不需要使用绝对定位。

缺点：

需要设置父容器的 display 属性为 table。
不适用于复杂的布局场景。

5. 使用伪元素和 margin:auto

通过使用伪元素和 margin: auto，可以实现元素的水平垂直居中。

.container {position: relative;
}.centered-element {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}

优点：

不需要设置父容器的 display 属性。
适用于各种布局场景。

缺点：

需要使用绝对定位，可能会影响其他元素的布局。

总结

以上方法各有优缺点，选择哪种方法取决于具体的布局需求和浏览器兼容性要求。在实际开发中，可以根据具体情况灵活选择或组合使用这些方法来实现水平垂直居中布局。

4. 假设你是一名大学生，请尽可能详细地说明，你为什么喜欢数据库系统这门课程？

作为一名大学生，我喜欢数据库系统这门课程的原因可以从以下几个方面进行详细说明：

1. 实用性强

数据库系统在现代信息技术领域有着广泛的应用。无论是企业级应用、Web 开发还是数据分析，数据库都是不可或缺的一部分。掌握数据库系统的基本知识和技能，可以帮助我在未来的学习和工作中更好地应对各种实际问题。

2. 逻辑思维的锻炼

数据库系统涉及到数据的存储、管理和查询，这需要严谨的逻辑思维和结构化思维。通过学习数据库系统，我不仅学会了如何设计和优化数据库结构，还锻炼了自己的逻辑思维能力。这种思维方式不仅在数据库领域有用，在其他学科和日常生活中也有很大的帮助。

3. 技术深度和广度

数据库系统是一门综合性很强的课程，涵盖了计算机科学、数学、统计学等多个领域的知识。学习数据库系统不仅让我深入理解了数据管理的原理和技术，还拓宽了我的知识面，增强了我对其他相关技术的理解和应用能力。

4. 项目实践的机会

数据库系统课程通常会包含大量的项目实践环节。通过这些项目，我可以将理论知识应用到实际项目中，解决真实的数据管理问题。这种实践经历不仅提高了我的动手能力，还增强了我的问题解决能力和团队合作能力。

5. 职业发展的需要

随着大数据和云计算技术的发展，数据库系统的重要性日益凸显。掌握数据库系统的知识和技能，对于我的职业发展有着重要的意义。无论是从事软件开发、数据分析还是系统架构，数据库系统的知识和技能都是必不可少的。

6. 持续学习和发展的空间

数据库技术是一个不断发展和创新的领域。新的数据库管理系统（如 NoSQL 数据库、分布式数据库等）不断涌现，新的应用场景和技术挑战也层出不穷。学习数据库系统不仅让我掌握了当前的技术，还为我未来的持续学习和发展提供了坚实的基础。

7. 理论与实践的结合

数据库系统课程不仅注重理论知识的学习，还强调实践操作。通过实验、项目和课程设计，我可以将抽象的理论知识转化为具体的实践操作，这种理论与实践相结合的学习方式让我更加深入地理解和掌握数据库系统的精髓。

综上所述，我喜欢数据库系统这门课程，是因为它不仅具有很强的实用性，还能锻炼我的逻辑思维能力，拓宽我的知识面，提供丰富的项目实践机会，满足我职业发展的需要，并且有持续学习和发展的空间。

5. 请尽可能详细地说明，保护JS对象不被修改有哪些方法？Object.freeze是深冻结还是浅冻结？你的回答中不要写出示例代码。

保护 JavaScript 对象不被修改是确保应用程序稳定性和安全性的重要措施。以下是一些常见的方法：

1. 使用 `Object.freeze()`

Object.freeze() 方法可以冻结一个对象，使其属性不可修改、不可添加新属性、不可删除现有属性，以及不可修改已有属性的可枚举性、配置性和可写性。

浅冻结：Object.freeze() 只会冻结对象本身的属性，如果对象的属性值仍然是对象，那么该属性值对象不会被冻结。也就是说，Object.freeze() 是浅冻结。

2. 使用 `Object.seal()`

Object.seal() 方法可以密封一个对象，使其属性不可添加新属性、不可删除现有属性，但允许修改已有属性的值。与 Object.freeze() 不同，Object.seal() 不会影响已有属性的可写性。

3. 使用 `Object.preventExtensions()`

Object.preventExtensions() 方法可以阻止新属性的添加，但允许修改和删除已有属性。

4. 使用 `defineProperty()` 和 `deleteProperty()`

通过 Object.defineProperty() 方法可以为对象的属性定义特定的配置，如可写性、可枚举性和可配置性。通过 deleteProperty() 方法可以删除对象的属性，但在严格模式下，删除不可配置的属性会抛出错误。

5. 使用 `Proxy` 对象

Proxy 对象可以在访问和修改对象属性时进行拦截和处理。通过设置 Proxy 的 set 和 deleteProperty 陷阱，可以控制对象属性的修改和删除操作。

6. 使用不可变数据结构库

一些第三方库（如 Immutable.js）提供了不可变数据结构的实现。这些库中的对象在修改时会返回一个新的对象，而不是修改原始对象。这样可以确保原始对象不被修改。

总结

保护 JavaScript 对象不被修改的方法有多种，包括使用 Object.freeze()、Object.seal()、Object.preventExtensions()、defineProperty()、deleteProperty()、Proxy 对象和不可变数据结构库等。Object.freeze() 是浅冻结，只冻结对象本身的属性，不会递归冻结属性值对象。根据具体需求和场景，可以选择合适的方法来保护对象不被修改。

6. 请尽可能详细地说明，C4网络技术挑战赛是什么？

C4网络技术挑战赛，全称为“中国高校计算机大赛-网络技术挑战赛”，是一项旨在适应网络技术与应用的快速发展，对接经济社会人才需求，服务于网络强国建设，促进学生在网络技术研究与发明、设计与开发、应用与管理等方面的创新能力培养的重要赛事。以下是关于C4网络技术挑战赛的详细介绍：

创办背景

C4网络技术挑战赛由教育部高等学校计算机类专业教学指导委员会、教育部高等学校软件工程专业教学指导委员会、教育部高等学校大学计算机课程教学指导委员会、全国高等学校计算机教育研究会联合创办于2016年。

竞赛目的

C4网络技术挑战赛以“适应新变、激励创新、甄选英才、助力产业”为办赛宗旨，目的在于适应网络技术与应用的快速发展，对接经济社会人才需求，服务于网络强国建设，促进学生在网络技术研究与发明、设计与开发、应用与管理等方面的创新能力培养，促进相关专业的新工科人才培养与课程体系变革，促进创新创业教育范畴的产教融合、产学协同育人，促进学生科创成果的产业转化与创业孵化，实现以赛促教、以赛促学、以赛促产教融合。

参赛对象

C4网络技术挑战赛面向各高校的在校本科生和研究生，以不少于2名、不多于6名学生组成的团队为参赛单位。团队所有成员在报名时按对参赛作品的贡献度自行排序。一位学生不能同时担任某赛项两个参赛团队的队长。鼓励跨专业、跨学科与跨高校组建团队，鼓励境外高校组队参赛。

竞赛内容与形式

竞赛形式为作品赛，分为创意(A)与攻关(B)两大系列。创意(A)系列的作品主题、实现技术或平台由参赛团队自行确定，专为网络空间与信息安全单独设置“A-ST”专项。攻关(B)系列包括行业知名企业和机构参与规划的两个赛项，分别为未来网络的“可编程网络应用创新”和用友的“工业互联网数智应用创新”。

竞赛阶段

竞赛分为三个阶段：资格赛、选拔赛与挑战赛。各阶段的作品形式与评审形式见表1。A系列作品的评价标准见表2，B系列作品的评价标准参见本规程附件中的相应赛项指南。

奖项设置

C4网络技术挑战赛设有多个奖项，包括选拔赛和挑战赛阶段的奖项，以及“英才计划”奖赏等。选拔赛和挑战赛阶段的奖项与奖励依不同的企业定制赛项(EP1/EP2)独立设置。

竞赛时间安排

竞赛报名通常在每年的3月份启动，截止日期为4月份。各阶段的时间安排见表1。根据新冠疫情防控要求，组委会可能会就相关时间进行必要的调整。

联系方式

竞赛官方网站主页：http://net.c4best.cn，竞赛微信公众号：c4-network。

C4网络技术挑战赛不仅为学生提供了一个展示和锻炼自己网络技术能力的平台，也为网络技术与应用领域的发展注入了新的活力。

7. 请尽可能详细地说明，http和https的区别是什么？https在http的基础上改变了什么？https如何实现加密？加密流程涉及公钥、私钥、对称加密和非对称加密吗？你的回答中不要写出示例代码。

HTTP和HTTPS的主要区别在于HTTPS在HTTP的基础上增加了SSL/TLS协议，从而提供了数据加密和身份验证功能。以下是详细的解释：

HTTP和HTTPS的基本区别

HTTP：HTTP是一种无状态的、明文的通信协议，数据在传输过程中不进行加密。这意味着数据以明文形式传输，容易被截取和篡改。
HTTPS：HTTPS通过引入SSL/TLS协议，为数据传输提供加密和身份验证功能。SSL/TLS协议确保数据在传输过程中不会被窃听或篡改，并通过数字证书验证服务器的身份。

HTTPS如何实现加密

HTTPS的加密过程涉及公钥、私钥、对称加密和非对称加密。以下是详细的加密流程：

非对称加密：在建立连接时，客户端和服务器使用非对称加密交换对称加密的密钥。客户端生成一个随机数作为对称密钥的会话密钥，并使用服务器的公钥加密这个会话密钥，然后发送给服务器。服务器使用自己的私钥解密这个会话密钥，从而获取对称密钥。
对称加密：一旦双方都有了会话密钥，它们就使用对称加密算法（如AES）加密通信过程中的所有数据。这样，即使有人截获了加密后的数据，也无法解密，因为他们没有会话密钥。

HTTPS中的公钥和私钥

公钥：公钥是公开的，可以分发给任何人。它用于加密数据或验证数字签名。
私钥：私钥是保密的，只有持有者知道。它用于解密数据或生成数字签名。在HTTPS通信中，服务器会将公钥包含在数字证书中发送给客户端，客户端使用公钥加密数据，服务器使用私钥解密数据。这种机制确保了即使数据被截获，也无法解密。

HTTPS的工作原理

建立连接：客户端向服务器发起一个HTTPS连接请求。
证书验证：服务器将其数字证书发送给客户端。客户端验证服务器的证书，确保其合法性。
密钥交换：客户端生成一个对称密钥，并使用服务器的公钥加密后发送给服务器。服务器使用自己的私钥解密，从而获取对称密钥。
数据传输：客户端和服务器使用对称密钥对传输的数据进行加密和解密。所有传输的数据（如HTTP请求和响应）都通过加密通道进行，确保数据在传输过程中的机密性、完整性和真实性。

HTTPS的优势

数据安全性：通过加密传输，保护数据不被窃取或篡改。
身份验证：通过数字证书验证服务器的身份，防止中间人攻击。
数据完整性：使用消息认证码(MAC)确保数据的完整性，防止数据在传输过程中被篡改。

通过上述分析，我们可以看到HTTPS通过结合对称加密和非对称加密，确保了数据在传输过程中的安全性、完整性和身份验证。这种安全机制使得HTTPS成为现代互联网通信中不可或缺的一部分。

8. 请尽可能详细地说明，浏览器的垃圾回收机制？V8引擎和IE浏览器的垃圾回收有什么不同？你的回答中不要写出示例代码。

浏览器的垃圾回收机制

浏览器的垃圾回收机制是为了自动管理内存，防止内存泄漏和过度占用。垃圾回收器会定期检查内存中的对象，回收不再使用的对象所占用的内存空间。以下是浏览器垃圾回收机制的一些关键点：

引用计数：
- 早期的垃圾回收算法之一是引用计数。每个对象都有一个引用计数器，当对象被引用时，计数器加一；当引用被移除时，计数器减一。当计数器为零时，对象被认为是不可达的，可以被回收。
- 引用计数的缺点是无法处理循环引用的问题。
标记-清除（Mark-Sweep）：
- 标记-清除算法分为两个阶段：标记阶段和清除阶段。在标记阶段，垃圾回收器会从根对象（如全局对象、活动脚本等）开始，递归地访问所有可达对象，并标记它们。在清除阶段，垃圾回收器会遍历堆内存，回收未标记的对象。
- 标记-清除算法可以处理循环引用的问题，但可能会导致内存碎片化。
复制（Copying）：
- 复制算法将内存分为两个区域，每次只使用其中一个区域。当一个区域满时，垃圾回收器会将所有存活的对象复制到另一个区域，然后清空当前区域。这样可以避免内存碎片化，但会浪费一半的内存空间。
标记-整理（Mark-Compact）：
- 标记-整理算法结合了标记-清除和复制算法的优点。在标记阶段，垃圾回收器会标记所有可达对象。在整理阶段，垃圾回收器会将所有存活的对象移动到内存的一端，从而消除内存碎片化。
分代收集（Generational Collection）：
- 分代收集算法根据对象的生命周期将内存分为不同的代（如新生代和老年代）。新生代中的对象通常是短命的，而老年代中的对象通常是长命的。垃圾回收器会针对不同代的对象采用不同的回收策略，以提高效率。

V8引擎和IE浏览器的垃圾回收有什么不同

V8引擎（Chrome和Node.js）：
- V8引擎使用分代收集策略，将内存分为新生代和老年代。新生代使用复制算法进行垃圾回收，老年代使用标记-清除和标记-整理算法。
- V8引擎引入了增量标记和并发标记技术，以减少垃圾回收对应用程序性能的影响。增量标记将标记过程分解为多个小步骤，交错执行；并发标记允许标记过程与应用程序线程并行执行。
- V8引擎还使用了内联缓存（Inline Caching）和隐藏类（Hidden Classes）等技术，优化对象的属性访问和查找。
IE浏览器（Internet Explorer）：
- IE浏览器使用引用计数和标记-清除算法进行垃圾回收。IE11 引入了分代收集策略，将内存分为多个代，针对不同代的对象采用不同的回收策略。
- IE浏览器的垃圾回收器在某些情况下可能会导致内存泄漏，特别是在处理 DOM 对象和闭包时。为了解决这个问题，IE11 引入了“删除空闲列表”（Deletion Busy List）技术，定期清理不可达的对象。
- IE浏览器的垃圾回收器还支持延迟释放（Deferred Release）技术，允许在内存紧张时延迟回收某些对象，以提高性能。

总之，V8引擎和IE浏览器的垃圾回收机制在算法选择、优化技术和实现细节上有所不同。V8引擎采用了更先进的垃圾回收策略和技术，以提高性能和减少对应用程序的影响。而IE浏览器在不断改进其垃圾回收器，以解决内存泄漏和提高性能。