HTML
Cookie
Cookie 的主要作用是什么?
主要作用是在浏览器和服务器之间传递状态信息（通过请求头和响应头）。它可以存储在客户端的本地，并在客户端每次向服务器发送请求时将信息发送给服务器。
请解释一下 Cookie 的个性化配置的用途？
用于存储登录信息，追踪用户的浏览行为以及实现广告定向投放。通过存储用户的个性化配置，网站可以提供定制化的用户体验，例如自动填充登录信息、根据用户的兴趣向其推荐相关内容或广告。
Cookie 的大小限制是多少？
Cookie 的大小限制通常是 4KB，这是浏览器对单个 Cookie 的存储容量的限制。
一个域名下最多可以设置多少个 Cookie？
20 个，超过这个限制，旧的 Cookie 将被新的 Cookie 替代。
默认情况下，Cookie 的有效期是多长时间？
默认情况下，如果未设置 Cookie 的过期时间，它将成为一个会话 Cookie，也称为临时 Cookie。会话 Cookie 的有效期是关闭浏览器时失效，即当用户关闭浏览器后，会话 Cookie 将被删除。
本地存储
LocalStorage 和 SessionStorage 之间有什么区别？
LocalStorage 中存储的数据是永久性的，即使关闭浏览器也会保留。而 SessionStorage 中存储的数据在用户关闭浏览器后，就会被清除。
LocalStorage 和 SessionStorage 的存储容量有限制吗？
它们的存储容量限制为 5MB。如果超过了这个限制，后续的存储操作可能会失败。
除了 LocalStorage 和 SessionStorage，还有哪些其他的本地存储机制？
IndexDB ，客户端数据库，可以用于存储大量结构化数据。
Cache Storage 则用于缓存网站的文件，使用户可以在断网或离线状态下访问已缓存的网页。
LocalStorage 的数据可以被不同的页面共享吗？
不同页面可以通过相同的 LocalStorage 键名来访问和修改存储在 LocalStorage 中的数据。
当用户清除浏览器缓存时，LocalStorage 和 SessionStorage 中的数据会被清除吗？
当用户清除浏览器缓存时，LocalStorage 中的数据会被清除，而 SessionStorage 中的数据不会受到影响。因为 SessionStorage 的数据是在会话期间存储的，而不是存储在硬盘上。所以清除浏览器缓存不会影响 SessionStorage 中的数据。
WebWorker
什么是 WebWorker
WebWorker 是一种在后台运行的 JavaScript 代码的机制，它可以在不阻塞主线程的情况下执行任务，从而提高页面的响应性能。WebWorker 可以独立于主线程运行，并且可以通过消息传递与页面进行交互。
WebWorker 的特点是什么？
首先，WebWorker 不能访问 DOM 元素，它主要用于执行与 DOM 无关的计算任务。
其次，WebWorker 可以通过消息传递与页面进行交互，主线程可以向 WebWorker 发送消息，并且 WebWorker 也可以向主线程发送消息。
WebWorker 在哪些场景下会被使用到？
当需要进行轮询操作时，可以将轮询任务交给 WebWorker 来执行，以避免阻塞主线程。
当需要执行大量计算密集型的任务时，可以将这些任务交给 WebWorker 来并行执行，以提高页面的响应性能。
当需要生成海量数据或进行复杂的数据处理时，可以利用 WebWorker 的并行能力来加速处理过程。
WebWorker 的基本语法是什么？
初始化一个 WebWorker：new Worker('worker.js');
向 WebWorker 发送消息：worker.postMessage({});
接收 WebWorker 发送的消息：worker.onmessage = function(event) {};
关闭 WebWorker：worker.close();
WebWorker 是否可以直接操作 DOM 元素？
不可以。WebWorker 不能直接访问或操作 DOM 元素，因为它运行在与主线程分离的上下文中。
WebSocket
什么是 WebSocket？
浏览器和服务器之间的长连接技术，它提供了双向的、实时的通信能力。相比传统的 HTTP 请求 - 响应模式，WebSocket 允许服务器主动向客户端推送数据，而不需要客户端发送请求。
WebSocket 的基本语法是什么？
建立连接：new WebSocket('ws://example.com');
发送消息：ws.send('Message');
接收消息：ws.onmessage = function(event) {};
心跳检测：WebSocket 可以通过定时发送 ping 消息，确认服务器是否仍然在线，并接收服务器返回的 pong 消息。
关闭连接：ws.close();
WebSocket 的优势是什么？
实时性：WebSocket 可以在客户端和服务器之间实现实时的双向通信，使得实时更新和推送变得更加高效和快速。
节省带宽和资源：WebSocket 使用长连接，避免了每次通信都需要建立和关闭连接的开销，节省了带宽和服务器资源。
更少的延迟：由于 WebSocket 使用长连接，可以减少通信中的延迟，提供更好的用户体验。
WebSocket 协议是基于什么协议实现的？
WebSocket 协议最初是基于 HTTP 协议实现的，它通过在 HTTP 握手阶段升级到 WebSocket 协议来建立持久连接。WebSocket 使用 HTTP 的端口（通常是 80 或 443），但在建立连接后，数据的传输不再遵循 HTTP 的请求-响应模式，而是通过 WebSocket 协议进行双向通信。
Viewport
什么是视口？
浏览器中用于显示网页内容的区域。在移动浏览器中，视口的主要作用是控制页面在不同设备上的展现，并控制页面的缩放行为，以适应不同的屏幕尺寸和分辨率。
Viewport 的哪些属性常用于移动端开发？
width=device-width：将视口的宽度设置为设备的宽度，确保页面在不同设备上具有一致的宽度。
initial-scale：设置页面的初始缩放比例。可以通过调整这个值来控制页面的默认缩放行为。
maximum-scale：设置页面的最大缩放比例，限制用户对页面进行放大的能力。
minimum-scale：设置页面的最小缩放比例，限制用户对页面进行缩小的能力。
如何解决移动端上的 1px 边框显示模糊的问题？
在移动端上，由于设备像素和 CSS 像素的差异，1px 边框在某些情况下可能会显示模糊。
为了解决这个问题，可以将 initial-scale 设置为一个较小的值，如 0.5，从而将页面进行缩小。这样可以使得 1px 边框在设备上显示为物理像素的 2px，从而解决边框模糊的问题。
Viewport 的缩放行为是由谁来控制的？
由浏览器来控制。浏览器会根据 Viewport 的设置和用户的操作来决定页面的缩放比例。用户可以通过手势操作或浏览器的缩放功能来改变页面的缩放级别。开发人员可以通过设置 Viewport 的属性来影响页面的初始缩放比例和可缩放范围，但最终的缩放行为由浏览器来执行。