前端面试总结心得
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攻击的原理,并知道常见的防范方式即可。其他的安全防范问题很多,有所了解的话是加分项。
之所以安排这个题,倒不是说网络安全在工作中有多重要。我自己做网站十几年,遇到过许多的网络安全攻击,每次都让我学到了很多知识,技术得到成长。面试前端会问这个问题,主要是看面试会不会去关注网站的各个方面,而不是把责任都推给后台和运维的同事。
现场编程题
什么,不是说好的不内卷,面试不考算法题么?然而我还是准备了一些现场编程题,有时候会让面试者任选一题,在纸上手写代码。
本环节纯粹用于拖时间。有时候下轮面试官在开会之类的,需要等待较长时间,为避免让面试者太无聊,给个编程题打发时间。
-
实现一个大数计算的方法。
-
实现一个符合Promise A+规范的Promise库,只需实现then方法。
-
找出一个文本串中出现次数最多的文本段。如果出现概率一样多,取最长的文本;如果出现概率和长度一样,取得第一个文本。不考虑单个字母,以2位字符串作为最小的文本段单元。
以上三题参考腾讯不同部门的前端面试上机题,如果是大厂面试,肯定是必须做出来的。还有一些leetCode上找的算法题,此处就不列出来了。好在我们要求不高,做不出来也没关系,真的只是用来拖时间。
总结
从自我介绍开始,都一直在考核候选人的沟通能力、表达能力。问最近学习过哪些新技术,通过什么渠道学习,考核候选人的学习能力,以及对技术的态度。问之前公司的加班情况,遇到瓶颈时如何解决,了解候选人的抗压能力。技术虽然是硬实力,但在工作中,软实力更为重要。
面试也远远不止考核候选人能力这么简单。给面试者一个顺畅的流程,舒适的面试环境,礼貌、友善的交流,能塑造雇主品牌,在行业内留下一个好的口碑。要介绍一下技术团队和技术栈,让候选人知道进来以后大概会负责哪方面的工作。对于优秀的候选人,通过提问的深度和广度,展现自己的技术实力,也是吸引候选人的有效方式。面试是一个双向选择的过程,面试官也需要不断修炼和成长。
相关文章:
前端面试总结心得
1.放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行? A、文件头部位置;B、文件尾;C、<head>标签部分;D、<body>标签部分 (正确答案D) 2.队列和栈的区别是什么? 答案&am…...

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是可以在常…...

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

大数据分析案例-基于LightGBM算法构建糖尿病确诊预测模型
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...

Mysql查询重复数据常用方法
在平常的开发工作中,我们经常需要查询数据,比如查询某个表中重复的数据,那么,具体应该怎么实现呢?常用的方法都有哪些呢? 测试表中数据: 1:查询名字重复的数据 having: …...
Go framework-GORM
目录 一、GORM 1、GORM连接数据库 2、单表的增删改查 3、结构体名和表名的映射规则 4、gorm.Model匿名字段 5、结构体标签gorm 6、多表操作 7、常用方法 8、支持原生SQL 9、Gin整合GORM 一、GORM ORM:即Object-Relational Mapping,它的作用是在…...

FirmAE 工具安装(解决克隆失败 网络问题解决)
FirmAE官方推荐使用Ubuntu 18.04系统进行安装部署,FirmAE工具的安装部署十分简单,只需要拉取工具仓库后执行安装脚本即可。 首先运行git clone --recursive https://kgithub.com/pr0v3rbs/FirmAE命令 拉取FirmAE工具仓库,因为网络的问题&…...
css实现九宫格布局
要使用CSS实现九宫格布局,可以创建一个包含九个元素的容器,并使用display: grid属性将其设置为网格布局。然后,使用grid-template-columns和grid-template-rows属性来定义网格的行和列布局。接下来,使用grid-gap属性来设置网格的行…...

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中找到对应堆栈…...

想解锁禁用的iPhone?除了可以使用电脑之外,这里还有不需要电脑的方法!
多次输入错误的密码后,iPhone将显示“iPhone已禁用”。这种情况看起来很棘手,因为你现在不能用iPhone做任何事情。对于这种情况,我们提供了几种有效的方法来帮助你在最棘手的问题中解锁禁用的iPhone。你可以选择使用或不使用电脑来解锁禁用的iPhone。 一、为什么你的iPhone…...
基于Springboot+Thymeleaf学生在线考试管理系统——LW模板
摘 要 随着当前大数据时代的飞速发展,信息技术以及数据科学不断的普及,教育界也随之更新换代。无粉尘黑板以及电子化考试都已经是在各种学校中普及使用,而且因为操作简单以及对环境没有任何影响,这也将是未来发展的重大趋势。而由…...

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(以太网) 7区 配置流程 外部中断 硬件中断 例子 点灯 …...
MySQL Connection not available.
Mysql 报错 最近部署在服务器上的mysql总是报这种错。 但是在服务器上,使用命令行是可以登录进mysq的。 cursor db.cursor() File “/home/ubuntu/miniconda3/envs/chatbot_env/lib/python3.9/site-packages/mysql/connector/connection_cext.py”, line 700, in …...

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

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

斯坦福大学医学院教授:几年内ChatGPT之类的AI将纳入日常医学实践
注意:本信息仅供参考,分享此内容旨在传递更多信息之目的,并不意味着赞同其观点或证实其说法。 在一项新研究中,斯坦福大学研究人员发现,ChatGPT在复杂临床护理考试题中可以胜过一、二年级的医学生。此项研究显示&#…...
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…...

Shell语法揭秘:深入探讨常见Linux Shell之间的语法转换
深入探讨常见Linux Shell之间的语法转换 一、引言二、Linux常用Shell:Bash、Zsh、Ksh、Csh、Tcsh和Fish的简介2.1、Bash、Zsh、Ksh、Csh、Tcsh和Fish的特点和用途2.2、语法差异是常见Shell之间的主要区别 三、变量和环境设置的语法差异3.1、变量定义和使用的不同语法…...
Python3 基础语法
Python3 基础语法 编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串。 当然你也可以为源码文件指定不同的编码: # -*- coding: cp-1252 -*- 上述定义允许在源文件中使用 Windows-1252 字符集中的字符编码&…...

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

调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...

VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具,专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑(如DBC、LDF、ARXML、HEX等),并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...