1.精读《Monorepo 的精读精读优势》
2.v51.04 鸿蒙内核源码分析(ELF格式) | 应用程序入口并非main | 百篇博客分析OpenHarmony源码
3.如何精读或泛读别人编写的程序源代码？
4.精读《webreflow》
5.精读 《 echarts-for-react 源码 》

精读《Monorepo 的优势》

       本周深入研究的文章是《Monorepo 的诸多益处》。本文将通过一个实际案例，源码探讨Monorepo在开发中的下载重要性和解决的问题。尽管直接介绍工具或迁移方法的精读精读文章不少，这篇文章凭借其讲述的源码Android与iOS开发过程中对Monorepo的引入，提供了更具普适性的下载20日平均股价线指标源码视角。

       作者选择这篇文章是精读精读因为它通过PDF服务PSPDFKit的演化历程，说明了从单平台到多平台时，源码如何从两个独立仓库（PSPDFKit-Android和Core）合并，下载最终实现代码共享和一致性。精读精读在初始阶段，源码Android和iOS的下载代码因平台差异而分开，但这样导致了版本管理和冲突处理的精读精读复杂性。随着项目发展，源码团队意识到使用Monorepo能更好地管理代码库，下载提高协作效率。

       Monorepo的优势在于，当代码库中存在关联性时，源码整合提供了更高效的调试手段。它有助于工程化的统一，让开发人员更专注于业务逻辑，而非版本管理。然而，它也存在挑战，如仓库大小、CI测试时间增长以及空间浪费等问题。代搭建源码理想的Monorepo设计需要清晰的结构，统一的配置，以及便捷的模块引用和依赖管理。

       尽管Lerna作为Monorepo的常见工具，可能在通用性上牺牲了部分灵活性，但针对特定环境，比如基于Webpack和TypeScript的项目，可以优化配置，进一步简化流程。别名映射和symlink的选择也需要根据项目需求来权衡。

       对于是否需要Monorepo，以及是否有特定需求，读者可以参考文章末尾的讨论链接，每周的主题交流都在进行中。前端精读致力于提供高质量的内容，欢迎大家参与讨论，共同学习和分享。

       请注意，所有内容遵循Creative Commons Attribution-NonCommercial-ShareAlike 3.0许可证，欢迎自由转载，但需保持署名。关注前端精读微信公众号，获取更多技术资讯和深度阅读推荐。

v. 鸿蒙内核源码分析(ELF格式) | 应用程序入口并非main | 百篇博客分析OpenHarmony源码

       鸿蒙内核源码分析(ELF格式篇) | 应用程序入口并非main

       深入解析ELF格式与鸿蒙源码的关系，探寻应用程序入口的cucumber源码解析奥秘。本文将带你从一段简单的C代码开始，跟踪其编译成ELF格式后的神秘结构，揭秘ELF的组成与内部运作机制。

       以E:\harmony\docker\case_code_目录下的main.c文件为例，通过编译生成ELF文件，运行后使用readelf -h命令查看应用程序头部信息。了解ELF文件的全貌，从ELF头信息、段信息、段区映射关系、区表等多方面深入探讨。

       ELF格式文件由四大部分组成：头信息、段信息、段区映射关系和区表。头信息包含关键元数据，如文件类型、字节顺序、文件大小等；段信息描述了可执行代码和数据段的属性和位置；段区映射关系展示了段与区的关联；区表则存储了每个区的详细信息。

       通过readelf -l命令，可以观察到段信息及其在程序中的作用，如初始化数组、动态链接、栈区等。在运行时，不同段以特定方式映射到内存中，stl vector 源码实现代码的加载和执行。

       在深入分析后，发现应用程序的真正入口并非通常理解的main函数，而是一个名为_start的特殊函数。这揭示了鸿蒙内核在启动时的执行流程，以及如何在ELF格式中组织和加载代码。

       本文以ELF格式为切入点，带你全面理解鸿蒙内核源码的组织结构与运行机制。通过百万汉字注解，带你精读内核源码，深入挖掘其地基。在Gitee仓(gitee.com/weharmony/ker...)同步注解，共同探索鸿蒙研究站(weharmonyos)的奥秘。

