春招面试面经总结篇

目录

  • 前言
  • 一,算法篇
    • 1.1 平拍数组
    • 1.2 括号匹配
    • 1.3 打家劫舍
    • 1.4 删除最少使字符串平衡
    • 1.5 爬楼梯
  • 二,数据结构篇
    • 2.1 二叉树
    • 2.2 链表
  • 三,HTML篇
    • 3.1 H5新的语义标签
    • 3.2 href和src
  • 四,CSS篇
    • 4.1 居中
    • 4.2 父元素塌陷解决
    • 4.3 外边距塌陷
    • 4.4 CSS3盒子模型、怪异盒子模型
    • 4.5 CSS三角
    • 4.6 CSS响应式实现方法
    • 4.7 CSS预处理器
    • 4.8 CSS选择器和优先级
    • 4.9 CSS定位
    • 4.10 回流和重绘
    • 4.11 link和@import的区别
  • 五,js篇
    • 5.1 事件循环
    • 5.2 本地存储
    • 5.3 js的new发生了什么
    • 5.4 js改变this指向
    • 5.5 js原型链
    • 5.6 js实现防抖和节流
  • 六,计网篇
    • 6.1 http
    • 6.2 http1.0和http2.0区别
    • 6.3 http和https的区别
    • 6.4 强制缓存和协商缓存
    • 6.5 浏览器中输入一个url会发生什么
    • 6.6 post和get请求区别
    • 6.7 options请求--跨域预检
    • 6.8 跨域及解决跨域
    • 6.9 身份验证
    • 6.10 web攻击
    • 6.11 浏览器存储
    • 6.12 oAuth认证

前言

这是一篇关于春招的面试面经,涵盖了我整理的大部分面试考题。在春招结束后发出,希望能帮助到需要的朋友。

由于面试的题目会比较杂,这里不标注问题的来源,只给它们做一个简单的归类。分为以下几个部分:算法、HTML、CSS、JS、Vue、计算机网络、代码题目、性能优化、脚手架。

一,算法篇

算法,考的比较多的是动态规划,也有数据结构的应用。

1.1 平拍数组

// 平铺对象
let obj = {a: 1,b: 2,c: 3,d: {e: 4,f: 5}}
let showObject = (obj) => {for(let i in obj) {if(obj[i] instanceof Object) {showObject(obj[i])} else {console.log(obj[i])}}
}
showObject(obj)// 平铺数组
let arr = [1, 2, 3, [4, 2, 4, [3, 3, 3]]]
let arr1 = []
let showArray = (array) => {array.forEach((item) => {if(Array.isArray(item)) {showArray(item)} else {arr1.push(item)}})
}
showArray(arr)
console.log(arr1)

1.2 括号匹配

let str = '({[]}}'
// 括号堆栈
let fn = (str) => {// 先转化为数组let arr = []arr = str.split('')// 设置一个堆栈let arr1 = []for(let i in arr) {arr1.push(arr[i])if((arr1[arr1.length - 1] == ')' && arr1[arr1.length - 2] == '(') || (arr1[arr1.length - 1] == ']' && arr1[arr1.length - 2] == '[') || (arr1[arr1.length - 1 ] == '}' && arr1[arr1.length - 2] == '{')) {arr1.pop()arr1.pop()}}console.log(arr1.length)
}
fn(str)

1.3 打家劫舍

var rob = function(nums) {let dp = []dp[0] = nums[0]dp[1] = Math.max(nums[0], nums[1])for(let i = 2; i < nums.length; i++) {dp[i] = Math.max(nums[i] + dp[i - 2], dp[i - 1] )}return dp[nums.length - 1]
};

1.4 删除最少使字符串平衡

var minimumDeletions = function (s) {let arr = s.split("")// 删除左侧Blet leftB = 0// 删除右侧Alet rightA = 0// 对应的删除次数let dp = []for (let i in arr) {if (arr[i] == 'b') leftB++if (arr[i] == 'a') rightA++}dp[0] = 0 + rightAdp[arr.length + 1] = leftB + 0for (let i = 0; i < arr.length; i++) {if (arr[i] == 'a') {dp[i + 1] = dp[i] - 1} else {dp[i + 1] = dp[i] + 1}}dp.sort((a, b) => {return a - b})console.log(dp)return dp[0]
};
let s = "baababb"
minimumDeletions(s)

