前端面试题详解整理11|声明变量，宏任务和微任务HTTP请求，bfc,html的块级元素、行内元素，hook,定位postion跨域，同源策略，

金色的雨570
57 阅读14分钟

先和我说不要紧张 自我介绍， 句我项目后台怎么做的、ui司我大三的课程有没有前端的专业可那段我包装的实习经历(校企合作)

ant.design和ant.design.pro区别

  1. Ant Design 是一个基于 React 的 UI 组件库，提供了丰富的组件和样式，可用于构建现代化的 Web 应用程序。而 Ant Design Pro 则是 Ant Design 的一个基于 Umi 的开箱即用的中后台前端/设计解决方案。

以下是它们之间的主要区别：

  1. Ant Design:

    • Ant Design 是一个 UI 组件库，提供了一系列基础组件（如按钮、表单、表格等）和高级组件（如日期选择器、图表、模态框等）。
    • 它主要用于构建各种类型的 Web 应用程序，包括前端、后台、移动端等。

  2. Ant Design Pro:

    • Ant Design Pro 是基于 Ant Design 的一套中后台前端/设计解决方案，旨在提供一套完整的开发工具和模板，帮助开发者快速构建企业级中后台应用。
    • 它基于 Umi 框架，并集成了路由、状态管理、权限控制、国际化等常用功能，同时提供了丰富的示例和模板，包括用户管理、权限管理、仪表盘等常见的中后台页面。
    • Ant Design Pro 还提供了一些可视化的配置工具，如 ProTable、ProForm 等，可以快速生成复杂的表单和表格。

总的来说，Ant Design 主要是一个 UI 组件库，而 Ant Design Pro 则是基于 Ant Design 的一套完整的中后台解决方案，旨在提高开发效率，减少开发成本，同时保持应用的一致性和美观性。

问网络:http请求过程

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据的协议，通常用于在客户端和服务器之间传输网页和资源。以下是HTTP请求过程的基本步骤：

  1. 建立连接：

    • 客户端（如浏览器）向服务器发起连接请求。
    • 如果是HTTP/1.1，可以使用持久连接，即在同一个TCP连接上发送多个HTTP请求，以减少连接建立的开销。

  2. 发送请求：

    • 客户端发送HTTP请求到服务器。请求包括请求方法（GET、POST等）、URL、HTTP版本号、请求头部（如Accept、User-Agent等）、以及可选的请求体（对于POST请求）。

  3. 服务器处理请求：

    • 服务器收到请求后，根据请求的URL和其他信息确定要返回的内容。
    • 服务器进行相应的处理，可能包括读取数据库、执行业务逻辑等。

  4. 返回响应：

    • 服务器生成HTTP响应，包括状态码、响应头部（如Content-Type、Content-Length等）、以及响应体（返回的实际数据）。
    • 响应的状态码表示了请求的处理结果，如200表示成功、404表示未找到资源、500表示服务器内部错误等。

  5. 传输数据：

    • 服务器将HTTP响应发送回客户端。
    • 如果响应较大，可以使用分块传输或者压缩等技术来提高传输效率。

  6. 关闭连接：

    • 客户端收到完整的响应后，关闭与服务器的连接（对于非持久连接的情况）。
    • 如果是持久连接，连接可能会保持一段时间，以备发送下一个请求。

以上是HTTP请求过程的基本步骤，实际情况中可能会有更多的细节和特殊情况，如缓存、重定向、认证等。

4. bfc

BFC，即块级格式化上下文（Block Formatting Context），是CSS中的一个重要概念，用于规范块级元素在布局时的行为。BFC的形成对于页面布局和元素定位有着重要的影响。以下是关于BFC的一些重要信息：

  1. 概念：

    • BFC是一个独立的渲染区域，其中的元素布局不会影响到外部的元素。
    • 在BFC中，块级元素会按照特定规则进行布局，这些规则包括浮动、清除浮动、边距折叠等。

  2. 形成条件：

    • 根元素（html）或包含根元素的元素。
    • 浮动元素（float不是none）。
    • 绝对定位元素（position为absolute或fixed）。
    • 行内块元素（display为inline-block）。
    • 表格单元格（display为table-cell）。
    • overflow不为visible的块元素。

  3. 作用：

    • 防止垂直方向上的外边距重叠。
    • 清除浮动，使得父元素可以包含浮动的子元素。
    • 创建自包含的环境，内部的元素不会影响到外部的布局。

  4. 常见应用场景：

    • 清除浮动：通过给父元素设置overflow为auto或hidden来清除子元素的浮动。
    • 防止外边距重叠：BFC内部的块级元素外边距不会与外部的块级元素外边距发生重叠。

BFC是理解CSS布局中的重要概念之一，合理地使用BFC可以避免一些布局上的问题，并且更加精确地控制元素的布局和定位。

6.html的块级元素、行内元素有哪些，区别是什么

在 HTML 中，元素根据其在页面中的布局方式可以分为块级元素和行内元素。它们的主要区别在于它们在页面中的显示方式以及在布局上的行为不同。

