米哈游Web前端面试题解析：事件委托、this关键字与浏览器存储

“米哈游web前端面试部分题目” 在前端求职面试中，米哈游可能会考察一系列技术和实践经验。以下是对题目中涉及知识点的详细解释： 1. **事件委托**：事件委托是一种优化JavaScript事件处理的策略，基于事件冒泡机制。它允许我们在父元素上设置一个事件处理器，来响应所有子元素的事件，减少了为每个子元素单独添加事件监听器的需求，从而节省内存和提高性能。然而，如果不恰当使用，可能导致事件处理混乱，比如在多个相似元素上处理相同事件时可能产生误判。 2. **this关键字**：在JavaScript中，`this`的值取决于函数调用的上下文。在非严格模式下，全局函数中的`this`通常指向全局对象（浏览器环境中是`window`）。在构造函数中，`this`指向新创建的实例。`call`、`apply`和`bind`方法可以显式设置`this`的值。箭头函数不同，其`this`值继承自外层作用域，不具有自己的`this`绑定。 3. **浏览器存储方式**： - **Cookie**：小型文本文件，存储在客户端，通常用于保持登录状态。每个Cookie大小约4KB，每个域名下的Cookie数量有限制。 - **LocalStorage**：持久化的键值对存储，数据在浏览器关闭后仍然存在，但仅限于同源策略。 - **SessionStorage**：与LocalStorage类似，但数据仅在当前会话中有效，关闭窗口或标签页后数据将被清除。 - **WebSQL**：已废弃的数据库存储方式，被IndexedDB取代。 - **IndexedDB**：更复杂的数据库存储，适合大量结构化数据的存储。 4. **Session**：当浏览器崩溃后，即使恢复，JSESSIONID（sessionid）会丢失，但服务器端的sessionid通常不会立即销毁。用户重新访问时，服务器会创建新的session。 5. **Cookie存储大小限制**：不同浏览器对每条Cookie的大小和每个域名下的总Cookie数量有不同的限制，大致每条Cookie不超过4KB。 6. **HttpOnly**：HttpOnly标记设置在Cookie中，目的是防止XSS攻击。因为JavaScript无法访问带有此标志的Cookie，从而保护敏感信息，如用户认证凭证。 7. **页面渲染过程**： - 解析HTML构建DOM树 - 解析CSS构建CSSOM树 - 合并DOM和CSSOM形成渲染树 - 布局阶段确定每个节点的位置 - 绘制阶段将节点绘制到屏幕 8. **路由模式及参数传递**： - **Hash模式**：URL中使用`#`来改变路径，参数附在`#`后面，例如`#/path?param=value`，不刷新页面。 - **History模式**：利用HTML5 History API，URL看起来像常规服务器路径，如`/path?param=value`，需要服务器配置支持。 - **Abstract模式**：抽象模式，主要用于库内部使用，不依赖特定的URL结构。 - 参数传递通常通过URL查询字符串（`?param=value`）、路由路径中的动态段（如`/user/:userId`）或通过组件状态管理工具（如Redux或Vue Router的`props`）进行。 这些知识点是前端开发人员应该熟悉的基本概念，对于面试准备至关重要。了解并能熟练应用这些知识，将有助于在面试中表现出色。