1.5 爬楼梯

var climbStairs = function (n) {let dp = [] // dp[i]为还剩几步时有几种情况dp[0] = 0dp[1] = 1dp[2] = 2if (n == 1) {console.log(dp[1])return dp[1]} else if (n == 2) {console.log(dp[2])return dp[2]} else {for(let i = 3; i <= n; i++) {dp[i] = dp[i - 1] + dp[i - 2]}console.log(dp[n])return dp[n]}
}climbStairs(5)

二,数据结构篇

2.1 二叉树

遍历二叉树

2.2 链表

三,HTML篇

3.1 H5新的语义标签

header-头部标签
nav-导航标签
content-内容标签
section-某个区域标签
aside-侧边栏标签
footer–尾部标签

3.2 href和src

href:超文本引用,用于建立文档与资源的联系,常用有link、a;
src:将所指向的资源下载并应用到当前页,常用的有script、img。

四,CSS篇

4.1 居中

1.水平居中:

        /* 采用auto *//* margin: 200px auto; *//* 作为父亲盒子在页面水平,也可以结合定位+平移 *//* position: relative;left: 50%;transform: translateX(-50%); *//* margin配合平移 *//* margin-left: 50%;transform: translateX(-50%); */

文字的水平居中还可以用到text-align: center

2.垂直居中

        /* position: absolute;top: 50%;transform: translateY(-50%); *//* 这个方法要注意,父亲需要解决高度塌陷的问题 *//* margin-top: 50%;transform: translateY(-50%); *//* flex *//* 父亲:justify-content:center *//* 行内元素为父亲高度 *//* line-height: 100px; */

3.水平垂直居中
达到样式:
在这里插入图片描述
方法一:父亲flex布局

        display: flex;flex-direction: column; justify-content: center;align-items: center;

方法二:定位+位移

        position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);

方法三:margin,这个方法父亲要防止高度塌陷

        /* position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); */

4.2 父元素塌陷解决

前提:父元素高度由子元素撑开,当子元素设置浮动,父元素高度塌陷。

原因:子元素浮动,和父元素不在一个BFC中了(浮动的元素的z-index大于父),父元素不再被子元素撑开,高度又不固定,因此塌陷。

原:
在这里插入图片描述
塌陷:
在这里插入图片描述
解决方法:

1.给父元素设置高度,但是设置高度会导致,父亲不会随着子元素高度而扩大,不建议使用;

2.添加一个空的子元素,利用clear:both清楚浮动;或者给父元素加一个伪类元素,清除浮动;

3.给父元素添加overflow: hidden;

4.3 外边距塌陷

外边距塌陷一般是因为使用了margin,尽量使用padding即可避免。

解决方法:

1.给父元素设置透明边框;

2.尽可能使用padding+盒子模型;

3.给父元素使用overflow: hidden;

4.4 CSS3盒子模型、怪异盒子模型

box-sizing来控制,content-box是默认模式:

宽度 = padding + border + 元素本身宽度
高度 = padding + border + 元素本身高度

一旦设置box-sizing为===border-box=属性,则:

宽度 = 元素本身宽度
高度 = 元素本身高度

4.5 CSS三角

先画一个这样的正方形:
在这里插入图片描述
css代码:

    .sanjiao {width: 0;height: 0;border: 100px solid;border-color: orangered skyblue gold yellowgreen;}

如果要上三角:
在这里插入图片描述
加上这三句:

        border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;

想要什么就去掉其他,以此类推。需要注意的是,该元素的宽度应当设置为0

4.6 CSS响应式实现方法

1.媒体查询;
2.宽度百分比高度自适应;
3.vw,vh实现;(视口长度,视口宽度)
4.flex布局;
5.栅格布局,layout布局;
6.rem,em;(rem针对根元素,em针对父元素)

4.7 CSS预处理器

scss、less写法类似。

4.8 CSS选择器和优先级

继承(*)> 类选择器(伪类选择器)> id选择器 > 行内样式 > !important

