当前位置： 首页 > article >正文

【初级】前端开发工程师面试100题（一）

article 2025/10/27 21:03:31

本题库共计包含100题，考察html，css，js，以及react，vue，webpack等基础知识掌握情况。

HTML基础篇

  1. 说说你对HTML语义化的理解？

    • 语义化就是用合适的标签表达合适的内容，比如<header>表示页眉，<nav>表示导航。这样不仅代码更清晰，对SEO也友好，屏幕阅读器也能更好理解页面结构。

  2. HTML5新增了哪些常用标签？

    • <section>表示文档中的节，<article>独立内容，<aside>侧边栏，<video>和<audio>直接嵌入媒体，还有<canvas>画布。

  3. img标签的alt和title属性有什么区别？

    • alt是图片无法显示时的替代文本，对SEO重要；title是鼠标悬停时的提示文本，可加可不加。

  4. 如何理解HTML中的DOCTYPE声明？

    • 它告诉浏览器用哪种HTML版本来解析页面，比如<!DOCTYPE html>表示HTML5，没有它浏览器可能进入怪异模式。

  5. meta标签有哪些常见用法？

    <meta charset="UTF-8"> <!-- 字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<meta name="description" content="页面描述"> <!-- SEO用 -->

CSS基础篇

  1. CSS盒模型是什么？标准盒模型和怪异盒模型区别？

    • 盒模型就是把元素看作盒子，有content、padding、border、margin。标准盒模型width只含content，怪异盒模型width包含content+padding+border。

  2. 如何让一个div水平垂直居中？

    /* 方法1：flex布局（最推荐） */
.parent {display: flex;justify-content: center;align-items: center;
}/* 方法2：绝对定位+transform */
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

  3. CSS选择器优先级怎么计算？

    • !important > 行内样式 > ID选择器 > 类选择器 > 标签选择器。相同优先级后写的覆盖先写的。

  4. 什么是BFC？如何触发BFC？

    • BFC(块级格式化上下文)是独立的渲染区域，内部元素不会影响外部。触发方式：float非none、overflow非visible、display为inline-block等。

  5. px、em、rem有什么区别？

    • px是固定像素；em相对父元素字体大小；rem相对根元素(html)字体大小。移动端推荐用rem适配不同屏幕。

JavaScript基础篇

  1. let、const和var的区别？

    • var有变量提升，let/const没有；var是函数作用域，let/const是块级作用域；const声明后不能重新赋值。

  2. 什么是闭包？有什么优缺点？

    • 闭包就是函数能访问外部作用域的变量。优点是可以封装私有变量；缺点是可能造成内存泄漏。
    function outer() {let count = 0;return function inner() {return ++count;}
}
const counter = outer();
counter(); // 1

  3. 如何判断数据类型？typeof和instanceof区别？

    • typeof能判断基本类型(除null)，instanceof判断引用类型。更全面的可以用Object.prototype.toString.call()。

  4. 什么是事件循环(Event Loop)？

    • JS是单线程的，通过事件循环处理异步任务。同步任务在主线程执行，异步任务(如setTimeout)进入任务队列，主线程空闲时从队列取出执行。

  5. ES6有哪些新特性？

    • let/const、箭头函数、模板字符串、解构赋值、Promise、class、模块化import/export等。

React框架篇

  1. React类组件和函数组件有什么区别？

    • 类组件有this、生命周期和state；函数组件更简洁，现在推荐用Hooks实现同样功能。

  2. React生命周期有哪些？

    • 挂载阶段：constructor → render → componentDidMount
    • 更新阶段：shouldComponentUpdate → render → componentDidUpdate
    • 卸载阶段：componentWillUnmount

  3. 什么是虚拟DOM？为什么用虚拟DOM？

    • 虚拟DOM是真实DOM的轻量级JS对象表示。React通过比较新旧虚拟DOM的差异(diff算法)，最小化更新真实DOM，提高性能。

  4. React中key的作用是什么？

    • key帮助React识别哪些元素改变了，减少不必要的重新渲染。不要用index作为key，应该用唯一id。

  5. React Hooks常用有哪些？

    • useState(状态管理)、useEffect(副作用)、useContext(上下文)、useReducer(复杂状态逻辑)、useCallback/useMemo(性能优化)。

