- 博客(36)
- 收藏
- 关注
RSS订阅原创 基于Koa实现的服务端渲染 ✅
这篇文章持续更新，涉及到的技术栈是Koa、Vue和Vite。但是现在能上生产的服务端渲染估计是Next（配合React）和Nuxt（配合Vue）用的比较多。关于Next框架的学习见，也将持续更新。
2025-05-01 18:41:06
692
原创 Vite性能优化指南 ✅
所以我们的需求很简单：有没有办法让lodash被打包到一个单独的chunk中，后续浏览器只在第一次加载的时候请求这个chunk即可，后续都读缓存，以提高响应速度？，每一次更新我们修改的只是业务代码，lodash这些第三方包的代码我们肯定是不会改动的，但是每一次更新（甚至是每一次刷新）浏览器都得重新请求一次lodash的代码。一起被打包到同一个chunk中，且chunk的命名是通过哈希的方法来生成的，只要业务代码发生改动，那么chunk的命名几乎就会改变。组件相关的代码被抽离为一个单独的chunk。
2025-04-29 15:49:51
939
原创 ✅ 消息订阅与发布 & defineProperty & Proxy & deepProxy
但是使用这玩意的时候要注意处理监听和触发的顺序问题，即保证在emit之前你的eventName已经正确的被on监听到。这个坑在异步操作的时候可能会出现，其他倒没啥难的。
2025-03-13 00:50:56
381
原创 React的Fiber小记 ⏰
写在最前：绝对是错漏百出的一篇博文，很多内容还没有写demo去验证，特别是浏览器的帧渲染那一块，权当小记。此外，本文内容大量参考了，以及。
2024-12-01 05:32:17
778
原创 内存泄漏 & 性能检测相关问题 & WeakMap和Map ✅
在「浏览器-控制台-内存」选项里，可以看到与网页相关的内存使用情况数值，而且控制台还提供的「拍摄快照」功能可以查看不同的JS代码、HTML标签等东西所占用的内存的情况（事件监听器：添加到 DOM 元素上的事件监听器，尤其是如果没有被清理，可能会导致内存持续占用。
2024-11-25 01:50:56
916
原创 跨域相关的一些问题 ✅
当网页从一个源（https://baidu.com）请求另一个源（如 https://taobao/api）的资源时，就发生了跨域。由于安全原因（防止恶意网站通过脚本访问用户在其他网站上的数据），浏览器对跨域请求设置了限制，这样的机制称为同源策略。
2024-11-23 04:41:06
1462
原创 position & zIndex & float & filter ✅
这玩意是默认值，元素进行排列，不会受到top、right、bottom、left属性的影响。
2024-11-23 01:06:26
919
原创 移动端相关 & BFC & CSS原子化 ✅
设备宽度是指设备屏幕的实际物理宽度，通常以像素（px）表示。。不同设备（如手机、平板、桌面等）有不同的设备宽度。常被提及的视口可被分为3种：布局视口、视觉视口和理想视口。如下：，user-scalable=no即不允许用户缩放，initial-scale=1.0即初始缩放比例为1，maximun-scale和minimun-scale分别为最大缩放比例和最小缩放比例。此时你可以在控制台里观察到body的宽度被改为了2000px，但是这种方法和直接修改body的width不同。
2024-11-22 20:39:00
979
1
原创 JS的变量提升 & 数字相关 & for循环 & WebWorker ✅
但是for_in也可以用于循环可迭代对象，只是得到的是索引或者key。只是不推荐这么做罢了，因为for_in不保证便利顺序（虽然大多数情况下是顺序的），而且for_in每次都得走原型链来查找原型上可枚举的key，所以性能会低于其他迭代方法。至于for_in和for_of，for_in主要用于循环遍历对象的可枚举属性，但包括原型链上的属性；（包括 Array、Map、Set、String、TypedArray、arguments 对象等）。转换成整数，第二个参数是进制数，如果省略第二个参数，则默认是 10。
2024-11-22 01:24:30
1097
原创 JS的Promise & ES6模块化 & Commonjs模块化 ✅
首先，JavaScript自始至终都是一门单线程语言。其次，“宏任务”、“微任务”、“事件循环”这些名词都是异步代码里面才有的概念。Q：requestAnimationFrame的执行时机是什么时候？A：在一轮事件循环中，微任务清空之后，下一帧渲染开始之前。
2024-11-21 21:51:45
1144
原创 重绘&重排、CSS树&DOM树&渲染树、动画加速 ✅
浏览器下载完页面中的所有组件，HTML标记、JavaScript、CSS、图片后，之后会解析并生成两个内部数据结构：DOM树和渲染树。DOM树表示页面结构，渲染树表示DOM节点如何显示。——《高性能JavaScript》DOM树中的每一个需要显示的节点在渲染树中至少要存在一个对应的节点但是opacity为0的元素和visibility为hidden的元素虽然在屏幕上不可见，但是仍然存在于渲染树中，因为仍然在文档流中占有位置）。
2024-11-21 17:39:43
1095
原创 React的API✅（包括手写简单的mobx）
createContext要和useContext配合使用，可以理解为，事实上redux就是用context来实现的。但是一番操作下来我还是感觉，简单的context对视图的更新的细粒度把控比不上mobx，除非配合memo等优化手段来优化。为什么说“简单的context对视图的更新的细粒度把控比不上mobx”？
2024-11-20 16:41:42
1273
1
原创 React的hook✅
这是为了确保每次组件渲染时，Hooks 的调用顺序保持一致。React。每当一个函数组件被渲染时，所有的 hook 调用都是按照从上到下的顺序依次执行的。React 内部会维护一个状态列表，这个列表中的每个状态项都对应一个 hook 的调用，包括 useState、useEffect 等。当你调用 useState(initialValue) 时，React 会在内部为这个状态分配一个索引。该索引基于 hook 调用的顺序。例如，。Q：既然每次视图的更新都会重新执行整个函数，那必然会执行到这句代码。
2024-11-20 01:22:50
851
原创 JS文件相关✅
写在最前：文件存储到磁盘最终都是二进制数据。当你上传文件时，浏览器会将文件读取为 File 对象，而这个对象内部实际上包含的是二进制数据。File 是 Blob 的子类，也就是说，File 继承了 Blob 的所有功能。两者都用于表示文件的二进制数据。File 对象一般用于表示用户在文件输入控件中选择的文件，它比Blob多提供了文件在磁盘上的信息（如名称、大小、类型、最后修改时间等）。Blob 表示一段原始数据的不可变对象。
2024-11-19 01:20:31
855
原创 JS的对象 & Proxy & 手搓深拷贝 ✅
构造函数名的首字母要大写， 要用new调用。使用new操作符调用构造函数会执行以下操作：1. 在堆中创建一个新对象2. 这个新对象内部的[[Prototype]]特性被赋值为构造函数的prototype属性3. 构造函数内部的this被赋值为这个在堆中创建的新对象4. 执行构造函数内部的代码（给新对象添加属性）5. 如果构造函数返回非空对象，则返回该对象，否则返回刚创建的新对象把实例名理解成一个至关重要。构造函数也是函数，构造函数和普通函数唯一的区别是调用的方法不同。
2024-11-18 21:29:42
876
1
原创 计算机网络 & 浏览器的首次渲染相关 ⏰
后浏览器发送了100个HTTP请求，再假设百度他们的服务端假设用的是Tomcat，首先浏览器会和Tomcat建立一个socket连接，当Tomcat收到浏览器的HTTP请求，而且请求头的connection的值为keep-alive时，则在返回响应数据后socket仍会保持活跃，当浏览器再次发送HTTP请求的时候，不必建立新的TCP连接。），所以TCP连接的两端都设置有发送缓存（准备发送的数据&已发送但尚未收到确认的数据）和接收缓存（按序抵达但尚未被接受应用程序读取的数据&不按序抵达的数据）。
2024-03-27 21:42:18
1011
原创 JS的函数、作用域和闭包✅
先来一段小小的无厘头代码因为fun函数在被定义的时候，其作用域就已经被确定了，是与fun函数声明的同级的1。在某个作用域中所有变量的集合就叫做变量对象。如果我想这样写了一段很奇怪的代码：此时arguments和this和foo都是函数fun作用域里面的变量，他们都是fun作用域的变量对象身上的变量。很绕的一句话，还好我之前在红宝书很细致的读了这一章……函数只有被调用的时候，代码流才回进入到函数中，函数才会被推到执行栈上，典中典的一句话。在js中每个函数都存在一个隐式的属性[[scopes]]，这个属性用
2024-03-17 22:30:14
1391
1
原创 关于webpack5中的性能优化问题⚠️
，而且他们都同时引用了fun这个函数，如果只是简单的多入口和多输出的配置，被重复引用的fun函数无法被抽离出来，起不到服用的效果，性能不好，体积也会变大。假设入口文件引入了一个css资源，如果不把css资源提取成单独的文件，css资源就会被打包到js文件中，当js文件加载时，会创建一个style标签来生成央视。假设开发者给网站首页中的某个button绑定了一个click事件，关于这个事件的回调函数定义在main.js文件中，具体的逻辑又定义在utils.js中，算了直接上代码吧。
2023-09-28 19:03:29
552
原创 前端关于移动端开发的一些问题⚠️
移动端常见的浏览器有UC浏览器、QQ浏览器、欧鹏浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器等，这些移动端常见的浏览器的内核多是Webkit，物理像素比与Retina（视网膜屏幕，俗称“高清屏”）挂钩，Retina是一种显示技术，可以把更多的物理像素点压缩到一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度。，PC端页面，1个px等于1个物理像素的，但是移动端就不尽相同，一个px的在某台移动端设备上能显示的物理像素点的个数，称为该台设备的物理像素比或屏幕像素比。
2023-09-25 19:26:37
165
1
原创 Web几个常见的安全问题 ✅
CSRF又称跨站请求伪造，即攻击者盗用合法用户的身份，以合法用户的身份发送恶意请求。值得注意的是CSRF的重点是身份被盗用而非身份信息被泄漏。XSS又叫做跨站脚本攻击，攻击者通过网站注入点（注入点需要攻击者自己寻找）注入客户端可执行解析的恶意脚本，当用户访问网页时，恶意脚本自动加载并执行，以达到攻击者目的。XSS分为反射性XSS（一次性的），存储型XSS（可存储在数据库中）和DOM型XSS。Sql注入攻击是通过将恶意的Sql查询或添加语句插入到应用的输入参数中，再在后台 Sql 服务器上解析执行进行的攻击。
2023-09-14 22:30:18
139
1
原创 前端面经⏰
就是，在没复盘之前我甚至有点侥幸，复盘完觉得体无完肤。很多自己认识的东西没答出来或者没答好，纯白给。刚才写到一半发现又收到了腾讯今晚的笔试，笔试也没把握。人生海海，失败是主旋律。好好笔试。
2023-09-12 16:13:13
118
原创 node返回文件流给前端下载·
即可下载文件，但对浏览器可以直接解析的文件如jpg、txt等文件，会优先在浏览器进行阅览。前端下载文件的方式不止一种。如果后端已经把待下载的文件挂载到静态目录上，那前端使用。window.location.hred=“静态资源地址”，前端常用的方法是创建。
2023-09-10 18:14:18
1265
2
原创 windows系统下nginx的基本使用 ⏰
Nginx是一个高性能的HTTP和反向代理web服务器，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。作为一款轻量级的Web 服务器/反向代理服务器及电子邮件代理服务器，其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。nginx下载地址其中conf是配置文件夹，html是静态网站的根目录，logs是运行日志，temp是临时文件，docs存放文档，contrib存放由其他机构贡献的文档材料，nginx.exe是window下的可运行程序。
2023-09-09 05:02:19
857
3
原创 关于Vue3的组合式写法，以及组合式写法下的生命周期⚠️
因此配合hook使用组合式写法的时候，每个js文件里面都可以写vue的生命周期，此时回调函数的执行顺序与hook被引入的顺序相同。
2023-09-07 23:54:26
538
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人