谷歌插件流程：第三回
前面我们通过两篇文章，介绍了一个插件的完整开发过程。本文，我们从更加细致的层面，梳理下开发谷歌插件的必知规则
先看看我们的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 ...
React系列：第九回(concurrentmode、fiber)
本文介绍，react快速渲染的基石：concurrentmode、fiber上一代版本存在的问题在第一回中，我们通过手撕myCreateElement和myRender实现了基本的功能，但是仔细观察下之前写的render，是否存在什么问题？
const myRender = (element, container) => {
const dom = element.type === 'text'? document.createTextNode(element.props.nodeValue): document.createElement(element.type)
Object.keys(element.props).filter((item) => item !== 'children').forEach((item) => dom[item] = element.props[item])
element?.props?.children?.forEach((child) => myRender(child, dom))
container.append ...
发布自己的npm包
本文主要提一下，往公网上发布自己的npm包，大概的流程。目前的公司，稍微正经点的，都会有贴合自身业务的一套组件库，封装成所谓的“SDK层”，这样能够极大的减少前端项目的代码量。当然，这需要业务自身足够的稳定，否则，懂得都懂。
1. github创建一个仓库，npm初始化一下，完善包的一些必要字段。2. 假如自己想要复用的代码3. 登陆发布npm login
npm publish
具体操作参考下面文章，写的非常详细
https://juejin.cn/post/7039140144250617887
整个流程还是很简单的，当然在实操过程中碰到一个小问题。npm login 没有出现 username,反而是跳转到了cnpm注册...,解决方案：npm config set registry https://registry.npmjs.org/
更新包的版本// patch：补丁号，修复bug，小变动，如 v1.0.0->v1.0.1
npm version patch
// minor：次版本号，增加新功能，如 v1.0.0->v1.1.0
npm version minor ...