4.9 CSS定位

relative-相对定位-相对于自己的原来位置-不脱标
absolute-绝对定位-无祖先则以浏览器,有祖先以最近一级为参考-脱标大于浮动

固定定位fixed和粘性对比sticky的比对
固定定位:相对于浏览器视口固定-脱标(会挡住文档,要预留空间)
粘性定位:没滚到边界时相当于fixed,滚到边界时相当于relative,相当于relative+fixed-不脱标(不会挡住文档,无需预留空间)

4.10 回流和重绘

重绘:重新绘画,给一个元素更换亚瑟、背景。不影响页面布局,但是颜色,背景变了,就会重新渲染页面;

回流:增加或删除DOM节点,改变页面布局,就会重新构造DOM。

关系:有回流就会有重绘,但有重绘不一定会有回流。

4.11 link和@import的区别

link可以在head中用,而@import是CSS固定的样式。

link会和页面同时加载,@import会等页面加载完再加载。

link支持使用JS去控制DOM改变样式,@import不支持。

五,js篇

5.1 事件循环

这里重要的是顺序,因为在面试中常考。

同步优先,异步时机到运行;
异步分为宏任务、微任务。微任务优先宏任务;

微任务种类:nextTick优先Promise
宏任务种类:setTimeout、setInterval、setImmediate

这里注意new Promise(()=<{})是构造函数,是同步的,但是.then是异步的,且setImmediate比其他定时器先执行。

5.2 本地存储

分为localStorage和sessionStorage。localStorage是永久的,除非手动删除;sessionStorage当浏览器删除其删除。

5.3 js的new发生了什么

创建一个空对象
把构造函数中的prototype单独拿出,创建一个对象,让新的对象的this指向这个单独拿出的原型对象;

5.4 js改变this指向

call: obj.fn.call(obj1, str1, str2…)
是把obj的fn方法的this指向改为了obj1,并以str1,str2作为fn的参数;(自动调用)

apply: obj.fn.apply(thisArg, [argsArr])
是把obj的fn方法的this指向改为了obj1,并以argsArr数组中的每一项作为参数;(自动调用)

bind: obj.fn.bind(obj1, str1, str2…)
是把obj的fn方法的this指向改为了obj1,并以str1,str2作为fn的参数;(手动调用)

5.5 js原型链

在这里插入图片描述

5.6 js实现防抖和节流

防抖:多次点击,仅响应最后一次;
节流:高频触发,规定时间内,只执行第一次

