尽悲欢-CSDN博客

原创 V8引擎:编译器和解析器是如何执行一段javascript代码的?

前言前面我已经说完了js引擎是如何存储数据,如何回收垃圾的,但这只是基础罢了,并不是v8引擎的最主要任务,接下来我要讲v8引擎的核心:如何执行js代码,为什么要学习这些东西呢?前端工具和框架的自身更新速度非常快,github上开源的项目和工具也是层出不穷,要想追赶上这些工具的更新速度,快速学习,我们必须理解其底层原理,抓住那些本质的知识,万变不离其宗,无论前端框架工具怎么变,其实都是建立在原来的原生js之上的,我们理解了这些底层知识,相应的自然能快速理解这些上层应用了,也能帮助大家深入理解babel,语

2022-01-13 15:55:19 596 3

原创 v8工作原理:垃圾回收,垃圾数据是如何自动回收的

前言前面我说过v8是如何存储js的数据的,数据在代码执行完之后是要被销毁的,数据使用完之后不再被需要,我们把这样的数据称之为垃圾数据,如果这些垃圾数据一直保存在内存中,就会造成内存越使用越多,而得不到释放,我们就需要对这些垃圾数据进行回收,释放有限的内存空间不同语言的垃圾回收策略通常情况下,垃圾数据回收分为手动回收和自动回收两种策略.如C/C++就是使用手动回收策略,何时分配内存,何时销毁内存都是由自己写的代码控制,如c语言就需要先调用mallco函数进行堆内存的分配,然后当不再使用这些数据时,就要

2022-01-11 21:48:48 602

原创 v8引擎工作原理数据存储

前言前面我已经讲完了js基本的一些运行原理,以及js的一些设计缺陷,这经常导致我们写js代码的时候出现我们直觉难以预料到的错误.但是对于前端开发者来说,仅仅认识这些是不够的,如果单纯只是想写一些业务代码,或许够用了,但是对于一个追求高性能环境,甚至想成为行业专家的人来说,这是不够的必须要搞清楚js引擎内存机制甚至js引擎工作的原理,当然这需要很多基本功,如果大家真的想成为行业专家,建议先从底层数据结构,编译原理甚至计算机系统组成结构这些东西看起,当然,这必然是一个漫长的过程,需要毅力和恒心好了,现在

2022-01-06 17:55:25 976

原创 js中的this:从执行上下文的角度看this

前言前面我们已经讲完了js的作用域和作用域链,说白了就是js的一个变量的查找规则,但是由于js静态作用域的这么一个特性,导致作用域只在声明的时候就已经创建好了,这对于我们开发来说有时候不是那么友好:具体看下列代码: var bar = { myname: '拉亚斯特', printName: function () { console.log(myname) }, }

2022-01-05 21:04:55 616

原创作用域链和闭包?JS引擎如何选择顺序的选择变量?

前言前面的博客我已经说完了块级作用域的实现,站在变量环境和词法环境的角度下去看待这些个问题,会让你对js的工作模式有更加清晰的认识.接下来我们看一段代码function bar() { console.log(myname)}function foo() { var myname = '凯隐' bar()}var myname = '拉亚斯特'foo()直接告诉我们这段代码应该打印什么呢?应该打印凯隐,可是结果却出人意料打印的是拉亚斯特,唉?不对啊,按照我们之前所说的,bar函

2022-01-04 17:27:08 418

原创 js块级作用域:为什么要引入let和const?

前言前面我已经讲了js的调用栈是怎么工作的,以及js引擎是如何解析和执行js代码的,正是由于这些前面所讲的一些特性.才引起了js的一些问题,或者说js的设计缺陷前面我们说过,js只有全局作用域和函数作用域,这对于我们一些学过其他高级语言,比如java或者c语言的人来说,写js代码时总是会遇到一些我们直觉难以理解的bug,正是由于这种缺陷,es6之后通过引进let和const关键字并且设计了词法环境,来避免产生这种因缺陷引起的bug,但是js又必须向下兼容,所以很长时间段内,我们必须理解变量提升等特性,当

2022-01-03 16:23:21 770

原创什么是js的调用栈,调用栈怎么工作的?为什么会发生栈溢出?