Vue框架篇

  1. Vue2和Vue3主要区别？

    • Vue3用Proxy代替Object.defineProperty实现响应式，Composition API代替Options API，更好的TypeScript支持。

  2. v-if和v-show的区别？

    • v-if是条件渲染，不满足时元素不存在DOM中；v-show只是切换display属性，元素始终在DOM中。

  3. Vue组件通信方式有哪些？

    • 父子：props/$emit；跨级：provide/inject；全局：Vuex/Pinia；事件总线：mitt/EventBus。

  4. Vue生命周期有哪些？

    • beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted。

  5. 什么是Vue的计算属性？和methods有什么区别？

    • 计算属性(computed)有缓存，依赖不变时不会重新计算；methods每次调用都会执行。
    computed: {fullName() {return this.firstName + ' ' + this.lastName}
}

Webpack构建工具篇

  1. Webpack的核心概念有哪些？

    • Entry(入口)、Output(输出)、Loader(处理非JS文件)、Plugin(扩展功能)、Mode(开发/生产模式)。

  2. Loader和Plugin有什么区别？

    • Loader是文件加载器，如处理CSS的css-loader；Plugin是扩展插件，如生成HTML的HtmlWebpackPlugin。

  3. 如何优化Webpack打包速度？

    • 使用cache-loader缓存、thread-loader多线程、DllPlugin预编译、合理配置exclude缩小loader处理范围。

  4. 什么是Tree Shaking？如何实现？

    • 删除未引用代码(dead code)。ES6模块化(import/export) + production模式 + 配置usedExports。
    optimization: {usedExports: true
}

  5. Webpack的热更新(HMR)原理是什么？

    • 通过websocket连接开发服务器，文件修改后服务器推送更新消息，客户端替换修改的模块而不刷新页面。

浏览器与网络篇

  1. 从输入URL到页面显示发生了什么？

    • DNS解析 → TCP连接 → HTTP请求 → 服务器响应 → 浏览器解析渲染 → 连接结束。

  2. 什么是跨域？如何解决跨域？

    • 浏览器同源策略限制。解决方案：JSONP、CORS、Nginx反向代理、WebSocket、postMessage。

  3. HTTP缓存有哪些策略？

    • 强缓存(Expires/Cache-Control)和协商缓存(Last-Modified/ETag)。Cache-Control优先级更高。

  4. GET和POST请求有什么区别？

    • GET参数在URL中，有长度限制，可缓存；POST参数在请求体，更安全，不可缓存。

  5. HTTP和HTTPS有什么区别？

    • HTTPS=HTTP+SSL/TLS加密，更安全但性能稍低。HTTPS默认端口443，HTTP是80。

性能优化篇

  1. 前端性能优化有哪些常见手段？

    • 减少HTTP请求(合并文件)、使用CDN、懒加载、代码压缩、使用缓存、减少重排重绘、SSR等。

  2. 什么是防抖和节流？有什么区别？

    • 防抖(debounce)：连续触发只执行最后一次；节流(throttle)：固定时间间隔执行一次。
    // 防抖
function debounce(fn, delay) {let timer;return function() {clearTimeout(timer);timer = setTimeout(() => fn.apply(this, arguments), delay);}
}

  3. 如何减少页面重排(Reflow)和重绘(Repaint)？

    • 避免频繁操作样式，使用transform代替top/left，使用visibility代替display:none，批量修改DOM。

  4. 什么是懒加载？如何实现图片懒加载？

    • 延迟加载非首屏内容。监听滚动事件，当图片进入视口时再加载src。
    <img data-src="image.jpg" class="lazyload">
<script>const images = document.querySelectorAll('.lazyload');const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;observer.unobserve(img);}});});images.forEach(img => observer.observe(img));
</script>

  5. Web Workers是什么？有什么作用？

    • 在后台线程运行JS脚本，不阻塞主线程。适合计算密集型任务，但不能直接操作DOM。

安全与异常处理篇

  1. 什么是XSS攻击？如何防范？

    • 跨站脚本攻击，注入恶意脚本。防范：输入输出转义(如<转成&lt;)、CSP内容安全策略、HttpOnly cookie。

  2. 什么是CSRF攻击？如何防范？

    • 跨站请求伪造，诱使用户在已登录状态下执行非预期操作。防范：验证Referer、添加token、SameSite cookie属性。

  3. 前端常见的错误监控方式有哪些？

    • try-catch、window.onerror、Promise.catch、Vue/React错误边界、Sentry等第三方监控。

  4. 如何处理前端兼容性问题？

    • 特性检测(如Modernizr)、polyfill填充、autoprefixer自动加CSS前缀、Babel转译ES6+语法。

  5. 如何实现前端埋点监控？

    • 手动埋点(关键节点手动上报)、无痕埋点(全量采集)、可视化埋点(通过界面配置)。常用方案：Google Analytics、自建日志系统。

