- 博客(141)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 2021年终总结
一个平凡的人的2021年终总结。仍然从身体健康财务理财人际社群家庭生活工作事业学习成长体验突破休闲放松这八方面总结吧。身体健康今年3.4月份真的有认真的锻炼一段时间，结果因为某些原因中断了，就再没接上。身体真的越来越不好，明年的目标锻炼身体排第二财务理财去年末开始基金理财，结果这一年。。。哈哈哈玩了个寂寞哦人际社群分别于淮南和西安参加了两场婚礼。分别于济南见了xx，于上海见了jm和lin，于上海见了bz，于北京见了bz。上海小分队常聚，平均2-3月一次。同事们饭圈
2021-12-31 17:26:48
760
2
原创 闲聊~~你们想看什么书
最近几天微博的阅读量好高啊, 嘻嘻.正好最近把 浏览器工作原理与实践 这本书看完了, 推荐大家看我最近在看 设计模式 相关的东西, 准备看看函数式编程, 你们想看什么?不知道大家还有什么想看的书, 或者想了解哪一块的知识点, 大家一起学习呀...
2021-11-19 16:07:22
348
原创 今天的一道面试题(21) -说一下HTTP各版本以及HTTPS之间区别
文章目录HTTP概述GET和POST的区别HTTP1.0HTTP1.1HTTP2HTTP1.1问题引入HTTP2HTTP2其他特性HTTP2的缺陷HTTPS对称加密和非对称加密结合添加证书HTTP概述HTTP(超文本传输协议)是一个基于TCP的应用层协议GET和POST的区别GET提交的数据放在URL中, 不适用一些私密数据的传输, POST提交的数据在header中,但是也无法保证安全性, 没有加密过GET提交的数据大小有限制（是因为浏览器对URL的长度有限制，GET本身没有限制），POST没
2021-11-17 20:21:26
1049
原创 今天的一道面试题(20) - 详细讲述一下浏览器的循环系统
先综述一下:浏览器在执行js时有一个渲染主线程, 但是其他IO线程, 网络进程等等也可以向主线程发送一些任务, 必须输入输出, 下载等等, 就引入了消息队列消息队列中存放的是其他线程和进程发送过来的任务, 每一个任务都是一个宏任务, 浏览器在执行时, 每次从队列首部取出最老的一个任务开始执行setTimeout异步任务 : 存放在延迟消息队列中, 在浏览器执行完消息队列中的一个最老的任务后, 会取出延迟消息队列中到期的延迟任务, 开始执行. (所以setTimeout可能会有延迟, 不一定到期之后就
2021-11-14 17:23:25
1861
6
原创 今天的一道面试题(19) - V8垃圾回收机制
参考 - 浏览器工作原理与实践文章目录V8的内存管理机制栈中的内存是如何回收的堆中的内存是如何回收副垃圾回收器 - 新生代主垃圾回收器 - 老生代全停顿如何避免内存泄漏V8的内存管理机制栈中的内存是如何回收的function foo(){ var a = 1 var b = {name:" 极客邦 "} function showName(){ var c = " 极客时间 " var d = {name:" 极客时间 "} } sho
2021-11-08 23:23:33
799
原创 今天的一道面试题(18) - 说一下浏览器缓存
浏览器缓存主要分为强缓存和协商缓存, 我们主要记住浏览器缓存的这个工作流程以及几个主要字段参考链接 掘金- 彻底理解浏览器的缓存机制文章目录强制缓存Expires(HTTP/1.0)Cache-Control(HTTP/1.1优先级更高)协商缓存Last-Modified / If-Modified-SinceEtag / If-None-Match(优先级更高)总结强制缓存强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种(暂不分
2021-11-07 20:11:30
236
原创 今天的一道面试题(17) - 讲一下跨域问题
感觉这个问题的出场率还是挺高的, 很多时候我们都知道就是那么回事, 但是语言组织上就是差点意思.所以, 实在不行就背下来吧阮一峰 - 浏览器同源政策及其规避方法阮一峰- 跨域资源共享详解文章目录为什么要跨域常见的跨域方式JSONP - 服务端配合更改格式CORS - 服务端返回ACAO字段简单请求非简单请求CORS和JSONP的对比proxy代理 - 中间件解决跨域document.domin - 基础域名相同 子域名不同window.name - 同一个tab下的所有页面共享window.POST
2021-11-06 17:35:45
285
原创 每天一道面试题(16) - useReducer&useContext实现状态管理
如果在上一篇文章里那个问题: 说一下常用的hooks 里能够回答出 useReducer&useContext实现状态管理 , 应该会加分吧. (猜测的, 没经过试验哈哈)useReducer还是上一篇中的例子function TestReducer() { const reducer = (state, action) => { switch (action) { case 'add': return st
2021-10-28 20:39:15
307
原创 每天一道面试题(15) - 常用的hooks有哪些, 具体说一下
说一下常用的hooks?这道题是一道开放题, 只能说出来名字只是最初级的答案.能具体说出每个hook的使用场景并结合有关联的hook进行对比回答才算是一个合格的答案文章目录useStateuseState的异步问题useState为什么返回是一个数组而不是对象useEffectuseEffect用法useEffect && useLayoutEffect的区别useReducer用useReducer实现一个useStateuseReducer+useContext实现状态管理us
2021-10-27 19:21:05
1406
原创 每天一道面试题(14) - webpack热更新使用及其原理
文章目录为什么需要热更新使用热更新以及遇到的问题构建过程热更新原理为什么需要热更新在文件更新时, 希望能保持页面当前的状态值, 而不是直接刷新页面, 可以大大节省宝贵的开发调试时间使用热更新以及遇到的问题使用热更新第一种方案, 使用module.hot.accept()if (module.hot) { module.hot.accept()}axios响应拦截器中返回的响应参数是上次拦截器返回的数据原因是什么呢?因为module.hot.accept()意思是重新执行一遍当前
2021-10-15 19:56:55
505
原创 每天一道面试题(13) - webpack, babel, loader等原理解析
偷懒了这么些天, 终于又开始更新啦~~文章目录前端代码为什么要进行构建和打包?webpack的打包原理loader和plugin的区别?编写loader和pluginBabel是什么, 与webpack的区别Babel的工作原理babel-runtime和babel-polyfill作用及区别前端代码为什么要进行构建和打包?体积更小(压缩, 合并), 加载更快编译高级语言和语法(TS,ES6,模块化,scss)兼容性和错误检查(plyfill, postcss, eslint)统一, 高效的开
2021-10-13 19:26:47
749
原创 每天一道面试题(12) - resolve(reject(1))走then还是catch
之前面试时遇到这个问题, 当时脑子不太好使没想到这道题的考察点是什么.后来复盘了一下才反应过来这道题考的是函数调用栈啊!文章目录什么是函数调用栈resolve(reject(1))走then还是catch函数调用栈的其他问题场景什么是函数调用栈定义参考链接程序在运行期间，内存中有一块区域，用来实现程序的函数调用机制。这块区域是一块LIFO的数据结构区域，我们可以叫函数栈（调用栈）。每个未退出的函数都会在函数栈中拥有一块数据区，我们叫函数的栈帧。函数的调用栈帧中，保存了相应的函数的一些重要信息：函
2021-09-28 20:12:17
255
原创 每天一道面试题(11)- dom是如何渲染的
文章目录DOM树渲染的主要工作原理具体工作流程总结其他特殊情况有js标签怎么办引入外部js的情况css对渲染的影响总结在输入url到界面渲染完成发生了什么 这道题中有一个流程是 浏览器根据请求到的html渲染一棵DOM树那么请问, 这个DOM树是怎么渲染的?在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络进程加载了多少数据，HTML 解析器便解析多少数据
2021-09-28 18:01:58
226
原创 axios源码梳理 - 了解请求库是怎么实现的
axios这个请求库很多人都用过, 那么有下面几个问题, 你能回答上来吗?为什么 axios 既可以当函数调用，也可以当对象使用，比如axios({})、axios.get。简述 axios 调用流程。有用过拦截器吗？原理是怎样的？有使用axios的取消功能吗？是怎么实现的？为什么支持浏览器中发送请求也支持node发送请求？上个月看的axios源码, 看完之后对axios的原理有了大概的理解, 今天就把自己的理解重新梳理一下.axios源码目录具体请求流程拦截器原理取消请求原理浏
2021-09-23 16:27:34
191
原创 每天一道面试题(9) - react hooks的优点
在社招中, 如果项目经验中有react hooks, 面试官就经常会问到这个问题.今天就来系统的总结一下回答这个问题的要点, react hooks的主要优点有以下几点更容易复用代码(最重要)副作用统一处理, 不需要维护各个生命周期代码可读性更强, 代码风格更简洁清爽更容易复用代码如果类组件要复用代码, 经常需要高阶组件.但是高阶组件HOC有两个问题HOC需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难。HOC可以劫持 props，在不
2021-09-22 19:19:35
1325
原创 每天一道面试题(8) - 浏览器和node中的事件循环机制
说一下浏览器和node中的事件循环机制这道题大部同学都能答上来宏任务和微任务, 不知道浏览器事件循环请移至 10 分钟理解 JS 引擎的执行机制但是对于node中的事件循环, 很多人都没有系统的学习过, 本篇文章主要梳理一下在回答这个问题时的要点本文将从以下两个方面进行梳理, 大家在面试的时候也可以按照这个思路进行回答浏览器的事件循环node中的事件循环机制node中事件循环机制的注意事项浏览器的事件循环由于JS是单线程的, 如果自上而下执行, 一段代码运行时间过长, 下面的代码就会.
2021-09-18 21:54:13
261
1
原创 每天一道面试题(7) - JS中的模块化
面试官问: 解释一下JS中的模块化刚开始接触前端时, 看见那几个名词就觉得太高大上了, 都不知道是什么, 慢慢的我发现, 其实大多数时候那些专有名词都是给很简单的概念一个好听的名字罢了, 比如:react中的高阶组件(不就是组件作为参数进行一定的装饰再返回一个组件嘛)比如模块化, 就是JS中将不同功能的代码封装在不同的文件中, 再互相引用时不会发生命名冲突的一种思想, 大多数情况下, 一个文件就是一个模块模块化这一思想的不同实现, 有多种方案, 主要有以下几种CommonJSES6模块化
2021-09-16 19:54:32
560
原创 每天一道面试题(6) - 总结ES6, ES7,ES8的新特性
本文只做总结, 不做详细解释ES6新特性ES6新特性比较多, 可以将这个特性分为功能和语法糖两个类别.在回答问题时也会比较有条理定义变量let, constES6中可以使用let定义变量, const定义常量, 二者是块级作用域这里说一下let和var的区别var在全局声明的变量可以通过window获取到, 成为了window的属性let的作用域只在代码块内，块外无效；var全局有效{ let a = 10; var b = 1;}a // ReferenceError:
2021-09-15 21:07:36
826
原创 每天一道面试题(5) - 详细讨论一下js的原型问题
对于js的原型, 前端er应该多多少少能说上一点. 但是可能大部分人应该都没有深入研究过, 上周专门研究了一下这个问题, 今天在这里做个记录今天只深入研究, 默认对于基本的原型知识已经掌握, 没有掌握的请自行补习~js的原型是什么prototype和__proto__的区别和联系constructor看懂这张图instanceof的特例情况分析js的原型是什么每个构造函数都有一个原型对象prototype，原型对象上包含着一个指向构造函数的指针constructor(原型对象没有被重写的
2021-09-13 22:34:57
129
原创 每天一道面试题(4) - 说一下js中的this
这道题在前端面试中出现的概率应该可以排在前几位了, 就算是入门前端都能回答上来一二, 但是回答的是否有逻辑有条理有深度呢?本文从以下几个问题进行讲述说一下js中的this说一下new做了什么事说一下apply,call方法做了什么事说一下箭头函数和普通函数的区别js中的this面试中遇到这个问题时, 最好不要想一点说一点, 要做出自己的总结js中的this主要是指在函数中this的指向问题如果函数是作为构造函数,使用new方法生成的对象, 那么这个构造函数中的this被绑定到了实例对
2021-09-12 20:31:38
151
原创 每天一道面试题(3) - 你知道JS的事件机制吗
要注意, JS的事件机制和JS的事件运行机制是两个不同的问题这个问题可以派生出如下几个问题你了解JS的事件机制吗?怎么阻止事件传播event.target 和event.currentTarget什么是事件委托?react中的事件委托你了解JS的事件机制吗?一个事件触发时, DOM2级事件规定分为捕获阶段 - 目标阶段 - 冒泡阶段三个阶段我们可以使用DOM0级的规范onclick等事件直接驱动事件, 也可以通过DOM2级规范中的addEventListener方法触发事件, 它可以
2021-09-10 22:59:42
171
原创 每天一道面试题(2) - 你真的了解JS的数据类型吗?
你了解JS的数据类型吗? 这应该是js中最基础的一个问题了, 可是就从这最基础的一个问题, 你能挖掘多深呢?本文将从以下几个方面进行梳理js的数据类型有哪些基本数据类型和引用数据类型的区别是什么判断数据类型的方法堆和栈的区别js的基本数据类型有哪些1.js基本数据类型有六种undefinedBooleanNumberStringBigInt(可以用任意精度表示整数, 安全的存储和操作大整数)Symbol2.null是一种特殊的数据类型, 在被typeof判断的时候会被判断
2021-09-09 23:19:59
88
4
原创 每天一道面试题(1) - javascript中的类数组和鸭式辩形
今天决定每天写一道面试题(偶尔懒了也可以不写, 不强迫自己), 对前端常见的面试题进行一些话术的总结和知识点整合吧正好今天听同事校招面试问到一个类数组, 那么就由此开始吧本文将从以下几个方面进行讲述什么是类数组, 和数组有什么区别为什么需要类数组 以及 常见的类数组有哪些类数组的遍历类数组转为数组什么是类数组类数组, 顾名思义, 不是数组, 长的像数组;其实类数组本质是一个对象, 只不过是具有如下两个特性的对象拥有length属性 和数字索引不具有普通数组的操作方法具有le
2021-09-08 21:00:56
158
原创 记一次DNS解析js失败而阻塞渲染的问题及解决方案
事情的起因在渲染某页面时, 引入了一个地图插件的js, 由于这个js在加载时会出现加载失败的情况, 加载失败时就会阻塞整个页面的渲染从而导致页面空白原因分析 - 什么情况会出现加载js失败不是完全能复现, 排查下来发现只有chrome有这个问题而且chrome在连接浏览器代理时不会出现加载失败的情况在连接公司vpn的情况下不会出现加载失败的情况北京同事连公司内网也不会出现这个问题整体看下来只有在使用chrome直接连接公司上海的有线, 不走浏览器代理, 就会精准复现为什么会出现这种情况
2021-07-16 17:05:57
1036
1
原创 react hooks的闭包陷阱(setInterval不生效)问题
在使用react hooks时, 会遇到这样的问题const [count, setCount] = useState(1)useEffect(() => { setInterval(() => { console.log(count) }, 1000) //闭包陷阱}, [])const handleClick = () => { setCount(count+1)}return ( <div o
2021-07-05 20:26:05
3123
原创 从react原理角度理解setState究竟是同步还是异步以及react hooks中的更新机制
不管是面试, 还是在日常开发中, 我们经常会遇到这样一个问题:setState究竟是同步还是异步, 什么时候同步, 什么时候异步?简单记忆法在理解底层原理之前, 通常很多同学是这样记忆的.在原生事件window.addEventListener中, setstate是同步更新的在回调函数(promise ajax)中是同步更新的在setTimeout 中是同步更新的async函数(无论await的是同步还是异步, 都会先等待里面执行完毕再执行await后面的代码) 是同步更新的注意:
2021-07-05 20:04:14
2931
2
原创 react中的高阶组件HOC和Hooks
参考文章MixinMixin（混入）是一种通过扩展收集功能的方式，它本质上是将一个对象的属性拷贝到另一个对象上面去，不过你可以拷贝 任意多个对象的 任意个方法到一个新对象上去，这是 继承所不能实现的。它的出现主要就是为了解决代码复用问题。Mixin的危害Mixin 可能会相互依赖，相互耦合，不利于代码维护不同的 Mixin中的方法可能会相互冲突Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性高阶组件高阶组件可以看作React对装饰模式的一种
2021-07-02 10:36:50
1391
原创 react的高级特性
高级特性代码分割import使用import进行代码分割, 异步加载//使用之前import { add } from './math';console.log(add(16, 26));//使用之后import("./math").then(math => { console.log(math.add(16, 26));});react.lazy//使用之前import OtherComponent from './OtherComponent';//使用之后c
2021-07-02 10:35:43
119
原创 10深入理解V8垃圾回收及javascript垃圾回收机制
V8 垃圾回收https://juejin.cn/post/6844904016325902344js单线程机制及垃圾回收机制, V8引擎为了减少对应用的性能造成的影响，采用了一种比较粗暴的手段，那就是直接限制堆内存的大小.支持在安装node时, 直接进行手动配置heapTotal：表示V8当前申请到的堆内存总大小。heapUsed：表示当前内存使用量。external：表示V8内部的C++对象所占用的内存。rss(resident set size)：表示驻留集大小，是给这个node进程分
2021-07-02 10:32:56
200
原创 9深入理解函数柯里化
参考链接1, 掘金参考链接2, 冴羽的博客什么是柯里化在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。//普通函数function fn(a,b,c,d,e) { console.log(a,b,c,d,e)}//生成的柯里化函数let _fn = curry(fn);_fn(1,2,3,4,5); // print: 1,2,3,4,5_fn(1)(2)(3,4,5); // print: 1,2,3,4,5_fn(1
2021-07-02 10:28:15
173
原创 8深入理解浮点数精度
一道面试题0.1 + 0.2 是否等于 0.3 作为一道经典的面试题，已经广外熟知，说起原因，大家能回答出这是浮点数精度问题导致，也能辩证的看待这并非是 ECMAScript 这门语言的问题，今天就是具体看一下背后的原因。存储ECMAScript 采用的就是双精确度，也就是说，会用 64 位字节来储存一个浮点数。浮点数转二进制1020用二进制表示1020 = 1 * 2^9 + 1 * 2^8 + 1 * 2^7 + 1 * 2^6 + 1 * 2^5 + 1 * 2^4 + 1 * 2^3 +
2021-07-02 10:27:27
272
原创 7深入理解this和箭头函数
笔记: 你不知道JS上卷 - 关于this调用位置看如下代码function baz() { // 当前调用栈是:baz // 因此，当前调用位置是全局作用域 console.log('baz') bar() // <-- bar 的调用位置}function bar() { // 当前调用栈是 baz -> bar // 因此，当前调用位置在 baz 中 console.log('bar') foo() // <-
2021-07-02 10:17:18
198
转载 6深入理解call、apply、bind，并将其实现
call定义call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。var foo = { value: 1};function bar() { console.log(this.value);}bar.call(foo); // 1注意两点：call 改变了 this 的指向，指向到 foobar 函数执行了模拟实现模拟实现第一步如果改成如下这种格式, 就实现上述两种效果var foo = { value
2021-07-02 10:02:32
79
原创 4深入理解事件循环Event Loop（宏任务、微任务）
参考笔者之前转载的一篇- 10 分钟理解 JS 引擎的执行机制例子://process是微任务// 值得注意的一点是, 每次宏任务执行完, 就执行该宏任务对应的微任务console.log('1') // 1 同步代码：立即执行 [1]setTimeout(function () { console.log('2') // 3 同步代码执行执行 输出2 process.nextTick(function () { console.log('3') // 4 进入
2021-07-01 18:18:06
72
原创 3.深入理解js数据类型与堆栈内存
JS数据类型基本数据类型JS有六种基本数据类型, 其中null比较特殊.对象在底层都表示为二进制,在Javascript中二进制前三位都为0的话会被判断为Object类型,null的二进制表示全为0,自然前三位也是0,所以执行typeof时会返回"object"。undefined：typeof instance === "undefined"null：typeof instance === 'object'boolean：typeof instance === "boolean"numbe
2021-07-01 18:16:09
158
原创 2深入理解作用域和闭包
作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。执行上下文每个函数都有自己的执行上下文, 函数执行的上下文规则是:函数开始执行时，它的上下文会被推入一个上下文栈中。函数执行完成后，上下文栈会弹出该函数上下文。将控制权归还给之前的执行上下文JS程序的执行流就是通过这个上下文栈来控制的一个经典的问题var data = [];for
2021-07-01 18:14:43
152
原创 1深入理解原型、原型链、继承
概念每个构造函数都有一个原型对象prototype，原型对象上包含着一个指向构造函数的指针constructor，而实例都包含着一个指向原型对象的内部指针__proto__。通俗的说，实例可以通过内部指针访问到原型对象，原型对象可以通过constructor找到构造函数。function Person() {}var person = new Person();console.log(person.__proto__ == Person.prototype) // trueconsole
2021-07-01 18:13:47
147
原创 vue3实现响应式原理-Proxy
vue3:ts重写(响应式, vdom, 模板编译)性能提升, 打包后代码量减少调整部分API回顾 Object.definePropery 的缺点深度监听需要一次性递归无法监听新增属性和删除属性(Vue.$set Vue.delete)无法原生监听数组, 需要特殊处理(重写数组原型)Proxy实现响应式1. 基本使用const data = { name: 'zhangsan', age: '20',}const data = ['a', 'b', 'c']
2021-01-19 20:59:56
1064
转载 Vue常见面试题汇总(持续更新)
持续更新2021.01.19一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进
2021-01-19 11:14:48
368
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人