块级元素（Block-level Elements）：

  1. 块级元素会在页面中独占一行，每个块级元素都从新的一行开始，占据父元素的整个宽度。
  2. 常见的块级元素包括 <div>、<p>、<h1> ~ <h6>、<ul>、<ol>、<li>、<form> 等。
  3. 块级元素可以包含其他块级元素和行内元素，也可以嵌套在其他块级元素中。

行内元素（Inline Elements）：

  1. 行内元素不会在页面中独占一行，它们会在同一行内依

5.css的定位postion有哪些，区别(还有文档流)

在 CSS 中，定位（positioning）是指如何控制元素在页面中的布局方式。常见的定位方式有以下几种，它们在页面布局中的行为和特点有所不同：

  1. Static（默认定位）：

    • 静态定位是默认的定位方式，元素按照文档流正常布局，不受 top、right、bottom、left 属性的影响。
    • 无法通过 z-index 属性改变元素的层叠顺序。

  2. Relative（相对定位）：

    • 相对定位是相对于元素原本在文档流中的位置进行定位。
    • 使用 top、right、bottom、left 属性可以移动元素的位置。
    • 元素移动后仍占据原来的文档流位置，不会影响其他元素的布局。
    • 可以通过 z-index 属性改变元素的层叠顺序。

  3. Absolute（绝对定位）：

    • 绝对定位是相对于最近的具有定位属性（非 static）的父元素进行定位，如果没有，则相对于初始包含块（initial containing block）。
    • 使用 top、right、bottom、left 属性可以确定元素的位置，相对于其定位父元素的位置进行偏移。
    • 绝对定位的元素会脱离文档流，不占据文档流中的位置，因此不会影响其他元素的布局。
    • 可以通过 z-index 属性改变元素的层叠顺序。

  4. Fixed（固定定位）：

    • 固定定位是相对于浏览器窗口进行定位，不随页面滚动而变化。
    • 使用 top、right、bottom、left 属性可以确定元素相对于浏览器窗口的位置。
    • 固定定位的元素会脱离文档流，不占据文档流中的位置，因此不会影响其他元素的布局。
    • 可以通过 z-index 属性改变元素的层叠顺序。

文档流指的是 HTML 文档中元素默认的排列方式，元素按照从上到下、从左到右的顺序依次排列，也称为正常文档流（Normal Flow）。在正常文档流中，元素按照其在 HTML 中的顺序一个接一个地排列，如果不设置定位或浮动，元素就会按照文档流的方式排列。

总结：

  • Static：元素按照文档流正常布局，无法通过定位属性进行调整。
  • Relative：相对于元素原本的位置进行定位，不会脱离文档流。
  • Absolute：相对于定位父元素或初始包含块进行定位，脱离文档流。
  • Fixed：相对于浏览器窗口进行定位，脱离文档流。

6.声明变量的方式、区别【使用const声明的变量必须进行初始化赋值】

在 JavaScript 中，声明变量的方式有三种：使用 var、let 和 const 关键字。这些关键字在声明变量时有不同的特性和用法。

  1. var：

    • var 是 JavaScript 最早引入的变量声明关键字。
    • 变量声明的作用域是函数作用域（function scope），在声明它的函数内部可见。
    • 变量可以被重复声明，而且不会抛出错误。
    • 如果不初始化变量，默认值为 undefined。
    var x = 10;
var x; // 正确，重复声明

  2. let：

    • let 是 ES6 引入的块级作用域（block scope）变量声明关键字。
    • 变量声明的作用域是块级作用域，在声明它的块（大括号）内部可见。
    • 不允许重复声明变量，重复声明会导致语法错误。
    • 如果不初始化变量，默认值为 undefined。
    let y = 20;
let y; // 报错，重复声明

  3. const：

    • const 也是 ES6 引入的关键字，用于声明常量。
    • 声明的变量必须进行初始化赋值，否则会抛出语法错误。
    • 声明的常量是不可变的，即其值在声明后不可再次修改。
    • 变量声明的作用域与 let 相同，都是块级作用域。
    const z = 30;
const z; // 报错，必须进行初始化赋值

总结：

  • 使用 var 声明的变量具有函数作用域，可以被重复声明，可以在声明之前使用（变量提升）。
  • 使用 let 声明的变量具有块级作用域，不允许重复声明，可以在声明之前使用（但未初始化时为 undefined）。
  • 使用 const 声明的常量必须进行初始化赋值，其值在声明后不可更改，具有块级作用域，不允许重复声明。

7.宏任务和微任务

宏任务（Macrotask）和微任务（Microtask）是 JavaScript 异步编程中的两种不同的任务队列，它们用于处理异步任务的执行顺序和优先级。

宏任务（Macrotask）：

  • 宏任务包括整体代码（Script）、setTimeout、setInterval、requestAnimationFrame、I/O 操作等。
  • 宏任务队列是一个 FIFO（先进先出）队列，每次只能执行一个任务。
  • 当宏任务队列中的任务执行完毕后，浏览器会检查是否需要重新渲染页面，并执行微任务队列中的任务。

