原创 vue-cli 遷移 vite2 實踐小結
兩週前（202.02.17），vite2.0 發佈了，作爲使用了瀏覽器原生 ESM 爲下一代前端工具，vite 2.0 相較於 1.0 更加成熟。在此之前筆者就開始關注這類「新型」的前端工具。這次趁着 vite 2.0 發佈，也成功將一個基
2021-04-02 06:25:09
2
原创 如何實現可複用的控制檯“藝術字”打印功能
之前在使用一些開源項目時，經常會看到在控制檯輸出項目大大的 LOGO。例如： hexo minos 主題啓動時在控制檯裏會顯示「MINOS」文案 fis3 啓動時也會有顯示「FIS」 添加這種大號「藝術字」可以達到「品牌露出」的效果，當
2020-11-24 03:09:53
原创 替代 webpack？一文帶你瞭解 snowpack 原理，你還學得動麼
近期，隨着 vue3 的各種曝光，vite 的熱度上升，與 vite 類似的 snowpack 的關注度也逐漸增加了。目前（2020.06.18）snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代
2020-06-21 20:03:48
原创 【3分鐘速覽】如何“嚴謹地”判斷兩個變量是否相同
引言 如何“嚴謹地”判斷兩個變量相同？僅僅使用 === 就可以了麼？ 嚴格相等 我們可以非常快的寫一個 is 方法來判斷變量 x 是否就是 y： // 第一版 function is(x, y) { return x == y; }
2020-06-15 05:30:16
原创 【前端性能優化指南】5 - 靜態資源的優化
🔙 上一站 - 頁面解析與處理 在旅程的上一站中，我們介紹了基本的頁面解析機制，通過對資源加載順序和腳本加載的控制，避免了無謂的阻塞，優化了解析性能。 也正如上一站中所說，這時瀏覽器除了解析頁面 DOM 外，還會對頁面包含的靜態資源發起請求
2020-06-15 05:30:16
原创 【前端性能優化指南】5.1 - 優化你的 JavaScript
🔝 靜態資源優化的總體思路 隨着 Web 的發展，JavaScript 從以前只承擔簡單的腳本功能，到現在被用於構建大型、複雜的前端應用，經歷了很大的發展。這也讓它在當下的前端應用中扮演了一個非常重要的角色，因此在這一節首先來看看的我們熟
2020-06-15 05:30:16
原创 NodeJS 中 DNS 查詢的坑 & DNS cache 分析
近期在做一個 DNS 服務器切換升級的演練中發現，我們在 NodeJS 中使用的 axios 以及默認的 dns.lookup 存在一些問題，會導致切換過程中的響應耗時從 ~80ms 上升至 ~3min，最終 nginx 層出現大量 502
2020-06-15 05:30:16
原创 【性能優化指南】帶你全面掌握前端性能優化 🚀
✨倉庫地址：fe-performance-journey ✨ 前端需要性能優化麼？ 性能優化一直以來都是前端工程領域中的一個重要部分。很多資料[1][2][3]表明，網站應用的性能優化對於提高用戶留存、轉化率等都有積極影響。可以理解爲，提
2019-08-16 16:49:48
4
原创 【前端性能優化指南】1 - 利用緩存減少遠程請求
更多前端性能優化系列請點擊這裏 >> 歡迎來到「前端性能優化之旅」的第一站 —— 緩存。 當瀏覽器想要獲取遠程的數據時，我們的性能之旅就開始了。然而，我們並不會立即動身（發送請求）。在計算機領域，很多性能問題都會通過增加緩存來解決，前端也
2019-08-16 16:49:47
3
原创 如何提升JSON.stringify()的性能？
1. 熟悉的JSON.stringify() 在瀏覽器端或服務端，JSON.stringify()都是我們很常用的方法： 將 JSON object 存儲到 localStorage 中； POST 請求中的 JSON body； 處理
2019-06-06 16:14:47
1
原创 如何在零JS代碼情況下實現一個實時聊天功能❓
引言 前段時間在 github 上看到了一個很“trick”的項目：用純 CSS（即不使用 JavaScript）實現一個聊天應用 —— css-only-chat。即下圖所示效果。 在我們的印象裏，實現一個簡單的聊天應用（消息發送與多頁
2019-05-21 16:21:10
原创 🛠如何快速開發一個自己的項目腳手架？
引言 下面是一個使用腳手架來初始化項目的典型例子。 隨着前端工程化的理念不斷深入，越來越多的人選擇使用腳手架來從零到一搭建自己的項目。其中大家最熟悉的就是create-react-app和vue-cli，它們可以幫助我們初始化配置、生成項
2019-05-18 16:17:17
原创 ✨如何用JS實現一個通用的“劃詞高亮”在線筆記功能？✨🖍️
1. 什麼是“劃詞高亮”？ 有些同學可能不太清楚“劃詞高亮”是指什麼，下面就是一個典型的“劃詞高亮”： 上圖的示例網站可以點擊這裏訪問。用戶選擇一段文本（即劃詞），即會自動將這段選取的文本添加高亮背景，用戶可以很方便地爲網頁添加在線筆記
2019-04-25 16:32:17
原创 面試官：前端跨頁面通信，你知道哪些方法？
引言 在瀏覽器中，我們可以同時打開多個Tab頁，每個Tab頁可以粗略理解爲一個“獨立”的運行環境，即使是全局對象也不會在多個Tab間共享。然而有些時候，我們希望能在這些“獨立”的Tab頁面之間同步頁面的數據、信息或狀態。 正如下面這個例子：
2019-04-03 14:50:56
原创 【3分鐘速覽】前端廣播式通信：Broadcast Channel
Broadcast Channel 是什麼？ 在前端，我們經常會用postMessage來實現頁面間的通信，但這種方式更像是點對點的通信。對於一些需要廣播（讓所有頁面知道）的消息，用postMessage不是非常自然。Broadcast C
2019-04-03 14:50:56