tag 前端

標籤
貢獻1,058
1466
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 qaz666 頭像 opentiny 頭像 smileZAZ 頭像 invalidnull 頭像 dirackeeko 頭像 beishangdejianjidan_cqxuxf 頭像 yayu 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 icecreamlj 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

u_16213693 頭像

mob64ca141275de - 前端性能優化--圖片懶加載(lazyload image)

前端性能優化：圖片懶加載 + WebP 格式壓縮 前端性能優化是提升網頁加載速度和用户體驗的關鍵策略。其中，圖片通常是頁面加載的瓶頸，因為圖片文件較大且數量多。通過結合圖片懶加載（延遲加載未在視口中的圖片）和 WebP 格式壓縮（使用高效圖像格式減小文件大小），可以顯著減少初始加載時間、節省帶寬並提升用户滿意度。下面我將逐步解釋如何實現這兩種技術，

性能優化 , 頁面加載 , 加載 , Css , 前端開發 , 懶加載 , HTML , 前端

收藏 評論

u_12935 頭像

doscommand - 超大文件上傳方案實現

📝 大文件上傳前端設計文檔 一、方案概述與設計依據 1.1 設計目標 基於文件分塊和斷點續傳機制，實現高效、穩定、可恢復的大文件上傳功能，解決傳統上傳模式下大文件易失敗的問題。 1.2 核心流程（圖示解析） 環節

上傳 , 斷點續傳 , 唯一標識 , 前端開發 , 前端 , Javascript

收藏 評論

opentiny 頭像

OpenTiny社區 - 感謝 Fluent Editor 開源富文本首位貢獻者！

本文由體驗技術團隊Kagol原創。 2024年8月20日，剛開源一週的富文本 Fluent Editor 迎來了第一位貢獻者：zzxming 1、Bug 描述 zzxming 同學修復了 Fluent Editor 富文本表格模塊的一個隱藏 Bug： fix: table module can't save background color #10 缺陷描述：通過表格右鍵菜單設置單元格背景

富文本編輯器 , typescript , 前端

收藏 評論

_607c00baa52ff 頭像

懟懟 - 【js】迭代器與生成器

迭代器(Iterator) 有時也稱為遍歷器 - 迭代器對象 作用 為各種數據結構提供統一的訪問接口 使數據結構的成員按照某種次序排列 統一的迭代方式for...of循環 1.可迭代(iterable) iterable：擁有Symbol.iterator屬性的數據結構是可迭代的 Symbol.iterator：值為迭代器生成函數 原生可迭代的數據結構： Array

iterator , generator , 前端 , Javascript

收藏 評論

nanian_5cd6881d3cc98 頭像

那年 - vue3 點擊下載文件，不打開預覽，已解決

需求背景：vue3項目點擊下載按鈕，下載文件，使用頁面添加a標籤方式會導致不是下載而是打開文件（圖片/pdf） 使用了直接動態添加a標籤的方法，還是會打開預覽 const url = 'http://192.168.60.59:8888/fayuan/head/4b33a2a1-3911-4586-9878-50373a1fb852.jpg' const a = d

vue.js , 下載 , 前端 , Javascript

收藏 評論

chiqingdechouti 頭像

codigger - Codigger研發日誌：打造分佈式數字工作平台，邀開發者共同見證成長

大家好，我們是Codigger開發團隊！今天想和各位開發者朋友聊聊我們正在全力打磨的項目——Codigger分佈式數字工作平台。從最初的想法雛形到現在的核心模塊研發，我們始終圍繞“解決開發痛點、提升協作效率”的目標推進，現在把項目的核心思路和最新進展分享給大家，也期待能收到更多寶貴的建議。 研發初衷：從開發者痛點出發，定義分佈式工作新形態 在日常開發和協作中，我們和很多同行一樣，遇到過

編輯器 , 數據庫 , 人工智能 , 後端 , 前端

收藏 評論

opentiny 頭像

OpenTiny社區 - Fluent Editor 富文本開源2個月的總結：增加格式刷、截屏、TypeScript 類型聲明等新特性

本文由體驗技術團隊Kagol原創。 Fluent Editor是一個基於 Quill 2.0 的富文本編輯器，在 Quill 基礎上擴展了豐富的模塊和格式，框架無關、 功能強大、開箱即用。 2024年8月12日，Fluent Editor 正式開源！ 源碼：https://github.com/opentiny/fluent-editor/ 官網：https://opentiny.gi

富文本編輯器 , 前端

收藏 評論

u_16213571 頭像

網絡安全專家 - JavaScript代碼性能優化總結 - ITer在路上的個人博客主頁 -

性能優化的核心目標 減少加載時間，提升執行效率，優化內存管理，改善用户體驗 代碼層面的優化 避免全局變量污染，減少作用域鏈查找 使用 const 和 let 替代 var，減少變量提升帶來的性能損耗 避免頻繁的 DOM 操作，使用文檔片段（DocumentFragment）或虛擬 DOM

