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

前端面试总结心得

news 2025/9/14 0:32:55

1.放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

A、文件头部位置；B、文件尾；C、<head>标签部分；D、<body>标签部分

（正确答案D）

2.队列和栈的区别是什么？

答案：栈先进后出，队列先进先出

3.Http永久重定向的状态码是什么？

答案：301

4.二叉树的三种遍历方式是什么？

答案：前序遍历，中序遍历，后序遍历

并不是所有的候选人都需要在电话中提问这几个问题。涉及到简历怎么写的问题，本篇就不展开讨论了。

web原理及性能优化

终于把候选人约过来了。自我介绍后，先第一个问题：一个网页从输入网址到打开，中间经历了哪些步骤？

（有的面试官也会换一种说法：如果网页打不开，如何调试找出问题？）

接着问一个更深入的问题：在上述的加载过程中，有哪些可以做性能优化的地方？

这两个问题涵盖的知识点非常全面，我习惯在面试最开始的时候提问，可以快速判断一个候选人大概的技术层次，方便后面做针对性的提问。

作为所有前端面试中的必问题，网上有大量的文章，此处就不赘述。必须回答的得分点有：URL解析，DNS，TCP（三次握手），HTTP请求响应过程，HTML、CSS、JS的加载顺序，DOM树、CSS树、渲染树，重绘和回流等。每个加载的流程都对应有性能优化的思路，如：DNS寻址原理和预解析；TCP连接有慢启动、拥塞控制所以要复用连接；HTTP2/3优化请求效率；资源压缩、合并、减少请求等减少请求数据量；CDN、http缓存、前端缓存等；减少回流等渲染性能优化；worker、WebAssembly等脚本性能优化；服务端渲染、预加载、懒加载、骨架屏优化用户体验等等。

性能优化的点非常多，不要求答全，我会更看重面试中在之前的项目中实践过哪些优化方案，而不是只停留在理论基础。比如经常有人回答雪碧图、小图编码为Base64，我就会反问，这么做在性能上有什么缺点，有什么更好的替代方案？（答案可以参考之前的博客《http2性能优化》）。如果能回答上来，是很大的加分项。

网络协议

讲一下http缓存的优先级？

POST和GET的区别？

常见的http状态码？

常用的跨域方案有哪些？

常用Content-Type及应用？

如何删除一个cookie？

讲下一个https协议建立连接的过程？

主要考核http协议，其他不做要求。跨域可能会问到jsonp有什么限制，CORS简单请求和复杂请求的差别；http状态码问完301和302的差别，可能会再问307是干嘛用的。如果面试者了解其他的网络协议（webSocket、webRTC之类的）并能讲出原理，会是一个加分项。

JavaScript

JS里有哪些数据类型？

什么是闭包？

JS里有哪些继承方式？

JS的异步编程的方案有哪些？

防抖和节流的区别？

为什么会有精度计算问题？

什么是事件委托？

考核JS的熟悉程度。闭包可能会问执行上下文的概念；继承会问原型链相关的问题；异步会问Promise和async、await实现原理的区别，再问宏任务、微任务、event loop等。

Vue/React/小程序

虚拟Dom是什么？Vue/React通过哪些方案来优化虚拟Dom更新真实dom的性能？

Vue/React/小程序有哪些生命周期？嵌套组件中，生命周期的触发顺序是怎样的？

跨组件通信的方案有哪些？

服务端渲染有什么优势和劣势？

Vue的watch和computed有什么区别？分别应该在什么时候使用？

Vue为什么 v-for 和 v-if 不建议⽤在⼀起？

vue-router hash 模式和 history 模式有什么区别？

vue.set是用来做什么的？为什么vue 3.0不需要了？

vue.nextTick是用来做什么的？

什么是高阶组件？

React hook是用来干嘛的？

React Fiber 是什么？

近年来流行的框架，看面试者熟悉哪个就针对性地提问，考察面试者是否真正掌握原理。去年Vue3是必问的，可以顺便了解一下面试者对热门技术的态度。我们的要求是至少掌握Vue/React中的一个。如果对前端框架有深入了解，对架构、工程化、同构有自己的理解，可以再加分。

CSS

有哪些清除浮动的方法？

有哪些垂直居中的方法？

CSS选择器的优先级？

CSS一般问得很少。常用的没什么难度，生僻全靠搜索引擎。安排几个简单的CSS题目，一般在面试者过度紧张时，用来调节情绪，缓解尴尬的气氛。

网络安全

能答上XSS攻击和CSRF攻击的原理，并知道常见的防范方式即可。其他的安全防范问题很多，有所了解的话是加分项。

之所以安排这个题，倒不是说网络安全在工作中有多重要。我自己做网站十几年，遇到过许多的网络安全攻击，每次都让我学到了很多知识，技术得到成长。面试前端会问这个问题，主要是看面试会不会去关注网站的各个方面，而不是把责任都推给后台和运维的同事。

现场编程题

什么，不是说好的不内卷，面试不考算法题么？然而我还是准备了一些现场编程题，有时候会让面试者任选一题，在纸上手写代码。

