【前端面试点滴知识 】
关注
分享
扫一扫
文章平均质量分 81
barnett_y
成功道路并不拥挤，因为坚持的人不多。。。
展开
-
前端知识体系+大厂面试总结（基础知识篇）
前端知识点转载 2022-10-09 22:20:21 · 1038 阅读 · 0 评论 -
95% 的算法都是基于这 6 种算法思想
算法思想是解决问题的核心，万丈高楼起于平地，在算法中也是如此，95% 的算法都是基于这 6 种算法思想，结下了介绍一下这 6 种算法思想，帮助你理解及解决各种算法问题。转载 2022-10-08 09:26:03 · 741 阅读 · 0 评论 -
前端图片canvas，file，blob，DataURL等格式转换
最近用到一些图片相关的操作，记录一下笔记。将file转化成base64场景： 获取到一个file类型的图片，如果直接在html中预览？这里就是利用html5的新特性，将图片转换为Base64的形式显示出来。有两种方法：方法一：利用URL.createObjectURL()<!DOCTYPE html><html><head> <title>base</title></head><body>&l.原创 2022-05-09 20:50:12 · 1347 阅读 · 0 评论 -
前端常见问题以及解决方案
一、跨域1、同源策略浏览器同源策略限制请求同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。限制以下行为Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 Js对象无法获得 AJAX 请求不能发送有三个标签是允许跨域加载资源：<img src=XXX> <link href=XXX> <script src=XXX>2、解决方案1）通过jsonp跨域script标原创 2022-05-08 14:33:21 · 4751 阅读 · 0 评论 -
http缓存总结
HTTP的缓存机制 缓存机制无处不在，有客户端缓存（cookie、localstorage等），服务端缓存（session），代理服务器缓存等。在HTTP中具有缓存功能的是浏览器缓存。 HTTP缓存作为web性能优化的重要手段，对于从事web开发的朋友有重要的意义。思维导图如下：1、缓存的分类 缓存分为强制缓存和协商缓存。1、 强制缓存 当本地缓存中含有请求的数据且（及缓存时间还未过期）时，客户端直接从本地缓存中获取数据。当本地缓存没有所请求的数据时，客户端的才会从服务端获取数原创 2022-05-02 10:34:12 · 513 阅读 · 0 评论 -
2022，前端应该阅读这些文章
同学们都知道，前端圈变得越来越卷了，各种技术层出不穷，简直让人应接不暇。可能很多跟我一样，一时间，看到这个也想学，看到那个也想学，最终的结果是什么？那就是：啥都没学！所以笔者花费了几天时间，整理了一下前端必读文章，同时也可以当作是一份知识图谱，用来查漏补缺。本资料适宜人群：希望按部就班的、系统的学习前端知识的（初级->中级->高级）； 希望对自己的知识图谱进行查漏补缺的； 希望当作面试手册进行知识复盘的；本文主要是笔者查阅了很多资料并结合自己的理解，整理而成的，请大家积极..转载 2022-04-29 21:56:33 · 548 阅读 · 1 评论 -
前端跨页面通信
背景用户在实际的操作场景中会打开多个 Tab 页面A、B、C、D、E...。当用户在 E Tab 页退出登录，并且登录到新的账号，然后用户切换到非 E 的 Tab 时，发现登录信息没有刷新， 并且由于登录信息没有刷新，会出现操作异常。这个问题简单来说就是多个 Tab 信息没有同步。问题的关键在于一个 Tab 退出重新登录，需要通知到其他的 Tab 刷新到最新的信息。本质问题就是解决前端跨页面通信。本篇文章就是对前端跨页面通信的解决方案做了一个了解。onstorageWindowEventHa原创 2022-04-15 14:52:16 · 1696 阅读 · 0 评论 -
axios如何取消接口请求
vue项目，如何在axios中取消已经发送的请求呢？原生js的abort()这个方法<div class="page" id="app"> <button class="getData">获取数据</button> <button class="cancel">取消获取</button> </div><script> var currentAjax = null $('..原创 2022-03-27 09:38:10 · 2380 阅读 · 0 评论 -
多个tab页如何共享websocket
假设你正在做一个在线的IM系统，如何在多个tab页之间，共享一个websocket实例呢？当时遇到这个问题，第一感觉是懵逼。我的知识储备告诉我，多个tab页面之间，是不能共享websocket实例的。挠破头皮想到了两个方案 在用户打开多个tab页面时，新的页面中，不建立websocket连接。然后多tab页之间进行消息通讯。这个方案会带来这么几个问题 多tab之间如何通讯 怎么判断打开的是不是第一个需要建立连接的页面 如果关闭了第一个页面，那么之后的消息怎么处理 在两个页.原创 2022-03-24 08:47:00 · 6077 阅读 · 0 评论 -
JavaScript 常考基础
注意：每道题前面出现的 (xx) 数字代表这道题出现的频次，此 JS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答、参考链接等。文章内容为拿到 Offer 的本人整理。（2）问：0.1 + 0.2 === 0.3 嘛？为什么？JavaScript 使用 Number 类型来表示数字（整数或浮点数），遵循 IEEE 754 标准，通过 64 位来表示一个数字（1 + 11 + 52）1 符号位，0 表示正数，1 表示负数 s 11 指数位（e） 52 尾数，小数部分（即有效数字）.原创 2021-12-16 08:24:45 · 552 阅读 · 0 评论 -
JS版剑指offer
介绍用JavaScript刷完了剑指offer，故总结下每道题的难度、解决关键点，详细题解代码可以点链接进去细看。关于JS刷题的技巧可以看我之前的这篇：JS刷题总结。剑指offer的题目在牛客网上可以看：剑指Offer_在线编程+题解_牛客题霸_牛客网所有题目的代码已经上传到了github上：FEInterviewBox/剑指offer at master · 14glwu/FEInterviewBox · GitHub目录题目=》难易程度=》关键词（1）二位数组的查找 .转载 2021-09-18 09:44:37 · 218 阅读 · 0 评论 -
前端异常埋点系统初探
前言开发者有时会面临上线的生产环境包出现了异常???? ，在长期生产bug并修复bug的循环中总结出一下几个痛点：无法快速定位到发生错误的代码位置，因为脚手架构建时会用webapck自动帮我们压缩代码，而上线版本又通常不会保留 source map（开源贡献者除外） 无法第一时间通知开发人员异常发生 不知道用户OS与浏览器版本、请求参数（如页面ID）；而对于页面逻辑是否错误问题，通常除了用户OS与浏览器版本外，需要的是报错的堆栈信息及具体报错位置。错误埋点追踪系统的出现就是为了应对上述问题的解原创 2021-05-24 09:07:41 · 254 阅读 · 0 评论 -
JS实现动画之setTimeout、setInterval和requestAnimationFrame
参考：《JS高级程序设计》，这篇requestAnimationFrame文章JS实现动画主要有三种方式：setTimeout、setInterval 和 requestAnimationFrame。其中最后一种方法比较好。setTimeout、setIntervalsetTimeout、setInterval可以用来创建定时器。定时器对队列的工作方式是，当特定时间过去后将代码插入。定时器指定的时间间隔表示何时将定时器的代码添加到队列，而不是何时实际执行代码！setInterval一转载 2021-03-31 11:12:47 · 982 阅读 · 0 评论 -
前端异常捕获
为什么要捕获异常 异常捕获分类 try...catch 的误区 window.onerror 不是万能的 window.addEventListener Promise Catch iframe 异常 Script error 崩溃和卡顿 VUE errorHandler React 异常捕获 总结作为一个前端开发人员，每次看到浏览器控制台信息里面红通通的报错信息是不是都很紧张......不要怕，下面我们就来讨论一下前端的异常捕获。异常捕获，相对于其他知.转载 2021-03-25 18:08:37 · 467 阅读 · 0 评论 -
JavaScript算法&数据结构
写在前面计算机行业发展，前端亦或是后端，算法都是进阶道路的一个绊脚石，也是垫脚石，算法没有秘籍，唯有坚持，让我们一起坚持从 0 到 1 刷算法吧，每天刷过的算法题目会以 issues 的形式记录并给出题解，方便下次复习，题目会进行分类，前期按照数据结构分类规划系统学习，如果你刚刚加入，可以直接按照我们给出的题目顺序来每天刷一道题，直到养成独立解题思维即可自由不设限刷题相关的每种数据结构刷题前的小知识会陆续以文章+视频的方式补充，我们刷的每一题我也会补充上视频题解视频请看B站isboyjc/黑板.转载 2020-12-29 14:25:48 · 462 阅读 · 0 评论 -
中大厂前端面试总结
前言本次面试面试了很多家公司，包括 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（基本每天都加班到很晚，周六日也没有休息的那种，而且当时心态真的是差到爆，很多平时自己很会的东西，被问到居然答不上来），基本一面就挂的那种（360，美团，猿辅导），越面越失望，后来就直接不面试了，调整自己的状态，请假休息，好好睡了两天两夜之后，调整自己的心态，开始准备面试，接下来的面试就顺利的很多。本篇面试题总结并没有按照公司那样分类而是按照知识点进行简转载 2020-09-10 14:49:10 · 1856 阅读 · 1 评论 -
前端面试题全面整理-带解析
本篇文章整理总结这些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上：css相关1. 万能居中1.margin: 0 auto;水平2.text-align: center;水平3.行高，垂直4.表格，center,middle；水平垂直5.display:table-cell；模拟表格，all6.绝对定位，50%减自身宽高7.绝对定位，上下左右全0，margin:auto8.绝对定位加相.转载 2020-07-14 08:38:38 · 3607 阅读 · 0 评论 -
你不知道的React 和 Vue 的20个区别
前言面试竞争力越来越大，是时候撸一波Vue和React源码啦；本文将前2个月面试总结成从20个层面来对比Vue和React的源码区别；文章有点长，可以收藏，慢点品尝； 如果需要了解API的区别，请戳：Vue 开发必须知道的 36 个技巧React 开发必须知道的 34 个技巧文章源码：请戳，原创码字不易，欢迎star！1.Vue和React源码区别1.1 Vue源码来张Vue源码编译过程图图片来源：分析Vue源码实现1.1.1 挂载初始化$mounted会..转载 2020-07-07 19:29:30 · 732 阅读 · 1 评论 -
面试题——数组转树结构
目录一个根节点 初级 - 只能是两层树 升级 - 随便几层 多个根节点 初级 - 只能是两层树 升级 - 随便几层 树结构大家应该都比较熟悉，这里我主要说两种：一个根节点和多个根节点。一个根节点，就像我们的html节点，不可能有和它同级的；多个根节点，比如我们的一二级导航栏。下面一个个分析：回到顶部一个根节点初级 - 只能是两层树复制let arr = [ { menuId: 1, name: '系统1', pa...转载 2020-06-15 09:37:35 · 421 阅读 · 0 评论 -
Javascript算法和数据结构
什么是算法和数据结构 数据结构：计算机中存储和组织数据的方式 算法：解决办法的逻辑/操作 数组JS数组就是API的调用栈栈是受限的线性结构：（生活中类似于自助餐的托盘）只能在一端添加/删除元素（栈顶） 进入：进栈（压栈） 出去：出栈（退 栈） 函数调用栈 A调用B，B调C，C调D D,C,B,A的弹栈顺序 一个栈结构面试题 有6...转载 2020-02-11 09:37:53 · 877 阅读 · 1 评论 -
教你发布你npm包
前言npm(Node Package Manager)，一个Node的包管理器，平时我们常用的公共模块（插件）或者叫做包大多都放在上面，所以接下来要封装的插件，我们就简单称它为npm包，本文从就从这个简单的例子开始，逐步对它进行封装-发布-更新-扩展-使用，进而到得一个相对完整的npm包，下面开始。一、一个最简单的npm包1.1 新建文件夹可以找个地方直接建个文件夹，最好语义化一点...转载 2020-01-05 15:34:52 · 982 阅读 · 0 评论 -
实践这一次,彻底搞懂浏览器缓存机制
前言[实践系列] 主要是让我们通过实践去加深对一些原理的理解。[实践系列]前端路由[实践系列]Babel原理[实践系列]Promises/A+规范有兴趣的同学可以关注 [实践系列] 。 求star求follow~如果觉得自己已经掌握浏览器缓存机制知识的同学,可以直接看实践部分哈~目录 1. DNS 缓存 // 虽说跟标题关系不大,了解一下也不错 2. CDN...转载 2020-01-03 11:30:30 · 473 阅读 · 0 评论 -
Webpack知识点
介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面当修改了一个或多个文件 文件系统接收更改并通知webpack webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新 HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp HMR运行时替换更新中的模块，如果确定这些模块无法更新...转载 2019-12-24 09:52:41 · 367 阅读 · 0 评论 -
常见的跨域解决方案(全)
什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：资源跳转： A链接、重定向、表单提交 资源嵌入： link、script、img、frame等dom标签，还有样式中background:url()、@font-face()等文件外链 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是...转载 2019-12-15 11:41:12 · 391 阅读 · 0 评论 -
webpack的面试题总结
为什么要总结webpack相关的面试题随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。 而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。 然而大多数的使用者都只是单纯的会使用，而并不知道...转载 2019-12-12 10:22:43 · 403 阅读 · 0 评论 -
通过试题理解JavaScript
题目分析 day1函数作用域 day2值类型和引用类型 day3如何将字符串转成驼峰命名 day4中的冒泡排序 day5数组的反转 day6数组去重 day71px物理像素的实现 day8多种方式让元素水平垂直居中 day9利用css实现三角形 day10如何做rem适配 day11js综合题 day12函数节流和防抖 da...转载 2019-12-10 19:34:09 · 389 阅读 · 0 评论 -
webpack原理
webpack原理查看所有文档页面：前端开发文档，获取更多信息。原文链接：webpack原理，原文广告模态框遮挡，阅读体验不好，所以整理成本文，方便查找。工作原理概括基本概念在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 Webpac...转载 2019-11-24 22:01:32 · 245 阅读 · 0 评论 -
前端面试题 回顾与复习（更新中）
还没有完全整理好 希望大家见谅 后面逐步优化原生DOM操作如需替换 HTML DOM 中的元素，请使用replaceChild(newnode,oldnode)方法 从父元素中删除子元素 parent.removeChild(child); insertBefore(newItem,existingItem) 在指定的已有子节点之前插入新的子节点 appendChild(new...转载 2019-11-24 11:09:58 · 453 阅读 · 0 评论 -
React高级面试题
Q1：什么是虚拟DOM？难度：⭐虚拟DOM（VDOM）它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。虚拟DOM更多是一种模式，不是一种特定的技术。????资料来源：github.com/sudheerj????参考资料：什么是虚拟DOMQ2：类组件和函数组件之间有什么区别...转载 2019-11-14 10:18:32 · 5247 阅读 · 0 评论 -
前端面试总结
本文记录了值得研究的四大互联网大厂的面试题目，带你全面了解——【最近，前端面试都问些什么】百度1、请分析以下代码执行结果['1', '3', '10'].map(parseInt);2、请分析以下代码执行结果var number = 10;function fn() { console.log(this.number);}var obj = { num...转载 2019-11-10 14:14:50 · 505 阅读 · 0 评论 -
各种源码实现，你想要的这里都有
阅读源码的好处，不用说都知道，首先进大厂必备，还可以提升自己的能力，学习前人的经验。源码往往是前人留下的最佳实践，我们跟着前人的脚步去学习会让我们事半功倍。call、apply、bind 实现 new 实现 class 实现继承 async/await 实现 reduce 实现 实现一个双向数据绑定 instanceof 实现 Array.isArray 实现 Object...转载 2019-11-10 10:03:01 · 485 阅读 · 0 评论 -
聊聊编码那些事，顺带实现base64
目录 进制间的转换 对任意进制的数进行任意进制转换 将任意进制数转换为十进制数 几道关于parseInt的面试题 编码发展历史 base64编码 为什么需要base64 如何实现base64 读取buffer转为json对象 将10进制转为2进制 将2进制拼一起3*8然后分隔成4*6 然后将2进制转成10进制 base64码 取到...转载 2019-10-22 11:38:38 · 367 阅读 · 0 评论 -
前端面试-实现一个简版koa
目录koa的使用 简单阅读下koa源码 ctx挂载了什么东西 next构建的洋葱模型 中间件含异步代码如何保证正确执行 解决多次调用next导致混乱问题 基于事件驱动去处理异常koa的使用koa的使用非常简单，引入依赖后编写const Koa = require('koa')let app = new Koa()app.use((ctx, next) =...转载 2019-10-22 11:33:13 · 419 阅读 · 0 评论 -
前端面试
写在开头年前经历了许多大厂的面试,根据类别整理回顾一些知识点。一、react+redux部分1、react Fiber的作用2、react是同步还是异步？react是异步的，有两种方式可以处理异步：this.setState({ count:this.state.count+1},function(){ this.setState({count:this...转载 2019-10-20 17:51:03 · 419 阅读 · 0 评论 -
MVC、MVP 和 MVVM 对比笔记
MVC、MVP 和 MVVM三个非常重要的架构模式MVC (Model(模型)-View(视图)-Controller(控制器)) MVP (Model(模型)-View(视图)-Presenter(中介者)) MVVM (Model(模型)-View(视图)-ViewModel(视图模型))MVC 模式MVC 是一个架构设计模式，它通过分离关注点的方式来支持改进应用组织方式。它...转载 2019-09-20 11:33:48 · 209 阅读 · 0 评论 -
前端知识点
1.TCP有哪些手段保证可靠交付TCP提供一种面向连接的、可靠的字节流服务。 面向连接：意味着两个使用TCP的应用（通常是一个客户和一个服务器）在彼此交换数据之前必须先建立一个TCP连接。在一个TCP连接中，仅有两方进行彼此通信。广播和多播不能用于TCP。TCP通过下列方式来提供可靠性：应用数据被分割成TCP认为最适合发送的数据块(将数据截断为合理的长度) 发送一个报文段(TCP传递给...原创 2019-09-19 09:35:12 · 468 阅读 · 0 评论 -
金九银十~JS精选回顾宝典
前言在这个金九银十的日子中，为大家奉上JS精选复习宝典一份，望各位看官笑纳！普通函数和箭头函数的 thisfunction fn() { console.log(this); // 1. {a: 100} var arr = [1, 2, 3]; (function() { console.log(this); // 2. Window })(); /...转载 2019-09-12 09:22:25 · 387 阅读 · 0 评论 -
一个合格(优秀)的前端都应该阅读这些文章
前言原文地址：Nealyang/PersonalBlog的确，有些标题党了。起因是微信群里，有哥们问我，你是怎么学习前端的呢？能不能共享一下学习方法。一句话也挺触动我的，我真的不算是什么大佬，对于学习前端知识，我也不能说是掌握了什么捷径。当然，我个人的学习方法这篇文章已经在写了，预计这周末会在我个人公众号发布。而在此之前，我想展(gong)示(xiang)一下，我平时浏览各个技术网站，...转载 2019-08-16 10:00:19 · 428 阅读 · 0 评论 -
这些年掘金上的优质前端文章，篇篇经典，一次打包带走！
前言：近日发现掘金上有所有的热门文章的排行榜，但是仅仅只是排行，不利于收藏查阅。于是乎我就把热门文章全部爬下来了（站长看到别打我啊转载 2019-08-16 09:59:46 · 7611 阅读 · 1 评论 -
如何优雅处理前端异常？
前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。1.增强用户体验；2.远程定位问题；3.未雨绸缪，及早发现问题；4.无法复线问题，尤其是移动端，机型，系统都是问题；5.完善的前端方案，前端监控系统；对于JS而言，我们面...转载 2019-07-29 19:54:55 · 267 阅读 · 0 评论