前端面试题汇总2

1. CSS 中两个 .class1 .class2 从哪个开始解析

在 CSS 中，选择器 .class1 .class2 表示所有 class 为 class1 的元素中的 class 为 class2 的子元素。浏览器解析这个选择器时，从右向左解析。也就是说，浏览器首先找到所有 class 为 class2 的元素，然后检查这些元素的父级元素是否有 class1，从而应用样式。

.class1 .class2 {color: red;
}

2. Flex 布局相关的问题

Flexbox 是一种一维布局模型，可以在一个方向上高效地分配空间并对齐内容。以下是一些常见的 Flex 布局属性：

  • display: flex: 将容器变为 flex 容器。
  • flex-direction: 定义主轴方向。取值有 row（默认）、row-reverse、column、column-reverse。
  • justify-content: 定义主轴上的对齐方式。取值有 flex-start、flex-end、center、space-between、space-around、space-evenly。
  • align-items: 定义交叉轴上的对齐方式。取值有 stretch（默认）、flex-start、flex-end、center、baseline。
  • flex-wrap: 定义是否换行。取值有 nowrap（默认）、wrap、wrap-reverse。

3. JS 的事件循环

JavaScript 是单线程的，使用事件循环来处理异步操作。事件循环的基本步骤：

  1. 执行栈：同步代码逐行执行，函数调用形成执行栈。
  2. 任务队列：异步操作（如 setTimeout、Promise）完成后，将回调函数放入任务队列。
  3. 事件循环：不断检查执行栈是否为空，如果为空则从任务队列中取出第一个任务并执行。
console.log('start');
setTimeout(() => {console.log('timeout');
}, 0);
console.log('end');// 输出顺序: start -> end -> timeout

4. 写题：解析 URL，history 模式和 hash 模式的混在一起

function parseURL(url) {const parser = document.createElement('a');parser.href = url;return {protocol: parser.protocol,hostname: parser.hostname,port: parser.port,pathname: parser.pathname,search: parser.search,hash: parser.hash,host: parser.host};
}const url = 'https://www.example.com:8080/pathname/?search=test#hash';
console.log(parseURL(url));

5. 写题：解析时间

function formatDate(date) {const yyyy = date.getFullYear();const mm = String(date.getMonth() + 1).padStart(2, '0');const dd = String(date.getDate()).padStart(2, '0');const hh = String(date.getHours()).padStart(2, '0');const min = String(date.getMinutes()).padStart(2, '0');const ss = String(date.getSeconds()).padStart(2, '0');return `${yyyy}-${mm}-${dd} ${hh}:${min}:${ss}`;
}const date = new Date();
console.log(formatDate(date));

6. 缓存相关问题

强缓存和协商缓存是 HTTP 缓存机制中的两种缓存策略：

  • 强缓存：不会向服务器发送请求，直接从缓存中读取资源。常见的头部字段有 Expires 和 Cache-Control。
  • 协商缓存：会向服务器发送请求，服务器根据资源的状态决定是否使用缓存。常见的头部字段有 Last-Modified 和 ETag。

一般存储较静态且不频繁更新的数据，如静态资源（CSS、JS、图片等）。

7. async 和 defer 的区别

  • async：异步加载脚本，脚本下载完成后立即执行，不保证顺序。
  • defer：异步加载脚本，脚本下载完成后按顺序执行，保证在文档解析完成后执行。
<script src="script1.js" async></script>
<script src="script2.js" async></script><script src="script1.js" defer></script>
<script src="script2.js" defer></script>

8. Vue 的渲染机制

Vue 的渲染机制分为以下几个步骤：

  1. 初始化：解析模板，生成渲染函数。
  2. 响应式数据：数据变更时触发视图更新。
  3. 虚拟 DOM：每次渲染都会生成虚拟 DOM。
  4. diff 算法：比较新旧虚拟 DOM，找出变化。
  5. 更新 DOM：应用 diff 结果，更新真实 DOM。

HTML 的 doctype 有什么用

