该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
自定义ref实现防抖首先是一个防抖最基本的实现：
123456789101112131415161718<template> <div class="container"> <input @input="debounceInputHandler" type="text" /> <p class="result">{{ text }}</p> </div></template><script setup>import { ref } from 'vue'import { debounce } from 'lodash'const text = ref('')function inputHandl ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
懒加载IntersectionObserverIntersectionObserver 是一个现代浏览器 API，用于检测一个元素（或其子元素）相对于视口或某个祖先元素的可见性变化。
基本用法
1const ob = new IntersectionObserver(callback, options);
callback: 当被观察元素的可见性变化时调用的回调函数，callback 一开始会触发一次，确认当前的可视状态（无论当前是可见还是不可见），之后在每次可视状态发生改变时会触发。回调函数里面有两个参数：
entries: 一个数组，包含所有被观察元素的 IntersectionObserverEntry 对象，每个对象包含以下属性：
boundingClientRect: 被观察元素的矩形区域信息。
intersectionRatio: 被观察元素的可见部分与整个元素的比例。
intersectionRect: 可见部分的矩形区域信息。
isIntersecting: 布尔值，表示元素是否与根元素相交。
r ...
题目描述实现一个简单的 defineStore 函数。
counter.js12345678910111213141516import { ref, computed } from "vue";/** * 类 Pinia defineStore 函数 * @param {Function} fn 仓库函数 */function defineStore(fn) {}export const useCounterStore = defineStore(() => { const count = ref(0); function increment() { count.value++; } return { count, increment };});
实现思路
基础功能实现根据 Pinia 中 defineStore 的用法，该函数应返回一个可调用函数（如 useCounterStore），该函数执行时会 ...
前端开发
未读题目描述123456789/** * 实现一个函数满足以下需求: * 依次顺序执行一系列任务 * 所有任务全部完成后可以得到每个任务的执行结果 * 需要返回两个方法，start用于启动任务，pause用于暂停任务 * 每个任务具有原子性，即不可中断，只能在两个任务之间中断 * @param {...Function} tasks 任务列表，每个任务无参，异步 */function processTasks(...tasks) {}
实现思路
函数基本结构根据题目要求，我们需要返回包含 start 和 pause 两个方法的对象。start 方法用于启动任务队列的执行，pause 方法用于暂停执行。
12345678function processTasks(...tasks) { return { // 启动任务 start() {}, // 暂停任务 pause() {}, };}
任务状 ...
前端开发
未读该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
Web Worker在运行大型或者复杂的 JavaScript 脚本的时候经常会出现浏览器假死的现象，这是由于 JavaScript 这个语言在执行的时候是采用单线程来执行而导致的。采用同步执行的方式进行运行，如果出现阻塞，那么后面的代码将不会执行。例如：
1while (true) {}
那么能不能让这些代码在后台运行，或者让 JavaScript 函数在多个进程中同时运行呢？
HTML5 所提出的 Web Worker 正是为了解决这个问题而出现的。
HTML5 的 Web Worker 可以让 Web 应用程序具备后台的处理能力。它支持多线程处理功能，因此可以充分利用多核 CPU 带来的优势，将耗时长的任务分配给 HTML5 的 Web Worker 运行，从而避免了有时页面反应迟缓，甚至假死的现象。
本文将分为以下几个部分来介绍 Web worker：
Web Worker 概述
Web Worker 使用示例
使用 Web Worker 实现跨标签页通信
Web worker 概述在 ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
浏览器跨标签页通信本文主要包含以下内容：
什么是跨标签页通信
跨标签页通信常见方案
BroadCast Channel
Service Worker
LocalStorage window.onstorage 监听
Shared Worker 定时器轮询（ setInterval ）
IndexedDB 定时器轮询（ setInterval ）
cookie 定时器轮询（ setInterval ）
window.open、window.postMessage
Websocket
什么是跨标签页通信面试的时候经常会被问到的一个关于浏览器的问题：
浏览器中如何实现跨标签页通信？
要回答这个问题，首先需要搞懂什么叫做跨标签通信。
其实这个概念也不难理解，现在几乎所有的浏览器都支持多标签页的，我们可以在一个浏览器中打开多个标签页，每个标签页访问不同的网站内容。
因此，跨标签页通信也就非常好理解了，简单来讲就是一个标签页能够发送信息给另一个标签页。
常见的跨标签页方案如下：
BroadCast Channel ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
浏览器缓存本文主要包含以下内容：
什么是浏览器缓存
按照缓存位置分类
Service Worker
Memory Cache
Disk Cache
Push Cache
按照缓存类型分类
强制缓存
协商缓存
缓存读取规则
浏览器行为
实操案例
缓存的最佳实践
什么是浏览器缓存在正式开始讲解浏览器缓存之前，我们先来回顾一下整个 Web 应用的流程。
上图展示了一个 Web 应用最最简单的结构。客户端向服务器端发送 HTTP 请求，服务器端从数据库获取数据，然后进行计算处理，之后向客户端返回 HTTP 响应。
那么上面整个流程中，哪些地方比较耗费时间呢？总结起来有如下两个方面：
发送请求的时候
涉及到大量计算的时候
一般来讲，上面两个阶段比较耗费时间。
首先是发送请求的时候。这里所说的请求，不仅仅是 HTTP 请求，也包括服务器向数据库发起查询数据的请求。
其次是大量计算的时候。一般涉及到大量计算，主要是在服务器端和数据库端，服务器端要进行计算这个很好理解，数据库要根据服务器发送过来的查询命令查询到对 ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
File API本文主要包含以下内容：
File API 介绍
File 对象
构造函数
实例属性和实例方法
FileList 对象
FileReader 对象
综合实例
File API 介绍我们知道，HTML 的 input 表单控件，其 type 属性可以设置为 file，表示这是一个上传控件。
1<input type="file" name="" id="" />
选择文件前：
选择文件后：
这种做法用户体验非常的差，我们无法在客户端对用户选取的文件进行验证，无法读取文件大小，无法判断文件类型，无法预览（只能先上传到服务器拿到链接地址后客户端才能预览）。
如果是多文件上传，JavaScript 更是回天乏力。
1<input type="file" name="" id="" multiple />
但现在有了 HTML5 提供的 File A ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
IndexedDB本文主要包含以下内容：
IndexedDB 简介
IndexedDB 重要概念
IndexedDB 实操
操作数据库
插入数据
读取数据
更新数据
删除数据
IndexedDB 简介随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。
现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。
MDN 官网是这样解释 IndexedDB 的：
IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储 ...
该笔记的内容主要来自本人在学习渡一课程的配套资料和个人总结而成
浏览器的组成部分什么是浏览器？
Web 浏览器简称为浏览器，是一种用于访问互联网上信息的应用软件。浏览器的主要功能是从服务器检索 Web 资源并将其显示在 Web 浏览器窗口中。
Web 资源通常是 HTML 文档，但也可能是 PDF、图像、音频、视频或其他类型的内容。资源的位置是通过使用 URI（统一资源标识符）指定的。
浏览器包含结构良好的组件，这些组件执行一系列任务让浏览器窗口能显示 Web 资源。
本文我们就来聊一聊关于浏览器的组成部分。
下图是关于浏览器的架构图：
一个 Web 浏览器中，主要组件有：
用户界面（user interface）
浏览器引擎（browser engine）
渲染引擎（rendering engine）
网络（networking）
JS 解释器（JavaScript interpreter）
用户界面后端（UI backend）
数据存储/持久化（data storage/persistence）
下面我们来具体看一下每一个部分的作用。
用 ...
