Content

Haolin Yang published on 2026-03-11 included in Posts

时间循环 event loop

More Detail

event loop 是浏览器上的概念。

进程和线程 process and thread

进程可以简单理解为内存上一块独立的空间

如果进程需要同时执行多个任务。那每个任务都可以是一个独立的线程。

浏览器是一个多进程多线程的application。浏览器非常复杂像一个操作系统。浏览器需要很多独立进程（网络进程。浏览器进程。渲染进程。。。。。。）

浏览器进程：浏览器展示。（导航栏，收藏）。用户互动。子进程管理（启动其他进程）。进程内部会有多个线程处理不同任务。网络进程：加载网络资源。多个线程负责同时加载多个资源渲染进程：启动后开启一个主线程。主线程负责 html css 。每一个标签页都是一个单独的渲染进程（将来可能是一个站点一个进程）

渲染主线程干什么：

html解析
解析css
计算样式 em->px 优先级
layout 长宽高
图层 z-index
每秒页面画60次 fps
js
event listener
回调函数 callback
。。。。。。。

那为什么不多线程呢？js 都是dom操作。大量的dom element如果被同时操作。太多lock了。lock本身的cost就不小。

如何调度任务

比如用户的click 的callback。要立刻处理吗？

结局办法 massage queue

渲染主线程里任务可以生成新的任务其他线程也可以添加任务。

最一开始的时候。渲染主线程会进入一个无限循环
每一次循环，都是检查消息队列里有没有任务。有就取出第一个执行。没有就进入休眠
所有线程（包括其他进程的线程）可以随时向message queue添加任务。

整个这个循环过程叫event loop （message loop）

何为异步

代码中有一些无法立即执行的任务

setTimeOut
XHR fetch
addEventListener

阻塞

工程化

Haolin Yang published on 2026-03-11 included in Posts

什么是工程化

前端开发的管理工具

降低开发成本，提升开发效率

一定从宏观视角去分类和理解各种工程化工具

模块化和包管理

模块化

分解和聚合的思想。分解契合的是主观规律。聚合契合的是客观规律。

问题

对于js来讲。分开各种function和分开各种文件就是分解的直观表现。

但是对于js来说分开文件存在问题。

全局污染（分解问题）
1.js 有一个sort()。2.js也有一个sort() 同时被 html import 就会冲突
依赖混乱（聚合问题）
html import js是需要按照顺序的。举例 1.js 有一个sort()。2.js也有一个isPrime()。假如sort()依赖isPrime(), 那么必须先引入 2.js 再引入 1.js。如果文件足够大，那这个依赖顺序就非常复杂了。而且在 html 的角度，由于是按顺序引入，是无法看出来文件之间的依赖关系
```
<body>
  <script src="./2.js"></script>
  <script src="./3.js"></script>
  <script src="./1.js"></script>
  //cannot see 1.js is depend on 2 or 3
</body>
```

标准

js 社区设计了很多标准来解决这个问题。

Understanding SSR

Haolin Yang published on 2025-10-20 included in Note

Why need Server site rendering

SEO !! + little bit meaningful first rendering

SSR is larger concept to react. If we take about SSR only, it need to compare with SPA not React.

While when using react to do the SSR. Very basic thought is like every route is SPA. How about write react only and make it become a SSR? Nextjs coming in.

hydration does

make page alive

old way < next.js13

each route send full html and react and hydration function

Understanding React Fiber - Trees, Diff, and Commit Phases

Haolin Yang published on 2025-10-12 included in Note

Good reference

This Blog explain fiber from fundamental of js.

Introduction

React Fiber is the core of modern React rendering, enabling incremental rendering, time slicing, and high-performance updates. In this blog, we will explore:

Fiber nodes and structure
Fiber loop and traversal
Diff/reconciliation algorithm
Work-in-progress (WIP) tree
Current fiber tree vs real DOM
Commit phase and tree flow

1. What is a Fiber Node?

A Fiber node is a unit of work in React’s incremental rendering. It contains:

React Concurrent

Haolin Yang published on 2025-08-13 included in Posts

What is React Concurrent?

“Concurrent Features” is a set of rendering capabilities introduced to make React apps more responsive. Instead of blocking the browser until all rendering is done, React can pause, resume, and even abandon a render in progress.