微任务（Microtask）：

  • 微任务包括 Promise 的处理函数（then、catch、finally）、async/await 中的 await 表达式。
  • 微任务队列也是一个 FIFO 队列，但它具有比宏任务更高的优先级。
  • 当微任务队列不为空时，JavaScript 引擎会优先执行微任务队列中的任务，直到微任务队列为空为止。

事件循环（Event Loop）：

  • 事件循环是 JavaScript 引擎用于处理异步任务的机制，它不断地从宏任务队列中取出任务执行，直到宏任务队列为空为止。
  • 在执行宏任务的过程中，如果遇到微任务，JavaScript 引擎会优先执行微任务队列中的任务，直到微任务队列为空。
  • 这种宏任务与微任务交替执行的机制称为事件循环（Event Loop），它确保了 JavaScript 代码的执行顺序符合预期，并且能够有效地处理异步任务。

综上所述，宏任务和微任务是 JavaScript 中用于处理异步任务的两种不同的任务队列，它们在执行顺序和优先级上有所不同，但共同参与了 JavaScript 引擎的事件循环机制。理解宏任务和微任务的概念对于处理 JavaScript 异步编程非常重要，能够帮助我们编写出更加高效和可靠的异步代码。

8.什么是跨域【同源策略】

跨域（Cross-Origin）是指在 Web 开发中，当一个网页的资源（如 JavaScript、CSS、图片等）请求另一个源（domain、protocol、port）下的资源时，就会发生跨域问题。浏览器实施的同源策略（Same-Origin Policy）是为了保护用户的安全和隐私，防止恶意网站获取用户的敏感信息，因此会阻止跨源资源的请求。

同源策略要求网页中的 JavaScript 只能访问相同源下的资源，即源（protocol + domain + port）必须完全相同才能进行通信。如果协议、域名或端口有任何不同，都被视为跨域。

跨域问题会导致以下一些常见情况：

  1. JavaScript 访问另一个域名下的资源：例如，通过 AJAX 请求另一个域名下的 API 数据。

  2. 跨域写 Cookie：浏览器在发送请求时不会携带跨域请求的 Cookie，因此无法在跨域请求中设置 Cookie。

  3. DOM 访问：无法通过 JavaScript 获取到跨域页面的 DOM 元素。

为了解决跨域问题，常见的方法包括：

  1. JSONP（JSON with Padding）：通过动态创建 <script> 标签来实现跨域数据传输，利用 <script> 标签不受同源策略限制的特点。

  2. CORS（Cross-Origin Resource Sharing）：跨源资源共享是一种机制，它使用额外的 HTTP 头来告诉浏览器，是否允许在跨域请求中访问特定资源。

  3. 代理服务器：在同源服务器上设置代理，将跨域请求转发到目标服务器，并将响应返回给客户端，从而绕过同源策略限制。

  4. iframe：通过在页面中嵌入 <iframe> 元素，实现跨域通信。

跨域问题是 Web 开发中常见的挑战之一，了解跨域原理和解决方法对于构建安全可靠的 Web 应用至关重要。

9.react的hook(自由发挥)

React Hooks 是 React 16.8 版本引入的一项重要特性，它允许函数组件中使用状态和其他 React 特性，而无需编写类组件。Hooks 提供了一种更加简洁和灵活的方式来管理组件状态、生命周期和副作用。

下面是一些常用的 React Hooks，以及它们的用法和作用：

  1. useState：

    • useState Hook 用于在函数组件中添加局部状态。

    • 使用方式：const [state, setState] = useState(initialState)。

    • 示例：

      import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

  2. useEffect：

    • useEffect Hook 用于在函数组件中执行副作用操作，如数据获取、订阅和手动操作 DOM。

    • 使用方式：useEffect(() => { // effect }, [dependencies])。

    • 示例：

      import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <div>Seconds: {seconds}</div>;
}

  3. useContext：

    • useContext Hook 用于在函数组件中访问 React 上下文。

    • 使用方式：const value = useContext(MyContext)。

    • 示例：

      import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Button</button>;
}

  4. useReducer：

    • useReducer Hook 类似于 Redux 中的 reducer，用于管理复杂的状态逻辑。

    • 使用方式：const [state, dispatch] = useReducer(reducer, initialState)。

    • 示例：

      import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

  5. useMemo：

    • useMemo Hook 用于在渲染过程中对计算结果进行记忆化，避免不必要的重复计算。

    • 使用方式：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])。

    • 示例：

      import React, { useState, useMemo } from 'react';

function MemoizedComponent({ a, b }) {
  const result = useMemo(() => {
    // Expensive calculation
    return a + b;
  }, [a, b]);

  return <div>Result: {result}</div>;
}

React Hooks 提供了一种更加简洁和灵活的方式来编写 React 组件，使得函数组件能够享有类组件的状态管理和生命周期等特性，同时避免了类组件的一些限制和不便。通过合理使用 Hooks，可以编写出更加清晰、易于维护的 React 应用程序。

然后给了我一些建议:网络基础原理、 腾讯前端实习一面_牛客网 (nowcoder.com) 前端基础掌握牢固一点、性能优化

avatar
文章
阅读
粉丝