前端面试题（一）

1. HTML 和 CSS 面试题

• 如何在 HTML 中嵌入 CSS？

  • CSS 可以通过三种方式嵌入：外部样式表（<link>标签），内部样式（<style>标签），和行内样式（通过元素的style属性）。

• 块级元素和内联元素的区别？

  • 块级元素会独占一行，典型例子有 <div>, <h1>, <p> 等。内联元素则不会独占一行，常见的如 <span>, <a>。

• flexbox 和 grid 布局的区别？

  • Flexbox 主要用于一维布局（水平或垂直方向），而 Grid 则擅长二维布局，可以在水平和垂直方向上进行更复杂的排列。

2. JavaScript 面试题

• var, let 和 const 的区别？

  • var 有函数作用域，可以在声明之前使用（变量提升），而 let 和 const 都有块级作用域，声明之前不可用。const 声明的变量不能重新赋值。

• 什么是闭包？

  • 闭包是指函数能够记住并访问它的词法作用域，即使在函数执行完成后，依然可以访问外部函数中的变量。

• 事件冒泡和事件捕获的区别？

  • 事件冒泡是指事件从目标元素开始逐级向上传播，而事件捕获则是从根节点逐级向下传递到目标元素。

3. 浏览器行为

• 浏览器的渲染流程是怎样的？

  • 浏览器首先解析 HTML 和 CSS 生成 DOM 树和 CSSOM 树，然后结合这两者生成渲染树，最后通过布局和绘制步骤展示页面。

• 为什么 CSS 会阻塞渲染，而 JS 会阻塞 DOM 解析？

  • CSS 阻塞渲染是因为浏览器需要先计算样式才能绘制页面。JavaScript 会阻塞 DOM 解析是因为它可能会修改 DOM 结构，因此必须等到 JS 加载完毕并执行后再继续解析。

4. Vue.js 相关问题

• Vue 的双向数据绑定是如何实现的？

  • Vue.js 通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）来实现数据劫持，当数据发生变化时，自动触发视图更新。

• Vue 生命周期中的 mounted 和 created 有什么区别？

  • created 阶段，实例已经创建，可以访问数据和方法，但尚未挂载 DOM。mounted 时，实例已挂载，DOM 可以访问。

• 如何在 Vue 中实现组件之间的通信？

  • 父子组件可以通过 props 和 $emit 进行通信，兄弟组件可以通过事件总线或使用 Vuex 实现全局状态管理。

5. 性能优化

• 前端性能优化有哪些常见手段？
  • 使用懒加载、减少 DOM 操作、压缩和合并文件、使用 CDN、缓存、避免内存泄漏。