qq_51005544的博客

SWJTU课程评价自动填充插件使用教程经测试，本插件支持Chrome，Edge等以chromium为内核的浏览器第一步：安装扩展首先从扩展管理页面打开开发者模式，加载已解压的扩展程序，目录选择解压后生成的文件夹第二步：打开对应课程评价界面然后单击插件，点击自动完成成绩评价然后点击一键提交划重点：但是有时候一键提交后因为时间限制（时间限制为少于1分钟会自动重新填写的关系，会提示格式错误，重新填写，这个时候不用担心，点击页面中的返回，然后重新点击自动完成成绩评价，一键提交即可成功完成评价辣

DOM树的构建DOM树是什么DOM 树是怎样生成的？当HTML解析器遇见 script标签内嵌JS代码时当HTML解析器遇见外部加载JS代码的script标签时DOM树是什么众所周知，现代浏览器采取的是客户端+服务端的形式，客户端向服务端发送请求，服务端响应请求，将请求的内容放在响应主体里面。但浏览器中的网络进程收到从服务端发送过来的数据一般是 HTML 文件字节流，这是无法被浏览器中的渲染引擎直接读取响应的，所以需要对这个HTML文件进行转换，将其转换为渲染引擎能够理解的结构，就比如我们写的高级语言都

前面提到，浏览器的消息队列用来存储各个进程/线程向渲染主线程发送的事件，但因为有些事件的优先级是比较高的，而消息队列只能按顺序来无法满足优先级这一需求，为了满足优先级这个需求，于是微任务应运而生，微任务可以理解成是消息队列中的一种任务类型，消息队列中存放着来自若干个任务，这些任务都存在着各自的特点，于是按照一定的归类来讲各个任务分类。宏任务和微任务就是其中的两种任务类型。宏任务和微任务宏任务微任务异步代码在JS引擎中的两种执行情况微任务的执行机制宏任务宏任务包括但不限于渲染事件用户交互事件（比如

setTimeout浏览器怎样实现 setTimeoutsetTimeout的注意事项setTimeout 是浏览器提供的一个方法，可以用它来设置一个定时器，定时器到期之后会执行放在里面的函数。了解一个方法，最直接的方式就是看源码，这里从浏览器是怎样来实现 setTimeout 的角度来了解。浏览器怎样实现 setTimeout浏览器是根据消息队列和事件循环两大机制来控制各个线程之间的协调工作的。 主线程不断从事件循环中取出任务，执行任务，其他线程触发的任务按消息队列的数据结构来排进事件循环中。se

消息队列和事件循环为什么需要消息队列和事件循环？消息队列和事件循环的具体流程消息队列和事件循环是浏览器调度安排各个任务的两大机制，此时可以把浏览器看做一个OS，它需要来调度各个任务，包括确定任务优先级，分配任务的占用资源，以及负责提供与操作系统的接口等等。为什么需要消息队列和事件循环？简单来说，因为之前的机制无法满足需求，让我们从OS发展历史的角度来看浏览器中的消息队列和事件循环的必要性。在计算机刚出现的年代，还没有操作系统这一概念，所有的程序都是一个一个靠人工来输入进去，一个一个按顺序执行，不能随意

JS代码如何被JS引擎执行编译器和解释器V8 引擎 是怎样执行一段JS代码在介绍这个之前，首先先得了解编译器和解释器编译器和解释器众所周知，JS语言是一门高级解释型语言，即写出来是不能被机器直接执行的，需要通过解释器来一行一行将JS代码转换成字节码，再经操作系统交给CPU，来一个指令一个指令执行。不只是JS，所有的高级语言都需要通过 编译器/解释器 ，编译/解释后，转换成机器代码才能由CPU来运行编译器和解释器就是把高级语言代码转换为机器代码的工具下面简单说明一下编译和解释的过程编译编译器会

JS内存分析以及JS引擎的垃圾回收JS 的数据类型JS 的内存空间：堆区和栈区垃圾回收代际假说和分代收集垃圾回收器的工作流程副垃圾回收器主垃圾回收器全停顿首先得了解 JS 的数据类型是怎样的JS 的数据类型基本数据类型- Number- String- Bool- Null- unidifined- Symbol- BigInt引用数据类型- ObjectJS 有两大数据类型，基本数据类型，引用数据类型。基本数据类型的变量就保存其原始值，而引用数据类型的变量保存其引用。JS

JS 中的 thisthis机制的背景this 是什么函数中的 thisthis 的设计缺陷以及应对方案this机制的背景对象内部的方法中使用对象内部的属性是一个非常普遍的需求，但JS的作用域机制无法做到这一点！let obj = { a:4; foo(){ a = 3; }}obj.foo() // undifined从上面可以发现，对象内部的方法如果通过作用域链来直接访问对象内部的变量会找不到，因为foo方法的outer是指向全局执行上下文的，所以这个时候 this 应运而生

作用域链和闭包作用域链词法作用域闭包闭包的回收作用域链在每个执行上下文的变量环境中，都包含了一个外部引用（outer），专门用来指向另外的执行上下文，当一段可执行代码使用了一个变量，JS引擎会去执行上下文中查找该变量：首先会在当前的执行上下文中寻找该变量如果找不到就会去 outer 指向的执行上下文中去寻找该变量，如果仍然还是找不到就会抛出错误我们把这个像链条一样的查找的顺序称为作用域链，要想了解作用域链，首先得先了解词法作用域，因为作用域链是由词法作用域来决定的词法作用域词法作用