前言老规矩了,上篇博客我说到了执行上下文和可执行代码,变量提升,但我也只讲到了这些基础的部分,比如执行怎么执行?在哪里执行?整个执行流程是咋样的?一般来说,js代码有这三种情况js执行全局代码的时候,编译全局代码并创建全局执行上下文,而且在整个页面的生存周期内,全局上下文只有1份调用一个函数时,函数体内的代码又会被编译,并且创建函数执行上下文,一般情况下,函数执行完之后,这个函数的函数执行上下文会被销毁(特殊情况是闭包,造成内存泄漏)当使用eval函数的时候,eval的代码也会被编译,创建执行上

2022-01-02 16:31:04 830

原创浏览器中的JS代码是怎样执行的?(重要)

JS代码真的是按严格按照顺序执行的吗?讲解完宏观浏览器的大致流程后,接下来我们开始微观详细介绍更细节的js模块这里涉及到了很多抽象的底层逻辑理解方面的问题,比如执行上下文,可执行代码,执行栈等,理解了这些东西,你才能对,变量提升,闭包,作用域和作用域链有一个清晰的理解,同时,对你使用开发者调试工具调试代码等也有很大帮助先看下面这段代码skill()console.log(myname)var myname = '凯隐'function skill() { console.log('裂舍影')

2022-01-02 15:30:37 1929

原创浏览器渲染流程(详细)

前言老规矩,问题:html,css,js如何变成用户能与之交互的页面的?上篇博客已经介绍了导航的流程, 那么现在就是具体的渲染流程了如果对这个有很深刻的了解,那么你就看透页面是如何工作的,有了这些知识就能解决一系列相关的问题,比如使用开发者工具,优化页面卡顿问题,使用js优化动画流程,通过样式表来防止强制同步布局等等html,css,js这些非常基础的我就不说了,对门他们的理解从架构方向上是html控制结构,css控制样式,js控制行为.渲染模块太复杂了,我们可以把他大致分为几个子流程html

2022-01-01 20:22:14 1047

原创用户从输入URL到页面展示这中间究竟发生了什么?

前言这是一个经典面试题了,无论是前端还是后端,这块是必须非常详细了解的一个点,大多数人以为只要掌握了这里面的一个大概流程应付面试就行了,其实掌握了这里面的东西对你以后的职业发展和逻辑思维也有很大提升,大厂在这块会问的非常详细之前我也已经说过了底层网络连接的一些操作,现在来说说浏览器这块:用户在浏览器那端输入完url地址之后,浏览器发起请求是需要浏览器各个进程的配合的,我们先回顾以下我刚开始讲的浏览器进程的一些主要职责浏览器主进程主要负责用户交互,子进程管理ipc和文件存储等网络进程面向渲染进程和浏

2022-01-01 17:53:07 540

原创前端浏览器缓存策略

前言问题老规矩了,我的博客也是最近想对自己所学只是做一个比较详细的总结,顺便分享出去,大家伙一起学习,所以大多数说的都是我遇到的题目我脑子里我的理解,如果有错误,欢迎指正1.浏览器有什么缓存策略?2.如何选择合适的缓存策略?HTTP状态码304等技术细节这是干啥的?这个我上一篇已经讲过了缓存的本质就是节省网络传输资源的一种手段.重用已经获取的资源.减少延迟和网络阻塞,降低服务器的压力首先我得说清楚,缓存机制和前端数据存储方案是不一样,概念有相似,但本质不是同一个东西(Storage,inde

2022-01-01 02:20:14 2192

原创浏览器发起请求到服务器处理请求的过程

前言问题:为什么很多站点第二次打开速度会很快?前面我们已经说了tcp的一些流程,而http协议是建立在tcp协议基础之上的http是一种无状态的丶允许浏览器向允许浏览器向服务器获取资源的协议,是Web的基础通常由浏览器发起请求,用来获取不同类型的文件,例如html文件,css文件,js文件,图片,视频等.此外,http也是浏览器使用的最广泛的协议,要学好浏览器和前端,就必须要深入了解http协议浏览器发起http请求流程如果你在浏览器输入地址www.baidu.com,那么接下来,浏览器会完成哪些

2021-12-31 22:25:26 5011

原创浏览器发起请求之后数据包的旅程

前言衡量Web页面性能的时候有一个重要指标,叫做’FP’,first paint页面初次绘制的时长,这个时间越短,证明页面加载速度,计算,绘制等有很高的效率,想要优化web页面,首先要对网络有充分的理解.首先要对协议,不管是http还是tcp/ip协议都要有足够了解一个数据包的旅程数据要在网络中传输,首先要遵守一个规则,就像你开车上路要遵守交通规则一样,而这个规则,我们称之为协议,我们现在只关注osi模型中的较上层的协议,非常底层的协议和工作原理大家感兴趣可以自己了解互联网上不同的在线设备都有一个

2021-12-31 16:50:17 1410

原创浏览器工作基本原理与架构发展(chrome为例)

浏览器1.我们打开一个浏览器的一个页面通常需要4个进程什么是进程?资源分配的最小单元什么是线程?任务调度的最小单位简单来说: 你要完成一个项目首先你得分配一个资源吧?你可以想象进程是你的项目一个车间,车间里面有各种各样的工具或者机器(资源),一个项目可能需要多个车间处理,而这几个车间平时都是互不干扰的,当需要通信的时候必须需要一个工具ipc,你可以把他想象成一个通讯工具,负责进程间的通讯.然后就是线程了,线程你可以想象成车间里面工作的工人,一个进程可能有多个线程,里面线程并行工作,并行工作你可以理

2021-12-31 14:29:18 516

原创算法题leetCode

1.两数之和简单题var twoSum = function (nums, target) { const length = nums.length const m = new Map() const res = [] for (let i = 0; i < length; i++) { let a = target - nums[i] if (m.has(a)) { res.push(m.get(a), i) } m.set(nums[i], i) } retu

2021-07-31 17:15:50 118

原创 nodejs文件操作中的相对路径问题

首先看一下代码// 我的路径是/code/Node.js/test.jsconst fs = require('fs')console.log(fs.readdirSync('./')) //然后我在这执行run code(下的一个插件)//打印['Node.js']这时候我就发现不对劲了这时候的当前目录明明就是Node.js下面的目录啊按道理应该打印test.js才对啊后来我发现在终端里是这样的 E:\Code>于是我就怀疑难道这个node执行时候的相对路径是相对的这个路

2021-05-30 02:37:44 495

原创登录框拖拽JS 和JQ实现

js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt

2021-05-24 15:20:23 127

转载原型和原型链

默认在JS中我们创建的每个函数都有一个 prototype （原型）属性，这个属性是一个指针，指向一个原型对象，而这个原型对象中拥有的属性和方法可以被所以实例共享。function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.sayName = function(){alert(this.name);};var person1 = new Person();

2021-05-14 17:41:49 103

原创 JS寻找字符串中出现最多的字符并且统计其出现的个数

var str = "abcoefoxyozzopp"; var o = {}; function getStr(str) { for (var i = 0; i < str.length; i++) { var char = str.charAt(i); if (o[char]) { o[char]++; } else { o[cha

2021-04-28 16:32:11 150

原创模仿B站一个up主写的登录页面

html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="css/in

2021-01-28 15:05:02 439

原创 Vue组件之间的传值

首先Vue组件之间的传值有两种父子通信和非父子通信(bus通信)1.父子通信父传子:首先你得传一个值过去吧<body> <div id="app"> <input type="button" @click="handlclik" value="点击" /> <navbar :mytitle="title" v-for="title in list" ></navbar> </div> </body&

2021-01-24 13:37:31 199

原创 Vue.js使用(2)

接着上次的v-slot 插槽具体插槽和作用域插槽,在组件调用以及显示时用到和template连用以后说到组件时具体说说而且现在的slot slot-scop 都已经被废弃了v-once 表示只作用一次,简单的来说比如你想设置一个抽奖按钮,只有一次抽奖机会,那么这个按钮就只会作用渲染一次, 以后是被当作静态内容的,当然这个指令现在不常用v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。就是把元素当静态内容展示,不需要编

2021-01-22 21:06:15 100

原创 Vue.js的使用(一)

1.引入Vue.js引入开发版本（包含了有帮助的命令行警告）：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>引入生产环境版本（优化了尺寸和速度）：<script src="https://cdn.jsdelivr.net/npm/vue"></script>创建一个div并且给出id：<div id="app"> {{ message }}

2020-12-29 20:52:38 426 3

原创 Vue.js介绍

1.什么是Vue.js依照官网介绍：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。原理：在我的理解，vue实际上是一种响应式的框架，什么是响应？就是你在做出一个动作，一个操作的时候，目标会根据你的操作给予相应的回应，这就是我理解

2020-12-25 15:36:26 127 1

abcsxc258的博客