<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[JavaZwb的博客]]></title><description><![CDATA[我是小周，欢迎一块探讨问题ya~]]></description><link>https://blog.youkuaiyun.com/JavaZwb</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; JavaZwb]]></copyright><item><title><![CDATA[threejs-概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142408248</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142408248</guid><author>JavaZwb</author><pubDate>Sat, 21 Sep 2024 01:00:24 +0800</pubDate><description><![CDATA[Three.js 是基于原生 WebGL 封装的 3D 图形库，用于在 Web 浏览器中创建交互式的 3D 场景和图形效果。Three.js 默认使用右手坐标系，因为这是 OpenGL 默认的坐标系]]></description><category></category></item><item><title><![CDATA[canvas-概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142408230</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142408230</guid><author>JavaZwb</author><pubDate>Sat, 21 Sep 2024 00:43:12 +0800</pubDate><description><![CDATA[Canvas 上绘制图形是一种即时模式（immediate mode），一旦在 Canvas 上绘制了图形之后，Canvas 将不再知道这个图形的任何信息。被绘制的图形是可见的，但是你不能够操作这个图形，留在上面的只是一些像素这是 Canvas 和 SVG 不同的地方，SVG 图形是可以被单独操纵的，也可以被重新绘制。在 HTML5 canvas 中如果你想修改绘制的图形，你需要重新绘制所有的东西。]]></description><category></category></item><item><title><![CDATA[网络-websocket]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142373002</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142373002</guid><author>JavaZwb</author><pubDate>Sat, 21 Sep 2024 00:23:32 +0800</pubDate><description><![CDATA[WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次 HTTP 握手，两者之间就直接可以创建持久性的连接(长连接)，并进行双向数据传输]]></description><category></category></item><item><title><![CDATA[网络-TCP&UDP]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372993</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372993</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:37:33 +0800</pubDate><description><![CDATA[TCP 三次握手和四次挥手，TCP如何保证可靠传输？对比DCP有哪些区别]]></description><category></category></item><item><title><![CDATA[网络-http概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372986</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372986</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:35:15 +0800</pubDate><description><![CDATA[在 HTTP/1.1 存在 Pipelining 技术可以完成这个多个请求同时发送，但是由于浏览器默认关闭，所以可以认为这是不可行的。在 HTTP2 中由于 Multiplexing 特点的存在，多个 HTTP 请求可以在同一个 TCP 连接中并行进行]]></description><category></category></item><item><title><![CDATA[浏览器-网页通信]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372972</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372972</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:33:32 +0800</pubDate><description><![CDATA[同源策略是浏览器的安全策略。如果两个页面的协议、端口和主机都相同，则它们具有相同的源，非同源页面交互会受到限制。跨域通信方法包括jsonp、iframe、websocket、nginx、postMessage等方法。如果是同源跨页面通信，可以用BroadcastChannel、Service Worker、LocalStorage和storageEvent等方法]]></description><category></category></item><item><title><![CDATA[浏览器-http缓存和本地存储]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372958</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372958</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:28:24 +0800</pubDate><description><![CDATA[http缓存分为强缓存和协商缓存，协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义，大部分 web 服务器都默认开启协商缓存，而且是同时启用两种协商缓存浏览器。本地存储包括 localStorage、sessionStorage、cookie、indexDB]]></description><category></category></item><item><title><![CDATA[浏览器-概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372943</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372943</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:23:14 +0800</pubDate><description><![CDATA[以 Google Chrome 为例，chrome 是一个多进程架构。输入 url 到响应发生了什么？1. 输入判断。判断输入为 URL 还是搜索内容，如果为 URL，就将 URL 通过 IPC（进程间通信）传给网络请求进程并由它发起请求。2. http 资源缓存检查。3. DNS 解析。解析域名并返回对应的 IP 地址，浏览器会做缓存。(如果是 https，还会建立 TLS 连接)4. TCP 连接。TCP 三次握手5. 发送 HTTP 请求等等]]></description><category></category></item><item><title><![CDATA[CSS-概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372937</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372937</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:19:38 +0800</pubDate><description><![CDATA[常用：display: inline-block 或 overflow:hidden。块级格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。可以控制元素状态和布局，常见 block/none/inline/inline-block/flex/grid/…参考 https://renjianzhide.com/archives/flex-basis-width]]></description><category></category></item><item><title><![CDATA[vue-组件渲染概述]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372930</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372930</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:18:16 +0800</pubDate><description><![CDATA[vue 会基于 AST 将模板语言编译成 `render` 函数，该函数会返回一个虚拟 DOM 对象。使用 nextTick 需要放在修改响应式数据之后，就是为了让 nextTick 的回调添加到微任务队列时，排在 flusobs 方法之后，保证能够在 nextTick 回调中拿到最新的 dom]]></description><category></category></item><item><title><![CDATA[vue-响应式原理]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372920</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372920</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:15:54 +0800</pubDate><description><![CDATA[Proxy 是 vue3 实现响应式更新的基石。这个 api 的作用是代理对象，可以拦截对对象的操作，vue3 主要用到了 Proxy 的两个 api 来实现响应式数据。实现响应式的 api 由改为proxy副作用 effect（代替 vue2 的 Observer、Watcher 模块）其他的还有 Composition API、缓存事件处理函数、Block Tree、拥抱 ts等]]></description><category></category></item><item><title><![CDATA[webpack-构建优化]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372911</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372911</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:11:54 +0800</pubDate><description><![CDATA[从构建速度、包体积、应用性能、开发体验等角度出发做一些优化措施]]></description><category></category></item><item><title><![CDATA[webpack-loader&plugin]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372875</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372875</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 01:05:22 +0800</pubDate><description><![CDATA[Loader让Webpack拥有了加载和解析非JavaScript文件的能力，Webpack原生只能解析js/json文件，如果想将其他文件（如CSS、图片、Vue组件等）打包进项目中，就需要用到loader。Loader可以将这些文件转换成Webpack能够处理的有效模块，进而被添加到依赖图中。Plugin则扩展了Webpack的功能，允许开发者在Webpack构建流程中执行更广泛的任务。Plugin不直接操作文件，而是基于事件机制工作，监听Webpack打包过程中的某些节点并执行相关操作]]></description><category></category></item><item><title><![CDATA[webpack-构建流程]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372857</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372857</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 00:59:25 +0800</pubDate><description><![CDATA[1. 初始化配置
2. 实例化一个 `Compiler` 类，注册所有的插件 `plugin`，给对应的 Webpack 的生命周期绑定 hooks
3. 开始编译：执行 Compiler 类的 run 方法开始构建
4. 实例化一个 `Compilation` 类，Compilation 是做构建打包的事情
5. 递归完后得到每个文件的最终结果，根据 entry 生成代码块 `chunk`
6. 输出
 ]]></description><category></category></item><item><title><![CDATA[React-router原理]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372843</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372843</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 00:56:06 +0800</pubDate><description><![CDATA[单页面应用的路由原理差不多，都是基于浏览器的 history API 管理历史浏览记录，通过监听 history 对象的变化（onpopstate） 或 hash 的变化（hashchange），抹平两者的差异，统一路由的对象（history）和操作函数。]]></description><category></category></item><item><title><![CDATA[React-diff原理]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372831</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372831</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 00:55:12 +0800</pubDate><description><![CDATA[传统 diff 算法的复杂度为 O(n^ 3)，显然这是无法满足性能要求的。React 通过制定一个特定的策略，将 O(n^3) 复杂度的问题转换成 O(n) 复杂度的问题。]]></description><category></category></item><item><title><![CDATA[React-合成事件]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372807</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372807</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 00:50:57 +0800</pubDate><description><![CDATA[其实 React 的事件机制就是一个典型的事件代理，将所有 DOM 节点的事件代理到根节点上统筹处理]]></description><category></category></item><item><title><![CDATA[React-组件通信]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142372802</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142372802</guid><author>JavaZwb</author><pubDate>Fri, 20 Sep 2024 00:48:16 +0800</pubDate><description><![CDATA[React 组件通信主要有父子通信 props/callback、React Context 和 Redux/Mobx。]]></description><category></category></item><item><title><![CDATA[React-Hook原理]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142347151</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142347151</guid><author>JavaZwb</author><pubDate>Thu, 19 Sep 2024 00:46:17 +0800</pubDate><description><![CDATA[React 16 引入了 Fiber 架构，会基于 ReactElement 生成唯一的 Fiber 对象。在更新阶段，会基于旧的 Fiber 链表创建一个新的 Fiber 链表(如下图)，可以复用旧的对象，并且获取旧 Hook 的状态。无论是初次挂载还是更新，每调用一次 Hook 函数，都会产生一个 Hook 对象与之对应，产生的 Hook 对象依次排列，形成链表存储到函数组件 Fiber.memoizedState 上。在这个过程中，有一个十分重要的指针：workInProgressHook]]></description><category></category></item><item><title><![CDATA[React-更新组件的三个阶段和源码解释]]></title><link>https://blog.youkuaiyun.com/JavaZwb/article/details/142347138</link><guid>https://blog.youkuaiyun.com/JavaZwb/article/details/142347138</guid><author>JavaZwb</author><pubDate>Thu, 19 Sep 2024 00:44:15 +0800</pubDate><description><![CDATA[React 更新组件其实可以分为三个阶段：
- `Scheduler`。任务优先级分配和调度
- `Render`。更新组件内部状态，diff 计算 change
- `Commit`。应用 change，执行副作用]]></description><category></category></item></channel></rss>