<!DOCTYPE html> 声明位于 HTML 文档的开头，用于告诉浏览器当前文档使用的是 HTML5 标准。它的主要作用是让浏览器以标准模式（standard mode）来解析和渲染网页，避免进入怪异模式（quirks mode），确保网页在不同浏览器中有一致的表现。

script 和 link 标签的加载顺序

  • <script> 标签：默认情况下，脚本会按顺序同步加载和执行。如果在 <head> 中包含 <script> 标签，页面会在脚本执行完成后才继续加载。可以通过 async 和 defer 属性来改变默认行为：

    • async：脚本异步加载，加载完成后立即执行，不保证顺序。
    • defer：脚本异步加载，加载完成后按顺序执行，保证在文档解析完成后执行。

  • <link> 标签：用于加载外部资源（如 CSS）。默认情况下，CSS 是同步加载和解析的，会阻塞渲染。

iframe 有了解过吗

iframe 元素用于在当前网页中嵌入另一个 HTML 文档。常见用途包括嵌入第三方内容（如广告、视频）、隔离 CSS 和 JavaScript 的作用域。使用 iframe 时需要注意安全问题，如跨站脚本（XSS）攻击，可以通过设置 sandbox 属性来限制 iframe 的行为。

行内元素水平垂直居中

对于一个行内元素或行内块元素，可以使用以下方法来实现水平和垂直居中：

  • 水平居中：使用 text-align: center；
  • 垂直居中：如果父元素是一个 flex 容器，可以使用 align-items: center 和 justify-content: center。

例如：

<div style="display: flex; justify-content: center; align-items: center; height: 200px;"><span>Centered</span>
</div>

innerHTML 和 innerText 区别

  • innerHTML：返回或设置元素的 HTML 内容，包括 HTML 标签。
  • innerText：返回或设置元素的文本内容，不包含 HTML 标签，受 CSS 样式影响（如 display: none 的元素不会包含在内）。

修改 DOM 耗时？为什么

修改 DOM 可能是耗时的，因为每次对 DOM 的修改都会触发浏览器的重绘（repaint）或回流（reflow），尤其是回流会涉及布局计算、重新渲染等一系列操作。频繁操作 DOM 会导致性能下降，建议使用批量操作或虚拟 DOM 来优化性能。

重绘（Repaint）和回流（Reflow）

  • 重绘：元素的外观发生改变（如颜色、背景）但没有影响布局时，浏览器会重新绘制元素。
  • 回流：元素的布局或几何属性发生改变（如大小、位置），会触发浏览器重新计算布局和渲染树，代价比重绘高。

Promise 的意义（回调地狱）

Promise 用于处理异步操作，以更直观和可读的方式管理异步任务，避免回调地狱。回调地狱是指回调函数嵌套过深，代码难以维护和调试。Promise 通过链式调用 .then() 方法解决这一问题：

fetchData().then(response => process(response)).then(result => display(result)).catch(error => handleError(error));

回调和闭包

  • 回调：将一个函数作为参数传递给另一个函数，并在特定事件发生时调用该函数。常用于处理异步操作。
  • 闭包：函数和其外部环境的引用组合形成闭包。闭包允许函数访问外部函数作用域中的变量，即使在外部函数执行完毕之后。闭包常用于创建私有变量和函数。
function createCounter() {let count = 0;return function() {return ++count;};
}const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

这个示例中，返回的匿名函数形成闭包，持有对 count 变量的引用，因此可以在每次调用时增加 count 的值。

6. Webpack为什么打包、进行压缩之后，性能就会提高呢

