2022前端面试题
中高级前端面试题总结第一期
写在前面 首先说明 不是水文，我只是希望通过面试题的形式给你们看一些看似比较牛逼的概念，其实很简单的东西，我最近在写vue3的项目，所以等我写好之后我再更新vue3的教程，虽然早就想更新了，但是一直不是没有一个拿得出收的v3项目嘛，我也很着急的嘛，写完之后我就更新v3+vite+antdv的文章。 Vue中的组件和插件有什么区别定义不同： vue中组件是指.vue结尾的文件，一个合格的组件具备相
日期 2023-06-12 10:48:40
作为一个菜鸟前端开发，面了20+公司之后整理的面试题
应该在 React 组件的何处发起 Ajax 请求在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDi
日期 2023-06-12 10:48:40百度前端一面常见手写面试题（持续更新中）
Promise实现基于Promise封装Ajax返回一个新的Promise实例创建HMLHttpRequest异步对象调用open方法，打开url，与服务器建立链接（发送前的一些处理）监听Ajax状态信息如果xhr.readyState == 4（表示服务器响应完成，可以获取使用服务器的响应了）xhr.status == 200，返回resolve状态xhr.status == 404，返回rej
日期 2023-06-12 10:48:40
前端高频面试题及答案整理（一）
diff算法是怎么运作每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点把树形结构按照层级分
日期 2023-06-12 10:48:40前端js面试题（基础）「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。1、js中使用typeof能得到哪些类型？——undefined、string、number、boolean、object、function2、===和==分别在何时使用？//==的使用情况为以下2种（其他情况下推荐使用===） if(obj.a == null){ //相当于obj.a === null || obj.a === undefined }
日期 2023-06-12 10:48:40前端面试题ajax_前端性能优化面试题
大家好，又见面了，我是你们的朋友全栈君。AJAX1，Ajax 是什么? 如何创建一个Ajax？ ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。 所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验
日期 2023-06-12 10:48:40![2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）[通俗易懂]](/scriptcss/images/62.png)
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）[通俗易懂]
大家好，又见面了，我是你们的朋友全栈君。目录css经典高频面试题前端核心手写面试题看你的核心扎实不扎实js部分面试题js的数据类型（关于数据类型相关的）基本数据类型 ES5的5种：Null，undefined，Boolean，Number，String， ES6新增：Symbol表示独一无二的值 ES10新增：BigInt 表示任意大的整数 一种引用数据类型：（本质上是由一组无序的键值对组成）
日期 2023-06-12 10:48:40
前端高频面试题（附答案）
说一下HTTP 3.0HTTP/3基于UDP协议实现了类似于TCP的多路复用数据流、传输可靠性等功能，这套功能被称为QUIC协议。 流量控制、传输可靠性功能：QUIC在UDP的基础上增加了一层来保证数据传输可靠性，它提供了数据包重传、拥塞控制、以及其他一些TCP中的特性。集成TLS加密功能：目前QUIC使用TLS1.3，减少了握手所花费的RTT数。多路复用：同一物理连接上可以有多个独立的逻辑数据流
日期 2023-06-12 10:48:40前端高频面试题(一)（附答案）
代码输出结果(function(){ var x = y = 1; })(); var z; console.log(y); // 1 console.log(z); // undefined console.log(x); // Uncaught ReferenceError: x is not defined 复制代码复制这段代码的关键在于：var x = y = 1; 实际上这里是从
日期 2023-06-12 10:48:40社招前端高频面试题
在地址栏里输入一个地址回车会发生哪些事情1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。 2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓
日期 2023-06-12 10:48:40社招前端必会面试题
OSI七层模型ISO为了更好的使网络应用更为普及，推出了OSI参考模型。 （1）应用层OSI参考模型中最靠近用户的一层，是为计算机用户提供应用接口，也为用户直接提供各种网络服务。我们常见应用层的网络服务协议有：HTTP，HTTPS，FTP，POP3、SMTP等。在客户端与服务器中经常会有数据的请求，这个时候就是会用到http(hyper text transfer protocol)(超文本传输协
日期 2023-06-12 10:48:40滴滴前端二面必会面试题
进程之前的通信方式（1）管道通信管道是一种最基本的进程间通信机制。管道就是操作系统在内核中开辟的一段缓冲区，进程1可以将需要交互的数据拷贝到这段缓冲区，进程2就可以读取了。管道的特点：只能单向通信只能血缘关系的进程进行通信依赖于文件系统生命周期随进程面向字节流的服务管道内部提供了同步机制（2）消息队列通信消息队列就是一个消息的列表。用户可以在消息队列中添加消息、读取消息等。消息队列提供了一种从一个
日期 2023-06-12 10:48:40阿里前端一面必会面试题合集
什么是 DOM 和 BOM？DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页
日期 2023-06-12 10:48:40高级前端二面高频面试题合集
说一下原型链和原型链的继承吧所有普通的 [Prototype] 链最终都会指向内置的 Object.prototype，其包含了 JavaScript 中许多通用的功能为什么能创建 “类”，借助一种特殊的属性：所有的函数默认都会拥有一个名为 prototype 的共有且不可枚举的属性，它会指向另外一个对象，这个对象通常被称为函数的原型function Person(name) { this.n
日期 2023-06-12 10:48:40京东前端一面面试题
对JSON的理解JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。在项目开发中，使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的，因此很容易
日期 2023-06-12 10:48:40阿里前端高频面试题
说一下HTTP 3.0HTTP/3基于UDP协议实现了类似于TCP的多路复用数据流、传输可靠性等功能，这套功能被称为QUIC协议。 流量控制、传输可靠性功能：QUIC在UDP的基础上增加了一层来保证数据传输可靠性，它提供了数据包重传、拥塞控制、以及其他一些TCP中的特性。集成TLS加密功能：目前QUIC使用TLS1.3，减少了握手所花费的RTT数。多路复用：同一物理连接上可以有多个独立的逻辑数据流
日期 2023-06-12 10:48:40百度前端一面常见面试题（附答案）
IE 兼容attchEvent('on' + type, handler)detachEvent('on' + type, handler)事件触发的过程是怎样的事件触发有三个阶段：window 往事件触发处传播，遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播，遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺
日期 2023-06-12 10:48:40腾讯前端必会面试题合集
什么是闭包闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。对 CSSSprites 的理解CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-
日期 2023-06-12 10:48:40校招前端二面面试题合集
iframe 有那些优点和缺点？iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。优点：用来加载速度较慢的内容（如广告）可以使脚本可以并行下载可以实现跨子域通信缺点：iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎索识别会产生很多页面，不容易管理compose题目描述:实现一个 compose 函数// 用法如下: function fn1(x) { retu
日期 2023-06-12 10:48:40阿里前端一面面试题（附答案）
对line-height 的理解及其赋值方式（1）line-height的概念：line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；把 line-height 值设置为 h
日期 2023-06-12 10:48:40校招前端二面高频面试题合集
DOCTYPE(⽂档类型) 的作⽤DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文
日期 2023-06-12 10:48:40美团前端二面高频面试题合集
手写 bind、apply、call// call Function.prototype.call = function (context, ...args) { context = context || window; const fnSymbol = Symbol("fn"); context[fnSymbol] = this; context[fnS
日期 2023-06-12 10:48:40社招前端必会面试题
label 的作用是什么？如何使用？label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。使用方法1：<label for="mobile">Number:</label> <input type="text" id="mobile"/>
日期 2023-06-12 10:48:40阿里前端高频面试题合集
代码输出结果setTimeout(function () { console.log(1); }, 100); new Promise(function (resolve) { console.log(2); resolve(); console.log(3); }).then(function () { console.log(4); new Promise((reso
日期 2023-06-12 10:48:40百度前端二面高频面试题合集
冒泡排序--时间复杂度 n^2题目描述:实现一个冒泡排序实现代码如下:function bubbleSort(arr) { // 缓存数组长度 const len = arr.length; // 外层循环用于控制从头到尾的比较+交换到底有多少轮 for (let i = 0; i < len; i++) { // 内层循环用于完成每一轮遍历过程中的重复比较+交换
日期 2023-06-12 10:48:40京东前端高频面试题合集
说一下类组件和函数组件的区别?1. 语法上的区别： 函数式组件是一个纯函数，它是需要接受props参数并且返回一个React元素就可以了。类组件是需要继承React.Component的，而且class组件需要创建render并且返回React元素，语法上来讲更复杂。 2. 调用方式 函数式组件可以直接调用，返回一个新的React元素；类组件在调用时是需要创建一个实例的，然后通过调用实例里的
日期 2023-06-12 10:48:40滴滴前端高频面试题
AJAXconst getJSON = function(url) { return new Promise((resolve, reject) => { const xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
日期 2023-06-12 10:48:40阿里前端常见面试题（附答案）
事件委托的使用场景场景：给页面的所有的a标签添加click事件，代码如下：document.addEventListener("click", function(e) { if (e.target.nodeName == "A") console.log("a"); }, false);复制但是这些a标签可能包含一
日期 2023-06-12 10:48:40滴滴前端一面必会面试题汇总
实现 LazyMan题目描述:实现一个LazyMan，可以按照以下方式调用: LazyMan(“Hank”)输出: Hi! This is Hank! LazyMan(“Hank”).sleep(10).eat(“dinner”)输出 Hi! This is Hank! //等待10秒.. Wake up after 10 Eat dinner~ LazyMan(“Hank”).eat(“di
日期 2023-06-12 10:48:40美团前端react面试题汇总
对React SSR的理解服务端渲染是数据与模版组成的html，即 HTML = 数据 ＋ 模版。将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。页面没使用服务渲染，当请求页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来;SSR的优势：对SEO友好所有的模版、图片等资源都存
日期 2023-06-12 10:48:40美团前端二面常考react面试题（附答案）
使用状态要注意哪些事情？要注意以下几点。不要直接更新状态状态更新可能是异步的状态更新要合并。数据从上向下流动可以使用TypeScript写React应用吗？怎么操作？（1）如果还未创建 Create React App 项目直接创建一个具有 typescript 的 Create React App 项目： npx create-react-app demo --typescript复制（2）如果
日期 2023-06-12 10:48:40