如何精读或泛读别人编写的程序源代码？

       读代码这事，先要分是精读还是泛读。从学习的目的来看，一定要精读一定量的经典代码。而精读是指每行都读懂，不看代码脑子里就能勾画出程序的基本结构。这里有个很形象的状态，精读代码时会满脑子都是代码，放不下，甚至睡觉前脑子里也是代码。但这一篇里主要不是关注如何精读代码的，而是ntp 实现 源码关于如何在工作中掌握既有代码的，等价于泛读。现存的很多系统往往很大，几十万行的可能也只算普通。这时候一旦加入了这样一个项目，那么如何去读代码？下面说点个人体会。读这类代码前，先得把规格大致弄清楚，而不能上来就读，比如：对于应用型程序，你要先大致整清楚它的使用方法。如果其中有涉及到领域知识，比如：流程、财会等，那也最好预先有些认识。这类东西从代码里反推回来是不太可能的。我个人感觉这对读程序是个很大的障碍，你不知道编码规则，却去读编码的程序，总是会云里雾里，这时候反倒不是因为程序难，而是因为不知道程序中所包含的专业知识。在这一步里，最好能抽取出来几个典型的应用场景，这在后面有用。一旦开始接触代码，那要先弄清楚代码的基本静态结构。如：包构成、类构成等。这里涉及一个层次问题。一下子把层次探的太深，就容易盯在细节上出不来。有设计文档的项目，大致上可以通过包来界定这个层次。没设计文档的就可怕了，只能靠自己划分，最好不要超过个，超过了真记不住。在静态结构这步，要弄清楚每个部分的核心职责，可以简单，最好能记住。接下来就要用到上面的典型场景了。要在典型场景下考察上面的静态结构是如何发挥作用的。典型场景下用到的接口往往就是关键的接口，要整清楚，他们的定义和作用。也要整清楚，典型场景下数据流的变迁。这步骤算是弄清楚代码的时序。很像UML里的Sequence图。但牵涉到数据的时候，一般需要对数据的规格有所了解。接下来要关注进程、线程的结构。比如：都是什么时候开始、什么时候结束的，在上述典型场景下都负责干什么。上述四步（规格、静态结构、典型场景、进程线程）完成后，对程序的第一次泛读完成。检验标准很简单，这时应该能够单靠纸笔描述出程序典型场景的Sequence图。干这事儿的时候，要抑制自己的求知欲，因为总是很想在调试器里通过call stack把一个功能的实现细节整清楚，但至少在第一个层次里，可以先不要这样。第一次泛读后，就要进入深掘的过程，针对的对象应该是自己会负责的部分。这部分功能往往会隐藏在某个接口之下。这时候一般来讲可以放过功能型的模块，比如：XML解析的模块等。其他部分可以认为是需要把之前所说的四个步骤再重复一下。但这时候要关注细节和调用堆栈了。不管是在那个读代码的层次，有两个基本技巧总是需要的，一个是要掌握具体程序里内嵌的Log机制，要能看Log，必要时可能还得加Log；一个是基本调试方法。调试很难展开，《软件调试》一书写了多页。但只停留在设个断点等他停下来这个层次上还是会有点欠缺的。条件断点、多线程调试、多进程时的调试还是要知道一点的。程序类型太多，因此估计读程序的方法也很多。上面只是个人的一点经验，欢迎补充。

精读《webreflow》

       ç½‘页重排（回流）是阻碍流畅性的重要原因之一，结合Whatforceslayout/reflow这篇文章与引用，整理一下回流的起因与优化思考。

       å€Ÿç”¨è¿™å¼ ç»å…¸å›¾ï¼š

       ç½‘页渲染会经历DOM->CSSOM->Layout(重排orreflow)->Paint(重绘)->Composite(合成)，其中Composite在精读《深入了解现代浏览器四》详细介绍过，是在GPU进行光栅化。

       é‚£ä¹ˆæŽ’除JS、DOM、CSSOM、Composite可能导致的性能问题外，剩下的就是我们这次关注的重点，reflow了。从顺序上可以看出来，重排后一定重绘，而重绘不一定触发重排。

概述

       ä»€ä¹ˆæ—¶å€™ä¼šè§¦å‘Layout(reflow)呢？一般来说，当元素位置发生变化时就会。但也不尽然，因为浏览器会自动合并更改，在达到某个数量或时间后，会合并为一次reflow，而reflow是渲染页面的重要一步，打开浏览器就一定会至少reflow一次，所以我们不可能避免reflow。

       é‚£ä¸ºä»€ä¹ˆè¦æ³¨æ„reflow导致的性能问题呢？这是因为某些代码可能导致浏览器优化失效，即明明能合并reflow时没有合并，这一般出现在我们用jsAPI访问某个元素尺寸时，为了保证拿到的是精确值，不得不提前触发一次reflow，即便写在for循环里。

       å½“然也不是每次访问元素位置都会触发reflow，在浏览器触发reflow后，所有已有元素位置都会记录快照，只要不再触发位置等变化，第二次开始访问位置就不会触发reflow，关于这一点会在后面详细展开。现在要解释的是，这个”触发位置等变化“，到底有哪些？

       æ ¹æ®Whatforceslayout/reflow文档的总结，一共有这么几类：