本环节纯粹用于拖时间。有时候下轮面试官在开会之类的，需要等待较长时间，为避免让面试者太无聊，给个编程题打发时间。

  1. 实现一个大数计算的方法。

  2. 实现一个符合Promise A+规范的Promise库，只需实现then方法。

  3. 找出一个文本串中出现次数最多的文本段。如果出现概率一样多，取最长的文本；如果出现概率和长度一样，取得第一个文本。不考虑单个字母，以2位字符串作为最小的文本段单元。

以上三题参考腾讯不同部门的前端面试上机题，如果是大厂面试，肯定是必须做出来的。还有一些leetCode上找的算法题，此处就不列出来了。好在我们要求不高，做不出来也没关系，真的只是用来拖时间。

总结

从自我介绍开始，都一直在考核候选人的沟通能力、表达能力。问最近学习过哪些新技术，通过什么渠道学习，考核候选人的学习能力，以及对技术的态度。问之前公司的加班情况，遇到瓶颈时如何解决，了解候选人的抗压能力。技术虽然是硬实力，但在工作中，软实力更为重要。

面试也远远不止考核候选人能力这么简单。给面试者一个顺畅的流程，舒适的面试环境，礼貌、友善的交流，能塑造雇主品牌，在行业内留下一个好的口碑。要介绍一下技术团队和技术栈，让候选人知道进来以后大概会负责哪方面的工作。对于优秀的候选人，通过提问的深度和广度，展现自己的技术实力，也是吸引候选人的有效方式。面试是一个双向选择的过程，面试官也需要不断修炼和成长。

相关文章：

前端面试总结心得

1.放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行&#xff1f; A、文件头部位置&#xff1b;B、文件尾&#xff1b;C、<head>标签部分&#xff1b;D、<body>标签部分 &#xff08;正确答案D&#xff09; 2.队列和栈的区别是什么&#xff1f; 答案&am…...

编程日记 2023/8/23 13:59:54

STL---list

目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用注意事项 2.list接口介绍及模拟实现 2.1构造​编辑 2.2容量 2.3修改 3.list迭代器 4.迭代器失效 5.模拟实现 6.vector和list的区别 1. list的介绍及使用 1.1 list的介绍 list的文档介绍 1. list是可以在常…...

编程日记 2023/8/23 13:58:51

python判断ip所属地区 python 判断ip 网段

前言 IP地址是互联网中唯一标识一个设备的地址&#xff0c;有时候需要判断一个IP地址所属的地区&#xff0c;这就需要用到IP地址归属查询。本文将介绍Python如何通过IP地址查询所属地区并展示代码。 一、 IP地址归属查询 IP地址归属查询又称IP地址归属地查询、IP地址归属地定…...

编程日记 2023/8/23 13:57:50

大数据分析案例-基于LightGBM算法构建糖尿病确诊预测模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

编程日记 2023/8/23 13:56:49

Mysql查询重复数据常用方法

在平常的开发工作中&#xff0c;我们经常需要查询数据&#xff0c;比如查询某个表中重复的数据&#xff0c;那么&#xff0c;具体应该怎么实现呢&#xff1f;常用的方法都有哪些呢&#xff1f; 测试表中数据&#xff1a; 1&#xff1a;查询名字重复的数据 having&#xff1a; …...

编程日记 2023/8/23 13:55:46

Go framework-GORM

目录 一、GORM 1、GORM连接数据库 2、单表的增删改查 3、结构体名和表名的映射规则 4、gorm.Model匿名字段 5、结构体标签gorm 6、多表操作 7、常用方法 8、支持原生SQL 9、Gin整合GORM 一、GORM ORM&#xff1a;即Object-Relational Mapping&#xff0c;它的作用是在…...

编程日记 2023/8/23 13:54:45

FirmAE 工具安装（解决克隆失败 网络问题解决）

FirmAE官方推荐使用Ubuntu 18.04系统进行安装部署&#xff0c;FirmAE工具的安装部署十分简单&#xff0c;只需要拉取工具仓库后执行安装脚本即可。 首先运行git clone --recursive https://kgithub.com/pr0v3rbs/FirmAE命令 拉取FirmAE工具仓库&#xff0c;因为网络的问题&…...

编程日记 2023/8/23 13:53:41

css实现九宫格布局

要使用CSS实现九宫格布局&#xff0c;可以创建一个包含九个元素的容器&#xff0c;并使用display: grid属性将其设置为网格布局。然后&#xff0c;使用grid-template-columns和grid-template-rows属性来定义网格的行和列布局。接下来&#xff0c;使用grid-gap属性来设置网格的行…...

编程日记 2023/8/23 13:52:40

linux下系统问题排查基本套路

文章目录 总结常用命令原文GC相关网络TIME_WAITCLOSE_WAIT 总结常用命令 top 查找cpu占用高的进程ps 找到对应进程的pidtop -H -p pid 查找cpu利用率较高的线程printf ‘%x\n’ pid 将线程pid转换为16进制得到 nidjstack pid |grep ‘nid’ -C5 –color 在jstack中找到对应堆栈…...

编程日记 2023/8/23 13:51:39