This allows React to:

Prioritize urgent updates (e.g., typing) over non-urgent ones (e.g., background data fetch results)
Avoid dropping frames during animations or scrolling
Keep the UI feeling “alive” even when there’s a lot of work to do

The underlying mechanism is cooperative scheduling — React voluntarily yields control back to the browser when time is up, and continues work later.

Asynchronous in JS

Haolin Yang published on 2025-07-20 included in Posts

Synchronous & asynchronous

Function run synchronously means code is running as same as your writing.

But in real situation, some code may need time to running (like fetch). If synchronously run all code, program will be block and wait this time consuming part finish and continue.

In the most of the time, You code logic need wait to continue but you don’t want to block all progress. Maybe UI rendering or some other total unrelated code. Unfortunately, JS is single thread langrage and concurrency is not exist. Therefore, you need some technique to some part running asynchronously,

HTML/Document Trick

xxxx published on 2024-02-26 included in Note Trick

Understanding offsetWidth, clientWidth, scrollWidth

Note

All these property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

Get Scrollbar width

Reference: https://www.30secondsofcode.org/js/s/get-scrollbar-width/

Get window scroll bar width

const getScrollbarWidth = () =>
    window.innerWidth - document.documentElement.clientWidth;

getScrollbarWidth();

Get a element scroll bar width

const getScrollbarWidth = (el) => {
    const leftBorder = parseInt(
        getComputedStyle(el).getPropertyValue('border-left-width'),
        10
    );
    const rightBorder = parseInt(
        getComputedStyle(el).getPropertyValue('border-right-width'),
        10
    );

    return el.offsetWidth - el.clientWidth - leftBorder - rightBorder;
};

getScrollbarWidth(el);

Element: getBoundingClientRect()

el.getBoundingClientRect() will return: left, top, right, bottom, x, y, width, and height.

Typescript Trick

xxxx published on 2024-02-26 included in Note Trick

generic types optional

To make a generic type optional, you have to assign the void as the default value.

const fetchData = <T = void>(url: string): T => {
    const res: T = fetch(url);
    return res;
};

https://garbagevalue.com/blog/optional-generic-typescript#quick-solutions-make-generic-type-optional

string[ ] & [ string, …string[ ] ]

The main difference is that type [string, ...string[]] at least have one element. [] will alert error. string[] could be empty. [] is ok.

Test markdown

Haolin Yang published on 2023-08-24 included in Posts

Introduction

This is a test blog post written in Markdown. It demonstrates common features used in blog writing.

test

header 2

header 3

header 4

header 5

list

normal list

Easy to write
Supports formatting
Clean and readable
Works with most static site generators

order list

123123
asdfadsf
lkasdf

Code Example

// Simple JavaScript function
function greet(name) {
  return `Hello, ${name}!`;
}

Features

Clean formatting Blockquotes for every section Inline links like OpenAI Quoted links: 👉 Visit Example Site

ffmpeg

xxxx published on 2023-03-12 included in Overview

Reference

example

concatenate

ffmpeg -f concat -i vids.txt -c copy out.mp4

vids.txt:

file 'name1.mov'
file 'name2.mov'
file 'name3.mov'

Type convention

ffmpeg -i in.mp4 out.mov

ffmpeg -i in.mp4 out.gif

Scale

It very common to reduce size of output file. Change scale usually the common and efficient way to do so.

时间循环 event loop

进程和线程 process and thread

如何调度任务

结局办法 massage queue

何为异步

什么是工程化

模块化和包管理

模块化

问题

标准

Why need Server site rendering

hydration does

old way < next.js13

Good reference

Introduction

1. What is a Fiber Node?

What is React Concurrent?

Synchronous & asynchronous

Understanding offsetWidth, clientWidth, scrollWidth

Get Scrollbar width

Get window scroll bar width

Get a element scroll bar width

Element: getBoundingClientRect()

generic types optional

string[ ] & [ string, …string[ ] ]

Contents

Introduction

header 2

header 3

header 4

header 5

list

normal list

order list

Code Example

Features

Reference

official

blog

node js

example

concatenate

Type convention

Scale