获得盒子模型信息

       elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParent

       elem.clientLeft,elem.clientTop,elem.clientWidth,elem.clientHeight

       elem.getClientRects(),elem.getBoundingClientRect()

       èŽ·å–元素位置、宽高的一些手段都会导致reflow，不存在绕过一说，因为只要获取这些信息，都必须reflow才能给出准确的值。

滚动

       elem.scrollBy(),elem.scrollTo()

       elem.scrollIntoView(),elem.scrollIntoViewIfNeeded()

       elem.scrollWidth,elem.scrollHeight

       elem.scrollLeft,elem.scrollTop访问及赋值

       å¯¹scrollLeft赋值等价于触发scrollTo，所有导致滚动产生的行为都会触发reflow，笔者查了一些资料，目前主要推测是滚动条出现会导致可视区域变窄，所以需要reflow。

focus()

       elem.focus()(源码)

       å¯ä»¥æ ¹æ®æºç çœ‹ä¸€ä¸‹æ³¨é‡Šï¼Œä¸»è¦æ˜¯è¿™ä¸€æ®µï¼š

//Ensurewehavecleanstyle(includingforceddisplaylocks).GetDocument().UpdateStyleAndLayoutTreeForNode(this)

       å³åœ¨èšç„¦å…ƒç´ æ—¶ï¼Œè™½ç„¶æ²¡æœ‰æ‹¿å…ƒç´ ä½ç½®ä¿¡æ¯çš„诉求，但指不定要被聚焦的元素被隐藏或者移除了，此时必须调用UpdateStyleAndLayoutTreeForNode重排重绘函数，确保元素状态更新后才能继续操作。

       è¿˜æœ‰ä¸€äº›å…¶ä»–elementAPI：

       elem.computedRole,elem.computedName

       elem.innerText(源码)

       innerText也需要重排后才能拿到正确内容。

获取window信息

       window.scrollX,window.scrollY

       window.innerHeight,window.innerWidth

       window.visualViewport.height/width/offsetTop/offsetLeft(源码)

       å’Œå…ƒç´ çº§åˆ«ä¸€æ ·ï¼Œä¸ºäº†æ‹¿åˆ°æ­£ç¡®å®½é«˜å’Œä½ç½®ä¿¡æ¯ï¼Œå¿…须重排。

document相关

       document.scrollingElement仅重绘

       document.elementFromPoint

       elementFromPoint因为要拿到精确位置的元素，必须重排。

Form相关

       inputElem.focus()

       inputElem.select(),textareaElem.select()

       focus、select触发重排的原因和elem.focus类似。

鼠标事件相关

       mouseEvt.layerX,mouseEvt.layerY,mouseEvt.offsetX,mouseEvt.offsetY(源码)

       é¼ æ ‡ç›¸å…³ä½ç½®è®¡ç®—，必须依赖一个正确的排布，所以必须触发reflow。

getComputedStyle

       getComputedStyle通常会导致重排和重绘，是否触发重排取决于是否访问了位置相关的key等因素。

Range相关

       range.getClientRects(),range.getBoundingClientRect()

       èŽ·å–选中区域的大小，必须reflow才能保障精确性。

SVG

       å¤§é‡SVG方法会引发重排，就不一一枚举了，总之使用SVG操作时也要像操作dom一样谨慎。

contenteditable

       è¢«è®¾ç½®ä¸ºcontenteditable的元素内，包括将图像复制到剪贴板在内，大量操作都会导致重排。(源码)

精读

       Whatforceslayout/reflow下面引用了几篇关于reflow的相关文章，笔者挑几个重要的总结一下。

repaint-reflow-restyle

       repaint-reflow-restyle提到现代浏览器会将多次dom操作合并，但像IE等其他内核浏览器就不保证有这样的实现了，因此给出了一个安全写法：

//badvarleft=,top=;el.style.left=left+"px";el.style.top=top+"px";//betterel.className+="theclassname";//orwhentopandleftarecalculateddynamically...//betterel.style.cssText+=";left:"+left+"px;top:"+top+"px;";

       æ¯”如用一次className的修改，或一次cssText的修改保证浏览器一定触发一次重排。但这样可维护性会降低很多，不太推荐。

