校招｜招银提前批前端电面

招银提前批前端电面问题解答如下：

• 事件冒泡机制：事件从触发元素开始，依次向上级元素（父元素、祖父元素等）传播，直到文档根节点。
• 阻止方法：在事件处理函数中调用event.stopPropagation()，可中断事件冒泡流程。例如：document.getElementById('parent').addEventListener('click', function(event) { if (event.target.id === 'child') { event.stopPropagation(); // 阻止事件向上传播 console.log('子元素事件触发，冒泡已阻止'); }});

• 原型链本质：JavaScript通过原型链实现对象间的继承关系，每个对象都有一个隐藏的__proto__属性指向其构造函数的原型对象（prototype），形成链式结构。
• 查找规则：当访问对象属性时，若当前对象不存在该属性，会沿原型链向上查找，直到Object.prototype（原型链顶端）仍未找到则返回undefined。
• 示例：function Person(name) { this.name = name; }Person.prototype.sayHello = function() { console.log('Hello, ' + this.name); };const person = new Person('Alice');person.sayHello(); // 输出: Hello, Alice// person.__proto__ === Person.prototype// Person.prototype.__proto__ === Object.prototype

• 异步加载方法：通过设置<script>标签的async或defer属性实现异步加载，避免阻塞页面渲染。
• 区别：

  async：脚本下载完成后立即执行（不保证顺序），适合无依赖的独立脚本。

  defer：脚本下载完成后延迟到DOM解析完成（DOMContentLoaded事件前）按顺序执行，适合需操作DOM或依赖其他脚本的场景。

  <!-- async示例 --><script async src="script1.js"></script><script async src="script2.js"></script> <!-- 执行顺序不确定 --><!-- defer示例 --><script defer src="script1.js"></script><script defer src="script2.js"></script> <!-- 按顺序执行 -->

• 核心机制：JavaScript单线程通过事件循环协调同步任务与异步任务执行。
• 流程：

  同步任务直接进入调用栈（Call Stack）执行。

  异步任务（如setTimeout、Promise）由Web API处理，完成后将回调函数推入任务队列（Task Queue或Microtask Queue）。

  调用栈清空后，事件循环优先处理Microtask队列（如Promise.then），再处理Task队列（如setTimeout）。

• 示例：console.log('Start');setTimeout(() => console.log('Timeout'), 0);Promise.resolve().then(() => console.log('Promise'));console.log('End');// 输出顺序: Start → End → Promise → Timeout

• PureComponent：React内置组件，通过浅比较props和state自动阻止不必要的渲染，提升性能。需注意深层次数据结构变化可能引发误判。class MyComponent extends React.PureComponent { render() { return <div>{this.props.value}</div>; }}
• 高阶组件（HOC）：函数接收组件并返回新组件的模式，用于复用组件逻辑（如权限控制、日志记录）。function withLogging(WrappedComponent) { return class extends React.Component { componentDidMount() { console.log('Component mounted'); } render() { return <WrappedComponent {...this.props} />; } };}

• 核心Hooks：

  useState：管理组件状态。

  useEffect：处理副作用（如数据获取、订阅）。

  useContext：共享全局状态。

• 优势：避免类组件的复杂生命周期，提升逻辑复用性。
• 示例：function Counter() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }); return <button onClick={() => setCount(count + 1)}>Click</button>;}

• 常见类型：

  XSS（跨站脚本攻击）：通过注入恶意脚本窃取用户数据。防御：转义用户输入、使用CSP策略。

  CSRF（跨站请求伪造）：诱导用户发送非预期请求。防御：验证CSRF Token、检查Referer头。

  点击劫持：通过透明层诱导用户点击恶意按钮。防御：设置X-Frame-Options头。

• 分类：

  强缓存：通过Cache-Control（如max-age=3600）或Expires头控制，直接使用本地缓存。

  协商缓存：通过Last-Modified/If-Modified-Since或ETag/If-None-Match头验证资源是否更新，决定是否重新请求。

• HTTPS：HTTP + SSL/TLS，通过加密传输保障数据安全。
• 握手流程：

  客户端发送支持的加密套件列表。

  服务器选择套件并返回证书（含公钥）。

  客户端验证证书，生成会话密钥并用公钥加密发送。

  双方使用会话密钥加密后续通信。

• 多路复用：单个连接并行传输多个请求/响应，避免队头阻塞。
• 头部压缩：使用HPACK算法减少头部数据量。
• 服务器推送：主动向客户端发送资源（如CSS、图片），减少请求次数。