前端面试总结心得

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上找的算法题,此处就不列出来了。好在我们要求不高,做不出来也没关系,真的只是用来拖时间。

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48962.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

框架分析(2)-React

框架分析&#xff08;2&#xff09;-React 专栏介绍React核心思想关键特性和功能组件化开发单向数据流JSX语法强大的生态系统 优缺点分析优点缺点 专栏介绍 link 主要对目前市面上常见的框架进行分析和总结&#xff0c;希望有兴趣的小伙伴们可以看一下&#xff0c;会持续更新的…

火山引擎发布自研视频编解码芯片 压缩效率提升30%

8月22日&#xff0c;火山引擎视频云宣布其自研的视频编解码芯片已成功出片。经验证&#xff0c;该芯片的视频压缩效率相比行业主流硬件编码器可提升30%以上&#xff0c;未来将服务于抖音、西瓜视频等视频业务&#xff0c;并将通过火山引擎视频云开放给企业客户。 火山引擎总裁…

【真实案例】解决后端接口调用偶尔超时问题

文章目录 背景分析代码分析二次日志分析排查Gateway服务解决解决办法1:添加重试机制解决办法2:优化网关内存分配解决办法3:调整OOM策略背景 项目从虚拟机迁移到k8s云原生平台(RainBond)后,发现偶尔会出现接口调用超时的问题。 统计了一下从上线到现在近一个月的调用失败…

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

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

springMVC Unix 文件参数变更漏洞修复

错误信息如下&#xff1a; 解决方案&#xff1a; 原因&#xff1a;未对用户输入正确执行危险字符清理 未检查用户输入中是否包含“…”&#xff08;两个点&#xff09;字符串&#xff0c;比如 url 为 /login?action…/webapps/RTJEKSWTN26635&typerandomCode cookie为Coo…

Spring Boot 整合MyBatis(超详细)

&#x1f600;前言 本篇博文关于Spring Boot 整合MyBatis&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x…

R语言03-R语言中的矩阵

概念 在R语言中&#xff0c;矩阵&#xff08;Matrix&#xff09;是一个二维的数据结构&#xff0c;由行和列组成&#xff0c;其中所有元素必须具有相同的数据类型。矩阵可以用于存储数值型数据&#xff0c;常用于线性代数运算、统计计算以及数据处理等领域。 代码示例 # 创建…

从零学算法160

**160.**给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 示例 1&#xff1a; 输入&#xff1a;intersectVal 8, listA [4,1,8,4,5], listB [5,6,1,8,4,5], skipA 2, ski…

AJ-Captcha行为验证在vue中的使用

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 项目场景&#xff1a;由原先的验证码校验升级为行为验证校验 使用方法 提示&#xff1a;参考文档&#xff1a; 参考文档&#xff1a;vue使用AJ-Captcha文档 gitee地址&#xff1a;AJ-Captcha &…

FFmpeg解码32k大分辨率出现如下错误:Picture size 32768x32768 is invalid

最近找到一张32k的jpeg图片&#xff0c;尝试用ffmpeg来进行解码&#xff0c;命令如下&#xff1a; ffmpeg -i enflame_32768-32768-420.jpg 32.yuv结果出现Picture size 32768x32768 is invalid的错误&#xff1a;

uniapp-滑块验证组件wo-slider

wo-slider是一款支持高度自定义的滑块验证组件&#xff0c;采用uniapp-vue2编写 采用touchstart、touchmove、touchend事件实现的滑块组件,支持H5、微信小程序&#xff08;其他小程序未试过&#xff0c;可自行尝试&#xff09; 可到插件市场下载尝试&#xff1a; https://ext.…

Docker搭建个人网盘、私有仓库

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘 [rootlocalhost ~]# docker pull mysql:5.6 [rootlocalhost ~]# docker pull owncloud [rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 [rootlocalhost ~]# doc…

RESTful API,以及如何使用它构建 web 应用程序

RESTful API是一种基于HTTP协议的API设计风格&#xff0c;它的核心思想是将资源作为 API 的核心&#xff0c;使用 HTTP 的 GET、POST、PUT、DELETE 等方法对这些资源进行操作&#xff0c;并通过 URL 来定位资源。 RESTful API的特点包括&#xff1a; 资源是 API 的核心使用 H…

【LeetCode-经典面试150题-day12】

20.有效的括号 题意&#xff1a; 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括…

共享休闲娱乐空间:打造多元化生活方式

共享茶室&#xff1a; 共享茶室为人们提供了一个安静、放松的环境&#xff0c;让人们可以品尝不同种类的茶叶&#xff0c;并享受到与他人分享茶文化的乐趣。共享茶室通常会提供专业的泡茶设备和茶具&#xff0c;让人们可以更好地体验泡茶的过程和仪式感。这种共享空间不仅让人们…

Go的标准库Context理解

作为一个才入门的菜鸟&#xff0c;还没写过真正的 go 项目&#xff0c;要理解这个 Context 还是有点难&#xff0c;不过还是要尝试一下。在 Go http包的Server中&#xff0c;每一个请求在都有一个对应的 goroutine 去处理。请求处理函数通常会启动额外的 goroutine 用来访问后端…

会计术语英汉对照表 (包括术语详细介绍) | 会计英语

对账&#xff08;checking&#xff09; 对应账户&#xff08;corresponding accounts&#xff09; 定期清查&#xff08;Periodic ckecking method&#xff09; 定期盘存制&#xff08;periodic inventory system&#xff09; 订本式账簿&#xff08;bound book&#x…

【微服务】微服务调用原理及服务治理

本文通过图文结合&#xff0c;简要讲述微服务的调用原理&#xff0c;以及服务治理的相关概念。 1.微服务的调用原理 举个栗子&#xff1a;你去会所洗脚。首先&#xff0c;技师肯定要先去会所应聘&#xff0c;通过之后&#xff0c;会所会记录该技师的信息和技能&#xff0c;然后…

PHP反序列化 字符串逃逸

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