想解锁禁用的iPhone？除了可以使用电脑之外，这里还有不需要电脑的方法！

多次输入错误的密码后，iPhone将显示“iPhone已禁用”。这种情况看起来很棘手，因为你现在不能用iPhone做任何事情。对于这种情况，我们提供了几种有效的方法来帮助你在最棘手的问题中解锁禁用的iPhone。你可以选择使用或不使用电脑来解锁禁用的iPhone。 一、为什么你的iPhone…...

编程日记 2023/8/23 13:50:37

基于Springboot+Thymeleaf学生在线考试管理系统——LW模板

摘 要 随着当前大数据时代的飞速发展&#xff0c;信息技术以及数据科学不断的普及&#xff0c;教育界也随之更新换代。无粉尘黑板以及电子化考试都已经是在各种学校中普及使用&#xff0c;而且因为操作简单以及对环境没有任何影响&#xff0c;这也将是未来发展的重大趋势。而由…...

编程日记 2023/8/23 13:49:36

STM32f103c6t6/STM32f103c8t6寄存器开发

目录 资料 寻址区 2区 TIMx RTC WWDG IWDG SPI I2S USART I2C USB全速设备寄存器 bxCAN BKP PWR DAC ADC ​编辑 EXTI ​编辑 GPIO AFIO SDIO DMA CRC RCC FSMC USB_OTG ETH&#xff08;以太网&#xff09; 7区 配置流程 外部中断 硬件中断 例子 点灯 …...

编程日记 2023/8/23 13:48:34

MySQL Connection not available.

Mysql 报错 最近部署在服务器上的mysql总是报这种错。 但是在服务器上&#xff0c;使用命令行是可以登录进mysq的。 cursor db.cursor() File “/home/ubuntu/miniconda3/envs/chatbot_env/lib/python3.9/site-packages/mysql/connector/connection_cext.py”, line 700, in …...

编程日记 2023/8/23 13:47:33

PHP反序列化 字符串逃逸

前言 最近在打西电的新生赛&#xff0c;有道反序列化的题卡了很久&#xff0c;今天在NSS上刷题的时候突然想到做法&#xff0c;就是利用字符串逃逸去改变题目锁死的值&#xff0c;从而实现绕过 为了研究反序列化的字符串逃逸 我们先简单的测试下 原理 <?php class escape…...

编程日记 2023/8/23 13:46:32

DockerFile解析

1. 是什么 Dockerfile是田来构建Docker镜像的文本文件&#xff0c;是由一条条构建镜像所需的指令和参数构成的脚本 1.1 概述 1.2 官网 Dockerfile reference | Docker Documentation 1.3 构建三步骤 1. 编写dockerfile文件 2. docker build命令构建镜像 3. docker run依镜像运…...

编程日记 2023/8/23 13:45:31

斯坦福大学医学院教授：几年内ChatGPT之类的AI将纳入日常医学实践

注意&#xff1a;本信息仅供参考&#xff0c;分享此内容旨在传递更多信息之目的&#xff0c;并不意味着赞同其观点或证实其说法。 在一项新研究中&#xff0c;斯坦福大学研究人员发现&#xff0c;ChatGPT在复杂临床护理考试题中可以胜过一、二年级的医学生。此项研究显示&#…...

编程日记 2023/8/23 13:44:30

golang 命令行 command line (flag,os,arg,args)

目录 1. golang 命令行 command line1.1. Introduction1.2. Parsing Arguments from the command line (os package)1.2.1. Get the number of args1.2.2. Iterate over all arguments 1.3. Using flags package1.3.1. Parse Typed Flags1.3.2. Set flags from the script1.3.3…...

编程日记 2023/8/23 13:43:29

Shell语法揭秘：深入探讨常见Linux Shell之间的语法转换

深入探讨常见Linux Shell之间的语法转换 一、引言二、Linux常用Shell&#xff1a;Bash、Zsh、Ksh、Csh、Tcsh和Fish的简介2.1、Bash、Zsh、Ksh、Csh、Tcsh和Fish的特点和用途2.2、语法差异是常见Shell之间的主要区别 三、变量和环境设置的语法差异3.1、变量定义和使用的不同语法…...

编程日记 2023/8/23 13:42:26

Python3 基础语法

Python3 基础语法 编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a; # -*- coding: cp-1252 -*- 上述定义允许在源文件中使用 Windows-1252 字符集中的字符编码&…...

编程日记 2023/8/23 13:41:25

spring boot分装通用的查询+分页接口

背景 在用spring bootmybatis plus实现增删改查的时候&#xff0c;总是免不了各种模糊查询和分页的查询。每个数据表设计一个模糊分页&#xff0c;这样代码就造成了冗余&#xff0c;且对自身的技能提升没有帮助。那么有没有办法实现一个通用的增删改查的方法呢&#xff1f;今天…...

编程日记 2023/8/23 13:40:24

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/9/3 1:27:59

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/9/7 8:52:44

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/9/1 23:52:40

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/9/12 11:11:41

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2025/9/2 5:09:11

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2025/9/2 16:50:27

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2025/9/7 8:47:18

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/7/7 8:32:25

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2025/9/7 8:46:36