Webkit系列：第一回（先验内容）
一些关于浏览器的先验内容
2005年苹果开源了自家的safari浏览器内核webkit，2008年，谷歌改造webkit为blink，开发出了chromium，最终推出chrome。
chrome是一个典型的多进程的架构，即chrome这么个应用，是由多个子进程组成的，具体包括如下：
浏览器进程: 负责管理除了页面显示的其他区域，也就是及页面地址栏那些东西，当然还包括书签等。
渲染进程: 该进程又称为内核，将请求资源转换为可视化（可听化）的图像结果，就是浏览器内核。渲染进程又有多个重要的子线程组成，
GUI线程: 浏览器拿到请求资源后，有一步操作就是，根据html和css文件分别生成dom树和样式树，然后生成渲染树和布局树，这部分的工作，就是gui线程负责实现的。
JS线程：又称为js主线程，就是执行js代码的。
合成器线程：该线程获得布局树后，通过栅格化确定一帧的每个像素点数据，最终交由GPU进程处理。
定时器线程： 如果当js主线程执行代码时，遇到settimeout和setInterval两定时器的时候，主线程会把定时器函数扔给定时器线程处理，自己继续往下执行。定时线程等待设 ...
谷歌插件流程：第三回
前面我们通过两篇文章，介绍了一个插件的完整开发过程。本文，我们从更加细致的层面，梳理下开发谷歌插件的必知规则
先看看我们的manifest.json文件内容{
"name": "Ta-da",
"description": "zhihu_small_video_down",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "activeTab", "scripting"],
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"j ...
打通最后一公里：项目部署
本文介绍前后端分离项目，部署相关的细枝末节，打通最后一公里
静态站点部署这类的项目部署，很简单，都不需要关注域名服务器那些东西，可以借助vercel这样的第三方，一键部署。具体流程：前端项目挂在github上，然后去vercel上面导入即可
非静态站点部署一般这种项目会涉及两部分，前端、后端。前端负责视图，后端负责数据接口。具体流程:
前端
通过npm run build，打包生成生产环境所需文件。
后端
将后端应用打包成可执行文件部署到服务器上。
配置后端服务器：部署后端应用到服务器上，确保后端应用能够正常运行。你可能需要安装相应的运行环境和依赖。
配置数据库：如果后端应用需要连接数据库，确保数据库服务已经正确配置并运行。
配置域名和端口：确保后端服务器的域名和端口设置正确，以便前端应用可以与后端应用通信。
当然这个流程涉及诸多的细枝末节，我们慢慢道来…
基于cesium开发应用之问题
本文主要记录cesium开发过程中的坑加载模型太多导致卡顿加载上千个地标、模型、轨迹线等 Cesium Entity 时，页面帧率（FPS）骤降，操作视角卡顿，甚至浏览器内存溢出。原因：Cesium 默认对每个 Entity 单独渲染，海量实体导致 DrawCall（绘制调用）激增；解决方案：
数据分块 + 视域剔除：基于Cesium.ScreenSpaceCameraController监听视角变化，仅渲染当前视域内的实体，远距实体暂存 / 销毁；// 批量点优化（10万+点）
const pointCollection = new Cesium.PointPrimitiveCollection({
frustumCulling: true, // 开启视口剔除
});
开启性能优化配置viewer.scene.fog.enabled = true; // 开启雾效，远距模型自动淡化
viewer.scene.debugShowFramesPerSecond = true; // 监控帧率
viewer.scene.maximumAliasedLi ...
React系列：第十一回（fiber最终版）
本文介绍my_react的最终版在前作的基础上，新增了diff差异标记及commit阶段的全量更新。完整代码如下，不赘述了。
let nextUnitOfWork = null;
let wipRoot = null;
let currentRoot = null; // 新增：保存已提交的旧 Fiber 树（current 树）
let deletions = []; // 新增：保存需要删除的 Fiber 节点
// 1. 标记类型常量（精简版）
const Placement = 'PLACEMENT'; // 新增节点
const Update = 'UPDATE'; // 属性更新
const Deletion = 'DELETION'; // 删除节点
// 创建文本节点 Fiber
const createTextNode = (child) => ({
type: 'text',
props: { nodeValue: child, children: [] }
});
// 创建元素 Fi ...
React系列：第十回(commit+Reconciliation)
本文将介绍隔离fiber两个阶段：Reconciliation、Commit前文的瑕疵在上一篇文章中，我们介绍了基于fiber架构及requestIdleCallback，实现react快速渲染的demo.但是存在一点问题。仔细观察下面的代码：
const performUnitOfWork = (fiber) => {
console.log('<<<<<<<<<<<<<<<<performUnitOfWork>>>>>>>>>>>>>')
console.log('fiber>>>', fiber)
if (!fiber.dom) {
fiber.dom = createDom(fiber)
}
if (fiber.parent) {
fiber.parent.dom.appendChild(fiber.dom)
}
const elements = fiber?.props?.children ...
CSS系列：目下大前端样式的终极解决方案
本文主要介绍tailwind，这个在我看来，能够解决目前前端领域中，各种样式问题的终极解决方案，的库。
前端跟css相关的几个典型场景：移动端适配、页面换肤。相信做过的同学,无一不疯狂的掉过头发。倒不是说因为这个有多难，而是很烦，很杂。研发和产品互掐的重灾区。一套代码多端适用，确实很美好，但是这就要求项目从一开始就要严格关注到这个问题，以便后期的适配。
最近在帮一家海外的公司做项目时，发现他们的项目大量使用tailwind。更让我惊讶的是，他们的项目中，所使用到的组件，全部都是自己的开发人员自己实现的，搭配tailwind，对设计图的还原度，无限接近百分百，让我叹为观止。在接触他们之前的职业生涯中，基本上都是做的toB的业务，重逻辑功能的实现，至于ui，只要不是难看到人神共愤，基本上就可以了。接触了toC的业务之后突然发现，专业的前端，除了具备技术技能，还需要锻炼自身的美感。
tailwind这个库方便在哪？
极大的简化了css相关的代码
完美解决各端适配的问题举例：
在tailwind的配置文件中设定好自身需要的几种端的大小
screens: {
xs: '300p ...