JS学习进阶
文章平均质量分 83
一只自由的程序媛
凡心所向,素履所往
展开
-
今天的一道面试题(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 · 1065 阅读 · 0 评论 -
今天的一道面试题(20) - 详细讲述一下浏览器的循环系统
先综述一下:浏览器在执行js时有一个渲染主线程, 但是其他IO线程, 网络进程等等也可以向主线程发送一些任务, 必须输入输出, 下载等等, 就引入了消息队列消息队列中存放的是其他线程和进程发送过来的任务, 每一个任务都是一个宏任务, 浏览器在执行时, 每次从队列首部取出最老的一个任务开始执行setTimeout异步任务 : 存放在延迟消息队列中, 在浏览器执行完消息队列中的一个最老的任务后, 会取出延迟消息队列中到期的延迟任务, 开始执行. (所以setTimeout可能会有延迟, 不一定到期之后就原创 2021-11-14 17:23:25 · 2283 阅读 · 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 · 954 阅读 · 0 评论 -
今天的一道面试题(18) - 说一下浏览器缓存
浏览器缓存主要分为强缓存和协商缓存, 我们主要记住浏览器缓存的这个工作流程以及几个主要字段参考链接 掘金- 彻底理解浏览器的缓存机制文章目录强制缓存Expires(HTTP/1.0)Cache-Control(HTTP/1.1优先级更高)协商缓存Last-Modified / If-Modified-SinceEtag / If-None-Match(优先级更高)总结强制缓存强制缓存就是向浏览器缓存查找该请求结果,并根据该结果的缓存规则来决定是否使用该缓存结果的过程,强制缓存的情况主要有三种(暂不分原创 2021-11-07 20:11:30 · 257 阅读 · 0 评论 -
今天的一道面试题(17) - 讲一下跨域问题
感觉这个问题的出场率还是挺高的, 很多时候我们都知道就是那么回事, 但是语言组织上就是差点意思.所以, 实在不行就背下来吧阮一峰 - 浏览器同源政策及其规避方法阮一峰- 跨域资源共享详解文章目录为什么要跨域常见的跨域方式JSONP - 服务端配合更改格式CORS - 服务端返回ACAO字段简单请求非简单请求CORS和JSONP的对比proxy代理 - 中间件解决跨域document.domin - 基础域名相同 子域名不同window.name - 同一个tab下的所有页面共享window.POST原创 2021-11-06 17:35:45 · 542 阅读 · 0 评论 -
axios源码梳理 - 了解请求库是怎么实现的
axios这个请求库很多人都用过, 那么有下面几个问题, 你能回答上来吗?为什么 axios 既可以当函数调用,也可以当对象使用,比如axios({})、axios.get。简述 axios 调用流程。有用过拦截器吗?原理是怎样的?有使用axios的取消功能吗?是怎么实现的?为什么支持浏览器中发送请求也支持node发送请求?上个月看的axios源码, 看完之后对axios的原理有了大概的理解, 今天就把自己的理解重新梳理一下.axios源码目录具体请求流程拦截器原理取消请求原理浏原创 2021-09-23 16:27:34 · 391 阅读 · 0 评论 -
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 · 223 阅读 · 0 评论 -
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 · 194 阅读 · 0 评论 -
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 · 300 阅读 · 0 评论 -
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 · 287 阅读 · 0 评论 -
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 · 84 阅读 · 0 评论 -
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 · 81 阅读 · 0 评论 -
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 · 194 阅读 · 0 评论 -
2深入理解作用域和闭包
作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping),也就是静态作用域。执行上下文每个函数都有自己的执行上下文, 函数执行的上下文规则是:函数开始执行时,它的上下文会被推入一个上下文栈中。函数执行完成后,上下文栈会弹出该函数上下文。将控制权归还给之前的执行上下文JS程序的执行流就是通过这个上下文栈来控制的一个经典的问题var data = [];for原创 2021-07-01 18:14:43 · 167 阅读 · 0 评论 -
1深入理解原型、原型链、继承
概念每个构造函数都有一个原型对象prototype,原型对象上包含着一个指向构造函数的指针constructor,而实例都包含着一个指向原型对象的内部指针__proto__。通俗的说,实例可以通过内部指针访问到原型对象,原型对象可以通过constructor找到构造函数。function Person() {}var person = new Person();console.log(person.__proto__ == Person.prototype) // trueconsole原创 2021-07-01 18:13:47 · 180 阅读 · 0 评论 -
详细解析setTimeout和setInterval以及事件机制
为什么要用setTimeout实现setInterval?为什么立即执行函数和let就可以依次打印出1-5原创 2020-09-24 21:52:09 · 855 阅读 · 0 评论 -
bind函数的实现
bind函数和call传入参数的格式是一致的,只不过bind是返回一个新的函数,所以需要额外调用()一次bind(this,args1,args2,...)();bind的实现其实文章并不难理解,只要是对 js 有一定程度的了解的同学就能很容易看懂。我主要关心的是文章最后给出的自己动手实现 bind 函数的代码,代码如下:if (!Function.prototype.bind)...转载 2018-09-11 10:28:13 · 1018 阅读 · 0 评论 -
《ES6标准入门》(九)之Class
昨天,360面试官问了个问题,说:用ES5怎么实现ES6中的class?因为没有看过class,就说不了解,结果回来一看,这不就是ES5怎么创建对象吗???我写了那么多,看了那么多,就这么不会的完事的,哎。。。今天,来总结一下ES6中的Class极客学院讲的很详细,参考 这里目录1.简介2.constructor方法3.实例对象4.name属性5.class表达式...原创 2018-08-22 10:18:12 · 440 阅读 · 0 评论 -
浏览器的多进程和JavaScript的单线程(少废话版)
这篇文章写得很详细,嗯,太详细了,所以有了这个精简版目录区分进程和线程浏览器是多进程的浏览器有哪些进程呢?浏览器内核(渲染进程)WebWorker,JS的多线程?WebWorker与SharedWorker简单梳理下浏览器渲染流程load事件与DOMContentLoaded事件的先后css加载是否会阻塞dom树渲染?区分进程和线程线程和进程区分不清...原创 2018-08-08 15:02:38 · 524 阅读 · 0 评论 -
《ES6标准入门》(八)之generator函数
附上一个讲的还不错的ES6入门讲解连接:来自极客学院Generator 函数简介所谓 Generator,有多种理解角度。首先,可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改变(可以理解成发生某些事件)。ES6 引入 Generator 函数,作用就是可以完全控制函数的内部状态的变化,依次遍历这些状态。在形式上,Generator 是一个普通函数,但...转载 2018-08-08 14:03:28 · 166 阅读 · 0 评论 -
事件委托(事件代理)
起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。那这是什么意思呢?网上的各位大牛们讲事件委托基本上...转载 2018-08-07 16:32:03 · 170 阅读 · 0 评论 -
《ES6标准入门》(七)之Set和Map数据结构
Set 和 Map 数据结构Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。var s = new Set();[2,3,5,4,5,2,2].map(x => s.add(x))for (i of s) {console.log(i)}// 2 3 ...转载 2018-07-24 15:46:07 · 179 阅读 · 0 评论 -
《ES6标准入门》(四)之箭头函数和尾递归
1 基本用法箭头函数是ES6中被应用的最广泛的语法之一了,关键在于其形式简单:var f = v => v;1上面的箭头函数等同于:var f = function(v) { return v;};123如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。var f = () => 5;// 等同于var f = function () { return 5 ...原创 2018-07-06 15:54:53 · 1166 阅读 · 1 评论 -
《ES6标准入门》(三)第八章函数的扩展之扩展运算符...
2.rest参数参数形式 : ...变量名其实就是把参数转化成了一个数组:function add(...values) { console.log(values)}add(2, 5, 3) // [2,3,5]function push(array, ...items) { items.forEach(function(item) { array.push(item);...转载 2018-07-06 11:02:24 · 220 阅读 · 0 评论 -
《ES6标准入门》(二)之第八章函数的扩展——参数默认值
var原创 2018-07-06 10:39:47 · 240 阅读 · 0 评论 -
《ES6标准入门》(一)let和const
一、let命令1)let的作用域只在代码块内,块外无效;var全局有效var a = [];for(var i = 0;i < 10;i++){a[i] = function(){console.log(i);};}a[6]();对于这段代码,变量i是var声明的,在全局范围内有效,所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i值如果使用let,声明的变量仅在...原创 2018-07-05 16:22:58 · 461 阅读 · 0 评论 -
10 分钟理解 JS 引擎的执行机制
作者:ziwei3749https://segmentfault.com/a/1190000012806637首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问:JS为什么是单线程的?为什么需要异步?单线程又是如何实现异步的呢?技术的出现,都跟现实世界里...转载 2018-07-23 10:19:43 · 316 阅读 · 0 评论 -
理解 JavaScript 作用域
简介JavaScript 有个特性称为作用域。尽管对于很多开发新手来说,作用域的概念不容易理解,我会尽可能地从最简单的角度向你解释它们。理解作用域能让你编写更优雅、错误更少的代码,并能帮助你实现强大的设计模式。什么是作用域?作用域是你的代码在运行时,各个变量、函数和对象的可访问性。换句话说,作用域决定了你的代码里的变量和其他资源在各个区域中的可见性。为什么需要作用域?最小访问原则...转载 2018-07-23 10:15:53 · 117 阅读 · 0 评论 -
webApp做一个简单的移动端相册查看管理器
跟着慕课网做了第一个webApp,实现一个移动端的相册管理器首先,页面的布局很简单:一个放置小图的ul,和一个放置大图的容器(在点击之后才显示,小图情况下是隐藏大图的)html代码 webApp相册的实现 --> css样式就不说了,很简单原创 2018-01-20 23:18:18 · 2593 阅读 · 0 评论 -
《ES6标准入门》(五)之Promise对象1
1、Promise的含义Promise就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作)。Promise对象有两个特点1)她对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成)、Rejected(已失败)2)一旦状态改变就不会再变,任何时候都可以得到这个结果。Promise对象的状态...原创 2018-07-06 22:04:17 · 428 阅读 · 0 评论 -
ES6之Promise常见面试题
Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。 以下 promise 均指代 Promise 实例,环境是Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道。以下 p...转载 2018-07-07 13:33:12 · 27319 阅读 · 4 评论 -
JS中事件冒泡与事件捕获
什么是事件? 事件是文档和浏览器窗口中发生的特定的交互瞬间。什么是事件流: 事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)。第一种:事件冒泡IE提出的事...原创 2018-08-01 17:26:03 · 319 阅读 · 0 评论 -
终于弄清楚JS的深拷贝和浅拷贝了-读这一篇就够了
今天,CVTE面试官问了深拷贝和浅拷贝的问题我的回答是:浅拷贝是拷贝了对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化;深拷贝是另外申请了一块内存,内容和原对象一样,更改原对象,拷贝对象不会发生变化;但是面试官给我说:浅拷贝是拷贝一层,深层次的对象级别的就拷贝引用;深拷贝是拷贝多层,每一级别的数据都会拷贝出来;回来查了一下资料,并没有发现面试官说的这种关于深拷贝浅拷贝的说法,看了...原创 2018-07-27 17:22:14 · 36721 阅读 · 36 评论 -
虚拟DOM
因为CVTE一面有问到虚拟DOM,完全没听过,特意查了一下这篇文章写得挺详细的,原谅我没有仔细看完。 虚拟DOM大致了解了以下,以后有机会会重新丰富本文为什么需要虚拟DOM先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM。webkit引擎的处理流程,一图胜千言:所有浏览器的引擎工作流程都差不多,如上图大致分5步:创建DOM tree –&g...转载 2018-07-27 16:33:24 · 148 阅读 · 0 评论 -
深入理解JavaScript中的闭包及其用途
闭包简单来说有两种应用情况(详情见这里)1)函数作为返回值2)函数作为传递参数第一,函数作为返回值如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一节。第二,函数作为参数被传递如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是...原创 2018-07-25 22:30:43 · 492 阅读 · 0 评论 -
JavaScript中创建对象的六种方法
第一种:Object构造函数创建var Person = new Object();Person.name = 'Nike';Person.age = 29;这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中。第二种:使用对象字面量表示法var Person = {};//相当于var Person = new Object();va...转载 2018-07-25 11:58:34 · 274 阅读 · 0 评论 -
ES6对于日常开发的小结
1)变量声明问题var 声明的变量会被提升到函数首部,ES6引入let和const,用来定义变量和常量。let 声明的变量在{}的作用域内,不被提升const定义的常量不能被更改例题:var funcs = []for (var i = 0; i < 10; i++) {funcs.push(function() { console.log(i) })}funcs.forEach(f...转载 2018-07-07 17:41:30 · 215 阅读 · 0 评论 -
《ES6标准入门》(六)之Promise对象2——then()和catch()方法
1.Promise.prototype.then()方法Promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。then方法返回的是一个新的Promise实例(注意,不是...转载 2018-07-07 15:07:13 · 105299 阅读 · 4 评论 -
ES6之Promise对象
什么是PromisePromise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败当Promise的状态又pending转变为resolved或rejected时,会执行相应的方法,并且状态一旦改变,就无法再次改变状态,这也是它名字promise-承诺的由来ES6之前的Promise在ES6中,Promise终于成为了原生对象...转载 2018-07-07 14:25:25 · 192 阅读 · 0 评论 -
abbr标签获取属性值的问题
《JSDOM编程艺术》书中第八章讲了缩略标签的问题用书中的abbr[i].lastchild.nodeValue一直显示值为null,检查了半天代码,终于发现,直接用abbr[i].innerHTML就好了呀另外,调用AddLoadEvent函数时,一定要先引入这个JS文件,再引入要调用它的其他JS,不然找不到这个函数完原创 2017-11-03 11:22:18 · 372 阅读 · 0 评论