前端面试题（二）

6. 深入 JavaScript

• this 关键字的指向是什么？

  • this 的指向是在函数执行时决定的。默认情况下，非严格模式下 this 指向全局对象（浏览器中为 window），严格模式下 this 为 undefined。在对象方法中，this 通常指向调用该方法的对象。而在事件处理器、构造函数等场景中，this 的指向不同。可以通过 call、apply 和 bind 方法显式改变 this 的指向。

• 什么是原型链？

  • 每个 JavaScript 对象都有一个内部属性 [[Prototype]]（在现代浏览器中可以通过 __proto__ 访问），它指向该对象的原型。原型链就是对象通过 [[Prototype]] 层层向上寻找属性或方法，直到找到或到达原型链的顶端（即 null）。

• 如何实现 JavaScript 的继承？

  • 常见的继承方法有：
    • 原型继承：通过将子类构造函数的 prototype 指向父类的实例。
    • 组合继承：结合构造函数和原型链继承。
    • ES6 class 继承：通过 class 和 extends 关键字实现继承。

• 什么是事件循环（Event Loop）？

  • JavaScript 是单线程语言，事件循环是用于处理异步操作的机制。事件循环从任务队列中获取任务执行，任务分为微任务（Microtask，如 Promise）和宏任务（Macrotask，如 setTimeout）。事件循环优先执行当前的微任务队列，执行完后再处理宏任务。

7. 网络与性能优化

• 什么是浏览器的回流（Reflow）和重绘（Repaint）？

  • 回流 是当元素的尺寸、布局或位置变化时，浏览器重新计算布局的过程，代价较大。重绘 是元素的外观样式（如颜色）发生变化时，浏览器重新绘制的过程，相比回流，重绘的代价较小。
  • 优化建议包括减少对 DOM 的频繁操作、使用 transform 和 opacity 来避免触发回流、批量更新 DOM。

• 如何减少页面加载时间？

  • 代码分割：通过按需加载减少初始加载体积，如使用 Webpack 的代码分割功能。
  • 懒加载：仅在需要时加载图片和其他资源。
  • 缓存：利用 HTTP 缓存（如 Cache-Control、ETag）减少重复资源加载。
  • CDN：将静态资源分发到多个地理位置靠近的服务器，提高下载速度。
  • 合并和压缩：将 CSS 和 JS 文件合并，减少 HTTP 请求，并压缩代码减少文件体积。

• 解释 HTTP/2 和 HTTP/3 的改进？

  • HTTP/2 通过引入二进制帧、多路复用（允许一个连接中同时传输多个请求），以及服务器推送（server push）等优化了 HTTP 性能。
  • HTTP/3 则使用了 QUIC 协议，基于 UDP，进一步减少了连接延迟，提高了安全性和速度，尤其在不稳定的网络环境下表现优异。

8. Vue.js 和 React 深入

• Vue 中的 watch 和 computed 有什么区别？

  • computed 是基于依赖的缓存属性，只有依赖的数据变化时，才会重新计算。适合用于有复杂计算的场景。watch 是用于监听特定数据的变化，并在变化时执行回调，适合用于响应某些数据变化时执行副作用操作，如调用 API。

• React 中的 useEffect 和 useLayoutEffect 有什么区别？

  • useEffect 在浏览器完成渲染后异步执行，适合处理不影响页面布局的副作用。useLayoutEffect 会在 DOM 更新后立即同步执行，适合操作 DOM 或需要提前完成计算的场景。

• React 中的 key 属性的作用是什么？

  • key 用于帮助 React 识别哪些元素在列表中发生了变化（如被添加或移除）。有助于提高渲染性能，避免不必要的 DOM 更新。通常应当为 key 提供唯一的标识符。

9. 安全与防护

• 什么是 XSS（跨站脚本攻击）？如何防御？

  • XSS 是攻击者向网页中注入恶意代码，通常通过输入框、URL 参数等传递。防御措施包括：
    • 对输入进行转义和过滤（如使用 encodeURIComponent 处理 URL 中的参数）。
    • 使用 CSP（内容安全策略）限制可以执行的脚本源。

• 什么是 CSRF（跨站请求伪造）？如何防御？

  • CSRF 是攻击者诱使用户在已登录的情况下向受信任的网站发起非预期的请求。防御措施包括：
    • 使用 CSRF token 来验证请求的合法性。
    • 使用 SameSite Cookie 标志，限制跨站点的 Cookie 发送。

10. 前端测试与自动化

• 前端如何进行单元测试？

  • 使用如 Jest、Mocha 等测试框架进行 JavaScript 函数和组件的单元测试。通过断言库（如 Chai）编写测试用例，确保各模块的输入输出符合预期。

• 什么是端到端测试？

  • 端到端测试（E2E testing） 是通过模拟用户操作来测试整个应用程序的功能是否正常，常用工具如 Cypress 或 Selenium。它测试应用的整体流程，而不仅仅是某个独立模块。