博客 / 列表

愛吃啤酒味豬蹄 - left:50% 和 transform:translateX(-50%) 為什麼可以實現元素居中顯示

工作原理拆解 第一步:left: 50% .child { left: 50%; } 將子元素的左邊緣定位到父元素的中心點 此時子元素的左邊緣在父元素的中間位置 問題:整個子元素是偏右的,因為只有左邊緣居中 第二步:transform: translateX(-50%) .child

相對定位 , Css , 前端開發 , Javascript

愛吃啤酒味豬蹄 - Promise的三種狀態與鏈式調用原理

Promise的三種狀態 1. 狀態定義 Promise對象代表一個異步操作的最終完成或失敗,它有且只有三種互斥的狀態: Pending(進行中) 初始狀態,既不是成功也不是失敗 操作正在進行中,尚未完成 Fulfilled(已成功) 異步操作成功完成 也稱為"re

promise 狀態 , promise鏈式調用 , 前端開發 , Javascript

愛吃啤酒味豬蹄 - 瀏覽器對隊頭阻塞的優化策略

什麼是隊頭阻塞 隊頭阻塞是指在管道中前面的請求/數據包處理過慢,導致後面請求被阻塞的現象。瀏覽器中存在兩種主要類型: HTTP層隊頭阻塞:HTTP/1.1 單連接請求串行問題 TCP層隊頭阻塞:TCP協議保證數據包有序到達的特性 瀏覽器優化方案 1. HTTP/1.1 時代的優化 1.1 併發連接與域名分片

優先級 , HTTP , 預加載 , 前端開發 , Javascript

愛吃啤酒味豬蹄 - 前端應用如何應對高併發場景

前端應用應對高併發場景的核心是減少服務端壓力、提升用户體驗和保證系統可用性。以下是具體策略和解決方案: 核心策略 1. 靜態資源優化 CDN 加速:將圖片、CSS、JS、字體等靜態資源分發到全球節點,減輕源站壓力。 資源合併與壓縮:減少 HTTP 請求數,使用 Tree Shaking、Code Splitting 優化打包體積。

靜態資源 , 高併發 , 前端開發 , Javascript

愛吃啤酒味豬蹄 - TS裝飾器的應用場景(Class、Method、Property)

裝飾器是一種特殊的聲明,它可以被附加到類聲明、方法、訪問器、屬性或參數上,用來修改或擴展類的行為。 重要提示:裝飾器目前是一個實驗性特性(截至 TS 5.5)。在 tsconfig.json 中需要啓用 "experimentalDecorators": true。此外,ESNext 的裝飾器提案已進入 Stage 3,語法略有不同,但核心概念相通。

方法裝飾器 , 屬性裝飾器 , 前端開發 , 類裝飾器 , Javascript