面试前端八股文十问十答第七期

时间：2024-04-05 12:38:27

面试前端八股文十问十答第七期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）如何理解 HTML 语义化？

HTML 语义化是指按照语义来正确地使用 HTML 标签，使得 HTML 结构更具有可读性、可维护性和可访问性。通过使用合适的标签来描述页面的结构和内容，能够让浏览器、搜索引擎和开发者更好地理解页面的内容，从而提升用户体验和网站的可访问性。

具体来说，HTML 语义化包括以下几个方面：

  • 选择合适的标签：使用合适的 HTML 标签来描述内容的意义，例如使用 <header>、<nav>、<article>、<section>、<footer> 等标签来表示页面的结构。
  • 避免滥用无语义标签：尽量避免滥用 <div> 和 <span> 等无语义标签，而应该根据内容的语义选择合适的标签。
  • 提供良好的文档结构：合理地嵌套标签，构建良好的文档结构，使得页面的层次结构清晰明了。
  • 增强可访问性：通过使用语义化标签，可以增强网站的可访问性，使得屏幕阅读器等辅助技术能够更好地理解页面内容，从而帮助残障用户更轻松地访问网站。

通过合理地运用 HTML 语义化，可以提高网站的可读性、可维护性和可访问性，同时有利于搜索引擎的抓取和索引，提升网站的排名和用户体验。

2）script 标签中 defer 和 async 的区别？

defer 和 async 是用于控制 <script> 标签中 JavaScript 文件加载和执行的属性。

  • defer：defer 属性用于告诉浏览器立即下载脚本文件，但延迟执行脚本文件，直到文档解析完毕后再执行。多个带有 defer 属性的脚本会按照它们在文档中出现的顺序依次执行。defer 脚本会在 DOMContentLoaded 事件之前执行。
  • async：async 属性用于告诉浏览器立即下载脚本文件，并且异步执行脚本文件，即脚本文件下载完成后会立即执行，而不会阻塞文档的解析和其他资源的加载。多个带有 async 属性的脚本无法保证执行顺序。async 脚本会在加载完成后尽快执行，可能在 DOMContentLoaded 事件之前或之后执行，取决于脚本加载的时间。

简而言之，defer 属性保证脚本在文档解析完成后按顺序执行，而 async 属性则没有顺序保证，可能在文档解析期间或之后执行。

3）从浏览器地址栏输入 URL 到请求返回发生了什么？

当用户在浏览器地址栏输入 URL 后，浏览器会执行以下步骤：

  1. URL 解析：浏览器会解析输入的 URL，包括协议、主机名、端口号、路径等信息。
  2. DNS 解析：浏览器会查询 DNS（Domain Name System）服务器，将主机名解析为对应的 IP 地址。
  3. 建立 TCP 连接：浏览器通过 IP 地址和端口号与服务器建立 TCP 连接。
  4. 发起 HTTP 请求：浏览器向服务器发送 HTTP 请求，请求包括请求方法（GET、POST 等）、请求头部（Accept、User-Agent 等）、请求体（POST 请求时发送的数据）等信息。
  5. 服务器处理请求：服务器接收到请求后，根据请求的 URL、请求方法等信息进行相应的处理，可能涉及到查询数据库、处理业务逻辑等操作。
  6. 服务器返回响应：服务器处理完请求后，向浏览器返回 HTTP 响应，响应包括状态码（200 表示成功、404 表示未找到资源等）、响应头部（Content-Type、Content-Length 等）、响应体（服务器返回的数据）等信息。
  7. 浏览器接收响应：浏览器接收到服务器返回的响应后，根据响应头部中的信息进行相应的处理，例如根据 Content-Type 来确定响应内容的类型，然后进行相应的解析和渲染。
  8. 关闭 TCP 连接：通信结束后，浏览器和服务器会关闭 TCP 连接，释放资源。
  9. 页面渲染：浏览器根据接收到的响应内容，解析 HTML、CSS、JavaScript 等资源，渲染页面并呈现给用户。

以上是从用户输入 URL 到浏览器接收到服务器响应的整个过程，涉及到 DNS 解析、建立 TCP 连接、发送 HTTP 请求、服务器处理请求、服务器返回响应、浏览器接收响应、页面渲染等多个步骤。

4）盒模型介绍

盒模型是 CSS 中用来布局和设计元素的基本概念之一。它将每个 HTML 元素看作是一个矩形的盒子，包含了元素的内容、内边距、边框和外边距。

盒模型主要由以下几个部分组成：

  • 内容区域（Content）：盒子的实际内容，由元素的内容区域所占据。
  • 内边距（Padding）：内容区域与边框之间的空白区域，用于分隔内容和边框。
  • 边框（Border）：包围在内容区域和内边距外部的线条，用于标识元素的边界。
  • 外边距（Margin）：边框外部的空白区域，用于控制元素与其他元素之间的间距。

在标准的盒模型中，盒子的总宽度和高度等于内容区域的宽度和高度加上内边距、边框和外边距的宽度。然而，在一些情况下，通过修改 CSS 的 box-sizing 属性可以改变盒模型的行为，例如使用 box-sizing: border-box; 可以使得元素的总宽度和高度包括了边框和内边距。

5）CSS 选择器和优先级

CSS 选择器用于指定样式应用的目标元素，根据选择器的不同，可以选择文档中的特定元素或一组元素。CSS 选择器的优先级决定了当多个选择器作用于同一个元素时，哪个样式规则会被应用。