项目实战篇

  1. 如何组织大型前端项目的目录结构？

    • 按功能模块划分：/src/components公共组件、/src/views页面、/src/api接口、/src/store状态管理、/src/utils工具函数。

  2. 如何进行前端代码规范？

    • ESLint代码检查、Prettier格式化、Husky+lint-staged提交前检查、制定团队编码规范文档。

  3. 如何实现权限控制系统？

    • 路由权限(动态路由)、菜单权限(后端返回)、按钮权限(v-permission指令)、接口权限(JWT校验)。

  4. 如何优化首屏加载速度？

    • 代码分割、预加载关键资源、SSR服务端渲染、骨架屏、CDN加速、Gzip压缩、图片优化。

  5. 如何实现国际化(i18n)？

    • 使用vue-i18n或react-i18next等库，准备多语言JSON文件，通过切换语言环境变量实现。

【初级】前端开发工程师面试100题（二）

相关文章：

【初级】前端开发工程师面试100题（一）

本题库共计包含100题&#xff0c;考察html&#xff0c;css&#xff0c;js&#xff0c;以及react&#xff0c;vue&#xff0c;webpack等基础知识掌握情况。 HTML基础篇 说说你对HTML语义化的理解&#xff1f; 语义化就是用合适的标签表达合适的内容&#xff0c;比如<header&…...

编程日记 2025/9/30 0:08:40

eplan许可证与防火墙安全软件冲突

在使用EPLAN电气设计软件时&#xff0c;有时会遇到许可证与防火墙或安全软件之间的冲突。这种冲突可能导致许可证无法激活或软件无法正常运行&#xff0c;给用户带来诸多不便。本文将为您解析EPLAN许可证与防火墙/安全软件冲突的原因&#xff0c;并提供解决方案&#xff0c;帮助…...

编程日记 2025/10/6 12:10:21

「Java EE开发指南」用MyEclipse开发EJB 3无状态会话Bean（二）

本教程介绍在MyEclipse中开发EJB 3无状态会话bean&#xff0c;由于JPA实体和EJB 3实体非常相似&#xff0c;因此本教程不涉及EJB 3实体Bean的开发。在本教程中&#xff0c;您将学习如何&#xff1a; 创建EJB 3项目创建无状态会话bean部署并测试bean 在上文中&#xff08;点击…...

编程日记 2025/10/25 18:02:49

Stable Diffusion秋叶整合包V4独立版Python本地API连接指南

秋叶整合包V4独立版Python本地API连接指南 秋叶整合的Stable Diffusion V4独立版支持通过Python调用本地API实现自动化图像生成。以下是具体操作流程及注意事项&#xff1a; 一、启用API服务 启动器配置 • 在秋叶启动器的 高级选项 中添加以下参数&#xff1a; --api --liste…...

编程日记 2025/10/8 10:53:52

小程序 GET 接口两种传值方式

前言 一般 GET 接口只有两种URL 参数和路径参数 一&#xff1a;URL 参数&#xff08;推荐方式&#xff09; 你希望请求&#xff1a; https://serve.zimeinew.com/wx/products/info?id5124接口应该写成这样&#xff0c;用 req.query.id 取 ?id5124&#xff1a; app.get(&…...

编程日记 2025/9/26 2:20:25

深度学习在DOM解析中的应用：自动识别页面关键内容区块

摘要 本文介绍了如何在爬取东方财富吧&#xff08;https://www.eastmoney.com&#xff09;财经新闻时&#xff0c;利用深度学习模型对 DOM 树中的内容区块进行自动识别和过滤&#xff0c;并将新闻标题、时间、正文等关键信息分类存储。文章聚焦爬虫整体性能瓶颈&#xff0c;通…...

编程日记 2025/10/23 9:44:37

PyQt6实例_pyqtgraph多曲线显示工具_代码分享

目录 概述 效果 代码 返回结果对象 字符型横坐标 通用折线图工具 工具主界面 使用举例 概述 1 分析数据遇到需要一个股票多个指标对比或一个指标多个股票对比&#xff0c;涉及到同轴多条曲线的显示&#xff0c;所以开发了本工具。 2 多曲线显示部分可以当通用工具使…...

编程日记 2025/10/25 3:24:56

Linux网络编程 多线程Web服务器：HTTP协议与TCP并发实战

问题解答 TCP是如何防止SYN洪流攻击的&#xff1f; 方式有很多种&#xff0c;我仅举例部分&#xff1a; 1、调整内核参数 我们知道SYN洪流攻击的原理就是发送一系列无法完成三次握手的特殊信号&#xff0c;导致正常的能够完成三次握手的信号因为 连接队列空间不足&#xff…...