防抖实现:

    let btn = document.querySelector(".btn")let timeout = nullbtn.addEventListener("click", async () => {// 删除定时器clearTimeout(timeout)timeout = setTimeout(() => {alert("111")}, 1000)})

节流实现:

    // 节流,规定时间内,只触发第一次let btn1 = document.querySelector(".btn1")let flag = truebtn1.addEventListener("click", () => {if(flag) {alert('222')flag = falsesetTimeout(() => {flag = true}, 1000)}})

六,计网篇

6.1 http

超文本传输协议,用于从服务器与浏览器通讯,是一种应用层协议,基于TPC/IP通信协议来传递数据;
HTTP1、HTTP2均为TCP实现;HTTP3基于UDP实现。

6.2 http1.0和http2.0区别

http1.0的每个请求都需要建立一个新的TCP连接,请求结束后立即关闭。而http2.0引入多路由服用技术,允许在同一个TCP连接上发送多个请求和响应;
头部压缩,http2.0压缩了请求头和响应头,加强了传输效率;
http2.0服务器可以在客户端请求之前主动推送相关资源,提高页面加载速度;

6.3 http和https的区别

1.https协议需要申请证书,需要花钱;
2.http是超文本协议,信息明文传输,https则会进行加密;
3.端口不一样;
4.http连接是无状态的,https协议是SSL+HTTP构建的加密传输,有身份认证和其他玩过协议,比http协议更安全;

6.4 强制缓存和协商缓存

强制缓存,由服务器去设置,仅针对get请求。缓存的内容放在客户端。如果下次发起请求,这个内容没有过期,则可以从客户端中直接拿到。

协商缓存,第一次请求资源,服务器会对返回的资源以及资源标识,下次请求时,比对资源标识,如若一致则返回状态码304,不用返回资源,如果不一致,则会返回资源和新的资源标识。

6.5 浏览器中输入一个url会发生什么

分两种情况

第一次请求url,会先判断客户端有没有缓存,因为没有,所以会发起get请求,但是在发起get请求之前,需要建立http连接,会先进行三次握手,确保服务器和客户端都能够正常收发内容。发起get请求,服务器返回数据,客户端接收数据之后想要关闭连接,这个时候会进行四次挥手,四次挥手结束,整个过程也随之结束,浏览器此时可以渲染页面。

如果有缓存,则也需要先建立其http连接,然后发起get请求。发起get请求后服务器会返回状态码304,不会给客户端返回数据,客户端从缓存中拿到数据,然后渲染页面。

6.6 post和get请求区别

1.用法上,get请求经常用于获取数据,post用于发送数据;
2.长度上,get请求对参数长度有一定限制,post请求用于发送请求;
3.安全性上,get请求一般会在url后携带请求参数,post请求的参数存储在body中。因此get请求会更加安全;
4.get请求的内容存在缓存(强制缓存和协商缓存),post请求没有;
5.get请求可以在历史记录中看到,post不行。

6.7 options请求–跨域预检

在发起一个需要跨域的请求时,服务器会先向浏览器发起一个跨域预检请求。如果服务器支持跨域请求,则会接着发起get或者post请求(发起正式的http连接),如果不支持,则cors会返回失败。

6.8 跨域及解决跨域

说起跨域,就要聊到同源策略。同源策略,针对于两个url源,说的详细些,可以用于浏览器和服务器在发起请求之前的规则统一。

同源策略:两个url,如果它们的id,域名,端口号相同,则称它们同源;其中一个不同,则不同源。

浏览器向服务器发起请求,服务器传输数据给浏览器,要遵循同源策略。如果不遵循,则会跨域。

接下来介绍跨域请求的解决方式和其中的原理。

方式一:Jsonp。jsonp利用的是,script标签可以不遵循同源策略获取外部资源,只能用作前端的get请求。

方式二:cors。这个就需要前端去联系后端,后端设置服务器的响应头解决问题;

方式三:proxy正向代理。在前端创建一个虚拟服务器,其域名各方面跟前端保持一致。因为同源策略只针对浏览器,不针对服务器,服务器与服务器之间是可以直接发送信息。因此前端发起请求,与自己的服务器对接(不存在跨域),正向虚拟服务器与后端服务器对接(不遵循跨域),拿到请求后,代理服务器再传回数据,解决跨域;

方法四:Nginx反向代理,与正向原理类似。

6.9 身份验证

身份验证的三大块:session、cookie、token。

都用于维持用户登录状态信息。

一般情况下,用户第一次登陆网站,网站会为其开辟一个session空间,并给用户传回信息session_id。用户存储在浏览器的cookie中,下次登陆携带session_id,服务器拿到之后会进行比对,找到属于用户的session空间。

经常会考,session和cookie的区别:
1.session存储在服务器中,而cookie存储在浏览器中;
2.cookie的存储大小有一定限制,而session的存储空间相对较大;
3.cookie因为存储在浏览器中,可以通过抓包等手段获取,安全性不如session。

token的好处:
1.cookie不允许跨域访问,token可以;
2.token在服务端不需要存储session机制,因为token包含了所有登陆用户的信息,只需要在客户端的cookie或者本地存储状态信息;

6.10 web攻击

1.xss攻击
恶意穿插链接,点击该链接,加载脚本文件,可能会出现token和cookie等信息的泄漏;(反射型)
访问某个链接时,携带自身的cookie和token,传给后端。(存储型)

2.csrf攻击
用户登陆信任网站,新人网站返回session_id并产生cookie在用户的浏览器中;
用户在没有退出A的情况下,访问危险网站B。B要求访问第三方站点A,发起一个请求。而这个请求,会携带着原本的cookie。A接收到了cookie,根据用户请求达成协议,

6.11 浏览器存储

分为localStorage(永久存储)和sessionStorage(短暂存储)。两者使用方法类似,不过sessionStorage仅在当前会话下有效,关闭页面或者浏览器后被清楚。

6.12 oAuth认证

分为四种:
授权码认证、客户端认证、密码认证、隐式授权认证、刷新密钥。

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

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

相关文章

藏在十九页PPT里的“海合安之道”

6月6日&#xff0c;成立仅仅两年多的海合安集团亮相2024中国主题公园战略营销峰会&#xff0c;作为本届峰会最年轻的主题公园企业&#xff0c;备受行业关注。 海合安集团成立于2021年&#xff0c;为亚洲最大私募投资基金之一的安博凯投资基金&#xff08;MBK Partners&#xf…

开发一个python工具,pdf转图片,并且截成单个图片,然后修整没用的白边及循环遍历文件夹全量压缩图片

今天推荐一键款本人开发的pdf转单张图片并截取没有用的白边工具 一、开发背景&#xff1a; 业务需要将一个pdf文件展示在前端显示&#xff0c;但是基于各种原因&#xff0c;放弃了h5使用插件展示 原因有多个&#xff0c;文件资源太大加载太慢、pdf展示兼容性问题、pdf展示效果…

Git 常用命令,一文全搞懂

注意&#xff1a;每一次切换分支的时候&#xff0c;本地代码都会自动跟随改变&#xff0c;不需要重新pull,除非有人更新了代码 git remote add origin 地址 连接远程仓库 git clone 地址 克隆项目到本地 git init 更新本地隐藏文件初始化仓库 git add . 代…

周记-2024第25周

2024.6.12-2024.6.23 本周有什么新的收获和进步&#xff0c;总结一下。 记忆力下降的很快&#xff0c;即便是本周的日记&#xff0c;我在回看时&#xff0c;也发现很多都已经忘了。时间也是一样&#xff0c;如果时间日志上没有记录某个时间段做了什么&#xff0c;我发现第二天…

PayPal账号冻结原因及应对

在跨境领域&#xff0c;PayPal这种收款方式&#xff0c;可以说是如影随形&#xff0c;是很多跨境卖家和外贸B2B商户首选的收款方式&#xff0c;就和我们在国内使用某宝、某信一样常见。但使用PayPal收款&#xff0c;最头疼的就是遇到账户冻结以及各种审核&#xff0c;那出现这个…

python例子:翻译器(简单)

作品介绍 作品名称&#xff1a;翻译器 开发环境&#xff1a;PyCharm 2023.3.4 python3.7 用到的库&#xff1a;PyQt5、translate、sys 作品简介&#xff1a;“输入内容”输入要翻译的中文内容&#xff0c;“选择语言”选择要翻译的语种&#xff0c;最后点击“开始翻译”&a…

大模型中的Lang chain是什么意思

LangChain 是一个开源框架&#xff0c;旨在简化构建和操作由大型语言模型 (LLMs) 驱动的应用程序。它提供了一套工具和抽象&#xff0c;帮助开发者将多个语言模型集成到应用程序中&#xff0c;并简化了模型的管理、交互和扩展。 LangChain 的核心概念 Chain&#xff08;链&…

基于轨迹加权的混合离线强化学习数据集

写在前面&#xff1a; 这篇论文阅读已经同步到我的博客网站&#xff0c;若需更优的阅读体验&#xff0c;请前往https://mainjaylai.github.io/Blog/blog/paper/trajectory-dataset进行浏览 摘要 大多数离线强化学习&#xff08;RL&#xff09;算法通过最大化目标策略的期望性…

品牌出海!独立站不仅是方向,而是成为跨境电商主流了

近些年&#xff0c;随着跨境电商3.0品牌出海和本土化时代的到来&#xff0c;独立站成为品牌出海的必备渠道和关键胜负手&#xff01; 搭建独立站作为品牌本土化的最好展示载体&#xff0c;独立的品牌包装与产品页面&#xff0c;能够更好讲述品牌故事&#xff0c;因而得以快速发…

【计算机网络体系结构】计算机网络体系结构实验-www服务器配置管理实验

一、实验内容 www服务器配置管理&#xff0c; wireshark数据包分析 二、实验目的 1. 了解WWW服务的体系结构与工作原理&#xff0c;掌握利用Microsoft的IIS实现WWW服务的基本配置&#xff0c;掌握WEB站点的管理 2. 利用Wireshark抓取http数据包进行分析。运行软件Wireshark…

怎么把CSV文件数据导入MySQL并自动生成表

MySQL MySQL是一个流行的关系型数据库管理系统(RDBMS),使用结构化查询语言(SQL)进行数据库管理。它是基于客户端/服务器架构的开源软件,由瑞典的MySQL AB公司开发,现在属于甲骨文公司(Oracle Corporation)。MySQL支持多种操作系统,包括各种版本的Unix、Linux和Window…

java基于ssm+jsp 师生交流平台

1 管理员登录 管理员输入个人的账号、密码登录系统&#xff0c;这时候系统的数据库就会在进行查找相关的信息&#xff0c;如果我们输入的账号、密码不正确&#xff0c;数据库就会提示出错误的信息提示&#xff0c;同时会提示管理员重新输入自己的账号、密码&#xff0c;直到账…

焦化超低排平台组成部分

焦化行业作为重工业的重要组成部分&#xff0c;其环保问题一直备受关注。近年来&#xff0c;随着环保意识的提升和技术的不断进步&#xff0c;朗观视觉焦化超低排平台应运而生&#xff0c;成为推动焦化行业绿色发展的重要力量。本文将深入剖析焦化超低排平台的组成部分&#xf…

计算机方向国际学术会议推荐

【JPCS独立出版 | EI核心、Scopus】第四届计算机、遥感与航空航天国际学术会议&#xff08;CRSA 2024&#xff09; 大会官网&#xff1a;www.iccrsa.org 时间地点&#xff1a;2024年7月5-7日&#xff0c;日本-大阪&#xff08;线上召开&#xff09; 征稿主题&#xff1a;计算…

Springboot拦截器使用及其底层源码剖析

博主最近看了一下公司刚刚开发的微服务&#xff0c;准备入手从基本的过滤器以及拦截器开始剖析&#xff0c;以及在帮同学们分析一下上次的jetty过滤器源码与本次Springboot中tomcat中过滤器的区别。正题开始&#xff0c;拦截器顾名思义是进行拦截请求的一系列操作。先给大家示例…

Unity学习笔记---调试

使用Log进行调试 使用Debug.Log方法可以将一些运行时信息打印到Console窗口中。 打印时间戳 //获取时间 Debug.Log(DateTime.Now.ToString());//打印毫秒级的时间 Debug.Log(((DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000) * 0.001); 打印自定义文…

Hive基础教程

文章目录 Apache Hive 教程1. Hive-简介1.1 学习Hive的前置知识1.2 什么是Hive&#xff1f;1.3 Hive的架构1.4 Hive的工作流程 Apache Hive 教程 资料来源&#xff1a;Hive Tutorial (tutorialspoint.com) Hive是Hadoop中用于处理结构化数据的数据仓库基础设施工具。它驻留在H…

Pytorch加载模型

一、使用torchvision加载模型 1.使用说明: torchvision是PyTorch生态系统中的一个包&#xff0c;专门用于计算机视觉任务。它提供了一系列用于加载、处理和预处理图像和视频数据的工具&#xff0c;以及常用的计算机视觉模型。 torchvision.models模块包含许多常用的预训练计…

【IEEE独立出版、有确定的ISBN号】第三届能源与电力系统国际学术会议 (ICEEPS 2024)

第三届能源与电力系统国际学术会议 (ICEEPS 2024) 2024 3rd International Conference on Energy and Electrical Power Systems 连续2届会后4-5个月EI检索&#xff0c;检索稳定&#xff01; 成功申请IEEE出版&#xff01; 特邀院士、Fellow 报告&#xff01; 一、大会信息 …

关于sum+=1与sum=sum+1的关系(C语言)

一、sum 1;与sum sum 1;是相等的&#xff0c;运算结果相等&#xff1b; 二、用一段代码说明&#xff1b; # define _CRT_SECURE_NO_WARNINGS #include <stdio.h>int main() {//初始变量值&#xff1b;int n1 1;int n2 1;//输出&#xff1b;printf("运算前的n…