古兰精

2020年12月4日

摘要：一、什么是异步渲染？这个问题应该先要做一个前提补充，我们知道当数据在同步变化的时候，页面订阅的响应操作为什么不会与数据变化完全对应，而是在所有的数据变化操作做完之后，页面才会得到响应，完成页面渲染。从一个例子体验一下异步渲染机制。 import Vue from 'Vue' new Vue({ 阅读全文

posted @ 2020-12-04 16:14 古兰精阅读(6526) 评论(0) 推荐(1) 编辑

浅析从Diff策略及源码角度剖析diff算法

摘要：一般啥面试之类的都会问到循环加key值的作用，虽然一般都知道key的作用就是提高虚拟dom diff算法的效率，但是你知道它是怎样提升的吗？下面从diff策略及代码角度总结一下虚拟dom diff算法的全过程。一、Diff算法简析 DIFF算法基于三个策略：（1）Web UI中DOM节点跨层级的阅读全文

posted @ 2020-12-04 11:18 古兰精阅读(1435) 评论(0) 推荐(0) 编辑

2020年12月3日

浅析从void 0 === undefined说起

摘要：在看《你不知道的JavaScript》的时候，看到了这个么一段代码： function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } 并且我们在使用 ?. 操作符，比如：let name = pe 阅读全文

posted @ 2020-12-03 18:34 古兰精阅读(938) 评论(0) 推荐(0) 编辑

小知识随手记（十）：多重重复解构对象、es6函数带默认参数时将生成声明作用域、一些注意点、动态设置getter/setter、mysql将字符串字段转为数字排序或比大小、pointer-events:none;属性

摘要：一、多次重复解构对象 es6居然可以重复解构对象。我们看代码 const obj = { a: { b: 1 }, c: 2 }; const { a: { b }, a, c } = obj; console.log(b, a, c) 一行代码同时获取 a 和 a.b 和 c 。在a和b都要多次阅读全文

posted @ 2020-12-03 16:59 古兰精阅读(390) 评论(0) 推荐(0) 编辑

浅析AST抽象语法树及如何利用AST转换JS代码

摘要：在学习AST之前，可以结合此篇博客（浅析代码编译过程）一起看。抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。如果你查看目前任何主阅读全文

posted @ 2020-12-03 14:39 古兰精阅读(8853) 评论(1) 推荐(3) 编辑

2020年12月2日

浅析常用的import被webpack编译之后

摘要：最近看到一篇文章不错，我们最常用的import来加载模块，但是它真正背后如何运行的，只是略知一二，但真要说出个所以然来，还真不大清楚，所以这篇文章感觉讲的还挺好的，所以转载过来自己学习一下。来源于作者李永宁的掘金博客：https://juejin.cn/post/68595699587421962 阅读全文

posted @ 2020-12-02 18:56 古兰精阅读(1732) 评论(0) 推荐(0) 编辑

浅析虚拟列表高性能渲染大体量数据原理

摘要：在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。在浅析如何利用时间分片高性能渲染十万级数据一文中，提到了可以使用时间分片阅读全文

posted @ 2020-12-02 17:17 古兰精阅读(909) 评论(0) 推荐(0) 编辑

浅析requestIdleCallback

摘要：我们都知道React 16实现了新的调度策略(Fiber)，新的调度策略提到的异步、可中断，其实就是基于浏览器的 requestIdleCallback 和 requestAnimationFrame 这两个API。 requestAnimationFrame就不多说可以看刚刚这篇博客：浅析requ 阅读全文

posted @ 2020-12-02 15:53 古兰精阅读(2516) 评论(0) 推荐(0) 编辑

浅析requestAnimationFrame让你更加了解动画

摘要：在Web应用中，实现动画效果的方法比较多，JavaScript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的 API，即 req 阅读全文

posted @ 2020-12-02 14:42 古兰精阅读(552) 评论(0) 推荐(0) 编辑

2020年12月1日

浅析如何利用时间分片高性能渲染十万级数据

摘要：在实际工作中，我们很少会遇到一次性需要向页面中插入大量数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。对于一次性插入大量数据的情况，一般有两种做法： 1、时间分片 2、虚拟列表我们首先来看一下“时间分片”的原理阅读全文

posted @ 2020-12-01 17:05 古兰精阅读(1008) 评论(0) 推荐(2) 编辑

公告