前端笔试面试题目总结.docx编程资料

### 前端笔试面试题目总结 #### HTTP 请求与响应头字段 - **请求头**：常见的请求头字段包括但不限于 `Accept`（指定客户端能够接收的内容类型）、`Authorization`（认证信息）、`Cache-Control`（缓存控制指令）、`Connection`（连接控制指令）、`Content-Length`（请求体长度）、`Content-Type`（请求体类型）、`Cookie`（客户端存储的cookie信息）、`Host`（被请求资源所在的主机和端口号）等。 - **响应头**：常见的响应头字段包括但不限于 `Access-Control-Allow-Origin`（跨源资源共享控制）、`Cache-Control`（缓存控制）、`Content-Encoding`（内容编码方式）、`Content-Length`（响应体长度）、`Content-Type`（响应体类型）、`Date`（响应生成的时间）、`Expires`（响应过期时间）、`Location`（用于重定向的URL）、`Set-Cookie`（设置cookie）等。 #### HTTP 响应状态码 - `200 OK`：请求成功。 - `201 Created`：创建成功。 - `204 No Content`：成功但无响应主体。 - `301 Moved Permanently`：永久重定向。 - `302 Found`：临时重定向。 - `400 Bad Request`：无效请求。 - `401 Unauthorized`：未授权访问。 - `403 Forbidden`：禁止访问。 - `404 Not Found`：找不到请求的资源。 - `500 Internal Server Error`：服务器内部错误。 - `503 Service Unavailable`：服务不可用。 #### AJAX - **含义**：Asynchronous JavaScript and XML 的缩写，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 - **同步与异步的区别**： - 同步（Synchronous）：发送请求后，等待响应完毕才能继续执行后面的代码，会阻塞页面的其他操作。 - 异步（Asynchronous）：发送请求后，继续执行后面的代码，不会阻塞页面的其他操作，响应结果通过回调函数处理。 - **异步请求的状态**：包括但不限于 `UNSENT`（未初始化）、`OPENED`（已调用 open 方法）、`HEADERS_RECEIVED`（收到响应头）、`LOADING`（正在接收数据）、`DONE`（完成）。 - **创建异步请求**：使用 `XMLHttpRequest` 或者 `fetch API` 发起异步请求，并通过回调函数或 Promise 处理响应结果。 - **异步请求完成过程**：通常包括打开连接、发送请求、接收响应、处理响应数据等步骤。 #### 跨域请求与 AJAX 跨域解决方案 - **实现跨域请求**：可以通过 JSONP、CORS（跨源资源共享）等方式实现。 - **JSONP**：利用 `<script>` 标签不受同源策略限制的特点，实现跨域请求。适用于 GET 请求。 - **CORS**：服务器需要设置允许跨域的响应头，例如 `Access-Control-Allow-Origin`，支持所有 HTTP 方法。 #### HTML 常用标签及其分类 - **HTML5 新增标签**：例如 `<article>`、`<section>`、`<header>`、`<footer>`、`<nav>` 等，主要用于增强文档结构。 - **标签分类**：根据语义可分为结构标签、表单标签、多媒体标签等。 #### 提高客户端响应速度的方法 1. **图片优化**：压缩图片大小，使用合适的图片格式（如 WebP）。 2. **减少HTTP请求**：合并CSS和JS文件，使用雪碧图等。 3. **缓存机制**：合理设置缓存策略，使用浏览器缓存、CDN缓存等。 4. **CSS与JS优化**：压缩CSS和JS文件，移除不必要的CSS和JS。 5. **异步加载资源**：使用异步脚本加载方式。 6. **延迟加载**：图片、视频等非关键资源使用懒加载。 7. **减少DOM操作**：避免频繁修改DOM，减少重绘和重排。 8. **使用Web字体时考虑性能**：选择合适的字体格式，使用预加载技术。 9. **避免CSS选择器过于复杂**：简化CSS选择器，减少DOM查询次数。 10. **服务器配置优化**：开启GZIP压缩，优化服务器响应时间等。 #### 开发工具及相关类库 - **开发工具**：常用的IDE有 Visual Studio Code、Sublime Text、WebStorm 等。 - **插件**：例如 ESLint、Prettier 等用于代码格式化和质量检查。 - **类库**：jQuery、React、Vue.js、Angular 等前端框架和库。 - **其他语言**：了解 PHP、Node.js 等后端技术有助于前后端协同开发。 #### 图像格式及其优缺点 - **JPEG**：适用于照片类图像，有损压缩，文件较小；不适合文字和线条图像。 - **PNG**：支持透明背景，无损压缩，适用于图标和文字图像；文件相对较大。 - **GIF**：支持动画，颜色限制在256色内；文件大小适中。 - **SVG**：矢量图形，放大不失真；适用于图标和简单的图形；文件大小较小。 - **WebP**：Google推出的新格式，同时支持有损和无损压缩，文件大小更小；浏览器支持度逐渐增加。 #### DOM 结点属性与事件 - **公共属性**：`id`、`className`、`innerHTML`、`textContent`、`outerHTML` 等。 - **事件属性**：`onclick`、`onmouseover`、`onkeydown`、`onchange`、`onscroll` 等。 #### 盒模型与兼容性 - **盒模型**：包括内容区、内边距、边框、外边距四部分。 - **IE8及以下版本**：默认采用 quirks mode（混杂模式），盒模型计算方式与标准模式不同，可通过 DOCTYPE 触发标准模式。 #### 页面布局方式 - **传统布局**：如使用 `div` 和浮动。 - **Flexbox**：弹性盒子布局，提供更强大的对齐和排列能力。 - **Grid**：网格布局，适用于复杂的二维布局场景。 - **CSS Grid**：提供更精细的网格控制。 #### 缓存方式及其优缺点 - **浏览器缓存**：本地存储资源，减少HTTP请求；需合理设置过期时间。 - **CDN缓存**：分布式存储，加快资源加载速度；需合理设置过期时间。 - **服务端缓存**：减轻数据库压力；需合理管理缓存一致性。 - **代理缓存**：网络层面缓存，减少带宽消耗；需合理设置缓存规则。 #### 元素居中方法 - **水平居中**：使用 `margin: auto` 或 Flexbox 的 `justify-content: center`。 - **垂直居中**：使用 Flexbox 的 `align-items: center` 或 CSS Grid 的 `align-items: center`。 #### CSS 属性与选择器 - **属性值**：`display` 包括 `block`、`inline`、`flex` 等；`position` 包括 `static`、`relative`、`absolute`、`fixed` 等。 - **选择器**：ID 选择器（`#id`）、类选择器（`.class`）、元素选择器（`element`）、伪类选择器（`:hover`）等。 - **CSS3新增选择器**：如 `:nth-child()`、`:not()`、`:target` 等。 #### HTML5 新功能与 JS API - **新功能**：如 `<video>`、`<audio>`、`<canvas>` 等多媒体标签；`<input type="date">`、`<input type="email">` 等表单控件。 - **新API**：如 Fetch API、Storage API、Geolocation API、FileReader API 等。 #### CSS3 属性与选择器 - **属性**：如 `box-shadow`、`border-radius`、`transform`、`transition` 等。 - **选择器**：如 `:nth-child(n)`、`:nth-last-child(n)`、`:nth-of-type(n)`、`:last-of-type` 等。 #### CSS 样式引入方式与优先级计算 - **引入方式**：`<link rel="stylesheet" href="style.css">`、`@import url("style.css");`。 - **`link`与`@import`的区别**：`link`在文档加载时并行加载CSS，`@import`在文档渲染完成后加载CSS。 - **优先级计算**：ID 选择器 > 类选择器 > 元素选择器；具体值 > 通配符选择器；!important > 其他选择器。 #### 浏览器兼容性问题与解决方案 - **内核**：Chrome 使用 Blink，Firefox 使用 Gecko，Safari 使用 WebKit，Edge 使用 EdgeHTML。 - **常见兼容性问题**：如 IE 下的盒模型问题、CSS3 新特性支持度差异、事件模型差异等。 - **解决方案**：使用条件注释、前缀、Polyfills 等方法解决。 #### 前端框架与模型 - **MVC 模型**：Model-View-Controller，将数据模型、用户界面、控制器分离，提高代码的可维护性和可扩展性。 - **前端实现**：如 React 的 Flux/Redux 模型、Vue 的 MVVM 模型、Angular 的 MVC 模型等。 #### JavaScript 语法特点与数据类型 - **语法特点**：动态类型、弱类型、基于原型的面向对象编程等。 - **数据类型**：原始类型（如 number、string、boolean、null、undefined）和引用类型（如 object、array、function）。 #### 字符串与数组的常用方法 - **字符串方法**：`charAt()`、`indexOf()`、`slice()`、`split()`、`replace()` 等。 - **数组方法**：`push()`、`pop()`、`shift()`、`unshift()`、`concat()`、`slice()`、`splice()`、`map()`、`filter()`、`reduce()` 等。 #### JavaScript 继承方式 - **经典继承**：使用 `prototype` 链实现。 - **构造函数继承**：使用 `call` 或 `apply` 方法。 - **混合继承**：结合经典继承和构造函数继承的优点。 - **ES6 类**：使用 `class` 关键字定义类，使用 `extends` 实现继承。 #### JSON 与 JSONP 的区别 - **JSON**：JavaScript Object Notation，一种轻量级的数据交换格式，只支持服务器到客户端的单向数据传递。 - **JSONP**：JSON with Padding，一种跨域数据交互协议，允许服务器将数据封装在客户端提供的回调函数中返回，从而绕过同源策略限制。 #### DOM 节点选择与操作 - **选择方法**：`getElementById()`、`getElementsByClassName()`、`getElementsByTagName()`、`querySelector()`、`querySelectorAll()` 等。 - **操作方法**：`appendChild()`、`removeChild()`、`insertBefore()`、`cloneNode()`、`createTextNode()` 等。 #### 浏览器事件流与绑定事件的差异 - **事件流**：描述了事件如何在页面中传播，包括捕获阶段、目标阶段、冒泡阶段。 - **绑定事件**：不同浏览器支持的事件绑定方法可能不同，如 `addEventListener()`、`attachEvent()` 等。 #### 正则表达式与相关概念 - **元字符**：如 `.`（任意字符）、`*`（零次或多次）、`+`（一次或多次）、`?`（零次或一次）等。 - **分组**：使用圆括号 `()` 将多个字符组合起来。 - **捕获**：分组内的内容会被保存，以便后续使用。 - **零宽断言**：`(?=)`（正向肯定预查）、`(?!)`（正向否定预查）、`(?<=)`（反向肯定预查）、`(?<!)`（反向否定预查）。 - **贪婪与懒惰匹配**：默认情况下正则表达式采用贪婪模式，使用 `?` 可以使其变为懒惰模式。 #### 严格模式与混杂模式 - **触发方式**：在脚本文件或 `<script>` 标签中使用 `use strict` 指令触发严格模式。 - **意义**：严格模式有助于捕捉代码错误，防止某些意外的行为，使代码更加健壮。 #### 英文术语理解 - **HTML**：HyperText Markup Language，超文本标记语言。 - **CSS**：Cascading Style Sheets，层叠样式表。 - **XML**：eXtensible Markup Language，可扩展标记语言。 - **XHTML**：Extensible HyperText Markup Language，可扩展超文本标记语言。 - **E4X**：Extension for XML，一种用于解析和操作 XML 的 JavaScript 扩展。 - **XPath**：XML Path Language，用于在 XML 文档中进行路径表达。 - **HTTP**：Hypertext Transfer Protocol，超文本传输协议。 - **W3C**：World Wide Web Consortium，万维网联盟。 - **WHATWG**：Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组。 - **MIME**：Multipurpose Internet Mail Extensions，多用途互联网邮件扩展。 - **ECMA**：European Computer Manufacturers Association，欧洲计算机制造商协会。 - **BOM**：Browser Object Model，浏览器对象模型。 - **DOM**：Document Object Model，文档对象模型。 - **URL**：Uniform Resource Locator，统一资源定位符。 - **URI**：Uniform Resource Identifier，统一资源标识符。 #### 前端页面结构与 MVC 模型 - **页面结构**：一般包括头部（`<head>`）、主体（`<body>`）两大部分。 - **MVC 模型**：Model-View-Controller，将数据模型、用户界面、控制器分离。 - **前端实现**：如 React 的 Flux/Redux 模型、Vue 的 MVVM 模型、Angular 的 MVC 模型等。 #### 结论 前端工程师在日常工作中不仅需要掌握扎实的基础知识，还需要不断学习新技术、新工具，以应对日益复杂的需求和挑战。希望本文能帮助大家更好地准备前端面试，同时也为日常工作提供参考。