Frontend-DingYu的一些筆記

Posted byJamie Friday, April 5, 2024

[Frontend Note]What we talk about when we talk about SSR

The server side render from NextJS

We will mock the process of SSR base on NexgJS 14 app router.

Posted byJamie Monday, April 1, 2024

[Frontend Note] A quick recap on throttle and debounce

Functions we use often but do not always fully understand

Using them again and again, I suddenly realized I was not actually that clear on the difference between the two. So this post is a way to walk myself through what each one does and the common scenarios where they are used.

Posted byJamie Tuesday, June 27, 2023

[Frontend Note] How Frontend Sets Up a Private CDN Site

Use an enterprise private CDN to optimize page speed and security

Using an enterprise private CDN site can not only speed up frontend resource loading and reduce bundle size, but also improve project security and reliability!

Posted byJamie Wednesday, December 28, 2022

[DevOps Note] Minimal Docker + Nginx

A minimal Docker + Nginx note for frontend engineers

These are notes from work projects where the backend did not have time to help me out, so I figured out a few Docker/Nginx UAT projects on my own.

Posted byJamie Tuesday, December 20, 2022

[Frontend Note] Javascript Execution Context and Scope

Understanding execution context and scope in JS gives a better grasp of how it works under the hood

Rather than stepping into traps one by one and only fragmentarily memorizing which patterns will produce bugs, it is better to dig into Javascript's underlying principles once and avoid those potential traps entirely!

Posted byJamie Thursday, November 3, 2022

[Frontend Note] Web Security from the Browser's Perspective

A minimal frontend security note

Looking at Web security from the browser's perspective, it can be roughly divided into Web page security, browser network security, and browser system security.

Posted byJamie Wednesday, November 2, 2022

[Frontend Note] What are macrotasks and microtasks in the EventLoop

Use macrotasks and microtasks to fully understand asynchronous behavior in Javascript

When asynchronous behavior is mentioned in Javascript, names like `setTimeout`, `Promise`, and `async/await` immediately come to mind. However, while learning about V8 and the browser recently, I realized that although these three are all asynchronous on a macro level, they are actually quite different on a micro level.

Posted byJamie Monday, October 31, 2022

[Frontend Note] Frontend performance optimization from the browser's perspective

Analyzing frontend performance optimization through the browser rendering principles

After the browser receives the HTML data from the Network Process, it hands it off to the Render Process for rendering. From a frontend engineering perspective, performance optimization is about tuning the code during the Render Process rendering to speed up rendering.

Posted byJamie Wednesday, October 26, 2022

[Frontend Note] What happens after entering a URL in the browser?

Walking through the page loading flow from Chrome's multi-process architecture

A common interview question — what actually happens when you enter a URL? Walking through Chrome's multi-process architecture, the network request, and the rendering flow.

Posted byJamie Tuesday, October 25, 2022

Jamie's tech blog

[Frontend Note]Does NextJS App Routing Have Its Quirks?

NextJS App Routing Cheatsheet