常见的前端面试笔试题（初）第一篇

1. JavaScript 中如何检测一个变量是 String 类型？

答案：

function isString(value) {
  return typeof value === 'string' || value instanceof String;
}

解释：

• typeof 检测原始字符串类型。
• instanceof 检测 String 包装对象。
• 更严谨的场景可以用 Object.prototype.toString.call(value) === '[object String]'。

---

2. CSS 的 position 值及含义

答案：

• static：默认值，元素正常布局，忽略 top/right 等属性。
• relative：相对自身原位置偏移，不脱离文档流。
• absolute：相对于最近非 static 的父元素定位，脱离文档流。
• fixed：相对于视口定位，脱离文档流。
• sticky：滚动时在阈值范围内固定（如导航栏）。

---

3. 为什么要初始化 CSS 样式？

答案：
不同浏览器对默认样式（如 margin、padding）的设定不同，初始化 CSS 可以：

1. 消除浏览器差异，保证一致性。
2. 避免默认样式干扰布局（如列表符号、超链接颜色）。

---

4. display:none 与 visibility:hidden 的区别

答案：

• display:none：元素不渲染且不占空间，触发重排（reflow）。
• visibility:hidden：元素隐藏但仍占空间，仅触发重绘（repaint）。

---

5. XML 和 JSON 的区别

答案：

特性	XML	JSON
数据结构	标签嵌套，树形结构	键值对，轻量级
可读性	高	高
体积	较大（标签重复）	较小
解析难度	复杂（需 DOM 解析）	简单（直接转 JS 对象）
数据类型支持	需自定义	支持基本类型和结构

---

6. 常见浏览器内核

答案：

• Chrome/新版 Edge：Blink
• Firefox：Gecko
• Safari：WebKit
• 旧版 IE：Trident
• 旧版 Edge：EdgeHTML

---

7. 原生 JS 给按钮绑定两个 onclick 事件

答案：
使用 addEventListener 多次绑定：

const btn = document.getElementById('btn');
btn.addEventListener('click', () => { /* 事件1 */ });
btn.addEventListener('click', () => { /* 事件2 */ });

---

8. 降低页面加载时间的方法

答案：

1. 压缩资源：JS/CSS 文件用工具（如 Webpack）压缩。
2. 懒加载：图片/组件按需加载。
3. CDN 加速：静态资源分发到全球节点。
4. 减少 HTTP 请求：合并文件（雪碧图、代码合并）。
5. 浏览器缓存：设置 Cache-Control 或 ETag。

---

10. Vue 脚手架搭建步骤

答案：

1. 安装 Node.js 和 npm。
2. 全局安装 Vue CLI：npm install -g @vue/cli。
3. 创建项目：vue create project-name。
4. 选择预设配置（Babel、Router 等）。
5. 启动项目：npm run serve。

---

11. Vue 双向数据绑定原理

答案：
核心： 基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现数据劫持。
步骤：

1. 数据劫持：劫持对象属性的 getter/setter。
2. 依赖收集：通过 Dep 类收集 Watcher（依赖）。
3. 派发更新：数据变化时通知 Watcher 更新视图。
4. 编译模板：解析指令（如 v-model）绑定事件和更新函数。

---

12. vue-router 导航钩子

答案：

• 全局钩子：beforeEach、afterEach。
• 路由独享钩子：beforeEnter。
• 组件内钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

---

13. Vue 是否支持 Ajax？如何实现？

答案：
支持，常用方式：

1. 原生 fetch 或 XMLHttpRequest。
2. 第三方库：axios（推荐）或 vue-resource。
3. 在生命周期钩子（如 created）中发起请求。

---

14. Vue 常用指令

答案：

• v-bind：动态绑定属性（缩写 :）。
• v-model：表单双向绑定。
• v-for：循环渲染。
• v-if/v-show：条件渲染。
• v-on：事件绑定（缩写 @）。
• v-slot：插槽作用域。
• v-once：单次渲染。

---

15. active-class 属性和嵌套路由定义

答案：

• active-class 是 vue-router 中 <router-link> 的属性，用于设置激活状态的类名。
• 嵌套路由：在父路由配置中使用 children 字段定义子路由。

---

16. 常见的 Web 攻击技术

答案：

1. XSS（跨站脚本攻击）：注入恶意脚本，防御：输入过滤、转义输出。
2. CSRF（跨站请求伪造）：伪造用户请求，防御：Token 验证、同源检测。
3. SQL 注入：拼接恶意 SQL，防御：预编译语句。
4. 点击劫持：透明 iframe 覆盖，防御：设置 X-Frame-Options。

---

回答技巧：

• 结构化：分点回答，逻辑清晰。
• 举例：结合实际场景（如优化方法提到 Webpack）。
• 深入原理：高分题（如 Vue 双向绑定）需详细说明技术细节。
• 术语准确：避免口语化，使用专业词汇（如“重排”而非“重新排列布局”）。