无俦N-CSDN博客

原创对微任务的理解

浏览器是单线程的，代码在执行栈（Call Stack）中执行，这意味着它在任何时候只能执行一个任务。然而，这并不意味着浏览器无法处理多个任务。为了实现这一点，浏览器引入了事件循环（Event Loop）机制。浏览器中有很多操作是异步的，比如网络请求、定时器、用户交互等。浏览器异步处理完这些任务，将执行结果放到回调任务队列（Queue），事件循环机制会不断地检查任务队列，当执行栈空闲时，如果队列中有任务，就取出任务并执行，然后再检查下一个任务，如此循环往复，直到任务队列为空。

2024-09-27 15:16:29 529

原创 Vue实现nextTick

nextTick是Vue.js中实现异步更新的关键机制，理解其原理和用法对于提高前端开发效率至关重要。通过本文的介绍，我们希望您能够更好地掌握nextTick的使用，充分发挥Vue.js的潜力。

2024-09-26 21:07:50 1077

原创浏览器渲染步骤 /Css与Js对html的渲染和解析的影响

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。CSS 对象模型 (CSSOM) 是树形形式的所有CSS选择器和每个选择器的相关属性的映射，具有树的根节点，同级，后代，子级和其他关系。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于获得良好的性能是如此重要。意味着文件将在加载后立即执行，这可能是在解析过程中或在解析过程之后执行的，因此不能保证异步脚本的执行顺序。

2024-09-18 18:29:39 968

原创排查项目中的内存泄露

当开发者明确知道与内存泄漏关联的用户交互步骤时，可以生成多次内存快照进行对比，排查出泄漏的对象：在做用户交互操作之前，进行一次正常内存堆栈信息的快照；通过生成的结果可以直观查看到内存时间线，了解内存随时间的占用变化，如果内存占用曲线成阶梯状一直上升，则可能存在内存泄漏。打开准备分析的页面和 DevTools 的 Performance 面板，勾选 Memory 并开始录制，在模拟用户操作一段时间后结束录制，DevTools 会将这段时间内的页面行为活动进行记录和分析。检查内存大小，作为内存泄漏的辅助判断。

2024-09-16 14:36:17 1103

原创 WebAssembly

WebAssembly（缩写为 wasm）是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。这些代码可以是 C、C++ 或 Rust 等。它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。这些代码的形式是二进制文件，你可以直接在 JavaScript 中将它们当作模块来用。WebAssembly不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，你可以将 WebAssembly模块加载到你的页面中。

2024-09-09 12:45:14 690

原创 Web Worker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

2024-09-03 13:33:04 1234

原创 HTML原生生命周期

当 DOM 准备就绪时，document上的事件就会被触发。在这个阶段，我们可以将 JavaScript 应用于元素。诸如或之类的脚本会阻塞，浏览器将等待它们执行结束。图片和其他资源仍然可以继续被加载。当页面和所有资源都加载完成时，window上的load事件就会被触发。我们很少使用它，因为通常无需等待那么长时间。当用户想要离开页面时，window上的事件就会被触发。如果我们取消这个事件，浏览器就会询问我们是否真的要离开（例如，我们有未保存的更改）。当用户最终离开时，window上的。

2024-09-02 12:41:22 951

原创浏览器缓存模型

协商缓存是指当本地缓存的资源过期后，浏览器会向服务器发送请求，携带If-Modified-Since或If-None-Match字段，以判断资源是否已更新。浏览器缓存是指浏览器在用户访问网页时，将网页的某些资源（如HTML、CSS、JavaScript文件）存储在本地磁盘上，以便在用户再次访问该网页时，可以直接从本地磁盘读取资源，而无需重新从服务器下载。例如，浏览器会将经常访问的网页放入内存中，以便更快地加载。当缓存的资源未过期时，浏览器会直接读取本地缓存中的资源，而不会向服务器发送请求。

2024-09-01 16:06:40 253

原创 JS原型链理解

需要注意的是，原型链并不是唯一的实现继承和属性查找的方式。通过理解原型链的工作原理，我们可以更好地利用它来实现代码的重用、共享和调试。同时，我们也应该了解新兴的特性和技术，如类和继承等，但只有掌握了原型链等核心技术，我们才能更好地理解和应用这些高级特性。当我们在一个对象上查找属性或方法时，如果该对象内部不存在这个属性或方法，JavaScript引擎就会沿着原型链向上查找，直到找到或到达原型链的终点。我们可以通过在原型的属性和方法上添加或修改来共享属性和方法，避免在每个实例上重复定义相同的属性和方法。

