【layui分离源码】【mongodb unwind源码】【手机按键源码】blink源码解析-皮皮网

【layui分离源码】【mongodb unwind源码】【手机按键源码】blink源码解析

2024-12-29 01:33:08 来源：大牛出筛源码

1.你真的码解了解 setTimeout 么？聊聊 setTimeout 的最小延时问题（附源码细节）
2.网页源代码的基本结构是什么
3.什么是跨终端
4.Chromium源码剖析：HTTP缓存策略与架构
5.探索chrome二进制大小的变迁和剪裁chromium的一些思路

blink源码解析

你真的了解 setTimeout 么？聊聊 setTimeout 的最小延时问题（附源码细节）

在 JavaScript 中，setTimeout 是码解不可或缺的工具，它允许你设定代码在一定时间后执行。码解尽管不是码解 ECMAScript 标准的一部分，但大多数 JavaScript 环境都支持它。码解HTML5 标准对setTimeout 的码解layui分离源码行为有所规定：当嵌套层级超过 5 层且 timeout 小于 4ms 时，会设定一个最小间隔为 4ms。码解让我们通过实例来看看实际的码解实现情况：

在 Chrome 中，当嵌套超过 5 层时，码解timeout 会设定为 4ms，码解例如：

输出显示，码解前 4 次的码解 timeout 都是 0ms，之后的码解间隔则超过 4ms。

然而，码解不同 JavaScript 运行时（如 nodejs、码解deno 和 bun）的setTimeout 行为有所差异。例如：

nodejs 的 v..0 版本中，没有 4ms 的最小延时限制，每次调用大约有 1ms 的间隔。

deno v1..2 中，超过 5 层嵌套后有 4ms 的最小延时，但前几次调用也有一小段间隔。

bun v0.5.7 的行为更为特殊，它在短时间内执行了大量回调，因为setTimeout 没有延时设置，实际上与事件循环次数有关。

深入了解这些运行时的源码，setTimeout 的实现与浏览器引擎（如 Chromium）的 Blink 引擎中的 DOMTimer 类相关。例如，在 Chromium v.0..0 中，如果嵌套层级过高且 timeout 小于某个阈值，会设置为最小间隔以防止性能问题。

在 nodejs 中，setTimeout 的限制在内部 timers.js 文件中实现，确保 after 值在合理范围内。而在 deno 中，通过 Rust 的 tokio 库实现延时限制，延时精度取决于所用的平台。

Bun，作为一款性能优化的运行时，对setTimeout 的 0ms 处理独特，0ms 的 timeout 直接加入任务队列，导致循环次数激增。

总的mongodb unwind源码来说，setTimeout 的行为会根据运行时环境的差异而变化，开发者在使用时需要了解这些特性以确保代码的正确执行。

网页源代码的基本结构是什么

如图：

1.无论是动态还是静态页面都是以“<html>”开始，然后在网页最后以“</html>”结尾。

2.<head>”页头

其在<head></head>中的内容是在浏览器中内容无法显示的，这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域，而里面“<title></title>”中放置的是网页标题。

3.“<meta name="keywords" content="关键字" /> <meta name="description" content="本页描述或关键字描述" /> ”

这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。

4."<body></body> "

也就是常说的body区，这里放置的内容就可以通过浏览器呈现给用户，其内容可以是table表格布局格式内容，也可以DIV布局的内容，也可以直接是文字。这里也是最主要区域，网页的内容呈现区。

5.最后是以"</html> "结尾，也就是网页闭合。

以上是一个完整的最简单的html语言基本结构，通过以上可以再增加更多的样式和内容充实网页。

扩展资料：

标签详解：

1.<!doctype>：是声明用哪个 HTML 版本进行编写的指令。并不是 HTML 标签。<!doctype html>：html5网页声明，表示网页采用html5。

2.<meta>：提供有关页面的元信息（针对搜索引擎和更新频度的描述和关键词等），写在<head>标签内。

