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、缓存、避免内存泄漏。