- 博客(13)
- 收藏
- 关注
RSS订阅原创 Echarts教程
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。2021年1月26日晚，Apache基金会官方宣布 ECharts项目正式毕业，成为Apache顶级项目。，提供直观，生动，可交互，可个性化定制的数据可视化图表。min:压缩 ，省去空格、换行，所有的代码在一行中书写。基金会，成为ASF孵化级项目。
2023-09-14 17:59:45
140
1
原创 Echart架构解析
本文章主要介绍EChart整体的架构设计，以及源码中关键的代码部分，用于简单对EChart的设计以及工作概念有个简单的入门理解，所以不会讲到太深入源码地方，帮助想了解EChart的同学入门。
2023-09-14 17:57:11
245
1
原创 Vue3.0 全面认识
21、在Vue2中，组件有一个 render 选项（它本质上是一个渲染函数，这个渲染函数的形参是 h 函数），h 函数相当于 React 中的 createElement()。29、Vue3中，新增了 <teleport>组件，这相当于 ReactDOM.createPortal()，它的作用是把指定的元素或组件渲染到任意父级作用域的其它DOM节点上。我们都知道，在Vue2中，在同一个.vue组件中，当 data、methods、computed、watch 的体量较大时，代码将变得臃肿。
2023-09-14 17:54:35
283
1
原创 WebSocket心跳及重连机制
onmessage事件能监听到的话，说明请求正常，这里我们使用了一个定时器，每隔3秒的情况下，如果是网络断开的情况下，在指定的时间内服务器端并没有返回心跳响应消息，因此服务器端断开了，因此这个时候我们使用ws.close关闭连接，在一段时间后(在不同的浏览器下，时间是不一样的，firefox响应更快)，心跳机制是每隔一段时间会向服务器发送一个数据包，告诉服务器自己还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传一个数据包给客户端来确定服务器端也还活着，否则的话，有可能是网络断开连接了。
2023-09-14 17:43:26
2870
2
原创 websocket
后端 WebSocket 服务也可能出现异常，造成连接断开，前端也没有收到消息，因此需要前端定时发送心跳消息 ping，后端收到消息后立刻返回 pong 消息，告知连接正常，当一定时间没有 pong 消息，前端会执行重连等操作。HTTP 是文本协议，数据量比较大，且每次请求都会带有大量的重复请求头，传输性能较低，而 websocket 是基于二进制的协议，只在建立首次连接时用文本数据，后续请求传输的都是二进制的数据，因此性能比 Ajax 请求要高。3、建立在 TCP 协议之上，服务端实现容易。
2023-09-14 17:41:33
68
1
原创 Web Socket的基本使用
Web Socket与HTTP一样，都是基于TCP的网络协议，二者最大的区别是Web Socket是全双工，HTTP是半双工。二者的其他特性网上有很多介绍，这里不再多说，本文主要介绍如何使用Web Socket，以及心跳检测和重连机制。
2023-09-14 17:38:41
385
1
原创 Vue中的Mixin混入
Vue框架现在基本上已经占据了前端的半壁江山，Vue的数据驱动和组件化的思想深入人心。Vue全家桶可能很多小伙伴都比较熟悉，在工作上也用得比较得心应手。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹，也会用，但是一直都是云里雾里的状态，今天我们就好好聊聊Mixin，争取以后不在犯迷糊。想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。
2023-09-05 14:38:28
154
1
原创 理解react fiber原理
理解fiber，fiber是一种数据结构，也是一个执行单元，fiber之前，react是通过使用递归去遍历虚拟dom树，找出不同去更新dom，这样就会造成执行栈太深，且无法中途中断的问题，而由于浏览器的渲染线程和js线程的执行是互斥的，如果 js执行的时候，占用时间太久就会引起卡顿。当以上工作做完后，浏览器通常会有一定的剩余时间，而react fiber正是利用这一空闲时间和fiber树的链表形式的数据结构， 实现了在浏览器每一帧的空闲时间去执行处理任务。这个工作循环会一直执行，即便里面没有任务可执行。
2023-08-30 14:28:15
124
原创 React框架原理
render阶段会依次遍历在第一步生成的fiber结构，利用深度优先遍历的算法，先遍历整个fiber树最左侧的fiber对象，然后再遍历到右侧的，最终回到最底层的根fiber对象，中间根据不同的组件类型做不同的处理，这个阶段也是整个React最难理解的一个阶段，因为有非常多的处理函数，还可以被高优先级的任务给打断，例如浏览器重绘，自定义事件等。能带来性能上的提升。总的来说会对fiber树单向遍历，父到子，子到孙，采用事件切片的任务调度方式，优先级高的任务和渲染先做，空闲时间做一些diff算法。
2023-08-30 14:22:44
52
原创 前端开发知识点总结
2、Css优先级：important > 内联样式 > ID选择器 》 类、属性、伪类(:hover,:actived)选择器 > 标签 、伪元素(::before, ::after)选择器 > * 通配符。论坛 gitHub的issue 、stackoverflow、google、官方文档 、CSDN、MDN、codeProject。53、CSS布局：table布局、float布局、flxe布局、响应式布局、grid布局。如大量操作DOM，复杂的计算、大文件上传、主流程加载速度优化，
2023-08-04 20:11:07
346
1
原创 ReactNative原理剖析
最上面的JS代码层提供了React.js支持，React.js的JSX代码转化为JS代码运行在JavaScriptCore提供的 JavaScript 运行时环境中，通信层将 JavaScript 与 Native 层连接起来；指的是在JSToNative的通信方式中，调用的发起在JS线程，逻辑处理和计算在Native Module线程和UI线程，异步的方式不会阻塞JS线程。在RN的启动流程中，会对通信桥进行初始化，通信桥的初始化最关键的就是。，在这三个线程中分别会创建三棵树，JS线程中会创建一棵树叫做。
2023-07-23 16:10:31
253
原创 react native是什么
在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<img>等。
2023-07-23 16:05:59
172
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人