超逸の博客

引言在上一篇 某跳动面试官：说说微信扫码登录背后的实现原理？ 文章发出之后，没想到有挺多点赞的，掘金社区前端小伙伴真是多啊，以后还是多多在掘金社区活跃起来吧，简单说一下我会整理的专栏系列： 之前，一直在 CSDN 平台发布博客，超逸の学习技术博客，发现前端活跃度不是很高，而在掘金社区我看到一系列优秀的文章，点赞数达到上千，访问量好几十万的也有，并且文章质量是真的高，能学习很多知识。 在这里，我会对一个问题进行研究，带着好奇心去看待问题，尽量用简洁易懂的话语呈现给大家，能把别人教会，对于自己而言也是蛮有成就感和收获的。 在此，分享一下上学期IT项目管理老师教课提到的人们能够记住的东西有如下规律： 听到的内容的 5% 读过的内容的10% 见过的内容的 30% 讨论过的内容的 50% 亲自做的内容的 75% 教给别人所做过的事情的 90% 如若有帮助到您，请一键三连，当然，本文表述有问题的地方，欢迎读者指正，也是一个学习的过程，谢谢~ 回归正文赶紧回到正题，这个问题也是和上一篇博客一样，也是在今年8月份的时候被问到过，当时知道class这个东西，在社区里面看过一些class继承相关知 ...

引言这个问题我是在今年8月份的时候被问到过，当时一脸懵，当面试官一提出这个问题，我当场回答这个没接触过，可能不知道。面试官笑了笑：这是一个设计题，如果你原本就会的话，我就不会要你来设计了。 我：（苦笑…）凭借三寸不烂之舌和面试官讨论了起来，说完之后信心满满，但结果反手就收到了一份正式地感谢信。 当时，面试官问你还有什么想要问我的吗？ 我请教了这个问题，面试官回答说，你其实也猜到了一点，但是我想要的那个逻辑你没理清楚，然后吧啦吧啦引导了一下，告知可以待会学习一下，这个也挺多人讨论的。 直到今天，又收到了一份“新”的感谢信后，我突然回想到了这个问题，想了想，这个问题不能一直丢着不管，我不去学习，当然不会自然就明白其中原理，下面我们一起来探讨一下吧。 如若有帮助到您，请一键三连，当然，本文表述有问题的地方，欢迎读者指正，也是一个学习的过程，谢谢~ 基本技术原理扫码登录功能到底是什么样的？现在大部分手机上都装有微信、qq和淘宝这一类的软件。而这些app都有他们相对应的网页端。为了让用户在使用他们的网页时登录更加方便和安全，使用手机扫一扫就可以登录的服务，就显得自然而然了。 扫码登录时的界 ...

前言前端模块化是一个有年代的知识，每次笔试面试遇到答的不是很好，现在整理一下相关知识，进行知识梳理，如若有帮助到您，请一键三连，当然，本文表述有问题的地方，欢迎读者指正，谢谢~ CommonJSCommonJS 出现就是解决原本 js 文件引入出现的不足点，即 模块依赖 和 全局污染 问题。它并不是一个 JS语言啥的，而是对于模块化的一个规范。 CommonJS 实际上就是用了 require 这个玩意，只要引用，就会创建一个模块的实例，即实例化（每当引入一个文件，就会将这个文件变为一个 JS 实例） 做法是通过 require 引入模块，通过 module.exports 导出，并且文件加载是同步完成的。 对服务端比较友好，内含缓存机制，也就是说只要 require 一个模块，那么这个模块就会被缓存，并且还会进行一次比较异同的操作，例如我修改了这个模块，那么就会将缓存的模块替换新的模块。 在 node 上运行，不依赖于客户端。 而当我们引入一个模块后，其实会解析成一个立即执行函数，类似于原本 ES5 利用自执行函数封装一样，类似下面，因此，引入的模块并不是全局变量。 ...

认识浏览器组成部分可能一说组成部分，小伙伴们就直接懵了，开门见山地说，别怕，还有更懵的在后面呢！ 组成分为两大部分： shell 和 内核（其中内核是核心部分，它代表着浏览器所使用的技术手段，而shell就是我们用户所看到的界面） 例举你知道的比较大的浏览器产商？ shell 内核 Google Chrome webkit（谷歌和苹果safari一起开发）/ blink（谷歌将技术独立出来） safari webkit firefox gecko IE trident opera（目前属于360和昆仑万维） presto ===== 手动分界线 ===== 360 QQ 遨游 猎豹 全球 搜狗 … 分界线的意义：分界面下面部分只是在 shell 上做了手段，没有专属的内核。我们回答的话答分界线上部分即可。 内核包含渲染（rendering）引擎 和 JS 引擎 渲染引擎如字面意思，就是渲染我们页面的，大致了解即可，本文在这里讲解一下 JS 引擎。 JS 引擎早期是不存在的，通过同步渲染引擎来负责JS的解析。而渲染引擎性能是有限的，所以JS解析代码能 ...