编程日记 2025/10/23 21:51:05

【Vulkan 入门系列】创建帧缓冲、命令池、命令缓存，和获取图片（六）

这一节主要介绍创建帧缓冲&#xff08;Framebuffer&#xff09;&#xff0c;创建命令池&#xff0c;创建命令缓存&#xff0c;和从文件加载 PNG 图像数据&#xff0c;解码为 RGBA 格式&#xff0c;并将像素数据暂存到 Vulkan 的 暂存缓冲区中。 一、创建帧缓冲 createFramebu…...

编程日记 2025/6/11 5:50:00

【Git】fork 和 branch 的区别

在 Git 中&#xff0c;“fork” 和 “branch” 是两个不同的概念&#xff0c;它们用于不同的场景并且服务于不同的目的。理解这两者的区别对于有效地使用 Git 进行版本控制非常重要。 1. Fork&#xff08;分叉&#xff09; 定义 Fork 是指在 GitHub、GitLab 等代码托管平台上…...

编程日记 2025/9/20 10:52:55

Qt 下载的地址集合

Qt 下载离线安装包 download.qt.io/archive/qt/5.14/5.14.2/ Qt 6 安装下载在线安装包 Index of /qt/official_releases/online_installers/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror...

编程日记 2025/10/24 12:37:38

java将pdf转换成word

1、jar包准备 在项目中新增lib目录&#xff0c;并将如下两个文件放入lib目录下 aspose-words-15.8.0-jdk16.jar aspose-pdf-22.9.jar 2、pom.xml配置 <dependency><groupId>com.aspose</groupId><artifactId>aspose-pdf</artifactId><versi…...

编程日记 2025/9/12 21:32:46

ubuntu下gcc/g++安装及不同版本切换

1. 查看当前gcc版本 $ gcc --version# 查看当前系统中已安装版本 $ ls /usr/bin/gcc*2. 安装新版本gcc $ sudo apt-get update# 这里以版本12为依据&#xff08;也可以通过源码方式安装&#xff0c;请自行Google&#xff01;&#xff09; $ sudo apt-get install -y gcc-12 g…...

编程日记 2025/10/23 21:15:20

缓存与内存；缺页中断；缓存映射：组相联

文章目录 内存&#xff08;RAM&#xff09;与缓存&#xff08;Cache&#xff09;Memory Management Unit缺页中断 多级缓存缓存替换策略缓存的映射方式 内存&#xff08;RAM&#xff09;与缓存&#xff08;Cache&#xff09; 缓存&#xff1a; CPU 内部或非常靠近的高速存储&a…...

编程日记 2025/5/26 0:22:23

FPGA入门学习Day1——设计一个DDS信号发生器

目录 一、DDS简介 &#xff08;一&#xff09;基本原理 &#xff08;二&#xff09;主要优势 &#xff08;三&#xff09;与传统技术的对比 二、FPGA存储器 &#xff08;一&#xff09;ROM波形存储器 &#xff08;二&#xff09;RAM随机存取存储器 &#xff08;三&…...

编程日记 2025/10/24 13:03:59

微信小程序拖拽排序有效果图

效果图 .wxml <view class"container" style"--w:{{w}}px;" wx:if"{{location.length}}"><view class"container-item" wx:for"{{list}}" wx:key"index" data-index"{{index}}"style"--…...

编程日记 2025/10/24 5:53:10

elasticsearch 查询检索

一、查询方式列举 1、多维度查询 关键词&#xff1a;bool must match {"query": {"bool": {"must": [{"match": {"server_name": "www.test.com"}},{"range": { //时间查询"createTime": …...

编程日记 2025/10/12 2:34:27

WT2000T专业录音芯片：破解普通录音设备信息留存、合规安全与远程协作三大难题

在快节奏的现代商业环境中&#xff0c;会议是企业决策、创意碰撞和战略部署的核心场景。然而&#xff0c;传统会议记录方式常面临效率低、信息遗漏、回溯困难等痛点。如何确保会议内容被精准记录并高效利用&#xff1f;会议室专用录音芯片应运而生&#xff0c;以智能化、高保真…...

编程日记 2025/10/25 22:47:50

【Python 学习笔记】 pip指令使用

系列文章目录 pip指令使用 文章目录 系列文章目录前言安装配置使用pip 管理Python包修改pip下载源 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 当前文章记录的是我在学习过程的一些笔记和思考&#xff0c;可能存在有误解的地方&#xff0c;仅供大家…...

编程日记 2025/10/23 15:26:49

与Ubuntu相关命令

