An Yan
title: 深入探究 eventloop 与浏览器渲染的时序问题 categories: - Code tags: - how-javascript-actually-works - eventloop - requestAnimationFrame toc: true date: 2017-7-18 10:38:11 --- 在上篇文章[《现代前端科技解析 —— 数据响应式系统 (Data Reactivity System)》](https://www.404forest.com/2017/06/28/modern-web-development-tech-analysis-data-reactivity-system/)中我们用到了 `nextTick` 函数，该函数使用 `MutationObserver` 实现了『异步』更新。我们工作中也常用...
title: 万级节点可视化全量渲染优化探究 categories: - Code tags: - webgl - three.js - optimization - d3 toc: false date: 2018-10-12 14:11:08 --- 最近接了需求，10w 条社交分享数据做一张社交关系图，为了能宏观分析要全量渲染。本文探讨万级节点流畅渲染的优化手段。 > 注： > 原始链接: https://www.404forest.com/2018/10/12/massive-data-visualization-full-rendering-optimization/ > 文章备份: https://github.com/jin5354/404forest/issues/69...
title: 对浏览器首次渲染时间点的探究 categories: - Code tags: - first-paint - performance - eventloop toc: true date: 2019-04-23 22:17:10 --- 使用 Chrome Devtool 进行性能分析时，在 Performance 面板上，可以看到用绿线标出来的 `First-Contentful-Paint`。浏览器何时进行首次渲染？网上只能查到一些模棱两可的资料，今天我们来探究这个问题。 > 注： > 原始链接: https://www.404forest.com/2019/04/23/when-does-the-browser-first-paint/...
title: React flow：React 渲染流程图解 categories: - Code tags: - react - fiber toc: true date: 2019-06-02 20:28:10 --- 本文用图梳理了 react 的工作原理，需配合源码食用。 > 注： > 原始链接: https://www.404forest.com/2019/06/02/react-flow/ > 文章备份: https://github.com/jin5354/404forest/issues/74 总体流程与...
title: Vue flow： Vue 生态工作机制图解 categories: - Code tags: - vue - vuex - vue-router toc: true date: 2019-03-20 16:22:10 --- 本文用图梳理了 vue、vue-router、vuex 的工作原理，需配合源码食用。 > 注： > 原始链接: https://www.404forest.com/2019/03/20/vue-flow-vue-ecosystem-mechanism-diagram/ >...
title: 现代前端科技解析 —— Virtual DOM categories: - Code tags: - Modern web development tech analysis - 现代前端科技解析 - vue - virtual dom - ast toc: true date: 2019-03-07 11:20:10 ---...
title: 现代前端科技解析 —— HTML Parser categories: - Code tags: - Modern web development tech analysis - 现代前端科技解析 - vue - parser - ast toc: true date: 2019-03-05 21:32:11 --- 无论是...
title: 常见知识点汇总（一）：DOM结构与DOM操作 date: 2014-12-08 23:58:41 categories: - Code tags: - Javascript - Front-end-Developer-Interview-Questions - 常见知识点汇总 --- ##### 节点关系：  节点关系可用上图概括。 *** ##### 节点移动 由图知常见的移动方式： * someNode.parentNode _//移动至父节点_ * someNode.firstChild _//移动至第一个子节点_...
title: 初玩树莓派--安装与第一次配置 categories: - Code tags: - Raspberry Pi date: 2015-03-07 10:42:00 --- 淘宝上看到了树莓派2B开卖，自己这学期也有一些嵌入式课程，所以260+入了一块，简单记录一下初期配置。  非常小非常小——确实仅比饭卡大一圈。包装盒里的东西也确实是简单至极：一个基本没啥用的小册子和树莓派本体。 为了玩耍这个小板子，那么你需要准备好的是： * （必选）质量较好的充电器一个，5V输出的手机充电器即可，要求输出电流至少1A+。树莓派由microUSB接口供电，这样才可以保证当树莓派使用多个USB设备时（键盘鼠标无线网卡等）时可以稳定工作。 * （必选）一张TF卡。用于存储系统。 * （必选，2选1）一条网线 or USB无线网卡 二选一，用来连接网络 * （可选）：HDMI线，用于连接外接显示器。 * （可选）：USB键盘鼠标。...
title: ifetask0001的一些总结点 categories: - Code tags: - html - css - ifetask date: 2015-05-25 15:05:00 --- ##### 多列高度自适应 这倒是我第一次遇见这种问题，解决方案是使用margin负边距，学习了。  子元素设置padding-bottom：9999px；margin-bottom：-9999px；先通过padding把盒子扩展到足够高，然后通过margin负边距把它给拉回来，最后父元素设置overflow：hidden隐藏溢出，这样多栏布局中就会以最高栏为其他栏的视觉高度。 关于margin负边距的更多应用可以看[margin负值 – 一个秘密武器](http://www.iyunlu.com/view/css-xhtml/52.html)这篇文章。 ##### 媒体查询 设计稿有一点要求：Github ICON距离右侧10px，点击后新打开页面进入Github。页面宽度小于980px时隐藏图标。 点击后新打开页面：给a标签增加target="_blank"。 页面宽度小于980px时隐藏图标就用媒体查询来做吧：...