字节跳动-飞书面经介绍9月20日晚7点进行了笔试，有3道单选题，2道多选题，然后3道编程题，3道编程题全A了，自然收到了面试邀请，约了9月29日下午5点一面。 一面面经1、自我介绍（提及了自己恒生实习经历和写博客习惯）2、说一下你的个人经历（详细讲了实习这一块做了什么）3、实习中表格渲染具体怎么做的，说一说4、Vuex实现原理 这里答的不是很好，面试官跳过了。 5、Vue组件通信有哪些？说一说 只答了父子组件，兄弟组件，自定义事件，还有一些忘记了。 6、实习项目登录你是怎么做的？token怎么存，如果要让登录状态在新的tab页面保持，你怎么做？ cookie 7、如果避免用户通过JS脚本获取cookie 8、普通函数和箭头函数的区别 答的不是很好，面试官跳过了 9、箭头函数可以作为构造函数吗 回答了不可以，但是可能答的不是特别好 10、说一下你对原型和原型链的理解？ 11、说说你对TCP的理解，说说三次握手 12、考察Event Loop（事件循环）机制，写出输出结果： console.log('begin')setTimeout(() => { ...

前言本文源码收录于 DOM-Diff 仓库，文章内容按照一位老师视频学习而来（详情见文本末尾哈），每一个字都是自己手动敲出来的，算是给自己的一个梳理和总结，下面，我们一起来学习一下 dom diff 吧。 DOM Diffdom diff 其实就是对比两个虚拟节点，然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异，然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗性能。 而对于虚拟节点呢，我们可以简单理解为普通对象。就是将真实节点用对象的方式模拟出来，通过比较两个新老虚拟节点，得到彼此的差异，形成一个补丁，最后再与真实的 dom 进行匹配，将这些补丁打到真实 dom 上去，最终，我们还是操作了原来的真实 dom，但是我们是用了差异化结果的 最小的代价 来操作的。 平级对比上文我们讲解了虚拟节点可以简单理解为普通对象，那么我们来用图示来看一看，得到其中的一个特点：左边就是旧的虚拟节点，而右边是新的虚拟节点。我们来看看有什么变化： 第一层， ul 底下的 class 由 list 变为了 wrap 第二层，第三个孩子 li 变 ...

网易互娱-CC直播事业群面经介绍9月11日晚7点进行了笔试，当时感觉难度有点大，共4道题，仅A了一道题，最后一题0%，另外两道过了一点样例。好在还是收到了面试邀请，9月23日下午5点开始了网易互娱一面。 一面9月23日（周三）下午5点 时间大约26分钟左右 面经1、自我介绍（提及了自己恒生实习经历和写博客习惯）2、几乎全是聊实习经历，可能参考价值不大，但是分享一下相关项目经验的问题3、你在实习角色是什么？有遇到什么问题吗？怎么解决的？4、你说了跨域，那你知道复杂请求怎么处理的吗？ 参考：处理简单请求和复杂请求之完美跨域CORS 参考MDN：跨源资源共享（CORS） 5、刚刚你说了预校验，那么怎么可以取消它呢？6、你说了深拷贝，你是怎么做的？可以自己手动实现一个吗？对数组怎么做？JSON.parse(...)这种方式有什么不好的地方，说一说？ /* JSON.parse(JSON.stringify()) 可以拷贝数据吗？ */let obj = { arr: [1,2,3], name: 'Chocolate', age: 21}let res = JSON. ...

JS 错误信息类型语法错误1、SyntaxError 语法错误 // 变量名不规范var 1 = 1; SyntaxError: Unexpected number 意外的数字 var 1ab = 1; SyntaxError: Invalid or unexpected token 其中token指代标记的意思。 // 关键字不可赋值new = 5; SyntaxError: Unexpected token '=' // 基本语法错误var a = 5: SyntaxError: Unexpected token ':' 引用错误2、ReferenceError 引用错误、 // 变量或函数未被声明test(); ReferenceError: test is not defined console.log(a); ReferenceError: a is not defined // 给无法被赋值的对象赋值的时候var a = 1 = 2; SyntaxError: Invalid left-hand side in assignme ...

三元运算基础开门见山，三元运算，我想对于很多编程语言都有提到，下面就简单一个例子来讲解一下好了。 var str = 89 > 9? ('89' > '9'? '通过了': '内层未通过') : '外层未通过';console.log(str); 查看答案 答案是 内层未通过，注意 '89' > '9'的比较，由于都是字符串，会从第一位以 ASCII码来进行比较。由于89第一位为8，于是小于 9，返回 false，走后面那个，最后打印了 内层未通过。 浅拷贝var person1 = { name: 'Chocolate', age: 21, child: { car: ['Benz', 'Mazda'], first: { name: 'cc', age: 10 }, second: { name: 'dd', age: 11 } }}var person2 = clo ...

对象基础对象前置知识 /* 对象基础知识 */var teacher = { name: '张三', age: 32, sex: 'male', height: 176, weight: 130, teach: function(){ console.log('I am teaching JS'); }, smoke: function(){ console.log('I am smoking'); }, eat: function(){ console.log('I am having a dinner'); }}/* 查找 */console.log(teacher.name);teacher.teach();teacher.smoke();teacher.eat();/* 增加 */teacher.address = '北京'teacher.drink = function(){ console.log('I am drinking beer');& ...