__lucas-优快云博客

原创 threejs-概述

Three.js 是基于原生 WebGL 封装的 3D 图形库，用于在 Web 浏览器中创建交互式的 3D 场景和图形效果。Three.js 默认使用右手坐标系，因为这是 OpenGL 默认的坐标系

2024-09-21 01:00:24 524

Canvas 上绘制图形是一种即时模式（immediate mode），一旦在 Canvas 上绘制了图形之后，Canvas 将不再知道这个图形的任何信息。被绘制的图形是可见的，但是你不能够操作这个图形，留在上面的只是一些像素这是 Canvas 和 SVG 不同的地方，SVG 图形是可以被单独操纵的，也可以被重新绘制。在 HTML5 canvas 中如果你想修改绘制的图形，你需要重新绘制所有的东西。

2024-09-21 00:43:12 1654

原创网络-websocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次 HTTP 握手，两者之间就直接可以创建持久性的连接(长连接)，并进行双向数据传输

2024-09-21 00:23:32 362

原创网络-TCP&UDP

TCP 三次握手和四次挥手，TCP如何保证可靠传输？对比DCP有哪些区别

2024-09-20 01:37:33 220

原创网络-http概述

在 HTTP/1.1 存在 Pipelining 技术可以完成这个多个请求同时发送，但是由于浏览器默认关闭，所以可以认为这是不可行的。在 HTTP2 中由于 Multiplexing 特点的存在，多个 HTTP 请求可以在同一个 TCP 连接中并行进行

2024-09-20 01:35:15 920

原创浏览器-网页通信

同源策略是浏览器的安全策略。如果两个页面的协议、端口和主机都相同，则它们具有相同的源，非同源页面交互会受到限制。跨域通信方法包括jsonp、iframe、websocket、nginx、postMessage等方法。如果是同源跨页面通信，可以用BroadcastChannel、Service Worker、LocalStorage和storageEvent等方法

2024-09-20 01:33:32 790

原创浏览器-http缓存和本地存储

http缓存分为强缓存和协商缓存，协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义，大部分 web 服务器都默认开启协商缓存，而且是同时启用两种协商缓存浏览器。本地存储包括 localStorage、sessionStorage、cookie、indexDB

2024-09-20 01:28:24 643

原创浏览器-概述

以 Google Chrome 为例，chrome 是一个多进程架构。输入 url 到响应发生了什么？1. 输入判断。判断输入为 URL 还是搜索内容，如果为 URL，就将 URL 通过 IPC（进程间通信）传给网络请求进程并由它发起请求。2. http 资源缓存检查。3. DNS 解析。解析域名并返回对应的 IP 地址，浏览器会做缓存。(如果是 https，还会建立 TLS 连接)4. TCP 连接。TCP 三次握手5. 发送 HTTP 请求等等

2024-09-20 01:23:14 717

原创 CSS-概述

常用：display: inline-block 或 overflow:hidden。块级格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。可以控制元素状态和布局，常见 block/none/inline/inline-block/flex/grid/…参考 https://renjianzhide.com/archives/flex-basis-width

2024-09-20 01:19:38 629

原创 vue-组件渲染概述

vue 会基于 AST 将模板语言编译成 `render` 函数，该函数会返回一个虚拟 DOM 对象。使用 nextTick 需要放在修改响应式数据之后，就是为了让 nextTick 的回调添加到微任务队列时，排在 flusobs 方法之后，保证能够在 nextTick 回调中拿到最新的 dom

2024-09-20 01:18:16 519

原创 vue-响应式原理

Proxy 是 vue3 实现响应式更新的基石。这个 api 的作用是代理对象，可以拦截对对象的操作，vue3 主要用到了 Proxy 的两个 api 来实现响应式数据。实现响应式的 api 由改为proxy副作用 effect（代替 vue2 的 Observer、Watcher 模块）其他的还有 Composition API、缓存事件处理函数、Block Tree、拥抱 ts等

2024-09-20 01:15:54 910

原创 webpack-构建优化

从构建速度、包体积、应用性能、开发体验等角度出发做一些优化措施

2024-09-20 01:11:54 670

原创 webpack-loader&plugin

Loader让Webpack拥有了加载和解析非JavaScript文件的能力，Webpack原生只能解析js/json文件，如果想将其他文件（如CSS、图片、Vue组件等）打包进项目中，就需要用到loader。Loader可以将这些文件转换成Webpack能够处理的有效模块，进而被添加到依赖图中。Plugin则扩展了Webpack的功能，允许开发者在Webpack构建流程中执行更广泛的任务。Plugin不直接操作文件，而是基于事件机制工作，监听Webpack打包过程中的某些节点并执行相关操作

2024-09-20 01:05:22 988

原创 webpack-构建流程

1. 初始化配置2. 实例化一个 `Compiler` 类，注册所有的插件 `plugin`，给对应的 Webpack 的生命周期绑定 hooks3. 开始编译：执行 Compiler 类的 run 方法开始构建4. 实例化一个 `Compilation` 类，Compilation 是做构建打包的事情5. 递归完后得到每个文件的最终结果，根据 entry 生成代码块 `chunk`6. 输出

2024-09-20 00:59:25 1098

原创 React-router原理

单页面应用的路由原理差不多，都是基于浏览器的 history API 管理历史浏览记录，通过监听 history 对象的变化（onpopstate）或 hash 的变化（hashchange），抹平两者的差异，统一路由的对象（history）和操作函数。

2024-09-20 00:56:06 583

原创 React-diff原理