Webpack 打包和压缩提高性能的原因

  1. 文件合并：

    • 减少 HTTP 请求：Webpack 将多个模块和依赖合并成一个或多个文件，减少了浏览器发起的 HTTP 请求次数。现代浏览器对并行请求的数量有限制，减少请求数可以降低延迟和开销。

  2. 代码压缩：

    • 文件大小减少：Webpack 使用工具（如 UglifyJS、Terser）压缩代码，去掉空格、注释和冗余代码，极大地减少了文件大小。文件越小，传输时间越短。

  3. 代码分割：

    • 按需加载：Webpack 可以根据应用的需要进行代码分割（Code Splitting），只加载当前页面所需的代码。这样可以避免一次性加载所有代码，提升页面初始加载性能。

  4. 树摇（Tree Shaking）：

    • 去除无用代码：Webpack 通过静态分析模块的依赖关系，去除没有实际使用的代码（Dead Code），从而减少打包后的文件体积。

  5. 模块热替换（HMR）：

    • 开发效率：Webpack 提供模块热替换功能，在开发过程中只更新变化的部分，而不是整个页面，提升开发效率和体验。

示例配置：

const TerserPlugin = require('terser-webpack-plugin');module.exports = {mode: 'production',optimization: {minimize: true,minimizer: [new TerserPlugin()],splitChunks: {chunks: 'all',},},
};

7. 为什么使用 Webpack

使用 Webpack 的理由

  1. 模块化支持：

    • 多种模块格式：支持 ES6 模块、CommonJS、AMD 等模块格式，使开发者可以使用最新的 JavaScript 语法和标准。

  2. 强大的插件系统：

    • 功能扩展：Webpack 提供丰富的插件（Plugins），如压缩、分包、代码分割等，方便扩展打包功能。

  3. 代码分割和懒加载：

    • 优化性能：通过代码分割（Code Splitting）和懒加载（Lazy Loading），提升应用性能，减少初始加载时间。

  4. 开发工具集成：

    • 热模块替换（HMR）：实时更新代码，提高开发效率和体验。
    • 开发服务器：内置开发服务器（Webpack Dev Server），支持快速开发和调试。

  5. 配置灵活：

    • 高可定制性：可以根据项目需求灵活配置，适应各种复杂场景。

  6. 生态系统：

    • 社区和插件：强大的社区支持和丰富的插件库，方便解决各种问题。

8. 手写：数组实现 reduce、map

手写 reduce 实现

reduce 方法接收一个回调函数和一个可选的初始值，通过回调函数累计处理数组的每个元素，最终返回累计结果。

Array.prototype.myReduce = function(callback, initialValue) {let accumulator = initialValue === undefined ? this[0] : initialValue;let startIndex = initialValue === undefined ? 1 : 0;for (let i = startIndex; i < this.length; i++) {accumulator = callback(accumulator, this[i], i, this);}return accumulator;
};// 使用示例
const arr = [1, 2, 3, 4];
const sum = arr.myReduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10
手写 map 实现

map 方法接收一个回调函数，返回一个新数组，每个元素为回调函数处理后的结果。