a）<meta charset="UTF-8">：设置页面的编码格式UTF-8；

b）<meta name="Generator" content="EditPlus">：说明生成工具为EditPlus；

c）<meta name="Author" content="">：告诉搜索引擎站点制作的作者；

d）<meta name="Keywords" content="">：告诉搜索引擎网站的关键字；

e）<meta name="Description" content="">：告诉搜索引擎网站的内容；

参考资料：

html代码-百度百科

什么是跨终端

链接：/post/

鉴于很多人对跨端技术感觉很神秘，虽然我实际上还没有写过一个从0到1的跨端框架，但是我曾经用Yoga(布局引擎Yoga(React-Native)做过一些简单的跨端的事情，后来用了Weex。研究跨端有一段时间了，想科普一下。

科普之前，首先你要知道，为什么需要跨端技术？我们通常会把Weex和React-Native(本文统称为RN)说成是跨端技术吗(Flutter没有单独提到)？

其实不是，好像Android/iOS本来是两个人的，但最终变成了一个人。我的人力减少了一半！

但前提是这个人力需要懂Android，iOS，JavaScript，手机按键源码更懂，不然出了问题，怎么修？

所以在中国的互联网环境下，很难招到这样的人。大家都在研究PPT架构技术，职场生存理论，岁如何解脱财富。我们如何有时间扩展我们的技术堆栈？

端上开发很惨，总有崩溃(使用崩溃，闪退)而且没有办法远程修复。只能等下一个版本给使用市场推一个修复bug的新版本。

但如果推送新版本，用户可能不会升级。因此，许多公司研究了各种热修复框架，尤其是在Android平台上。有很多热修复框架，主要是由DexClassLoader来完成。

但是，最早的时候，WebView有一个很大的问题，尤其是Android。而且加载网页肯定要花时间，过程中屏幕会一片空白等等。所以很多人围绕这些做了很多优化。我个人觉得最有用的其实是线下套餐。同时，每一代WebView也在更新升级。然后一些有实力的公司开发了自己的所谓浏览器内核，各种黑科技，如何提速，支持各种特性等等。但是好像没有开源：dog:

不算。这只是跨安卓和iOS，不把我的PC当目的？

其实浏览器是跨端的，每个平台都可以用Chrome(其他浏览器主要是想做不做)！但是它也有自己的问题，因为各家都有自己的浏览器，内核不同，划分越来越大。chrome(Blink)/Safari(WebKit)/Firefox(Gecko？)等等，尤其是对css的支持。

Developer.mozilla.org/zh-CN/docs/.这个网站可以检查一些浏览器的diygw 源码下载兼容性。例如，边框宽度的兼容性如下：

其实也不是不可以，但是这样做相当于直接为OpenGL或者其他图形引擎编程，而且要自下而上的搭建一套渲染机制，打包各种基础UI组件给开发者使用，或者留下很多漏洞让开发者自定义自己的UI，非常复杂。但其实Flutter就是这么做的，所以Flutter2.0又开始向桌面端发展了，而且不局限于Android/iOS，但不知道能走多远。还有的是搞React-Native-Skia的，所以用js代码直接调Skia(2D图形渲染引擎)？(具体没看过)

你写的JavaScript代码为什么能运行？这取决于JavaScript引擎。

扔给它一段js代码(实际上是一个文本字符串)，它就能帮你计算结果，处理逻辑。

常见的Weex、RN、Hippy也依赖于此(MLN使用Lua)进行逻辑处理。

这个时候会有很多概念。

有些人喜欢把JavaScript引擎称为JavaScriptCore(不知道为什么，可能是因为iOS开发者才是研究这些比较深入的人，因为苹果的JavaScript引擎叫JavaScriptCore。苹果的这个JavaScriptCore呢？很多人喜欢称之为JSCore或者JSC)。所以，后来看到这些名词，我总是把它们带入语境中去感受他想说的是JavaScript引擎还是苹果的JavaScript引擎 JavaScript Core (JSCore/JSC)。

先说JavaScript引擎。

是的，有这么多！当然还有JavaScriptCore(不在图中)。

最后一行是跑分，越多越好。有JIT的V8在3w挂所有东西。其中QuikJS极小，得分很高。估计很多人会用QuikJS做跨端JavaScript引擎吧？赫尔墨斯是由脸书创造的。看来Android目前在RN中使用的JavaScript引擎已经取代了之前使用的JavaScriptCore。RN为什么一直不用V8？这个我也不知道.

但是很多人都在搞Android的V8项目，Github上也有一些开源项目。其次，iOS不支持JIT，有自己的activemq源码查看JavaScriptCore，没有JIT改V8似乎意义不大。

一个正常的跨端框架最简单的情况如下(后面会讨论问题，逐步丰富):

用一个

简单的例子看

假设我的 js 文件中就是要展示一个红色的 div 方块。那么首先，端会把这个文本传给 JavaScript Runtime，它解析完后形成一个约定的格式，比如如下的 JSON 格式(里面的值用来描述是一个*红色方块，我随便定义的)

{ "name":"div", "width":"", "height":"", "background":"red"}

通过 JavaScript Runtime 和端(Android/iOS) 通信，把这个消息传回去。

端拿到了消息，发现要创建一个 * 的叫做 div 的东西，没有 div 啊！这就需要端上提前埋好代码，比如 Android 里有 FrameLayout，那么就有类似的注册代码

// 伪代码register("div", FrameLayout.class);

然后端就知道了，oh！我需要创建一个长宽的正方形。

首先，这是框架设计提前思考好的，究竟要支持哪些基础组件，比如 image 、text 等等。而且一般这里都会开个口子，让开发者可以自己扩展组件，比如你需要一个横滑列表，没提供怎么办？看看 div 怎么注册的，按照它的过程注册一个列表就好了。这也可以 PPT 吹成：扩展跨端框架，其实门槛比自定义 View 还要低。

前面说了 JavaScript Engine，这里咋又来了个 Runtime？

JavaScript Engine 能做什么？

什么都做不了，只能解析执行 js 代码

那么问题来了，我怎么去描述我写的 js 代码代表的视图呢？其实不用描述，js 代码只要在内存中维护好一个树形结构就好了，就是一个 Object，因为实体在具体的端上，怎么理解呢？

左边只要在内存中维护好这样一个树形结构就好了，传递给客户端时，转为

{ "name":"div", "children":[ { "name":"image" }, { "name":"div", "children":[] } // 等等 ]}

端上拿到消息，创建视图为右图中的结构即可。

如何维护好这个模型呢？调用什么 js 的方法发送消息呢？怎么给这些个 div 加上 css 来描述它的大小形状呢？等等更复杂的一系列的前端问题，都需要写代码来实现。

所以一般都会有个 core.js 或者 framework.js 类似的一堆 js 代码，就是用来处理这些事情，而这些代码同样依靠 JavaScript Engine 来执行。

从而所谓的 JavaScript Runtime ，我觉得可以单纯的理解为 JavaScript Engine 自身的代码跑起来后的环境，也可以理解为 core.js 等被跨端框架所需要的、包含了各种逻辑的前端代码被加载运行后的环境。

当你用这些跨端框架的时候，你会发现他们只支持 css 子集，而且布局方式基本都是 flexbox(一种布局模型) 。

那么比如你写了一个横着容纳了三个小方块的大方块，你的前端 css 代码肯定要写成， flex-diretion:row ，那么抛给端上的消息可能如下：

{ "name":"div", "attribute":{ // 使用布局 "flex-diretion":"row" }, "children":[ { "name":"div" }, { "name":"div" }, { "name":"div" } ]}

端上拿到这个消息，都不知道 flex-direction 是什么。当然，你可以自己写一个解析库来解，但是 Yoga 帮你做了这件事！

所以 RN 使用的是 Yoga 布局引擎(支持 flexbox，也是 Facebook 搞的)。

Weex 似乎一开始是用的 Yoga，后来自己写了一套？

这个地方就出现了一个名词 Layout Engine ，它就是帮我们处理各种布局参数的，然后帮我们算好每个视图的坐标，然后端上拿到坐标后设置对应的视图的坐标，一个井井有条的视图便展示了出来。如果你觉得你写的布局解析算法超越了 Yoga 等等，那么你完全可以自己写一套。

比如从 JavaScript Runtime 处理完各种属性了，要渲染视图了！传了一段 JSON 给端。

端上手指点了一下这个视图，那也要封装成一个消息传递给 JavaScript Runtime，然后触发你之前写的 js 的监听代码，比如点击后弹一个弹窗，那就又要封装一个调用弹窗方法的消息给端。

就是这样来来回回。

所以两边都有自己的消息队列。

而且当你做动画还想监听动画过程的时候，肯定在短时间内发送了大量消息，这些过程肯定是需要优化的。

并且！据我个人用 Weex 的经验，有的 flexbox 属性两端都不统一(可能是 Weex 的 Bug，毕竟 KPI 项目，都不维护了)

我记得当时还开玩笑说，用了 Weex 终于领悟了跨端的真谛：

if(platform === 'Andoird') { // 差异化逻辑} else if(platform === 'iOS') { // 差异化逻辑}

跨端的代价就是，你本以为真的可以一套代码两端跑，后来发现真的有点做梦了(连 H5 有时候 Andoird/iOS 都不一致，因为用的内核都不是一个)，代码里有不少的 if-else。

所以经过上面的一系列科普，一个跨端框架成了这样：

这其中一般是需要一个客户端、一个前端、一个懂 JavaScript Engine 会 C/C 的来分别开发。

我虽然没开发过，但是感觉会有很多问题。

比如 JavaScript Runtime 在另一个进程的话，跨进程通信？

比如消息通信过于频繁是不是就会有各种连锁反应，掉帧啊、事件响应不及时、动画不流畅啊，怎么优化？

其实我本身一直自诩喜欢研究原理，但是直至今日我也没真的一行行看过跨端框架的源码，我知道的这些也未必是对的，只是之前做过 Weex 的一些工作稍微研究了一下，还是挺惭愧的。

既然你自称喜欢研究原理，为什么不看呢？

链接：/post/

相关问答：相关问答：手机端和电脑端各是什么？

电脑端和手机端，实际上说的就是平台问题。

当我们使用电脑的时候，电脑基本使用的操作平台是windows，或者苹果等常用操作系统。

而手机上用的平台，如安卓，苹果的IOS，当年诺基亚的塞班，黑莓的系统，都叫做手机端。

那么怎么定义手机端和电脑端呢，我们可以这么理解，如果用电脑操作系统的设备，即便是平板电脑，你也可以理解成是电脑端。

如微软平板电脑surface，他的定位是平板也是电脑，

我们很多的平板，多数使用的是安卓系统，苹果的当然就是IOS，但是平板使用基本使用的移动平台，也就可以看成是手机端。

但是，如果这个移动设备的平台使用的是电脑的操作系统的时候，他所使用的平台，也就成了电脑端。

Chromium源码剖析：HTTP缓存策略与架构

Chromium的HTTP缓存策略与架构涉及到多个关键点，从浏览器的多进程架构出发，直至深入HTTP协议的实现，以及针对基于HTTP协议的网络应用的优化。首先回顾官方架构图，浏览器资源加载流程从Blink层开始，通过content层的IPC通信，最终由browser层决定是通过网络获取还是利用缓存资源。本文主要聚焦于browser层的代码，特别是与HTTP缓存策略相关的类和架构。

在HTTP协议基础中，关键字段如`Cache-Control`、`Expires`、`ETag`等对缓存控制至关重要，它们影响着缓存的有效性和策略。对于HTTP请求与响应中常用字段的解释，有助于理解如何根据这些字段决定资源加载路径。HTTP协议中的分片请求与浏览器的分片缓存策略相结合，支持在线播放、滑动进度条等操作，对于多媒体资源的加载尤其关键。

在设计中，HTTP缓存策略通过`ResourceFetcher`类开始，逐渐向上到`HttpCache`与`HttpCache::Transaction`类的实现。`HttpCache::Transaction`构建了一个状态机框架，描述了在Chromium缓存处理中遇到的多种状态转移模式，涵盖了本地缓存与远程服务器通信的不同情况。状态机的转移逻辑展示了资源如何在缓存系统中流动，以及在不同阶段可能涉及的同步与异步处理。

预取机制是Chromium的一个重要特性，通过提前获取文档中的链接或资源文件清单，浏览器可以在后台缓存或处理它们，以减少稍后加载所需的时间。预取的时机与场景，尽管本文并未详细探究，但读者可自行研究，欢迎讨论。

Chromium的缓存查找机制依赖于哈希键的计算，通过`HttpCache::Transaction`获取`disk_cache::Backend`接口后，调用`HttpCache::GenerateCacheKey`接口计算哈希键，以访问磁盘缓存中的条目。内存缓存则由Blink引擎实现，提供大小为8M的缓存空间，用于存储资源，当资源条目留存时间小于1秒时，系统会选择换出资源以腾出空间。

Chromium的HTTP缓存系统涉及复杂类之间的交互与状态转移，以及内存与磁盘缓存的管理。虽然系统设计复杂，但其背后的逻辑与机制具有研究价值。预取、内存缓存的换入换出策略、Disk Cache系统等都是值得深入探讨的话题。理解这些机制有助于优化网络应用的性能与用户体验。

探索chrome二进制大小的变迁和剪裁chromium的一些思路

研究chromium源码的价值不仅在于学习，还在于商业应用，但随着版本升级，cef的大小从MB增长至MB，对注重安装包大小的开发者来说，寻求减小chromium内核尺寸是一个挑战。本文通过对比历史版本，探究chrome二进制文件的变化，为裁剪chromium提供策略。

首先，对比不同版本chrome的Windows 位安装包，发现从MB增长到MB，我们挑选了变化显著的包进行详细分析（红色箭头标出）。解压后，逐版本对比安装包内的文件大小变化，以及各文件占总大小的百分比变化。

chrome.dll的体积持续增长，占总大小的比例也不断提升，但其他模块总体趋势向小型化发展。在chrome.dll模块分析中，发现至版本，chrome_child.dll的合并抑制了体积增长；至版本，notification_helper.exe等模块的合并导致显著增长。这说明模块合并对整体体积控制有积极作用，但同时也增加了去除特定功能的难度。

特别指出，3D模块的增长显著，删除支持3D相关的文件可减小MB。snapshot技术优化带来体积减少，部分隐藏在chrome.dll中。资源相关的文件体积明显减小，如icudtl.dat，可通过裁剪减少到几十KB。

关于裁剪思路，虽然chromium编译中间产物有3w多个obj文件，但我们通过分析Top 文件，发现v8和third_party模块的体积较大。通过一级目录聚合，可以看出v8和third_party\blink的体积不容忽视。进一步细分，blink的core和bindings模块对二进制贡献较大，而v8的优化则需更细致的处理。

特别值得关注的是，perfetto的trace_processor模块和pdfium、libjxl、dawn、webrtc等第三方库对体积影响较大。考虑使用V8的V8Lite模式和裁剪jit、wasm模块，能有效减少V8体积。然而，这些基于编译中间产物的分析可能与最终dll大小存在偏差，一般能减小-%的体积。

总的来说，理解chromium源码和运行方式有助于优化，对开发者来说，这是一次从不同角度深入了解chromium的机会。欢迎交流和学习。