- 博客(36)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 西南交通大学教务网课程评价自动填充插件
SWJTU课程评价自动填充插件使用教程经测试，本插件支持Chrome，Edge等以chromium为内核的浏览器第一步：安装扩展首先从扩展管理页面打开开发者模式，加载已解压的扩展程序，目录选择解压后生成的文件夹第二步：打开对应课程评价界面然后单击插件，点击自动完成成绩评价然后点击一键提交划重点：但是有时候一键提交后因为时间限制（时间限制为少于1分钟会自动重新填写的关系，会提示格式错误，重新填写，这个时候不用担心，点击页面中的返回，然后重新点击自动完成成绩评价，一键提交即可成功完成评价辣
2022-05-30 18:12:22
1322
3
原创 浏览器原理：7.1DOM树的构建
DOM树的构建DOM树是什么DOM 树是怎样生成的？当HTML解析器遇见 script标签内嵌JS代码时当HTML解析器遇见外部加载JS代码的script标签时DOM树是什么众所周知，现代浏览器采取的是客户端+服务端的形式，客户端向服务端发送请求，服务端响应请求，将请求的内容放在响应主体里面。但浏览器中的网络进程收到从服务端发送过来的数据一般是 HTML 文件字节流，这是无法被浏览器中的渲染引擎直接读取响应的，所以需要对这个HTML文件进行转换，将其转换为渲染引擎能够理解的结构，就比如我们写的高级语言都
2022-03-13 22:29:59
1455
原创 浏览器原理：6.3宏任务和微任务
前面提到，浏览器的消息队列用来存储各个进程/线程向渲染主线程发送的事件，但因为有些事件的优先级是比较高的，而消息队列只能按顺序来无法满足优先级这一需求，为了满足优先级这个需求，于是微任务应运而生，微任务可以理解成是消息队列中的一种任务类型，消息队列中存放着来自若干个任务，这些任务都存在着各自的特点，于是按照一定的归类来讲各个任务分类。宏任务和微任务就是其中的两种任务类型。宏任务和微任务宏任务微任务异步代码在JS引擎中的两种执行情况微任务的执行机制宏任务宏任务包括但不限于渲染事件用户交互事件（比如
2022-03-09 22:20:56
925
原创 浏览器原理：6.2 setTimeout
setTimeout浏览器怎样实现 setTimeoutsetTimeout的注意事项setTimeout 是浏览器提供的一个方法，可以用它来设置一个定时器，定时器到期之后会执行放在里面的函数。了解一个方法，最直接的方式就是看源码，这里从浏览器是怎样来实现 setTimeout 的角度来了解。浏览器怎样实现 setTimeout浏览器是根据消息队列和事件循环两大机制来控制各个线程之间的协调工作的。 主线程不断从事件循环中取出任务，执行任务，其他线程触发的任务按消息队列的数据结构来排进事件循环中。se
2022-03-06 22:44:11
4423
原创 浏览器原理：6.1消息队列和事件循环
消息队列和事件循环为什么需要消息队列和事件循环？消息队列和事件循环的具体流程消息队列和事件循环是浏览器调度安排各个任务的两大机制，此时可以把浏览器看做一个OS，它需要来调度各个任务，包括确定任务优先级，分配任务的占用资源，以及负责提供与操作系统的接口等等。为什么需要消息队列和事件循环？简单来说，因为之前的机制无法满足需求，让我们从OS发展历史的角度来看浏览器中的消息队列和事件循环的必要性。在计算机刚出现的年代，还没有操作系统这一概念，所有的程序都是一个一个靠人工来输入进去，一个一个按顺序执行，不能随意
2022-03-05 23:03:57
321
原创 浏览器原理：5.2JS代码如何被JS引擎执行
JS代码如何被JS引擎执行编译器和解释器V8 引擎 是怎样执行一段JS代码在介绍这个之前，首先先得了解编译器和解释器编译器和解释器众所周知，JS语言是一门高级解释型语言，即写出来是不能被机器直接执行的，需要通过解释器来一行一行将JS代码转换成字节码，再经操作系统交给CPU，来一个指令一个指令执行。不只是JS，所有的高级语言都需要通过 编译器/解释器 ，编译/解释后，转换成机器代码才能由CPU来运行编译器和解释器就是把高级语言代码转换为机器代码的工具下面简单说明一下编译和解释的过程编译编译器会
2022-03-04 22:48:41
375
原创 浏览器原理：5.1 JS内存分析以及JS引擎的垃圾回收
JS内存分析以及JS引擎的垃圾回收JS 的数据类型JS 的内存空间：堆区和栈区垃圾回收代际假说和分代收集垃圾回收器的工作流程副垃圾回收器主垃圾回收器全停顿首先得了解 JS 的数据类型是怎样的JS 的数据类型基本数据类型- Number- String- Bool- Null- unidifined- Symbol- BigInt引用数据类型- ObjectJS 有两大数据类型，基本数据类型，引用数据类型。基本数据类型的变量就保存其原始值，而引用数据类型的变量保存其引用。JS
2022-03-03 23:00:45
229
原创 浏览器原理：4.6JS中的this
JS 中的 thisthis机制的背景this 是什么函数中的 thisthis 的设计缺陷以及应对方案this机制的背景对象内部的方法中使用对象内部的属性是一个非常普遍的需求，但JS的作用域机制无法做到这一点！let obj = { a:4; foo(){ a = 3; }}obj.foo() // undifined从上面可以发现，对象内部的方法如果通过作用域链来直接访问对象内部的变量会找不到，因为foo方法的outer是指向全局执行上下文的，所以这个时候 this 应运而生
2022-03-02 22:50:13
122
原创 浏览器原理：4.5作用域链和闭包
作用域链和闭包作用域链词法作用域闭包闭包的回收作用域链在每个执行上下文的变量环境中，都包含了一个外部引用（outer），专门用来指向另外的执行上下文，当一段可执行代码使用了一个变量，JS引擎会去执行上下文中查找该变量：首先会在当前的执行上下文中寻找该变量如果找不到就会去 outer 指向的执行上下文中去寻找该变量，如果仍然还是找不到就会抛出错误我们把这个像链条一样的查找的顺序称为作用域链，要想了解作用域链，首先得先了解词法作用域，因为作用域链是由词法作用域来决定的词法作用域词法作用
2022-03-01 22:59:22
168
原创 浏览器原理：4.4JS的作用域
JS的作用域作用域JS中的作用域JS 支持块级作用域的机制暂时性死区（TDZ）作用域作用域是指程序中定义变量的区域，该位置决定了变量的生命周期和变量的可访问范围，即作用域控制着变量的可见性和生命周期JS中的作用域全局作用域函数作用域函数作用域中定义的变量在外部是不能访问的，同时在函数调用结束后，函数作用域中的变量也会销毁块级作用域在 ES6 引入 let / const 之后出现的，块级作用域跟函数作用域类似，只不过块级作用域是用 {} 括起来的代码块。JS刚设计的时候，为了图方便，所
2022-02-28 22:55:42
184
原创 浏览器原理：4.2 JS执行时的内存情况
JS执行时的内存情况JS 执行时的内存情况执行上下文调用栈栈溢出JS 执行时的内存情况众所周知，操作系统为各个进程提供了一个内存的抽象——虚拟内存，让开发者无需关注底层的硬件存储部分的技术细节，JS也是一样，只不过一般来说JS是运行在浏览器上的。执行上下文上节讲到，JS会首先由 JS引擎编译后再执行，编译后会产生执行上下文。执行上下文包括变量环境和词法环境。编译的时候然后会把声明变量以外的代码编译成可执行代码。编译完成后会一行一行开始执行。以这个例子说明var foo = 2function
2022-02-27 22:29:58
582
原创 浏览器原理：4.1浏览器中JS大概的执行流程
浏览器中JS大概的执行流程编译阶段执行阶段初学JS，都会讲到变量提升这一概念a = 10 var a;console.log(a) // 10 not undifinedfunction foo() {}var bar = function(){} // 这里是先声明bar，给bar设置默认值 undifined，然后再用一个函数赋值要想真正理解变量提升的来龙去脉，就得去理解 JS 代码得执行流程以一段代码为例，让理解 JS 代码的完整执行流程foo()console.log(ba
2022-02-26 23:17:12
270
原创 浏览器原理：3.渲染流程详解
渲染流程详解构建 DOM 树样式计算布局阶段分层图层绘制栅格化操作合成和显示渲染流水线总结相关概念（重排、重绘、合成）由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的HTML经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线按照渲染的时间顺序，流水线可以分为构建 DOM 树样式计算布局阶段分层绘制光栅化合成重点关注每个阶段的这些内容其输入的内容处理过程输出的内容构建 DOM 树为什么要构建 DOM
2022-02-25 09:50:42
555
原创 浏览器原理：2.从输入URL到页面展示的全过程分析
从输入url到页面展示的全过程分析浏览器的多进程架构整个过程的大体描述从输入 URL 到页面展示的具体细节总结浏览器的多进程架构首先我们再回顾一下，多进程浏览器的架构部分三大进程浏览器进程主要负责用户交互、子进程管理和文件存储等功能网络进程面向渲染进程和浏览器进程等提供网路下载功能渲染进程把从网络下载的资源文件解析为可以显示和交互的页面。因为渲染进程里面所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对操作系统进行攻击，所以运行在渲染进程里面的代码是被不信任的。这
2022-02-23 10:12:23
4602
原创 浏览器原理：1.宏观视角上的浏览器
宏观视角上的浏览器文章目录宏观视角上的浏览器Chrome架构进程和线程单进程浏览器时代多进程浏览器时代早期多进程架构目前多进程架构未来面向服务的架构Chrome架构右击chrome，可以发现chrome也有任务管理器当使用Chrome只打开了一个页面，可以发现有多个进程在执行 ！这就要从操作系统的角度来看浏览器，也就是宏观视角。首先介绍一点简单的操作系统知识进程和线程并行处理即计算机同一时刻处理多个任务，与之相对的还有并发处理，两者的区别在于是否在同一时刻处理多个任务线程和进
2022-02-21 17:39:33
579
原创 自顶向下 第二章 应用层
应用层应用层协议原理网络应用程序体系结构进程通信可供应用程序使用的运输服务因特网提供的运输服务应用层协议Web 和 HTTPHTTP概况非持续连接和持续连接HTTP报文格式用户与服务器的交互：cookieWeb缓存条件 GET 方法因特网中的电子邮件SMTP 邮件传输协议与HTTP的对比邮件访问协议DNS：因特网的目录服务DNS提供的服务DNS工作机理概述P2P文件分发P2P体系结构的扩展性BitTorrent(最为流行的用于文件分发的P2P协议)分布式散列表（另一种 P2P 应用）视频流和内容分发网（CD
2021-12-14 23:18:41
2865
1
原创 计算机网络自顶向下方法（一）计算机网络和因特网
计算机网络和因特网什么是因特网具体构成描述服务描述什么是协议网络边缘接入网物理媒体网络核心分组交换电路交换网络的网络分组交换网中的时延、丢包和吞吐量时延概述排队时延和丢包端到端时延吞吐量协议层次以及服务模型分层的体系结构封装面对攻击的网络计算机网络和因特网的历史分组交换的发展专用网络和网络互联总结什么是因特网具体构成描述服务描述什么是协议网络边缘接入网物理媒体网络核心分组交换电路交换网络的网络分组交换网中的时延、丢包和吞吐量时延概述排队时延和丢包端到端时延吞吐量协议层次以
2021-11-23 23:31:58
370
原创 ES6（十九）class
class简介基本用法constructor 方法取值函数和存值函数属性表达式Class 表达式实例属性的新写法注意点静态方法和静态属性静态方法静态属性静态块私有方法和私有属性私有方法私有属性in 运算符new.target 属性class 继承基本用法Object.getPrototypeof()super 关键字类型的 prototype 属性 和 \_\_proto\_\_ 属性原生构造函数的继承Mixin模式的实现 即多重继承总结简介基本上，ES6 的class可以看作只是一个语法糖，它的绝
2021-11-19 10:36:07
109
原创 ES6（十八）asnyc 和 await
async 和 awaitasync 含义async 基本用法async 基本语法Promise 状态变化await 命令错误处理async 函数的基本原理与其他异步方法的对比总结async 含义async 函数是什么？一句话，它就是 Generator 函数的语法糖。语法糖 指 计算机语言 中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。. 语法糖让程序更加简洁，有更高的可读性，比如Vue中的 @ 、：const fs = require('fs');const r
2021-11-18 10:42:35
829
原创 ES6 （十六）Iterator 和 for of 循环
Iterator 和 for ofIterator默认 Iterator 接口调用 Iterator 接口的场合字符串的 Iterator 接口遍历器对象的 return throw方法for...of 循环总结IteratorJS有四种表示集合的数据结构，用户还可以自行diy来设计合适的数据而机构，这时候就需要一种统一的接口机制，来处理所有不同的数据结构遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就
2021-11-15 09:23:58
651
原创 ES6（十五）Promise对象
Promise对象前言Promise的含义基本用法Promise实例的一些方法Promise.prototype.then()/cath()Promise.prototype.finally()Promise.all()Promise.race()Promise.allSettled()Promise.any()Promise.resolve()Promise.reject()Promise.try()总结前言ES6针对异步功能的实现提出了Promise这一个新的对象，使用Promise可以写出更加优
2021-11-14 20:03:48
736
原创 ES6 （十四）Reflect
Reflect简介静态方法观察者模式总结简介Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。将 Object 对象的 一些明显属于语言内部的方法 （比如 Object.defineProperty），放到 Reflect 对象上。现阶段，某些方法 同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。意思是可以从 Reflect 对象上 拿到语言内部的方法修改
2021-11-13 10:12:40
52
原创 ES6（十三） Proxy（代理）
Proxy（代理）简介Proxy实例的方法get()set()apply()has()construct()deleteProperty()defineProperty()getOwnPropertyDescriptor()getPrototypeOf()isExtensible()ownKeys()preventExtensions()setPrototypeOf()Proxy.revocable()this 问题总结简介proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，属于一种“元
2021-11-12 11:56:35
470
原创 ES6（十二）Set 和 Map
Set 和 MapSet基本用法Set 实例的属性和方法遍历操作WeakSet基本用法实例属性和方法Map概述实例 属性和操作方法与其他数据结构的转换WeakMap基本用法实例属性和方法WeakRefFinalizationRegistry总结Set基本用法ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forE
2021-11-11 12:13:08
48
原创 ES6（十一）运算符的扩展及 Symbol 数据类型
运算符的扩展及 Symbol 数据类型运算符的扩展指数运算符 `**`链判断运算符 `?.`Null 判断运算符 `??`逻辑赋值运算符 `||=`、`&&=`、`??=`Symbol 数据类型简介Symbol.prototype.descriptionSymbol常用来作对象的属性名消除魔术字符串属性名的遍历Symbol.for() Symbol.keyFor()Symbol.for()Symbol.keyFor()模块的Singleton模式内置的Symbol值Symbol.hasIn
2021-11-09 11:02:10
956
原创 ES6 （十） 对象的新增方法
对象的新增方法Object.is()Object.assign()Object.getOwnPropertyDescriptors()__proto__属性____proto____属性Object.setPrototypeOf()Object.getPrototypeOf()Object.keys(), Object.values() Object.entries()Object.keys()Object.values()Object.entries()Object.fromEntries()总结Ob
2021-11-08 23:03:04
531
原创 ES6 （九）对象的扩展
对象的扩展属性的简洁表示法属性名表达式方法的 name 属性属性的可枚举性和遍历super 关键字对象的扩展运算符AggregateError 错误对象总结属性的简洁表示法ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法const foo = 'bar';const baz = {foo}; // ! 简写baz // {foo: "bar"}// 等同于const baz = {foo: foo};function f(x, y) { return {x, y}
2021-11-07 14:27:32
134
原创 ES6 （八）数组的扩展
数组的扩展扩展运算符Array.from() Array.of()数组实例的方法1.引入库2.读入数据数组的空位sort 快排的稳定性总结扩展运算符扩展运算符就是三个点那个 ... 好比rest参数的逆运算，它可以将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<
2021-11-06 14:42:35
91
原创 ES6 （七）函数的扩展
ES6 函数的扩展函数参数的默认值rest参数严格模式name属性箭头函数尾调用 优化函数参数的尾逗号Function.prototype.toString()catch 命令的参数省略总结函数参数的默认值ES6之前不能直接为函数的参数指定默认值，ES6允许为函数的参数设置默认值，即直接写在参数定义的后面function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('H
2021-11-05 14:20:39
76
原创 ES6 (六）数值的扩展
ES6 数值的扩展二进制和八进制表示法数值分隔符Number上新增的一些属性及方法Number.isFinite()Number.isNaN()Number.isInteger()Number.parseInt()Number.parseFloat()Number.EPSILONNumber.isSafeIntegerMath对象的扩展BigInt 数据类型（大数）总结二进制和八进制表示法提示：以下是本篇文章正文内容，下面案例可供参考数值分隔符Number上新增的一些属性及方法Number.is
2021-11-04 14:34:01
182
原创 ES6（五）正则的扩展
ES6（五） 正则的扩展RegExp 构造函数字符串的正则方法u修饰符y 修饰符s 修饰符RegExp.prototype 上的属性及方法RegExp.prototype.unicodeRegExp.prototype.stickyRegExp.prototype.flagsString.prototype.matchAll()后行断言Unicode 属性类具名组匹配总结RegExp 构造函数var regex = new RegExp('xyz', 'i');// 等价于var regex =
2021-11-03 14:28:30
132
原创 ES6入门 （四）String方法的扩展
ES6入门（阮一峰）字符串的新增方法一、原生String对象的方法 即 String.xxx()二、实例方法总结一、原生String对象的方法 即 String.xxx()String.fromCodePoint()用于从 Unicode 码点返回对应字符，并且可以识别码点大于0xFFFF的字符，弥补了 String.fromCharCode() 的不能识别码点大于0xFFFF的字符的缺陷。String.fromCharCode(0x20BB7)// "ஷ" // 最高位2被舍弃Strin
2021-11-02 13:47:45
173
原创 ES6入门 （三）字符串的扩展
字符串的扩展一、字符的 Unicode 表示法1.什么是Unicode2.Unicode表示法3.JS表示字符的6种方法二、字符串的遍历器接口三、\u2028 和 \u2029四、JSON.stringify() 的改造五、模板字符串总结提示：以下是本篇文章正文内容，下面案例可供参考一、字符的 Unicode 表示法1.什么是Unicode因为 ASCII 码一共只定义了 128个字符，只能够满足英文中的字符，对于其他语言，这是远远不够的，于是为了统一全世界的标准，Unicode出现了，Unico
2021-10-31 09:51:10
407
原创 ES6入门（二）解构赋值
ES6入门 （阮一峰）（二）前言一、什么是变量的解构赋值二、各种数据类型的解构赋值1.数组的解构赋值2.对象的解构赋值3.字符串的解构赋值4.数值和布尔值的解构赋值5.函数参数的解构赋值6.关于解构中的圆括号问题三、解构赋值的用途总结前言本文主要介绍ES6新增的变量的解析赋值一、什么是变量的解构赋值示例：ES6 允许按照一定模式，从数组和对象种提取值，对变量进行赋值，这被称为解构。二、各种数据类型的解构赋值1.数组的解构赋值基本用法let a = 1;let b = 2;let
2021-10-30 11:41:11
205
原创 2021-10-29
ES6（阮一峰）（一）前言一、ES6简介二、let 和 const1.let2.const总结前言最近在学ES6，故来此记录下自己的学习笔记，主要参考教材为ES6入门（阮一峰）一、ES6简介 说到ES6，不得不提到ES和JS的关系简单概括就是ES是JS的规格，规范，而JS则是ES的一种实现方式。JS 标准委员会决定在每年的6月份发布一个 ES 版本，作为当年的正式版本。这样做的好处有，不需要像5.1，5.2，5.3这样的版本号，只需要用年份来标记即可，即ES2016，ES2017。ES
2021-10-29 21:27:26
52
空空如也
关于js写二级菜单 弹出false的问题
2021-04-29
为什么这里不能释放掉内存
2021-04-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人