Array.prototype.myMap = function(callback) {const result = [];for (let i = 0; i < this.length; i++) {result.push(callback(this[i], i, this));}return result;
};// 使用示例
const arr = [1, 2, 3, 4];
const doubled = arr.myMap(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

这些实现展示了如何用原生 JavaScript 来实现常用的数组方法，了解其内部工作原理。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/47469.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Node.js基础04】node.js模块化

【Node.js基础04】node.js模块化

一&#xff1a;什么是模块化 在Node.js中&#xff0c;每个文件都可视为一个独立的模块。模块化提高了代码的复用性&#xff0c;按需加载&#xff0c;具有独立的作用域 二&#xff1a;如何实现多个文件间导入和导出 1 CommonJS标准&#xff08;默认&#xff09;-导入和导出 …
阅读更多...
Logstash docker发布

Logstash docker发布

一 下载Logstash 不废话了&#xff0c;我下载的7.17.6 二 新增配置文件 在logstash/pipeline中&#xff0c;添加logstash.conf input {jdbc { # 连接jdbc_connection_string > "jdbc:mysql://192.168.1.1:3306/kintech-cloud-bo&#xff1f;characterEncodingUTF-8&…
阅读更多...
大学生电子设计竞赛中的自动化测试与测量技术（内附资料）

大学生电子设计竞赛中的自动化测试与测量技术（内附资料）

大学生电子设计竞赛是一个技术密集型的竞赛&#xff0c;它要求参赛者在有限的时间内完成一个既定的电子系统设计。自动化测试与测量技术在这一过程中扮演着至关重要的角色&#xff0c;它不仅可以提高测试效率&#xff0c;还可以增加测量的准确性和重复性。本文将探讨自动化测试…
阅读更多...
汽车电动空调系统

汽车电动空调系统

1.电动空调系统概述 电动汽车制冷空调系统与传统汽车制冷空调系统基本原理一样&#xff0c;区别在于电动汽车空调系统采用电动空调压缩机。电动空调压缩机由驱动电机&#xff0c;压缩机&#xff0c;控制器集成。 电动空调压缩机的驱动电机采用体积小&#xff0c;质量轻&#x…
阅读更多...
初学者简单了解爬虫的基本认识和操作（详细参考图片）

初学者简单了解爬虫的基本认识和操作（详细参考图片）

爬虫 定义&#xff1a;爬虫&#xff08;Web Crawler 或 Spider&#xff09;是一种自动访问互联网上网页的程序&#xff0c;其主要目的是索引网页内容&#xff0c;以便搜索引擎能够快速检索到相关信息。以下是爬虫的一些关键特性和功能&#xff1a; 自动化访问&#xff1a;爬虫能…
阅读更多...
Codeforces Round 960 (Div. 2)

Codeforces Round 960 (Div. 2)

文章目录 总结A. Submission Bait思路代码 B. Array Craft思路代码 C. Mad MAD Sum思路代码 总结 这次比赛比上一次打的还要失败&#xff0c;当时第一题是一个博弈&#xff0c;先wa了一发&#xff0c;但是我看了一下发现了bug&#xff0c;改正好后样例明明就过了&#xff0c;但…
阅读更多...
【学习笔记】无人机系统（UAS）的连接、识别和跟踪（四）-无人机认证与授权

【学习笔记】无人机系统（UAS）的连接、识别和跟踪（四）-无人机认证与授权

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…
阅读更多...
Python入门基础教程（非常详细）

Python入门基础教程（非常详细）

现在找工作真的越来越难了&#xff01;今年更是难上加难 前几天在网上刷到这样一条热搜&#xff1a; #23岁找工作因年龄大被HR拒绝了# 是这个世界疯了还是我疯了&#xff1f; 合着只想要有20年以上工作经验的应届毕业生是吧 这好像就是现在的就业市场现状&#xff1a;“35岁…
阅读更多...
盘点市场上受欢迎的PDF编辑工具

盘点市场上受欢迎的PDF编辑工具

随着PDF文件使用人数的激增&#xff0c;市面上涌现出了众多功能强大的PDF编辑器工具。但是软件多了我们分辨起来就需要花上不少时间&#xff0c;我推荐一下我用过靠谱的PDF编辑器吧。 1.福昕PDF编辑器 这个软件主要就是针对PDF文稿进行操作的&#xff0c;支持PDF几乎全部的操…
阅读更多...
python写一个可以深度学习的程序

python写一个可以深度学习的程序

import numpy as np import matplotlib.pyplot as plt class NeuralNetwork: def init(self, layers, activation=‘sigmoid’): self.layers = layers self.num_layers = len(layers) self.weights = [np.random.randn(layers[i], layers[i-1]) for i in range(1, self.num_l…
阅读更多...
人工智能视频大模型：重塑视频处理与理解的未来

人工智能视频大模型：重塑视频处理与理解的未来

目录 一、人工智能视频大模型概述 1.1 定义与特点 1.2 技术基础 二、关键技术解析 2.1 视频特征提取 2.2 时空建模 2.3 多任务学习 三、应用场景展望 3.1 视频内容分析 3.2 视频编辑与生成 3.3 交互式视频体验 四、未来发展趋势 4.1 模型轻量化与移动端部署 4.2 …
阅读更多...
JDBC操作MySQL数据

JDBC操作MySQL数据

一准备、 1、首先在IDEA中导入导入包&#xff1a;mysql-connector-java-8.0.23 2、写初始化语句 &#xff08;1&#xff09;在目录下找到driver类 &#xff08;2&#xff09;在JDBCUtil函数中把驱动器的类路径改掉 ①打开driver类 ②按住类名 Driver用快捷键 CtrlAltshiftC …
阅读更多...
记录vivado自带IP iBert眼图近端回环

记录vivado自带IP iBert眼图近端回环

记录利用vivado自带IP核工具测试信号质量 ibert是测试眼图的工具&#xff0c;在使用的时候并不用改太多的内容&#xff0c;只需要注意参考时钟及所需要的引脚即可。由于条件的限制&#xff0c;并没有使用光纤和电缆进行连接进行外部回环&#xff0c;仅使用内部回环做测试&…
阅读更多...
Django 中设置联合约束和联合索引

Django 中设置联合约束和联合索引

在Django 中对一张表的几个字段进行联合约束和联合索引&#xff0c;例如电商项目购物车的时候&#xff0c;登录的用户和商品两个字段在一起表示唯一记录。联合约束参见unique-together官方文档。 举个联合约束和联合索引例子&#xff1a; class ShoppingCart(models.Model):&…
阅读更多...
WEB前端08-综合案例(动态表格)

WEB前端08-综合案例(动态表格)

使用 HTML、CSS 和 JavaScript 创建动态表格 在本教程中&#xff0c;我们将创建一个动态表格&#xff0c;允许用户添加行、选择项目&#xff0c;并执行批量操作&#xff0c;如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分…
阅读更多...
Xcode代码静态分析：构建无缺陷代码的秘诀

Xcode代码静态分析：构建无缺陷代码的秘诀

Xcode代码静态分析&#xff1a;构建无缺陷代码的秘诀 在软件开发过程中&#xff0c;代码质量是至关重要的。Xcode作为Apple的官方集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了强大的代码静态分析工具&#xff0c;帮助开发者在编写代码时发现潜在的错误和问题。…
阅读更多...
kubernetes集群部署elasticsearch集群，包含无认证和有认证模式

kubernetes集群部署elasticsearch集群，包含无认证和有认证模式

1、背景&#xff1a; 因公司业务需要&#xff0c;需要在测试、生产kubernetes集群中部署elasticsearch集群&#xff0c;因不同环境要求&#xff0c;需要部署不同模式的elasticsearch集群&#xff0c; 1、测试环境因安全性要求不高&#xff0c;是部署一套默认配置&#xff1b; 2…
阅读更多...
layui table 浮动操作内容收缩，展开

layui table 浮动操作内容收缩，展开

layui table 隐藏浮动操作内容 fixed: right, style:, title: 操作,align:left, minWidth: 450, toolbar:#id分析&#xff1a; 浮动一块新增一个class layui-table-fixed-r 可以隐藏整块内容进行&#xff0c;新增一个按钮点击时间&#xff0c;然后进行收缩和展开 $(‘.layui-…
阅读更多...
【程序设计-底层设计-串口通信-底层交互-一些定义-嵌入式学习-自己思考（1）】

【程序设计-底层设计-串口通信-底层交互-一些定义-嵌入式学习-自己思考（1）】

【程序设计-底层设计-串口通信-底层交互-一些定义-嵌入式学习-自己思考&#xff08;1&#xff09;】 1、概述2、环境说明3、学习部分-底层硬件1、当我们说&#xff1a;底层串口-TX&RT&#xff0c;我们在说什么&#xff08;1&#xff09;uart&#xff08;Universal Asynchro…
阅读更多...
数学建模~~~SPSS相关和回归分析

数学建模~~~SPSS相关和回归分析

目录 1.双变量相关分析 1.1理论基础 1.2简单散点图的绘制介绍 1.3相关性分析 1.4分析相关性结果 2.简单线性回归分析 2.1简单概括 2.2分析过程 2.3结果分析 3.曲线回归分析 3.1问题介绍 3.2分析过程 3.3结果分析 1.双变量相关分析 1.1理论基础 双变量相关分析并不…
阅读更多...
最新文章

Copyright @ 2022~2023