avoidlargecomplexlayouts

       avoidlargecomplexlayouts重点强调了读写分离，首先看下面的badcase：

functionresizeAllParagraphsToMatchBlockWidth(){ //Putsthebrowserintoaread-write-read-writecycle.for(vari=0;i<paragraphs.length;i++){ paragraphs[i].style.width=box.offsetWidth+'px';}}

       åœ¨for循环中不断访问元素宽度，并修改其宽度，会导致浏览器执行N次reflow。

       è™½ç„¶å½“JavaScript运行时，前一帧中的所有旧布局值都是已知的，但当你对布局做了修改后，前一帧所有布局值缓存都会作废，因此当下次获取值时，不得不重新触发一次reflow。

       è€Œè¯»å†™åˆ†ç¦»çš„话，就代表了集中读，虽然读的次数还是那么多，但从第二次开始就可以从布局缓存中拿数据，不用触发reflow了。

       å¦å¤–还提到flex布局比传统float重排速度快很多（3msvsms），所以能用flex做的布局就尽量不要用float做。

reallyfixinglayoutthrashing

       reallyfixinglayoutthrashing提到了用fastdom实践读写分离：

ids.forEach(id=>{ fastdom.measure(()=>{ consttop=elements[id].offsetTopfastdom.mutate(()=>{ elements[id].setLeft(top)})})})

       fastdom是一个可以在不分离代码的情况下，分离读写执行的库，尤其适合用在reflow性能优化场景。每一个measure、mutate都会推入执行队列，并在window.requestAnimationFrame时机执行。

总结

       å›žæµæ— æ³•é¿å…ï¼Œä½†éœ€è¦æŽ§åˆ¶åœ¨æ­£å¸¸é¢‘率范围内。

       æˆ‘们需要学习访问哪些属性或方法会导致回流，能不使用就不要用，尽量做到读写分离。在定义要频繁触发回流的元素时，尽量使其脱离文档流，减少回流产生的影响。

       è®¨è®ºåœ°å€æ˜¯ï¼šç²¾è¯»ã€Šwebreflow》·Issue#·dt-fe/weekly

       å¦‚果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读-帮你筛选靠谱的内容。

       ç‰ˆæƒå£°æ˜Žï¼šè‡ªç”±è½¬è½½-非商用-非衍生-保持署名（创意共享3.0许可证）

原文：/post/

精读 《 echarts-for-react 源码 》

       echarts-for-react 是一个将 ECharts 数据可视化库与 React 框架无缝结合的封装组件，旨在简化在 React 应用中创建动态图表的过程。本文将深度解析 echarts-for-react 的核心功能与工作原理，帮助开发者更全面地理解该库的内部机制。

       在使用 echarts-for-react 时，用户无需担心实例容器的宽度和高度，只需通过 `setOption` 方法动态生成图表。该库提供了一系列高级参数，包括事件处理、主题定制和动态数据更新，增强了图表的灵活性和交互性。

       深入阅读源码，我们可以发现其设计逻辑严谨。`componentDidMount` 生命周期方法确保了组件的初始化流程，通过调用 `rerender` 方法更新 echarts 实例，实现图表的即时呈现。`renderEchartDom` 方法负责绘制图表，并通过 `showLoading` 展示加载指示器，提升用户体验。`bindEvents` 方法则通过遍历并绑定预定义的事件处理函数，增强了图表的交互功能。

       为了优化图表的性能和响应速度，`shouldSetOption` 方法在组件更新时进行了智能判断。当图表主题、配置选项或事件处理逻辑发生变化时，组件会进行相应的销毁与重建，确保图表始终处于最佳状态。此外，源码中还考虑了样式修改可能引发的边界情况，通过精心设计的逻辑，实现了高效且稳定的图表渲染。

       当组件卸载时，`dispose` 方法负责清理 echarts DOM 容器和实例，确保资源的高效释放，防止内存泄漏。

       通过解析 echarts-for-react 的源码，我们不仅能够深入了解其内部实现，还能够发现可能的优化点，如进一步简化配置流程、提高事件处理的效率等。开发者可以参与到相关讨论中，共同推动社区技术进步，共享最佳实践。

       遵循开源精神，echarts-for-react 遵守自由转载 - 非商用 - 非衍生 - 保持署名（CC BY-NC-ND 3.0）许可协议，鼓励开发者在遵守许可条件的基础上，自由地讨论、修改和使用该库。