2024-08-31 17:01:39 502

原创 JS实现链表

数组是若干个元素按照顺序排列存放的一个集合，并且每个元素至少存在一个索引(index)或者关键字(key)所标识，每个元素的位置都可以通过计算索引拿到为什么说每个元素至少有一个索引呢，那是因为数组可以是多维度的但是我们在日常工作中一般常用的是一维数组，也可以称之为线性数组一维数组：[1,2,3];//数组的每一个元素是一个数据类型二维数组：[["a","b","c"],[1,2,3],123];//数组的每一个元素是一个一维数组。

2024-08-30 23:27:16 1060

原创 js实现队列

在上一篇文章中，我们了解并学习了JavaScript栈数据结构，本章开始JavaScript的队列数据结，第一章先认识队列与怎么去封装一个队列。前面的文章里我们已经学习了栈。队列和栈非常类似，但是使用了与后进先出不同的原则。本章学习这些内容。队列是遵循先进先出FIFO，也称为先来先服务)原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾。在现实中，最常见的队列的例子就是排队，例如在火车站的售票处、超时里的收银台等，我们都会排队，排在第一位的人会先接受服务。

2024-08-29 15:14:23 2586

原创 JS如何实现深拷贝

基本类型数据普通对象SymbolDateRegExpMap和SetFunction原型不可枚举属性循环引用。

2024-08-28 14:56:42 1034

原创什么是sni

这样客户端在发送请求的时候，利用DNS域名解析，只要向解析到的IP地址（服务器地址）发送请求，然后服务器将自身唯一的证书返回回来，交给客户端验证，验证通过，则继续进行后续通信。然后通过协商好的加密通道，获得所需要的内容。server_hello, 服务端返回协商的信息结果，包括选择使用的协议版本 version，选择的加密套件 cipher suite，选择的压缩算法 compression method、随机数 random_S 等，其中随机数用于后续的密钥协商;

2024-08-26 14:16:21 963

原创服务器主动推送的方法

服务器如何主动推送数据在传统的网络通信中，客户端（如浏览器）通常需要通过向服务器发起请求来获取数据。然而，有些场景下，服务器需要主动将数据推送给客户端，而不是等待客户端的请求。这种推送数据的方式被称为服务器主动推送（Server Push）。

2024-08-23 19:18:05 537

原创后端给前端传递数据形式：广播单播以及组播

单播、广播、组播、任播是网络中常见的四种传输方式。==单播针对单个目标地址进行传输，广播针对整个网络中的所有设备进行传输，组播用于向一组设备广播同一数据包，任播则用于识别同一“服务”的多个设备中的最近者。==在网络传输数据时，根据不同的场景和需求，选择合适的传输方式可以提高数据传输的效率和可靠性。

2024-08-22 16:08:32 1961

原创除了系统问题前端可能会有什么问题

在前端开发中，经常会遇到一系列的问题和挑战。

2024-08-21 15:04:56 865

原创什么原因会导致websocket断连

在实际应用中，为了防止WebSocket连接断开，我们可以采取一些措施。其次，我们可以增加心跳机制。此外，我们还可以优化网络环境、加强服务器性能和优化代码等方面来减少WebSocket连接断开的风险。在实际应用中，我们需要根据具体情况来分析WebSocket连接断开的原因，并采取相应的措施来解决。同时，我们也可以借助一些工具和日志来帮助我们分析和解决WebSocket连接断开的问题。通过采取相应的措施和工具，我们可以减少WebSocket连接断开的风险，提高Web应用的稳定性和可用性。

2024-08-20 22:24:52 994

原创 JS实现BST

二叉树就是最多有两个子节点，一个是左侧子节点，一个是右侧子节点。这个定义有助于我们写出更高效地在树中插入，查找和删除节点的算法。二叉搜索树（BST）是二叉树的一种，但是只允许你在左侧节点存储（比父节点）小的值，在右侧节点存储（比父节点）大的值。二叉树也是js数据结构以及算法中比较重要的，因为其树的结构是严格按照左小右大的规律插入的，那么就可以通过递归的思想去实现一些基本功能。包括中序，先序，后序排序等都是通过递归的思想。

2024-08-18 20:36:42 193

原创为什么用TS？TS如何编译到JS？AST是什么？

