vk前端核心项目slider重构过程思考 todo

在vk不做数图业务之后,现在负责slider业务的重构,slider其实是交互式课件的加载器,渲染器,主要有以下4个功能

  • 信令部分,负责实时信令的转发,通过历史信令恢复课件状态
  • 加载,渲染课件
  • 与教室交互,调用教室的能力
  • 教具功能,(提供划线,放大器,橡皮擦,几何图形,倒计时,)

对应不同业务需求

由于slider模块,1v1直播课,大米网校, 超级课堂,数学课等几乎公司所有的直播涉及到课件的业务都在使用。不同业务对slider有不同需求,而且有些业务信令不同,如数学课的信令与1v1所使用的信令协议不一样,所使用的教具,数学课有12个教具,而1v1只有8个教具,教具ui也不一致,1v1的翻页按钮,与数学课的翻页按钮ui不一致。之前的架构将所有融合在一块导致slider代码臃肿。

信令影响各个UI模块

1.由于是响应式课件,学生可操作课件上按钮,动画,在老师端能显示对应学生的操作,老师能够限制学生操作

2.教具模块,例如学生老师能够实时划线,并显示在屏幕上,老师能够删除每一个划线,当学生断开连接,重新进入,能够保持当时状态(快照功能)

发表评论

闲聊v8垃圾回收器的演变历史(3)

这一章会介绍Orinoco垃圾回收器对应知识,之前垃圾回收是有序执行,stop-the-world,Orinoco垃圾回收器是一个在大部分情况下进行并行以及并发运作,来快速的进行垃圾回收。下面是相关视频的介绍

Orinoco 垃圾回收介绍

我们都清楚任何垃圾回收器都有一些周期性需要完成的工作

  • 识别存活/死亡的对象
  • 回收/重用死亡对象占用的内存空间
  • 压缩/回收内存空间
阅读 “闲聊v8垃圾回收器的演变历史(3)” 发表评论

闲聊 v8 GC的进化(2)

垃圾回收的运行会阻断渲染进程的运行,这会影响浏览器的体验。V8引擎的开发者打算优化v8的垃圾回收模块,优化的垃圾收集器代号为Orinoco。Orinoco与之前未优化的垃圾回收器相比

  • 实现一个主要是并行和并发的垃圾收集器
  • 模糊代际边界(主要是新生代对象和老生代对象)
  • 减少了垃圾收集的时间和内存消耗,并提高了垃圾回收的吞吐量

在这篇文章中我们讨论新的垃圾收集器的三个特性,他们分别是

  • 并行compaction
  • 并行记忆集处理
  • 黑色分配

V8实现了代际垃圾收集器,新生代对象在经历两次回收生存下来的对象会被划分到老生代对象存储空间。对象在内存中移动的代价是很昂贵的,主要是在引擎中我们需要对象的需要复制到新的位置,此外我们还需要更新这些对象的指针。图1显示了Orinoco之前的阶段及其执行方式。基本上,对象先被移动,之后再更新这些对象之间的指针,所有这些都是按顺序进行的,消耗的时间过长。

对象依次顺序移动,然后更新指针
阅读 “闲聊 v8 GC的进化(2)” 发表评论

闲聊v8垃圾回收器的演变历史(1)

javascript 是带有gc机制的语言,与c,c++ 这种需要用户手动进行内存的管理语言不同,带有gc机制的语言,我们在写代码的过程无需管理已分配的内存块,减少我们编写的代码心智成本。

chrome浏览器js引擎是v8, 起初v8的大部分垃圾回收工作是在主渲染线程上进行的。我们清楚当浏览器器在16.66ms内无法完成一帧的渲染时,那么就会出现页面卡顿现象。当GC需要维护的对象变多时,垃圾回收过程所占用的时间也会导致页面卡顿。如下图所示

垃圾回收工作在渲染线程中进行
阅读 “闲聊v8垃圾回收器的演变历史(1)” 发表评论

打造vue3的历程

本文翻译转载自https://increment.com/frontend/making-vue-3/

重写下个Vue.js下一个主要版本的收获

在上一年,vue团队一直在开发vue3这个版本,我们希望在2020的上半年发布。(在写这篇文章的时候,我们还在开发中)。新版本功能定型在2018年末,vue2已经有两年多没有大的更新。对于一般的软件来说,这个时间不算长,但是前端有很多东西发生变化。

重写vue有两个关键原因,第一,javascript 新特征,主流浏览器都支持的不错,第二点,当前版本的设计和架构问题有很长时间没有解决了。

阅读 “打造vue3的历程” 发表评论

IntersectionObserver 与无限滚动列表

无限滚动在实际项目中用到很多,比较在vipkid 数字图书馆的的书库这个业务中,就用到滚动加载,如下视频所示

无限滚动

正常思路是,我们监听scroll事件,当滚动条滑到底部的时候,触发加载,请求数据,将新数据插入尾部。

这里面,我们会碰到两个问题,

  • 1.一个是scroll 事件的触发,会触发的非常频繁,
  • 2.dom节点会越来越多
阅读 “IntersectionObserver 与无限滚动列表” 发表评论

她是谁,估计从来就没有出现过,也许没有

发表评论

圣杯布局

圣杯布局示意图

对css的关注比较少,疫情期间,最近同事远程面试聊起圣杯布局,我不知道什么叫圣杯布局,表面上对其不屑,当查了相关文档,其实发现自己除了flex 布局来实现对应的逻辑,利用float来布局,我自己是实现不了,当然我也不能落后,那我们来扒一扒圣杯布局的来龙去脉。

阅读 “圣杯布局” 发表评论