- 博客(100)
- 收藏
- 关注
RSS订阅
原创 2023总结与2024寒假计划
从项目的角度，项目都有写，但关于简历的项目还没有完全结尾，寒假收下尾。猿课堂教育（完结）小组招新系统（完结）青邮（小 bug+域名）小组官网（完善项目亮点填写）CoderHelper（功能没写完） 关注小组工作总结上，主要体现在大二和大三。
2024-01-19 17:28:03
500
原创 浏览器原理篇—渲染阻塞
html 文档 边加载边解析 的；网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接收到数据实时传递给渲染进程，渲染进程的 HTML 解析器，它会动态接收字节流，并将其解析为 DOM。
2023-12-22 17:21:26
500
3
原创 浏览器原理篇—渲染优化
在加载阶段，核心的优化原则是：优化关键资源的加载速度，减少关键资源的个数，降低关键资源的 RTT 次数。在交互阶段，核心的优化原则是：尽量减少一帧的生成时间。可以通过减少单次 JavaScript 的执行时间、避免强制同步布局、避免布局抖动、尽量采用 CSS 的合成动画、避免频繁的垃圾回收等方式来减少一帧生成的时长。
2023-12-22 17:20:33
915
3
原创 浏览器原理篇—渲染原理
渲染就是将html字符串传成可以显示的一个个像素点的过程。//转换过程渲染进程将 HTML 内容转换为能够读懂的** DOM 树**结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的，计算出 DOM 节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。合成线程发送绘制图块命令 **DrawQuad **给浏览器进程。
2023-12-20 17:02:03
1007
1
原创 浏览器的事件循环机制（Event loop）
程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
2023-12-14 13:31:30
1261
2
原创 愁思如潮涌心头,唯愿时光不负卿
个人生活上：遇到事情多思考，每天给自己至少20分钟来冥想与思考。继续锻炼身体，作息规律，保持充足的睡眠。短视频平台设置半小时时间锁，碎片化时间多用来信息与思考。学习计划上：每天按时完成自己定下的每日计划。做过的项目认真规则与总结，找出自己的亮点，学习别人的亮点。复习与巩固学习过的知识，面经在这学期结束前至少过一遍。愁思如潮涌心头，唯愿时光不负卿！一起共勉！一起成为别人想要成为的人！
2023-11-27 17:14:52
949
1
原创 react+星火大模型，构建上下文ai问答页面（可扩展）
最近写的开源项目核心功能跑通了，前两天突发奇想。关于项目可否介入大模型来辅助用户使用平台，就跑去研究了最近比较活火的国内大模型–讯飞星火大模型。react hooks+TypeScript+websocket技术栈，获取讯飞大模型api地址和其key。开源，工具类，效果图。国内大模型--讯飞星火大模型console.xfyun.cn。
2023-11-11 22:08:34
990
3
原创 react+ts手写cron表达式转换组件
最近在写的一个分布式调度系统，后端同学需要让我传入cron表达式，给调度接口传参。react+typescript+moment+semi-ui实现cron表达式，0 11 20 * * ?，时间转换函数，日期转换函数，组件完整代码，使用方法，实现效果，环境配置
2023-10-17 17:23:13
667
1
原创 react+IntersectionObserver实现页面丝滑帧动画
react+IntersectionObserver实现渐进丝滑帧动画，效果展示， 技术实现：加入animation动画类，加入IntersectionObserver监听，监听dom元素的进入，加入class类。动态效果页面，普通的静态页面。
2023-09-29 08:59:12
534
2
原创 Next.js项目初始化（附gitHub地址）
Next.js项目初始化。性能优化，SSR，SEO，github地址开源。脚手架搭建，目录介绍，reduxjs/toolkit集成，集成网络请求request封装，集成ant-design。
2023-09-18 22:05:37
406
1
原创 长风破浪会有时，直挂云帆济沧海！（工作室年会总结）
我也是有段时间没写过总结性的博客了。最近是很忙的，尤其是年会那两天，我甚至可以说那是我这辈子目前最忙的两天。但这段经历还是很值得我记录下来的，给后面有需要的人提供一些建议。我个人也是第一次筹办这种大型些的活动，这对我个人来说有不小的感触。
2023-09-06 22:13:41
238
原创 Nextjs脚手架搭建
Next.js 是一个React框架，支持CSR、SSR、SSG、ISR (Incremental Static Regeneration)等渲染模式。
2023-08-29 11:08:55
518
原创 初次使用Nuxt3脚手架遇见的问题
初次使用Nuxt3脚手架遇见的问题，Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: connect ETIMEDOUT 185.199.108.133:443，reason: unable to verify the first certificate，安装依赖超时
2023-08-21 18:08:59
520
原创 SSR+前端框架 项目工程核心
关于SSR的概念和其优缺点，Node.js + Express + Vue3实现SSR的前端项目搭建，服务端server，client客户端渲染。Node服务器端渲染(SSR概念篇)，项目介绍，目录。。SSR的实现重点是在服务端生成页面的元素 DOM等返回给浏览器。用前端框架编写app.js脚本，引入框架的组件编写服务器端返回静态html页面的接口在静态html中，加入前端框架 的组件在静态html中，加入前端框架的客户端脚本，使静态页面加入前端框架，实现交互功能。
2023-08-20 20:22:53
1076
原创 构建 Webpack 知识体系 ｜ 青训营
但是，依赖手工，比如有50个JS文件…操作，过程繁琐动当代码文件之间有依赖的时候，就得严格按依赖顺序书写开发与生产环境十致，难以接入TS或JS新特性比较难接入Less、Sass等工具JS、图片、CSS资源管理模型不一致这些都是旧时代非常突出的问题，对开发效率影响非常大，直到。。。
2023-08-18 15:26:15
660
原创 什么是跨域？跨越的解决方案（主前端）
那么跨域问题如何解决呢？所以跨域的解决方案几乎都和服务器有关系，单独的前端基本解决不了跨域（虽然网上也能看到各种方案，都是实际开发基本不会使用）。我明明和配置前端的webpack就可以解决跨域问题了。webpack配置的本质也是在webpack-server的服务器中配置了代理。方案一：静态资源和API服务器部署在同一个服务器中；方案二：CORS， 即是指跨域资源共享；方案三：node代理服务器（webpack中就是它）；方案四：Nginx反向代理；
2023-08-17 22:03:44
298
原创 Node服务器端渲染(SSR概念篇)
单页应用程序 (SPA) 全称是：Single-page application，SPA应用是在客户端呈现的（术语称：CRS）。Node服务器端渲染(SSR概念篇), 单页应用程序（SPA）,爬虫-工作流程搜索引擎的优化 静态站点生成（SSG）（SEO）服务器端渲染（SSR）SSR 解决方案
2023-08-17 20:40:37
1192
原创 Nestjs项目大demo（附github代码地址）
Nestjs + TypeORM + MySQL + Jwt + Docker实现基本的一对一，多对多，一对多的数据库表连接，数据库链表查询，接口crud，分页查询，jwt鉴权，密码加密处理。github代码开源。
2023-08-15 22:41:00
768
1
原创 Vite知识体系｜ 青训营
1. 浅谈构建工具 2. Vite概要介绍 3. vite 上手实战 4. Vite整体架构 5. vite进阶路线 6. 前端基本概要
2023-08-14 21:17:23
183
原创 响应式系统与 React｜ 青训营
它赋予了 React 声明式的 API :您告诉React希望让 UI 是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。Virtual DOM 是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一—对应的关系。3.根据当前的State/Props,返回一个UI。2.组件接受外部的Props状态提供复用。当前状态，收到外部事件，迁移到下一个状态。
2023-08-11 15:48:39
925
原创 docker初始化安装时的WSL两个问题
报错1：Docker Desktop requires a newer WSL kernel version.报错2：Docker Desktop - Unexpected wSL error：An unexpected error was encountered while executing a WSL command.Commoncauses include access rights issues, which occur after waking the computer or notbeing
2023-08-09 10:20:23
23786
20
原创 前端设计模式应用｜ 青训营
全局唯一访问对象一种订阅机制，可在被订阅对象发生变化时通知订阅者。复制已有对象来创建新的对象可自定义控制对原对象的访问方式,并且允许在更新前后做一些额外处理在不暴露数据类型的情况下访问集合中的数据可多个对象组合使用，可也单个对象独立使用总结出抽象的模式相对比较简单，但是想要将抽象的模式套用到场景中却非常困难现代编程语言的多编程范式带来的更多可能性真正优秀的开源项目学习设计模式并不断实践。
2023-08-08 10:50:42
721
原创 Http协议入门到实战分析｜ 青训营
*帧(frame) **: HTTP/2通信的最小单位,每个帧都包含帧头，至少也会标识出当前帧所属的数据流。二进制消息:与逻辑请求或响应消息对应的完整的一系列帧。数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。HTTP/2连接都是永久的，而且仅需要每个来源一个连接流控制:阻止发送方向接收方发送大量数据的机制HTTPS经过 **TSL/SSL **加密对称加密: 加密和解密都是使用同一个密钥非对称加密。
2023-08-06 08:00:23
166
原创 Web开发标准｜ 青训营
很多人分不清“上网”是上的哪个网?即使在互联网的诞生地也是如此。Web的普及和深入人心由此可见一斑。上网指接入Internet，它是地球上相互连接的计算机构成的网络。计算机网络诞生于上个世纪的60年代,标志性通信协议是TCP/IP。
2023-08-05 10:08:49
270
原创 React+TypeScript手写拍照上传
最近写了个招新面试系统，要求能支持拍照上传简历图片。经过对其义务，api的了解。用** React+TypeScript **手写出了一个原生的拍照上传组件，写此博客对此加以记录，也会公开到github方便日后的使用。
2023-08-03 17:28:48
1620
1
原创 深入浅出TypeScript｜ 青训营
软件工程中，我们不仅要创建一致的定义良好的API.，同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。泛型的语法是令里面写类型参数，一般用T表示;使用时有两种方法指定类型:定义要使用的类型通过TS类型推断，自动推导类型泛型的作用是临时占位，之后通过传来的类型进行推导;
2023-08-02 15:29:51
864
原创 深入理解CSS｜ 青训营
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：z-index 仅能在定位元素上奏效！可能用到值：auto——默认。堆叠顺序与父元素相等。number——设置元素的堆叠顺序。inherit——规定应该从父元素继承 z-index 属性的值。适用的元素：必须在定位元素（position:relative/absolute/fixed/sticky）上才有效所以z-index是一种依赖属性，依赖position属性。
2023-07-28 16:42:04
599
原创 前端与HTML｜ 青训营
总之，HTML语义化是一个良好的编码习惯，能够提高网页的可读性、可维护性和可访问性，同时也有助于SEO优化和提高用户体验。
2023-07-27 13:41:14
1122
原创 前端语言串讲｜ 青训营
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释：z-index 仅能在定位元素上奏效！可能用到值：auto——默认。堆叠顺序与父元素相等。number——设置元素的堆叠顺序。inherit——规定应该从父元素继承 z-index 属性的值。适用的元素：必须在定位元素（position:relative/absolute/fixed/sticky）上才有效所以z-index是一种依赖属性，依赖position属性。
2023-07-26 15:14:42
181
原创 React中的Diffing算法
如果生成的render出来后就不会改变里面的内容，那么你不需要指定key（不指定key时，React也会生成一个默认的标识）,或者将index作为key，只要key不重复即可。key = 0 的时候 旧的虚拟DOM 内容是张三 新的虚拟DOM为王五 ，react认为内容改变，从而重新创建新的真实DOM.key = 1 的时候 旧的虚拟DOM 内容是李四，新的虚拟DOM为张三，react认为内容改变，从而重新创建新的真实DOM。但是如果你的标签是动态的，是有可能刷新的，就必须显示的指定key。
2023-07-01 08:25:01
485
原创 新特性【react高级指引（上）】
(1) . setState(stateChange , [ callback ]) -- -- -- 对象式的setState 1. stateChange为状态改变对象(该对象可以体现出状态的更改) 2 . callback是可选的回调函数 , 它在状态更新完毕、界面也更新后(render调用后) 才被调用(2) . setState(updater , [ callback ]) -- -- -- 函数式的setState 1 . updater为返回stateChange对象的函数。
2023-06-22 15:46:56
1207
原创 React三大属性state，props，Refs
但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。我们都说Re act是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。
2023-06-17 22:11:51
1643
原创 React生命周期
该函数必须是静态的；（这里的 “unsafe” 不是指安全性，而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug，尤其是在启用异步渲染之后。我们在组件渲染到DOM之前获取组件的高度，然后用组件渲染之后的高度减去之前的高度就是一条新的内容的高度，这样在不断的累加到滚动条位置上。如上面的动图：区域内部的内容展现没有变化，但是可以看见滚动条在变化，也就是说上面依旧有内容在输出，只不过不在这个区域内部展现。我们在定义组件的时候，会在特定的声明周期回调函数中，做特定的工作。
2023-06-17 22:09:00
1450
原创 springboot+Mybatis项目初始化
创建一个SpringBoot工程，选择引入对应的起步依赖（web、mybatis、mysql驱动、lombok） (版本选择2.7.5版本，可以创建完毕之后，在pom.xml文件中更改版本号)第3步：配置文件application.properties中引入mybatis的配置信息，准备对应的实体类。准备对应的Mapper、Service(接口、实现类)、Controller基础结构。
2023-06-10 15:41:36
1030
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人