windows将文件传输到Ubuntu 传输文件夹或文件 scp -r 本地文件夹或文件 ubuntu用户名IP地址:要传输到的文件夹路径 例如&#xff1a; scp -r .\04.py gao192.168.248.129:/home/gao 如果传输文件也可以去掉-r 安装软件 sudo apt-get update 更新软件包列表 sudo apt insta…...

编程日记 2025/10/24 9:26:29

C# 文件读取

文件读取是指使用 C# 程序从计算机文件系统中获取文件内容的过程。将存储在磁盘上的文件内容加载到内存中&#xff0c;供程序处理。主要类型有&#xff1a;文本文件读取&#xff08;如 .txt, .csv, .json, .xml&#xff09;&#xff1b;二进制文件读取&#xff08;如 .jpg, .pn…...

编程日记 2025/10/27 12:43:08

leetcode125.验证回文串

class Solution {public boolean isPalindrome(String s) {s s.replaceAll("[^a-zA-Z0-9]", "").toLowerCase();for(int i0,js.length()-1;i<j;i,j--){if(s.charAt(i)!s.charAt(j))return false;}return true;} }...

编程日记 2025/10/27 12:43:04

【Android面试八股文】Android系统架构【一】

Android系统架构图 1.1 安卓系统启动 1.设备加电后执行第一段代码&#xff1a;Bootloader 系统引导分三种模式&#xff1a;fastboot&#xff0c;recovery&#xff0c;normal&#xff1a; fastboot模式&#xff1a;用于工厂模式的刷机。在关机状态下&#xff0c;按返回开机 键进…...

编程日记 2025/10/27 12:43:01

NLP高频面试题（五十二）——BERT 变体详解

在现代自然语言处理领域，BERT 系列模型不断演进，衍生出多种变体，它们通过改进预训练任务、模型结构和训练策略，在不同应用场景下取得了更优表现。本文首先概览主要 BERT 变体（如 ALBERT、RoBERTa、ELECTRA、SpanBERT、Transformer-XL 等），随后针对以下几个关键问题逐一展…...

编程日记 2025/6/18 1:04:05

【数据可视化-21】水质安全数据可视化：探索化学物质与水质安全的关联

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/10/27 12:42:57

CSS 选择器介绍

CSS 选择器介绍 1. 基本概念 CSS&#xff08;层叠样式表&#xff09;是一种用于描述 HTML 或 XML 文档外观的语言。通过 CSS&#xff0c;可以控制网页中元素的布局、颜色、字体等视觉效果。而 CSS 选择器则是用来指定哪些 HTML 元素应该应用这些样式的工具。 2. 基本选择器 …...

编程日记 2025/5/11 14:16:05

【prometheus+Grafana篇】从零开始：Linux 7.6 上二进制安装 Prometheus、Grafana 和 Node Exporter

&#x1f4ab;《博主主页》&#xff1a;奈斯DB-CSDN博客 &#x1f525;《擅长领域》&#xff1a;擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控&#xff1b;并对SQLserver、NoSQL(MongoDB)有了解 &#x1f496;如果觉得文章对你有所帮…...

编程日记 2025/10/27 12:42:53

STM32（M4）入门：GPIO与位带操作（价值 3w + 的嵌入式开发指南）

一&#xff1a;GPIO 1.1 了解时钟树&#xff08;必懂的硬件基础&#xff09; 在 STM32 开发中&#xff0c;时钟系统是一切外设工作的 “心脏”。理解时钟树的工作原理&#xff0c;是正确配置 GPIO、UART 等外设的核心前提。 1.1.1 为什么必须开启外设时钟&#xff1f; 1. 计…...

编程日记 2025/10/27 12:42:50

树莓派超全系列教程文档--(42)树莓派config.txt旧版配置HDMI和杂项选项

树莓派config.txt旧版配置HDMI和杂项选项 Raspberry Pi 4 HDMI遗留的杂项选项avoid_warningslogging_level 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 Raspberry Pi 4 HDMI IMPORTANT: 使用VC4 KMS图形驱动程序时&#xff0c;完整的显示管道…...

编程日记 2025/5/25 1:43:44

Linux419 三次握手四次挥手抓包 wireshark

还是Notfound 没连接 可能我在/home 准备配置静态IP vim ctrlr 撤销 u撤销 配置成功 准备关闭防火墙 准备配置 YUM源 df -h 未看到sr0文件 准备排查 准备挂载 还是没连接 计划重启 有了 不重启了 挂载准备 修改配置文件准备 准备清理缓存 ok 重新修改配…...

编程日记 2025/10/27 12:42:46