抽象语法树（）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，这所以说是抽象的，是因为抽象语法树并不会表示出真实语法出现的每一个细节，比如说，嵌套括号被隐含在树的结构中，并没有以节点的形式呈现。抽象语法树并不依赖于源语言的语法，也就是说语法分析阶段所采用的上下文无文文法，因为在写文法时，经常会对文法进行等价的转换（消除左递归，回溯，二义性等），这样会给文法分析引入一些多余的成分，对后续阶段造成不利影响，甚至会使合个阶段变得混乱。

2024-08-15 16:04:23 1786

原创 https原理

以下用简短的 Q&A 形式进行全文总结：Q：HTTPS 为什么安全？A：因为 HTTPS 保证了传输安全，防止传输过程被监听、防止数据被窃取，可以确认网站的真实性。Q：HTTPS 的传输过程是怎样的？A：客户端发起 HTTPS 请求，服务端返回证书，客户端对证书进行验证，验证通过后本地生成用于改造对称加密算法的随机数。通过证书中的公钥对随机数进行加密传输到服务端，服务端接收后通过私钥解密得到随机数，之后的数据交互通过对称加密算法进行加解密。Q：为什么需要证书？

2024-08-11 16:46:49 1003

原创事件循环与并发模型

当 bar 调用 foo 时，第二个帧被创建并被压入栈中，放在第一个帧之上，帧中包含 foo 的参数和局部变量。这为程序的分析提供了一些优秀的特性，包括：当一个函数执行时，它不会被抢占，只有在它运行完毕之后才会去运行任何其他的代码，才能修改这个函数操作的数据。在事件循环期间的某个时刻，运行时会从最先进入队列的消息开始处理队列中的消息。在下面的例子中，“这是一条消息” 将会在回调获得处理之前输出到控制台，这是因为延迟参数是运行时处理请求所需的最小等待时间，但并不保证是准确的等待时间。

2024-08-05 14:19:43 917

原创如何理解HTML、CSS、javascript

1、什么是HTML（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。2、CSS(层叠样式表 Cascading Style Sheets),用来定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})3、JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

2024-08-03 15:42:27 1421

原创 XSS和CSRF攻击和防御

前端安全防护是每一位开发者不容忽视的责任。通过深入理解XSS与CSRF攻击原理，结合输入验证、输出编码、启用CSP、使用Anti-CSRF Tokens、配置SameSite Cookie属性和强制HTTPS等策略，我们可以有效抵御这两种常见攻击，保障用户数据安全和网站稳定性。作为博主，我将持续分享前端安全领域的知识与实践经验，助力广大开发者共建更安全的网络环境。

2024-07-18 13:17:14 956

原创跨域是什么，怎么解决

概念：跨域:指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器览器对iavascript施加的安全限制。例如:a页面想获取b页面资源，如果a、b页面的议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都是限制了跨域访问，也就是不允许跨域请求资源。注意: 跨域限制访问，其实是浏览器的限制。理解这一点很重要!!

2024-07-16 19:35:12 802

原创浏览器弹出安全警告原因

一、日期时间不正确。这种情况会导致我们打开任何网站都会弹出安全警告，甚至有些加载了网页画面的其他app应用会白屏不显示。二、你访问的网站是https协议的，且该网站的sll证书过期了。就是网址的最前面是以https://****开头的网址。三、浏览器的设置问题。

2024-07-11 15:28:57 985

原创 http与https

服务端用私钥解密后，得到了客户端传过来的随机值(对称秘钥)，然后把内容通过该值进行对称加密，所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。）是一种透过计算机网络进行安全通信的传输协议。

2024-07-10 22:01:38 707

原创 ESM(ESModule)和CJS(CommonJS)的区别

从上面的例子可以看出，ESM在调用方法修改模块中的值后，引用这个值的地方也随着改变；就是因为CJS输出的是一个值的拷贝，而ESM输出的是值的引用；由于CJS是用于服务器端的模块体系，需要加载的模块都在本地，所以采用同步加载也不会出问题，但是ESM用于浏览器端时，可能涉及到一些异步请求，所以需要采用异步加载。因为CJS输出的是一个对象，该对象需要在脚本运行完成后才生成，而ESM的输出是静态的，在编译时就能生成。由于ESM是输出值的引用，所以不允许在外部直接修改值（对象修改或新增属性除外），否则报错；

2024-07-09 17:56:42 776

qq_65665724的博客