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

前端面试总结心得

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…...

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

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

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

Mysql查询重复数据常用方法

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

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;它的作用是在…...

FirmAE 工具安装(解决克隆失败 网络问题解决)

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

css实现九宫格布局

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

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

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区 配置流程 外部中断 硬件中断 例子 点灯 …...

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 …...

PHP反序列化 字符串逃逸

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

DockerFile解析

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

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

注意&#xff1a;本信息仅供参考&#xff0c;分享此内容旨在传递更多信息之目的&#xff0c;并不意味着赞同其观点或证实其说法。 在一项新研究中&#xff0c;斯坦福大学研究人员发现&#xff0c;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&#xff1a;Bash、Zsh、Ksh、Csh、Tcsh和Fish的简介2.1、Bash、Zsh、Ksh、Csh、Tcsh和Fish的特点和用途2.2、语法差异是常见Shell之间的主要区别 三、变量和环境设置的语法差异3.1、变量定义和使用的不同语法…...

Python3 基础语法

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

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

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

【OpenCV】OpenCV环境搭建,Mac系统,C++开发环境

OpenCV环境搭建&#xff0c;Mac系统&#xff0c;C开发环境 一、步骤VSCode C环境安装运行CMake安装运行OpenCV 安装CMakeList 一、步骤 VSCode C环境安装CMake 安装OpenCV 安装CmakeList.txt VSCode C环境安装运行 访问官网 CMake安装运行 CMake官网 参考文档 OpenCV 安…...

node安装node-sass依赖失败(版本不一致)

1.官网对应node版本 https://www.npmjs.com/package/node-sass2.node-sass版本对应表...

联想小新Pro 16笔记本键盘失灵处理方法

问题描述&#xff1a; 联想小新Pro 16新笔记本开机准备激活&#xff0c;到连接网络的时候就开始触控板、键盘失灵&#xff0c;但是有意思的是键盘的背光灯是可以调节关闭的&#xff1b;外接鼠标是正常可以移动的&#xff0c;但是只要拔掉外接鼠标再插回去的时候就不能用了&…...

python 连接Redis 数据库

pip install redis python代码 import redis# 连接数据库 r redis.Redis(host192.168.56.15, port6379, db0)# 存储数据 #r.set(key, value) r.set(name, zaraNet)# 获取数据 value r.get(name) print(value)# 关闭连接&#xff08;可选&#xff09; r.close()...

使用 wxPython 和 pymupdf进行 PDF 加密

PDF 文件是一种常见的文档格式&#xff0c;但有时候我们希望对敏感信息进行保护&#xff0c;以防止未经授权的访问。在本文中&#xff0c;我们将使用 Python 和 wxPython 库创建一个简单的图形用户界面&#xff08;GUI&#xff09;应用程序&#xff0c;用于对 PDF 文件进行加密…...

Mysql性能优化:什么是索引下推?

导读 索引下推&#xff08;index condition pushdown &#xff09;简称ICP&#xff0c;在Mysql5.6的版本上推出&#xff0c;用于优化查询。 在不使用ICP的情况下&#xff0c;在使用非主键索引&#xff08;又叫普通索引或者二级索引&#xff09;进行查询时&#xff0c;存储引擎…...

Pytorch建立MyDataLoader过程详解

简介 torch.utils.data.DataLoader(dataset, batch_size1, shuffleNone, samplerNone, batch_samplerNone, num_workers0, collate_fnNone, pin_memoryFalse, drop_lastFalse, timeout0, worker_init_fnNone, multiprocessing_contextNone, generatorNone, *, prefetch_factorN…...

十问华为云 Toolkit:开发插件如何提升云上开发效能

众所周知&#xff0c;桌面集成开发环境&#xff08;IDE&#xff09;已经融入到开发的各个环节&#xff0c;对开发者的重要性和广泛度是不言而喻的&#xff0c;而开发插件更是建立在IDE基础上的功能Buff。 Huawei Cloud ToolKit作为华为云围绕其产品能力向开发者桌面上的延伸&a…...

NO.06 自定义映射resultMap

1、前言 在之前的博客中&#xff0c;实体类的属性名和数据库表的字段名是一致的&#xff0c;因此能正确地查询出所需要的数据。当实体类的属性名与数据库表的字段名不一致时&#xff0c;会导致查询出来的数据为空指针。要解决这个问题就需要使用resultMap自定义映射。 使用的…...

国产精品:讯飞星火最新大模型V2.0

大家好&#xff0c;我是爱编程的喵喵。双985硕士毕业&#xff0c;现担任全栈工程师一职&#xff0c;热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。…...

做网站的需要什么资质证明/百度代做seo排名

1、什么是函数&#xff1f;为什么要用函数&#xff1f; 简单来说&#xff0c;函数就是一个代码段&#xff0c;这个代码段的主体 用{}包含&#xff0c;函数就是讲功能模块化。 2、函数的好处 函数可以使程序更具稳定性和可复用性 3、函数的定义 函数有两种定义方法&#xff1a;1…...

长沙网站建设qq交流群/上海seo网站推广

Python中利用函数装饰器实现备忘功能 这篇文章主要介绍了Python中利用函数装饰器实现备忘功能,同时还降到了利用装饰器来检查函数的递归、确保参数传递的正确&#xff0c;需要的朋友可以参考下“备忘”的定义 “memoization”&#xff08;备忘&#xff09;这个词是由Donald Mic…...

网站开发目标/关键词排名的排名优化

CREATE USER test192.168.% IDENTIFIED BY pims20181214; grant all privileges on test1.* to pims192.168.% identified by pims20181214; flush privileges; 注意网段用的是%&#xff0c;而不是*...

cms 网站后台/搜索引擎营销的概念

物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;是指通过各种信息传感器、射频识别技术、全球定位系统、红外感应器、激光扫描器等各种装置与技术&#xff0c;实时采集任何需要监控、 连接、互动的物体或过程&#xff0c;采集其声、光、热、电、力学、化…...

门户网站想要微信登录怎么做/备案查询网

至顶至底分类和目录C#IOC、DI&#xff0c;IoC容器async和await异步编程委托锁C#关键字运算符匿名函数和Lambda表达式二进制、八进制、十进制、十六进制排序消息队列MQasync和await异步编程async和await异步编程async和await异步编程JavaScript123456database索引脏数据、幻读99…...

未央免费做网站/企业网站有哪些功能

点击上方“蓝色字”可关注我们&#xff01;暴走时评&#xff1a;在加密货币领域&#xff0c;人们越来越怀疑官方监管是否能够跟上不断发展的市场趋势。因此&#xff0c;日本采取了大胆的新举措&#xff1a;日本金融服务厅&#xff08;FSA&#xff09;正式授予日本虚拟货币交易协…...