前端面试题（一）
1. HTML 和 CSS 面试题
-
如何在 HTML 中嵌入 CSS？
- CSS 可以通过三种方式嵌入：外部样式表（
<link>标签），内部样式（<style>标签），和行内样式（通过元素的style属性）。
- CSS 可以通过三种方式嵌入：外部样式表（
-
块级元素和内联元素的区别？
- 块级元素会独占一行，典型例子有
<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.js 通过
-
Vue 生命周期中的
mounted和created有什么区别？created阶段，实例已经创建，可以访问数据和方法，但尚未挂载 DOM。mounted时，实例已挂载，DOM 可以访问。
-
如何在 Vue 中实现组件之间的通信？
- 父子组件可以通过
props和$emit进行通信，兄弟组件可以通过事件总线或使用 Vuex 实现全局状态管理。
- 父子组件可以通过
5. 性能优化
- 前端性能优化有哪些常见手段？
- 使用懒加载、减少 DOM 操作、压缩和合并文件、使用 CDN、缓存、避免内存泄漏。