传统 diff 算法的复杂度为 O(n^ 3)，显然这是无法满足性能要求的。React 通过制定一个特定的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。

2024-09-20 00:55:12 496

原创 React-合成事件

其实 React 的事件机制就是一个典型的事件代理，将所有 DOM 节点的事件代理到根节点上统筹处理

2024-09-20 00:50:57 699

原创 React-组件通信

React 组件通信主要有父子通信 props/callback、React Context 和 Redux/Mobx。

2024-09-20 00:48:16 575

原创 React-Hook原理

React 16 引入了 Fiber 架构，会基于 ReactElement 生成唯一的 Fiber 对象。在更新阶段，会基于旧的 Fiber 链表创建一个新的 Fiber 链表(如下图)，可以复用旧的对象，并且获取旧 Hook 的状态。无论是初次挂载还是更新，每调用一次 Hook 函数，都会产生一个 Hook 对象与之对应，产生的 Hook 对象依次排列，形成链表存储到函数组件 Fiber.memoizedState 上。在这个过程中，有一个十分重要的指针：workInProgressHook

2024-09-19 00:46:17 599

原创 React-更新组件的三个阶段和源码解释

React 更新组件其实可以分为三个阶段：- `Scheduler`。任务优先级分配和调度- `Render`。更新组件内部状态，diff 计算 change- `Commit`。应用 change，执行副作用

2024-09-19 00:44:15 809

原创 React-Fiber原理

在 React 16 之前，更新虚拟 DOM 的过程称为 `Stack Reconciler`，这是一个递归的过程，在层级很深的时候，单次 diff 时间过长会让 JS 线程持续被占用，导致用户交互响应迟滞，页面渲染会出现明显的卡顿。为了解决这种问题，react 团队基于 Fiber 架构重构了 React，使其能够将任务分片，划分优先级，同时能够实现类似于操作系统中对线程的抢占式调度

2024-09-19 00:43:01 1127

原创 typescript-tsconfig文件解释

重要字段- files - 设置要编译的文件的名称；- include - 设置需要进行编译的文件，支持路径模式匹配；- exclude - 设置无需进行编译的文件，支持路径模式匹配；- compilerOptions - 设置与编译流程相关的选项。部分选项及其作用参考：

2024-09-19 00:22:45 366

原创 typescript-工具泛型

学习ts的工具泛型源码，可以帮我们更好地做类型编程，涉及keyof/in/extends/infer/Record/Pick/Exclude/Extract/Omit/Partial/...

2024-09-19 00:21:01 435

原创 typescript-基础入门

JavaScript 是一门弱类型语言，变量的数据类型具有动态性，只有执行时才能确定变量的类型。通过这种方式限制 obj 的属性类型，在赋值时只能是添加 name 属性，并且不能给 name 赋值 string 以外的类型；每当你获取 obj 属性的值时，会在编译阶段检查该属性是否存在，不存在会提前抛出类型错误。typescript在变量声明之前做好类型定义，并通过提前暴露和修复这些可能出现的类型错误，可以大大降低应用在运行时出现错误的概率，使得 javascript 应用更加健壮，这一切得益于类型思维。

2024-09-19 00:19:17 1105

原创 javascript-DOM&BOM

`DOM` 是 `JavaScript` 操作网页的接口，全称为“文档对象模型”（`Document Object Model`）。它的作用是将网页转为一个 `JavaScript` 对象，从而可以通过脚本对网页元素进行操作，浏览器会根据 `DOM` 模型，将结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（`DOM Tree`）；而BOM指的是浏览器提供了各种接口，让 JavaScript 脚本可以控制浏览器的各种功能

2024-09-19 00:17:27 1112

原创 javascript-错误处理

JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供 Error 构造函数，所有抛出的错误都是这个构造函数的实例。该实例主要有以下几个属性：- `message`：错误提示信息- `name`：错误名称（非标准属性）- `stack`：错误的堆栈（非标准属性）

2024-09-19 00:15:47 510

原创 javascript-请求处理

js请求处理主要有两种方式，ajax和fetch，分别介绍这两种方式的使用和区别

2024-09-19 00:14:05 321

原创 javascript-事件机制

可以通过 `Event` 和 `CustomEvent` 定义事件，`CustomEvent` 继承自 `Event` 对象，并且可以传递额外的数据，而且可以在 Web Worker 中使用。浏览器的事件模型，指的是事先监听某些事件，然后在事件发生后，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式

2024-09-19 00:12:23 536

原创 javascript-异步编程

js异步编程，包括promise、generator、async/await的使用和原理介绍

2024-09-19 00:11:03 969

原创 javascript-class使用和实现原理

其实 es6 的 class 就是一个语法糖，是基于原型去实现的。先创建一个关于 Animal 的类。下面通过 extends 关键字实现对 Animal 的继承。extends 本质上是基于寄生式组合继承来实现的。其实早期 js 实现继承还有好几种方式，可以参考。，主要会经历几个步骤。

2024-09-19 00:08:06 416 1

原创 javascript-原型和原型链

每个函数都有一个默认的原型对象 - `prototype` ，通过 `prototype` 我们可以扩展 js 的内置对象。一个函数和它创建的实例共享这个函数的原型属性和方法。实例对象的 `constructor` 会指向构造函数。每个实例对象都会有一个隐式原型属性 `__proto__`，通过 `__proto__` 指针指向创建该对象的构造函数的原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 `Object.prototype`，而 `Object.prototype

2024-09-19 00:04:55 598

空空如也

空空如也