2016前端面试题
前端高频面试题及答案整理（一）
diff算法是怎么运作每一种节点类型有自己的属性，也就是prop，每次进行diff的时候，react会先比较该节点类型，假如节点类型不一样，那么react会直接删除该节点，然后直接创建新的节点插入到其中，假如节点类型一样，那么会比较prop是否有更新，假如有prop不一样，那么react会判定该节点有更新，那么重渲染该节点，然后在对其子节点进行比较，一层一层往下，直到没有子节点把树形结构按照层级分
日期 2023-06-12 10:48:40
前端面试题：闭包_前端设计模式面试题
大家好，又见面了，我是你们的朋友全栈君。前段时间一直在投一些中小型公司吧，感觉好久都收不到反馈，也不知道是被淘汰了还是没出结果呢，最近开始投一些大一点的公司准备尝试一下，就在昨天接到面试电话的时候，接受到了滴滴的毒打。跟一些面试不一样的是不只是一些基础的基本概念吧，比如说什么是原型和原型链，说一下继承，讲一下this指向之类的。更多的是为什么要这样用，手写算法，预测输出结果之类的面试题。印象最深刻
日期 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前端面试题：vue响应式原理 Vdom diff
大家好，又见面了，我是你们的朋友全栈君。 vue的响应式原理，也算是面试中再常见不过的题目了，之前遇见这道题目只会说：利用的是Object.defineProperty进行的数据劫持，监听数据的变化，通知watcher进行的数据更新。总的来说这是没错的，但是只要面试官进一步的问，那一定是满脸的问号。昨天一天也是没有面试机会，所以就研究了一天这个东西，算是搞明白了（自我感觉），今天就把他来写成文章，
日期 2023-06-12 10:48:40350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面…「建议收藏」
大家好，又见面了，我是你们的朋友全栈君。 前言考虑到关注的小伙伴们也会有在校生或应届生，要参加校招的同学，一直挺想总结一些关于校招面试题，赶在春招结束前终于写完了，除了写到前端方面的面试题外，项目、职业发展、H面等高频问题也会有，写的很详细，全方面做好准备，为同学们的校招保驾护航！目录1.HTML 2.CSS 3.前端基础 4.前端核心 5.前端进阶 6.移动端开发 7.计算机基础
日期 2023-06-12 10:48:40
京东前端一面高频面试题（附答案）
左右居中方案行内元素: text-align: center定宽块状元素: 左右 margin 值为 auto不定宽块状元素: table布局，position + transform/* 方案1 */ .wrap { text-align: center } .center { display: inline; /* or */ /* display: inline-block;
日期 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京东前端一面面试题
对JSON的理解JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。在项目开发中，使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的，因此很容易
日期 2023-06-12 10:48:40阿里前端常见面试题（附答案）
对HTML语义化的理解语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。语义化的优点如下：对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护
日期 2023-06-12 10:48:40百度前端一面常见面试题（附答案）
IE 兼容attchEvent('on' + type, handler)detachEvent('on' + type, handler)事件触发的过程是怎样的事件触发有三个阶段：window 往事件触发处传播，遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播，遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺
日期 2023-06-12 10:48:40
美团前端二面必会面试题（附答案）
为什么 0.1 + 0.2 != 0.3，请详述理由因为 JS 采用 IEEE 754 双精度版本（64位），并且只要采用 IEEE 754 的语言都有该问题。我们都知道计算机表示十进制是采用二进制表示的，所以 0.1 在二进制表示为// (0011) 表示循环 0.1 = 2^-4 * 1.10011(0011)复制那么如何得到这个二进制的呢，我们可以来演算下小数算二进制和整数不同。乘法计算时，
日期 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社招前端必会面试题
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京东前端高频面试题汇总
原型修改、重写function Person(name) { this.name = name } // 修改原型 Person.prototype.getName = function() {} var p = new Person('hello') console.log(p.__proto__ === Person.prototype) // true conso
日期 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面试题（附答案）
Hooks可以取代 render props 和高阶组件吗？通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。这两种模式仍然有一席之地(例如，一个虚拟的 scroller 组件可能有一个 renderItem prop，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的
日期 2023-06-12 10:48:40滴滴前端高频react面试题总结
当调用 setState的时候，发生了什么操作？**当调用 setState时， React做的第一件事是将传递给setState的对象合并到组件的当前状态，这将启动一个称为和解（ reconciliation）的过程。和解的最终目标是，根据这个新的状态以最有效的方式更新DOM。为此， React将构建一个新的 React虚拟DOM树（可以将其视为页面DOM元素的对象表示方式）。一旦有了这个DOM
日期 2023-06-12 10:48:40京东前端二面高频react面试题
ref是一个函数又有什么好处？方便react销毁组件、重新渲染的时候去清空refs的东西，防止内存泄露解释 React 中 render() 的目的。每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<
日期 2023-06-12 10:48:402022前端二面react面试题
可以使用TypeScript写React应用吗？怎么操作？（1）如果还未创建 Create React App 项目直接创建一个具有 typescript 的 Create React App 项目： npx create-react-app demo --typescript复制（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中通过命令将
日期 2023-06-12 10:48:40前端高频面试题汇总（一）
箭头函数的this指向哪⾥？箭头函数不同于传统JavaScript中的函数，箭头函数并没有属于⾃⼰的this，它所谓的this是捕获其所在上下⽂的 this 值，作为⾃⼰的 this 值，并且由于没有属于⾃⼰的this，所以是不会被new调⽤的，这个所谓的this也不会被改变。可以⽤Babel理解⼀下箭头函数:// ES6 const obj = { getArrow() { r
日期 2023-06-12 10:48:40前端二面必会面试题（附答案）
typeof NaN 的结果是什么？NaN 指“不是一个数字”（not a number），NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。typeof NaN; // "number"复制NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive
日期 2023-06-12 10:48:40有哪些前端面试题是必须要掌握的
symbol 有什么用处可以用来表示一个独一无二的变量防止命名冲突。但是面试官问还有吗？我没想出其他的用处就直接答我不知道了，还可以利用 symbol 不会被常规的方法（除了 Object.getOwnPropertySymbols 外）遍历到，所以可以用来模拟私有变量。主要用来提供遍历接口，布置了 symbol.iterator 的对象才可以使用 for···of 循环，可以统一处理数据结构。调
日期 2023-06-12 10:48:402022前端经典vue面试题（持续更新中）
如果让你从零开始写一个vue路由，说说你的思路思路分析：首先思考vue路由要解决的问题：用户点击跳转链接内容切换，页面不刷新。借助hash或者history api实现url跳转页面不刷新同时监听hashchange事件或者popstate事件处理跳转根据hash值或者state值从routes表中匹配对应component并渲染回答范例：一个SPA应用的路由需要解决的问题是 页面跳转内容改变同时
日期 2023-06-12 10:48:40前端必会vue面试题
Vue中如何进行依赖收集？每个属性都有自己的dep属性，存放他所依赖的watcher，当属性变化之后会通知自己对应的watcher去更新默认会在初始化时调用render函数，此时会触发属性依赖收集 dep.depend当属性发生修改时会触发watcher更新dep.notify()依赖收集简版let obj = { name: 'poetry', age: 20 }; cla
日期 2023-06-12 10:48:40来自大厂 10+ 前端面试题附答案(整理版)
HTTP状态码1xx 信息性状态码 websocket upgrade2xx 成功状态码200 服务器已成功处理了请求204(没有响应体)206(范围请求 暂停继续下载)3xx 重定向状态码301(永久) ：请求的页面已永久跳转到新的url302(临时) ：允许各种各样的重定向，一般情况下都会实现为到 GET 的重定向，但是不能确保 POST 会重定向为 POST303 只允许任意请求到 GET
日期 2023-06-12 10:48:40