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，打包生成生产环境所需文件。
后端
将后端应用打包成可执行文件部署到服务器上。
配置后端服务器：部署后端应用到服务器上，确保后端应用能够正常运行。你可能需要安装相应的运行环境和依赖。
配置数据库：如果后端应用需要连接数据库，确保数据库服务已经正确配置并运行。
配置域名和端口：确保后端服务器的域名和端口设置正确，以便前端应用可以与后端应用通信。
当然这个流程涉及诸多的细枝末节，我们慢慢道来…
React系列：第十一回(reconciliation)
调和过程和diff
React系列：第十回(commit)
在前文中，我们介绍了基于所谓的fiber架构及requestIdleCallback实现的react快速渲染逻辑。本文中，我们介绍react的commit机制。1. 存在的问题仔细观察下面的代码：
const performUniteOfWork = (fiber) => {
console.log('<<<<<<<<<<<<<<<<performUniteOfWork>>>>>>>>>>>>>')
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快速渲染的原理
如何避免卡死？在第一回中，我们通过手撕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.appendChild(dom)
}
rend ...