应用层 : HTTP, HTTPS, FTP, DNS, SMTP, POP3 （具体的应用是什么）
|
传输层 : TCP, UDP （如何传输信息）
|
网络层 : IP (ROUTER) （如何在一个互联网找到对方）
|
数据链路层 : MAC address （如何在一个子网络找到对方）
|
物理层 : Cable, Fiber Optic, Wireless (物理层面信号的传输方式)Uniform resource locator
https://a.com:80/news/details?id=123#t1
<schema>://<domain>:<port>/<path>?<query_string>#<hash_string>domain: 哪个计算机 port: 端口 path: 哪个服务 query string: 参数 hash string: 和网络没太多影响
event loop 是浏览器上的概念。
进程可以简单理解为内存上一块独立的空间
如果进程需要同时执行多个任务。那每个任务都可以是一个独立的线程。
浏览器是一个多进程多线程的application。浏览器非常复杂像一个操作系统。浏览器需要很多独立进程 （网络进程。浏览器进程。渲染进程。。。。。。）
浏览器进程：浏览器展示。（导航栏，收藏）。用户互动。子进程管理（启动其他进程）。进程内部会有多个线程处理不同任务。 网络进程：加载网络资源。多个线程负责同时加载多个资源 渲染进程：启动后开启一个主线程。主线程负责 html css 。 每一个标签页都是一个单独的渲染进程（将来可能是一个站点一个进程）
渲染主线程干什么：
那为什么不多线程呢？js 都是dom操作。大量的dom element如果被同时操作。太多lock了。lock本身的cost就不小。
比如用户的click 的callback。要立刻处理吗？
渲染主线程里任务可以生成新的任务 其他线程也可以添加任务。
整个这个循环过程叫event loop （message loop）
代码中有一些无法立即执行的任务
阻塞
前端开发的管理工具
降低开发成本，提升开发效率
一定从宏观视角去分类和理解各种工程化工具
分解和聚合的思想。 分解契合的是主观规律。聚合契合的是客观规律。
对于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 社区设计了很多标准来解决这个问题。
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.
make page alive
each route send full html and react and hydration function
This Blog explain fiber from fundamental of js.
React Fiber is the core of modern React rendering, enabling incremental rendering, time slicing, and high-performance updates. In this blog, we will explore:
A Fiber node is a unit of work in React’s incremental rendering. It contains:
“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:
The underlying mechanism is cooperative scheduling — React voluntarily yields control back to the browser when time is up, and continues work later.
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,
Reference: https://www.30secondsofcode.org/js/s/get-scrollbar-width/
const getScrollbarWidth = () =>
window.innerWidth - document.documentElement.clientWidth;
getScrollbarWidth();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);el.getBoundingClientRect() will return: left, top, right, bottom, x, y, width, and height.
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
The main difference is that type [string, ...string[]] at least have one element. [] will alert error. string[] could be empty. [] is ok.
This is a test blog post written in Markdown. It demonstrates common features used in blog writing.
test
// Simple JavaScript function
function greet(name) {
return `Hello, ${name}!`;
}Clean formatting Blockquotes for every section Inline links like OpenAI Quoted links: 👉 Visit Example Site