性能優化 , 資源加載 , 內存管理 , 前端開發 , 前端 , Javascript

收藏 評論

xianyulee 頭像

閒人 - 利用webpack的 require.context api進行自動導入

require.context api及參數介紹 require.context(dir, useSubdir, regExp) 參數dir：用於動態加載的目錄 參數useSubDir：是否對dir指定的子目錄進行自動導入， type=boolean 參數regExp：匹配文件的正則表達式，可以在文件中加入特定的字符，按照特定的字符去加載對應的文件 eg: re

webpack , require , 前端

收藏 評論

liane 頭像

Liane - iconfont使用及webpack打包字體圖標

一、iconfont使用 官網：https://www.iconfont.cn/ 1、找到需要的icon圖標，添加至購物車 2、購物車中點擊添加至項目，可加入到GitHub的項目中,也可直接下載到本地 3、引用圖標 unicode引用 unicode是字體在網頁端最原始的應用方式，特點是： 兼容性最好，支持ie6+，及所有現代瀏覽器。 支持按字體的方式去動

iconfont , webpack , 前端

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - Fetch+stream實現流式輸出

Fetch API 允許你跨網絡獲取資源，真正好的是，瀏覽器最近增加了將 fetch 響應作為可讀流使用的能力。 這是一個簡單明瞭的fetch+stream輸出的示例： try { // 定義手動停止接口 abortController.value = new AbortController(); // 發送請求 let response = await fetch(u

react , vue.js , HTML , 前端 , Javascript

收藏 評論

dushigemi 頭像

灬都是個謎 - vue3 模板編譯 —— 我竟把 v-if 和 v-for 的優先級改回來了，不信你看 🤣

📰 前言 眾所周知，在 vue3 中 v-if 總是優先於 v-for 生效。 然而，在某些情況下，我們可能更希望 v-for 的優先級更高， 雖然 vue3 並沒有提供直接修改指令優先級的方法，但是我們可以使用 AST（抽象語法樹） 轉換來實現這一點。 🌈 在線演示 📄 vite.config.ts import { defineConfig } from 'vite' im

vue.js , 編譯原理 , 前端

收藏 評論

smileZAZ 頭像

林恆 - 前端 HTML 轉 PDF

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前端 HTML 轉 PDF 的工具函數，核心作用是：把網頁中指定 ID 的 DOM 元素（比如表格、報表、表單等），通過html2canvas和jspdf兩個庫轉換成 PDF 文件並下載到本地。 簡單説：它能讓用户 “一鍵下載” 網頁上的某個區域為 PDF（比如報表、數據統計頁、合同預覽頁等），還預留了 “水印功能” 的註釋代碼

前端

收藏 評論

lneoi 頭像

LnEoi - 更安全的隨機數生成

Math.random() 通常情況下我們使用Math.random()來生成偽隨機數，在大部分情況下可以很方便的使用。比如 生成混合隨機字符 Math.random().toString(36).substr(2); 生成指定範圍的隨機數 const randomNumber = (min, max) = Math.floor(Math.random() * (max - min) + min)

隨機數 , 前端 , Javascript

收藏 評論

bianchengsanmei 頭像

編程三昧 - 前端 CSS 變量簡介及基本使用方法

背景 複雜的網站都會有大量的CSS代碼，通常也會有許多重複的值。 舉個例子，同樣一個顏色值可能在成千上百個地方被使用到，如果這個值發生了變化，需要全局搜索並且一個一個替換，效率不高且容易出錯。 自定義屬性在某個地方存儲一個值，然後在其他許多地方引用它。另一個好處是語義化的標識。比如，--main-text-color 會比 #00ff00 更易理解，尤其是這個顏色值在其他上下文中也被使用到。 概

css3 , css技巧 , css變量var , Css , 前端

收藏 評論

yilezhiming 頭像

以樂之名 - 前端進擊的巨人（六）：知否知否，須知this

常見this的誤解 指向函數自身（源於this英文意思的誤解） 指向函數的詞法作用域（部分情況） this的應用環境 1. 全局環境 無論是否在嚴格模式下，全局執行環境中（任何函數體外部）this都指向全局對象 var name = '以樂之名'; this.name; // 以樂之名 2. 函數（運行內）環境 函數內部，this的值取決於函數被調用的方式（被誰調用） var name

面試 , 進階 , 前端 , Javascript

收藏 評論

limingcan562 頭像

limingcan - 弄懂這幾個概念後，我對webpack有了新的理解

前言 隨着vite的誕生，webpack似乎漸漸的被大家拋棄。前陣子我也用vue@3.x + vite@4.x開發了一個後台管理系統，體驗了一把，確實有被vite飛快的啓動速度給驚豔到。 但是畢竟webpack已經誕生了許久，也經過市場的一些考驗，並且它有着豐富的插件，豐富的功能，一些大型的項目也使用過它，目前來説，它是一個相對於vite來説更穩定的打包工具。 基於以下原因： 有些公司由於歷史

構建工具 , webpack5 , webpack , 前端 , Javascript

收藏 評論

lijinhuaboke 頭像

此顏差矣。 - Vue 3 + SVG ：打造動態交互式智慧公廁可視化大屏

🚀 Vue 3 + SVG ：打造“會呼吸”的智慧可視化大屏 在智慧城市建設的浪潮中，可視化大屏已成為展示數據的核心窗口。而在“智慧公廁”這一細分場景下，如何直觀、實時、高保真地展示每個廁位的佔用狀態（有人/無人），是前端開發中一個既有趣又充滿挑戰的課題。 傳統的做法往往是“切圖一把梭”——使用多張圖片進行絕對定位。但這種方式不僅適配性差（換個分辨率就由於），而且維護成本極高（加個廁位還得找 U

前端

收藏 評論

u_16213590 頭像

mob64ca13f9e726 - HTML循環創建div和table並實現滾動效果_html循環生成div

一、div列表滾動 現在需要實現一個效果，內容無限、平滑、無閃動地向上滾動；當鼠標懸停到列表時，滾動暫停並高亮當前項；鼠標移出後繼續滾動。這是在大屏項目中經常見到的一種展示數據的方式，本文為具體的實現方式。 實現原理： 在使用了js控制之後發現有閃動的現象，然後就換了種方式，我的想法是：把原始列表渲染兩次（A +

vue.js , 數據 , 後端開發 , 無縫滾動 , Css , harmonyos , 前端

收藏 評論

mark04 頭像

letier - Web 前端發展歷史以及未來的展望

Web 前端的發展歷史：從靜態頁面到現代工程化 前端開發（Front-End Development）是構建用户可見和交互界面的核心技術領域。自 20 世紀 90 年代萬維網誕生以來，Web 前端經歷了從簡單文本展示到複雜富應用的深刻變革。本文將系統梳理 Web 前端的發展歷程，分為五個主要階段，展現其技術演進與生態變遷。 一、第一階段：靜態網頁時代（1990s 初 — 2000 年前） 技術特

前端

收藏 評論

gqkmiss 頭像

月恆 - CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫

CSS 小技巧 —— CSS 實現 ... 的 loading 加載中動畫 1. 前言 需求中想做出個這種效果，這個頁面又是一個單獨的 html 頁面，沒必要再單獨引入其他模塊了 就想着用 CSS 動畫來實現 2. 實現效果 3. 實現思路 3.1. 項目要求 ... 不能使所在的 dom 元素寬度變化，不然加個 . 變寬，少個點變窄，不好看 需要使用 animation 動畫的 infi

loading , css3 , css技巧 , Css , 前端

收藏 評論

u_17534189 頭像

qq68d2318712d49 - react實多併發請求同步處理封裝

在React中處理多併發請求並實現同步處理（如等待所有請求完成後再執行後續操作）是常見需求。以下是一個通用的多併發請求同步處理封裝方案，結合React的useEffect和Promise特性實現： 1. 核心封裝函數：處理多請求同步 /** * 同步處理多個併發請求 * @param {Array() = Promise} requestList - 請

封裝 , 數據 , Css , ios , 前端開發 , HTML , 前端

收藏 評論

winnn 頭像

Winn - 前端圖片壓縮上傳，減少等待時間！優化用户體檢

這裏有兩張圖片，它們表面看上去是一模一樣的，但實際上各自所佔用的內存大小相差了180倍。 可以看到右邊的圖片是22.3MB，而左側的圖片只有127KB，但是實際上這兩張圖片的大小都是22.3MB。 最近在開發中遇到這樣的一個需求，需要把用户上傳的圖片先進行一次壓縮，然後再保存到服務器，這裏我們除了優先考慮壓縮圖片的大小外，還要顧及圖片壓縮後的清晰度問題。 經過對比，圖片並沒有明顯的失真情況

設計模式 , 程序員 , 架構師 , 優化 , 前端

收藏 評論

shellingfordly 頭像

shellingfordly - 我的博客 3.0

前言 第一個博客是在大學時候弄的，用的是 hexo 搭建的。但是當時還是個小白，只在 github 上部署了打包後的代碼，沒有保存源代碼，導致後面我就再也沒更新過我的個人博客，一直停留在了 2019 年。後來有用 vuepress 搭建了一個學習筆記記錄的項目，但感覺不是很好看，沒有當主力的博客使用，之後就一直在掘金和思否上寫，就沒怎麼更新個人博客了。 由於今年上半年經常跑出去完，最近突然又想重新

博客搭建與配置 , 博客遷移 , 博客搭建 , 博客 , 前端

收藏 評論