博客 / 列表

一顆冰淇淋 - PC首頁資源加載速度由8s降到2s的優化實踐

隨着需求的不斷開發，前端項目不斷膨脹，業務提出：你們的首頁加載也太慢啦，我都需要7、8秒才能看到內容，於是乎主管就讓我聯合後端開啓優化專項，目標是3s內展示完全首頁的內容。 性能指標 開啓優化時，我們要清晰的知道現狀和目標，以及我們採用什麼樣的手段，通過檢測什麼指標來查看到優化的過程。 結果指標 根據這個目標，我們可以選擇一些性能指標，google 提供了基於用户體驗的性能指標，如FCP、LCP、

性能優化 , 性能分析 , lodash , 前端 , Javascript

一顆冰淇淋 - 去中心化組件共享方案 —— Webpack Module Federation（模塊聯邦）

在大型應用中， 我們可能會對其進行拆分，分成容器、主應用和多個子應用，使拆分後的應用獨立開發與部署，更加容易維護。但無論是微應用、公共模塊應用，都需要放到容器中才能使用。 如果多個應用之間希望資源共享，除了使用 npm 包的形式，基於Webpack 5 Module Federation（模塊聯邦）實現的EMP微前端方案也可以一試，它不限制技術棧，但依賴於 Webpack5。 使用場景 如果應用B

組件通信 , 工程化 , webpack , 前端 , Javascript

一顆冰淇淋 - 從 HTTP/1.1 到 HTTP/3

從 HTTP/1.1 到 HTTP/3，解決了一些舊協議的問題，引入了好用的新功能。 HTTP/1.1 HTTP/1.1 通過在傳輸層和應用層之間增加 SSL/TSL 解決數據不安全的問題，但它本身還有一些其它的不足。 同一時間，一個連接只能對應一個請求，針對同一個域名，大多數瀏覽器允許同時最多6個併發請求 只允許客户端主動發起請求，一個請求只能對應一個響應 同一個會話的多次請求中，頭信息

http3 , http-2 , HTTP , 網絡傳輸協議 , 前端

一顆冰淇淋 - 看，這些 plugins 常用又簡單

前面文章中 體驗了webpack的打包 、解析css資源 、處理圖片字體等文件 接下來看看 plugins 有什麼作用吧~ 項目路徑如下，和上一篇 處理圖片字體等文件 項目保持一致 demo ├─ src │ ├─ css │ │ ├─ index.css │ │ └─ file.css │ ├─ img │ │ ├─ portrait.png │ │

plugin , webpack , 前端 , Javascript

一顆冰淇淋 - 自定義防抖函數五步應對複雜需求

防抖定義 某些頻繁操作的事件會影響性能，"防抖"可以用來減少事件的響應頻次，當事件觸發的時候，相對應的函數並不會立即觸發，而是會進行等待，只有等待了一段時間之後，事件停止觸發，此時才會執行響應函數。 防抖案例 比如屏幕設定了1分鐘的熄屏時間，如果用户在這1分鐘之內，沒有對電腦進行任何的操作，那麼電腦就會在一分鐘時準時熄屏，但如果用户在第50秒的時候，移動了一下鼠標，熄屏的時間會從這一刻開始重新計時

前端性能優化 , 前端 , Javascript

一顆冰淇淋 - 你一定要知道的iterator和generator

generator是一種特殊的iterator，generator可以替代iterator實現，使代碼更為簡潔 什麼是iterator iterator叫做迭代器，是用來幫助某個數據結構進行遍歷的對象，這個對象需要符合迭代器協議（iterator protocol）。 迭代器協議要求實現next方法，next方法有如下要求 0或者1個函數入參 返回值需要包括兩個屬性，done 和 value

ecmascript-6 , iterator , generator , 前端 , Javascript

一顆冰淇淋 - 通過Proxy和Reflect實現vue的響應式原理

vue3通過Proxy+Reflect實現響應式，vue2通過defineProperty來實現 Proxy Proxy是什麼 Proxy是ES6中增加的類，表示代理。 如果我們想要監聽對象的操作過程，可以先創建一個代理對象，之後所有對於對象的操作，都由代理對象來完成，代理對象可以監聽到我們對於原對象進行了哪些操作。 Proxy怎麼使用 Proxy是一個類，通過new關鍵字創建對象，傳入原對

vue.js , ecmascript-6 , 響應式 , 前端 , Javascript

一顆冰淇淋 - 原來ES7~12分別增加了這些屬性呀

ES6也稱為ES2015，於2015年發佈，此後每年都有新增一些屬性，分別命名為ES7~12，發佈的年份分別對應2016年到2021年 ES7 includes方法 數組中新增了includes方法，用來判斷數組中是否存在某一元素，在此之前進行這樣的判斷是使用indexOf判斷下標值，小於0時則代表不存在。 const list = ['alice', 'kiki', 'macus'] cons

ecmascript-6 , es7 , ecmascript , 前端 , Javascript

一顆冰淇淋 - js中的函數式編程

函數是javascript中非常重要的一部分，用途也非常的多，可作為參數、返回值、回調等等，下面有一些函數式編程的重要概念和定義 純函數 純函數屬於程序設計的名詞，其它語言中也是存在的，而在javascript中，符合以下規則即為純函數。 函數有相同的輸入，必定有相同的輸出 函數的輸出僅與輸入有關，與其他隱藏信息無關 不得產生任何的副作用，如 觸發事件等 副作用：除了返回函數值以外，還對

函數式編程 , 嚴格模式 , currying , 前端 , Javascript

一顆冰淇淋 - koa搭建nodejs項目並註冊接口

使用nodejs註冊接口邏輯處理會比較複雜，直接通過express或者koa能夠簡化開發流程，這裏記錄用koa來搭建nodejs項目並註冊接口，對koa不太熟悉的話可以參考這一篇。讓nodejs開啓服務更簡單--koa篇 項目結構 項目整體結構如下，將不同功能的文件按模塊劃分，使得代碼邏輯更為清晰 node_modules // 安裝的包 src

node.js , MySQL , koa , 接口

一顆冰淇淋 - 瀏覽器緩存機制(強緩存和協商緩存)

1、為什麼需要瀏覽器緩存？ 當我們訪問同一個頁面時，請求資源、數據都是需要一定的耗時，如果可以將一些資源緩存下來，那麼從第二次訪問開始，就可以減少加載時間，提高用户體驗，也能減輕服務器的壓力 2、有哪些緩存？ 瀏覽器緩存分為強緩存和協商緩存，當存在緩存時，客户端第一次向服務器請求數據時，客户端會緩存到內存或者硬盤當中，當第二次獲取相同的資源，強緩存和協商緩存的應對方式有所不同。 強緩存

瀏覽器 , HTTP , 瀏覽器緩存 , HTML , 前端