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

前端面试总结心得

news 2026/5/12 4:07:16

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

自研引擎筑底 实景孪生领航——核心算法全栈自主可控，构筑数字孪生产业稳健技术护城河

自研引擎筑底 实景孪生领航——核心算法全栈自主可控&#xff0c;构筑数字孪生产业稳健技术护城河副标题&#xff1a;核心算法全栈自主可控&#xff0c;构筑数字孪生产业稳健技术护城河前言数字孪生与视频孪生作为数字经济核心支撑技术&#xff0c;正推动千行百业数字化转型进入…...

编程新知 2026/5/12 3:50:02

004、TinyML技术栈全景图：从模型到部署

004 TinyML技术栈全景图：从模型到部署 去年冬天调试一个智能门磁项目，板子是STM32L4，Flash只有256KB。模型在PC上跑F1值0.97，烧进去直接死机——不是推理结果不对，是内存分配直接溢出。我盯着map文件看了三个小时，最后发现是TensorFlow Lite Micro的arena大小设错了，多…...

编程新知 2026/5/12 3:45:43

Cursor SDD Starter：AI驱动开发工作流工程化实践指南

1. 项目概述&#xff1a;一个为工程团队设计的AI驱动开发工作流启动器 如果你和你的团队正在使用Cursor IDE&#xff0c;并且希望将AI辅助开发从一个偶尔使用的“代码补全工具”&#xff0c;升级为一套可预测、可复现、能真正融入团队协作流程的“工程化工作流”&#xff0c;那…...

编程新知 2026/5/12 3:28:14

有桥BOOST PFC变换器原理、工作模式和控制模式的优缺点

前言在现代电力电子设备中&#xff0c;功率因数校正&#xff08;PFC&#xff09;技术已经成为不可或缺的核心环节。随着全球各国对电网谐波污染的管控日益严格&#xff08;如 IEC 61000-3-2 标准&#xff0c;对各类用电设备的谐波电流发射施加严格限值&#xff1b;例如对于功率…...

编程新知 2026/5/12 3:23:33

DRAM计算内存的电源传输网络优化策略

1. DRAM计算内存中的电源传输网络挑战与优化在数据密集型应用爆炸式增长的今天&#xff0c;传统冯诺依曼架构面临严峻的"内存墙"挑战。计算内存&#xff08;Compute-in-Memory, CIM&#xff09;技术通过在内存内部执行计算任务&#xff0c;从根本上改变了数据处理范式…...

编程新知 2026/5/12 2:57:22

Unity中Spine混合模式插槽的Shader实现与优化

1. Spine混合模式插槽的核心问题解析 当你把Spine动画导入Unity后&#xff0c;发现角色颜色变得灰蒙蒙的&#xff0c;就像蒙了一层雾。这种情况在游戏开发中特别常见&#xff0c;尤其是当美术同学在Spine编辑器中精心调制的渐变效果&#xff0c;到了Unity里却完全走样。问题的根…...

编程新知 2026/5/12 2:32:47

什么是dapr？为什么要使用它

官方文档https://docs.dapr.io/zh-hans/developing-applications/building-blocks/ 介绍 dapr是一个分布式运行时&#xff08;Distributed Application Runtime&#xff09;是一个开源项目&#xff0c;它把构建微服务的最佳实践沉淀为开发者可直接调用的标准化API&#xff0c;…...

编程新知 2026/5/11 23:45:23

论文AI率太高怎么救？答辩前1周降AI率完整攻略+不延期方案！

论文AI率太高怎么救&#xff1f;答辩前1周降AI率完整攻略不延期方案&#xff01; 导师周一通知答辩、周五查出来知网 AIGC 检测 67%——这种倒计时场景每年 3-5 月毕业季都会上演几千次。 这种场景下选工具&#xff0c;最关键的不是「单价便宜」是「降不下来怎么办」。1 周时间…...

编程新知 2026/5/11 22:28:01

PHP怎么处理Eloquent Attribute Harmonization属性协调_Laravel解决数据冲突【教程】

Eloquent 属性协调失败源于 $casts、访问器、序列化逻辑等机制作用域与执行顺序不一致&#xff1b;应优先用 $casts 处理类型转换&#xff0c;访问器仅用于动态计算&#xff0c;JSON 字段需显式标记 dirty 或拆分为关联模型。PHP 中 Eloquent 的 “Attribute Harmonization” 并…...

编程新知 2026/5/11 22:14:29

高性能服务架构缓存设计：Redis+Caffeine

&#x1f449; 这是一个或许对你有用的社群&#x1f431; 一对一交流/面试小册/简历优化/求职解惑&#xff0c;欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料&#xff1a; 《项目实战&#xff08;视频&#xff09;》&#xff1a;从书中学&#xff0c;往事上…...

编程新知 2026/5/11 22:07:42