- 博客(13)
- 收藏
- 关注
原创 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关注的人