JS的作用域作用域JS中的作用域JS 支持块级作用域的机制暂时性死区（TDZ）作用域作用域是指程序中定义变量的区域，该位置决定了变量的生命周期和变量的可访问范围，即作用域控制着变量的可见性和生命周期JS中的作用域全局作用域函数作用域函数作用域中定义的变量在外部是不能访问的，同时在函数调用结束后，函数作用域中的变量也会销毁块级作用域在 ES6 引入 let / const 之后出现的，块级作用域跟函数作用域类似，只不过块级作用域是用 {} 括起来的代码块。JS刚设计的时候，为了图方便，所

JS执行时的内存情况JS 执行时的内存情况执行上下文调用栈栈溢出JS 执行时的内存情况众所周知，操作系统为各个进程提供了一个内存的抽象——虚拟内存，让开发者无需关注底层的硬件存储部分的技术细节，JS也是一样，只不过一般来说JS是运行在浏览器上的。执行上下文上节讲到，JS会首先由 JS引擎编译后再执行，编译后会产生执行上下文。执行上下文包括变量环境和词法环境。编译的时候然后会把声明变量以外的代码编译成可执行代码。编译完成后会一行一行开始执行。以这个例子说明var foo = 2function

浏览器中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

渲染流程详解构建 DOM 树样式计算布局阶段分层图层绘制栅格化操作合成和显示渲染流水线总结相关概念（重排、重绘、合成）由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的HTML经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线按照渲染的时间顺序，流水线可以分为构建 DOM 树样式计算布局阶段分层绘制光栅化合成重点关注每个阶段的这些内容其输入的内容处理过程输出的内容构建 DOM 树为什么要构建 DOM

从输入url到页面展示的全过程分析浏览器的多进程架构整个过程的大体描述从输入 URL 到页面展示的具体细节总结浏览器的多进程架构首先我们再回顾一下，多进程浏览器的架构部分三大进程浏览器进程主要负责用户交互、子进程管理和文件存储等功能网络进程面向渲染进程和浏览器进程等提供网路下载功能渲染进程把从网络下载的资源文件解析为可以显示和交互的页面。因为渲染进程里面所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对操作系统进行攻击，所以运行在渲染进程里面的代码是被不信任的。这

宏观视角上的浏览器文章目录宏观视角上的浏览器Chrome架构进程和线程单进程浏览器时代多进程浏览器时代早期多进程架构目前多进程架构未来面向服务的架构Chrome架构右击chrome，可以发现chrome也有任务管理器当使用Chrome只打开了一个页面，可以发现有多个进程在执行 ！这就要从操作系统的角度来看浏览器，也就是宏观视角。首先介绍一点简单的操作系统知识进程和线程并行处理即计算机同一时刻处理多个任务，与之相对的还有并发处理，两者的区别在于是否在同一时刻处理多个任务线程和进

应用层应用层协议原理网络应用程序体系结构进程通信可供应用程序使用的运输服务因特网提供的运输服务应用层协议Web 和 HTTPHTTP概况非持续连接和持续连接HTTP报文格式用户与服务器的交互：cookieWeb缓存条件 GET 方法因特网中的电子邮件SMTP 邮件传输协议与HTTP的对比邮件访问协议DNS：因特网的目录服务DNS提供的服务DNS工作机理概述P2P文件分发P2P体系结构的扩展性BitTorrent(最为流行的用于文件分发的P2P协议)分布式散列表（另一种 P2P 应用）视频流和内容分发网（CD

计算机网络和因特网什么是因特网具体构成描述服务描述什么是协议网络边缘接入网物理媒体网络核心分组交换电路交换网络的网络分组交换网中的时延、丢包和吞吐量时延概述排队时延和丢包端到端时延吞吐量协议层次以及服务模型分层的体系结构封装面对攻击的网络计算机网络和因特网的历史分组交换的发展专用网络和网络互联总结什么是因特网具体构成描述服务描述什么是协议网络边缘接入网物理媒体网络核心分组交换电路交换网络的网络分组交换网中的时延、丢包和吞吐量时延概述排队时延和丢包端到端时延吞吐量协议层次以

class简介基本用法constructor 方法取值函数和存值函数属性表达式Class 表达式实例属性的新写法注意点静态方法和静态属性静态方法静态属性静态块私有方法和私有属性私有方法私有属性in 运算符new.target 属性class 继承基本用法Object.getPrototypeof()super 关键字类型的 prototype 属性 和 \_\_proto\_\_ 属性原生构造函数的继承Mixin模式的实现 即多重继承总结简介基本上，ES6 的class可以看作只是一个语法糖，它的绝

async 和 awaitasync 含义async 基本用法async 基本语法Promise 状态变化await 命令错误处理async 函数的基本原理与其他异步方法的对比总结async 含义async 函数是什么？一句话，它就是 Generator 函数的语法糖。语法糖 指 计算机语言 中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。. 语法糖让程序更加简洁，有更高的可读性，比如Vue中的 @ 、：const fs = require('fs');const r

Generator函数简介for...of 循环二、使用步骤简介for…of 循环二、使用步骤