Javascript

http1、http2、http3的特点和解析

HTTP2采用二进制格式传输,取代了HTTP1.x的文本格式,二进制格式解析更高效。 多路复用代替了HTTP1.x的序列和阻塞机制,所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中,并发多个请求需要多个TCP连接,浏览器为了控制资源会有6-8个TCP连接都限制(chrome限制为6个)。 HTTP2中同域名下所有通信都在单个连接上完成,消除了因多个 TCP 连接而带来的延时和内 […]

JS 事件轮询机制,以及宏任务队列与微任务队列

先看一道经典的面试题: 这道题主要考察的是事件循环中函数执行顺序的问题,其中包括async ,await,setTimeout,Promise函数。下面来说一下本题中涉及到的知识点。 笔记结尾会分析该道题的逻辑,我们先复习一下题目涉及的知识点。 目录 一、为什么JavaScript是单线程? 二、事件轮询(Event Loop) 三、宏任务和微任务 四、举例说明示例(重要) 五、总结 一、为什么J […]

JS 深度优先遍历(DFS)和广度优先遍历(BFS)

在开发页面的时候,我们有时候会遇到这种需求:在页面某个dom节点中遍历,找到目标dom节点,我们正常做法是利用选择器document.getElementById(),document.getElementsByName()或者document.getElementsByTagName(),但在本文,我们从算法的角度去查找dom节点,同时理解一下深度优先遍历(DFS)和广度优先遍历(BFS)的原理 […]

JS 的防抖和节流的解释与运用

防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死。所以还是很有必要早点掌握的。 场景:监听滚动条实现回到顶部功能 返回按钮只会在滚动到距离顶部一定位置之后才出现,那么我们现在抽象出这个功能需求– 监听浏览器滚动事件,返回当前滚条与顶部的距离。这个需求很简单,直接写: 但是,在运行的时候会发现存在一个问题:这个函数的默认执行频 […]

JS 中 call、apply、bind 的用法解析

目录 apply 和 call 的异同 apply 和 call 的用法 call 和 bind 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已。 每个函数都包含两个非继承而来的方法:call()和apply();在JavaScript中,call和apply作用是一样的,都是为了改变某 […]

Async/Await 替代 Promise 的 6 个理由

目录 Async/Await 简介 Async/Await 语法 为什么 Async/Await 更好? Node.js 7.6 已经支持 async/await 了,而且非常值得尝试。 Async/Await 简介 async/await 是写异步代码的新方式,以前的方法有回调函数和Promise。 async/await 是基于 Promise 实现的,它不能用于普通的回调函数。 async/ […]

JS 异步编程的六种方法

目录 前言 一、同步与异步 二、回调函数(Callback) 三、事件监听 四、发布订阅 五、Promise/A+ 六、生成器Generators/ yield 七、async/await 总结 前言 我们知道Javascript语言的执行环境是”单线程”。也就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务。 这种模式虽然实现起来 […]

对 VUE 的虚拟 DOM 的一点理解

目录 摘要 模板转换成视图的过程 Virtual DOM 是什么? Virtual DOM 作用是什么? 为何需要Virtual DOM? diff 算法 diff 算法的实现过程 摘要 Vue.js 2.0 之后引入 Virtual DOM, 比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是Virtual DOM?为什么需要Virtual DOM?它是通过什 […]

如何在 CSS 中引入 JS 变量

一、在传统前端开发中实现 在 JS 中定义: 在 CSS 中引用: 作用于跟 js 变量类似: 也就是说,变量的作用域就是它所在的选择器的有效范围。 二、在 Vue 中实现 下面介绍怎样才能在 vue3 的 <style> 中使用 <script> 里声明的变量: 首先创建一个支持 vue3 的 vite 项目 然后在组件中这样使用: 首先要在<style>标签中写个vars=& […]

js 将字符串“true”、“false”转换成 true、false

日常工作中难免会碰到需将字符串 “true”、“false” 转换成 boolean 类型的 true、false 的情况; 例如将 true、false 存储在 local storage 或者 session storage 中时,会被转换成字符串类型 “true”、“false”,此时通过 localStorage.getItem 取出来的值是 string 而不是 boolean,故不能直 […]