CSS 选择器包括：

  • 元素选择器：选择特定类型的 HTML 元素，例如 div、p、a 等。
  • 类选择器：选择具有指定类名的元素，以.开头，例如 .class-name。
  • ID 选择器：选择具有指定 ID 的元素，以#开头，例如 #element-id。
  • 属性选择器：根据元素的属性来选择元素，例如 [type="text"]。
  • 伪类选择器：根据元素的状态或位置来选择元素，例如 :hover、:first-child。
  • 伪元素选择器：选择元素的特定部分，例如 ::before、::after。

CSS 选择器的优先级由选择器的特殊性（specificity）和重要性（!important）决定。通常来说，特殊性越高的选择器优先级越高，如果特殊性相同，则后定义的样式规则会覆盖先定义的规则。!important 规则会覆盖其他所有规则，因此具有最高的优先级。

6）重排（Reflow）和重绘（Repaint）的理解

  • 重排（Reflow）：重排是指浏览器需要重新计算元素的几何属性（如位置、大小等）并重新布局页面的过程。当页面中的元素发生改变，例如增加、删除、修改元素的内容、样式、尺寸等，浏览器会触发重排。重排是一种比较昂贵的操作，因为它会导致整个页面布局的重新计算和重新渲染，影响页面的性能和流畅度。
  • 重绘（Repaint）：重绘是指当元素的样式发生改变，但不影响其几何属性（如颜色、背景色等）时，浏览器会重新绘制元素的过程。重绘比重排消耗的资源要少，因为它只会重新渲染元素的样式，而不需要重新计算布局。

为了优化页面性能，应尽量减少重排和重绘的次数。可以通过以下方式来减少重排和重绘的发生：

  • 使用 CSS3 动画代替 JavaScript 动画：CSS3 动画通常由浏览器优化处理，减少了重排和重绘的发生。
  • 使用 transform 和 opacity 进行动画：transform 和 opacity 属性可以触发硬件加速，减少页面的重排和重绘。
  • 批量修改样式：避免直接操作样式，尽量通过修改类名一次性修改多个样式，减少重排和重绘的次数。
  • 避免频繁访问布局信息：频繁访问元素的布局信息（如宽度、高度、位置等）会触发重排，应尽量减少这类操作的频率。

7）对 BFC 的理解

BFC，即块级格式化上下文（Block Formatting Context），是 CSS 中的一个概念，用于描述元素内部的布局规则。

BFC 具有以下特性：

  • 内部的块级元素会在垂直方向上一个接一个地放置。
  • 垂直方向上的边距会发生重叠。
  • BFC 元素的内容不会溢出其包含块，而是会撑开父容器。

触发 BFC 的条件包括：

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

BFC 的应用场景包括解决外边距折叠、清除浮动等问题，以及实现一些特殊的布局效果。

8）实现两栏布局（左侧固定 + 右侧自适应布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Two Column Layout</title>
    <style>
        .container {
            display: flex;
        }
        .sidebar {
            width: 200px;
            background-color: lightgray;
        }
        .main-content {
            flex: 1;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <!-- 左侧固定内容 -->
            Sidebar Content
        </div>
        <div class="main-content">
            <!-- 右侧自适应内容 -->
            Main Content
        </div>
    </div>
</body>
</html>

9）实现圣杯布局和双飞翼布局（经典三分栏布局）

圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holy Grail Layout</title>
    <style>
        .container {
            display: flex;
        }
        .main {
            flex: 1;
            order: 2;
            background-color: lightblue;
        }
        .left, .right {
            width: 200px;
            background-color: lightgray;
        }
        .left {
            order: 1;
        }
        .right {
            order: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <!-- 左侧栏 -->
            Left Sidebar
        </div>
        <div class="main">
            <!-- 主要内容 -->
            Main Content
        </div>
        <div class="right">
            <!-- 右侧栏 -->
            Right Sidebar
        </div>
    </div>
</body>
</html>

双飞翼布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Wings Layout</title>
    <style>
        .container {
            display: flex;
        }
        .main {
            flex: 1;
            background-color: lightblue;
        }
        .left, .right {
            width: 200px;
            float: left;
            margin-left: -100%;
            position: relative;
        }
        .left {
            background-color: lightgray;
            left: -200px;
        }
        .right {
            background-color: lightgray;
            right: -200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <!-- 主要内容 -->
            Main Content
        </div>
        <div class="left">
            <!-- 左侧栏 -->
            Left Sidebar
        </div>
        <div class="right">
            <!-- 右侧栏 -->
            Right Sidebar
        </div>
    </div>
</body>
</html>

10）水平垂直居中多种实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Content</title>
    <style>
        /* 方法一：使用 flexbox */
        .container {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh;
        }

        /* 方法二：使用绝对定位 */
        .container2 {
            position: relative;
            height: 100vh;
        }
        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 方法三：使用表格 */
        .container3 {
            display: table;
            width: 100%;
            height: 100vh;
        }
        .cell {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 方法一：使用 flexbox -->
    <div class="container">
        <div>Centered Content</div>
    </div>

    <!-- 方法二：使用绝对定位 -->
    <div class="container2">
        <div class="centered">Centered Content</div>
    </div>

    <!-- 方法三：使用表格 -->
    <div class="container3">
        <div class="cell">
            Centered Content
        </div>
    </div>
</body>
</html>

这些是常见的实现方式，每种方式都有其适用的场景，可以根据具体情况选择合适的方法。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

Github & Gitee 前后端总计已经 1000+ Star，1.5W+ 访问！

⭐点赞⭐收藏⭐不迷路！⭐

相关文章