tag 前端

標籤
貢獻1,058
1458
06:37 AM · Oct 27 ,2025

@前端 / 博客 RSS 訂閱

杭城小劉 - 瀏覽器渲染原理

瀏覽器是如何渲染頁面的 當瀏覽器的網絡線程收到 HTML 文檔後,會產生一個渲染任務,並將其傳遞給渲染主線程的消息隊列。在事件循環機制下,渲染主線程取出消息隊列中的渲染任務,開啓渲染流程。 整個渲染流程分為多個階段:HTML 解析、樣式計算、佈局、分層、繪製、分塊、光柵化、畫。每個階段都有明確的輸入輸出,上一個階段的輸出就是下一個階段的輸入,整個流程類似流水線一樣。 下面針對每個階段做詳細的研

大前端 , 瀏覽器 , 瀏覽器原理 , 前端 , Javascript

收藏 評論

Alaso - SVG動畫從入門到實戰,提升你的網站表現力

在 SVG 中,如果我們想實現一個動畫效果,可以使用 CSS,JS,或者直接使用 SVG 中自帶的animate元素(SMIL)。 這裏我們主要探討SVG與CSS結合實現的一些常見動畫效果。 (下面要使用到的SVG基礎知識,在SVG從入門到圖標繪製和組件封裝 和 SVG中的Transform詳解---平移、旋轉和縮放中都有詳細的介紹,這裏就不重複了,有需要的朋友可以前往查看哦。 ) SVG + C

css3 , svg動畫 , 前端 , html5 , svg

收藏 評論

lichong951 - 用《大前端++》項目特徵解析雷總小米汽車的內憂遠慮

小米汽車屬於大前端++項目;可能會有點不好理解。那咱們先拆解小米汽車的軟硬件後台服務結構; 拆解小米汽車結構 硬件結構大致上是三電結構(即電池、電機、電控),和屏幕、按鈕、座椅、空調、冰箱等等定製設備,以上可歸為定製的終端硬件。 軟件結構:電控系統+Android/澎湃/其他汽車系統;其實手機終端也是有電控系統的,不過相對存在感比較低一下。畢竟手機的功率就那麼一點點而已蛤!

前端

收藏 評論

mob64ca140d2323 - JavaScript在瀏覽器環境實現udp通信

一、瀏覽器地址欄運行JavaScript代碼 這個很多人應該還是知道的,在瀏覽器地址欄可以直接運行JavaScript代碼,做法是以javascript:開頭後跟要執行的語句。比如: javascript:alert('hello from address bar :)'); 將以上代碼貼到瀏覽器地址欄回車後alert

H5 , 前端學習 , 前端開發 , typescript , 前端 , Javascript

收藏 評論

我們不動 - 前端筆試題總結

如何實現下列代碼:[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 將此方法添加至 Array.prototype 實現,代碼如下: Array.prototype.duplicator = function(){   var l = this.length,i;   for(i=0;il;i++){    this.push(t

筆試 , 前端

收藏 評論

forzoom - 實現一個可拖拽分欄組件

初步嘗試 在實現之初的想法很簡單,先實現一個二分欄功能的組件,頁面主要元素有三個:左分欄,右分欄,分割線,全部使用 absolute 定位。 實現樣式預覽 import { FC, useState } from 'react'; import styles from './index.module.scss'; import cn from 'classnames'; const Resiz

react , 組件化 , 拖拽 , 前端

收藏 評論

Hooray - 後台還能這麼玩?這款後台框架將顛覆你的認知

序 過去一年,我參與了大大小小若干個後台系統的開發。在開發過程中,也發現了一些傳統後台框架無法解決的一些體驗上的痛點,如: 如何提升頁面空間的利用率,尤其是當展示內容較少時,儘可能減少頁面留白 如何提升跨模塊的操作效率,減少模塊間頻繁的頁面跳轉 帶着這幾個問題,我開始構思並開發了一款採用全新交互方式的後台框架「 One-step-admin 」,這是一款幹啥都快人一步的 Vue 中後台系統

vue.js , vite , 後台 , 前端

收藏 評論

可樂雞翅 - 🚀JS使用Wasm為你的文件MD5計算裝上火箭引擎🚀

前言 公眾號:【可樂前端】,期待關注交流,分享一些有意思的前端知識 之前在一個自己的項目中嘗試做一個web視頻轉碼功能,計劃用的是ffmpeg這個強大的庫。當時就瞭解到了wasm把ffmpeg移植到瀏覽器中使用。但是等真正要發佈到生產的時候還是遇到一些問題, 比如説ffmpeg體積比較大,加載速度緩慢;還有sharedArrayBuffer與ffmpeg.wasm的一些關係,簡單來説就是如果需要使

react , webassembly , typescript , 前端 , Javascript

收藏 評論

可不簡單 - vxe-table 實現複製粘貼時,當粘貼時行數不夠支持自動增加對應的行

vxe-table 實現複製粘貼時,當粘貼時行數不夠支持自動增加對應的行,當粘貼數據時,如果粘貼的行數超過表格的行數,可以通過 clip-config.isRowIncrement 自動新增臨時行 查看官網:https://vxetable.cn gitbub:https://github.com/x-extends/vxe-table gitee:https://gitee.com/

前端

收藏 評論

長林啊 - 打造高效React應用:CSS方案深度解析

大家好,我是長林啊!一個愛好 JavaScript、Go、Rust 的全棧開發者;致力於終生學習和技術分享。 在React以其聲明式編程範式和組件化架構,成為了構建用户界面的首選技術之一。然而,隨着項目規模的擴大和設計需求的多樣化,如何高效地管理 CSS 樣式成為了每個React開發者都需要面對的挑戰。 本文將從一下三個方面進行介紹,探討如何在 React 中應用和管理樣式,包括內聯樣式、CSS

react , 全棧 , web開發 , next.js , 前端

收藏 評論

mob64ca1403c772 - id字段作為數據庫索引

id 屬性 id屬性指定 HTML 元素的唯一 ID。id屬性的值在 HTML 文檔中必須是唯一的。 id屬性用於指向樣式表中的特定樣式聲明。JavaScript 也可使用它來訪問和操作擁有特定 ID 的元素。 id 的語法是:寫一個井號 (#),後跟一個 id 名稱。然後,在花括號 {} 中定義 CSS 屬性。

大數據 , 數據倉庫 , id字段作為數據庫索引 , HTML , 前端

收藏 評論

MangoGoing - 如何從 create-react-app 遷移到 Vite?

在不斷髮展的 Web 開發領域,對於任何希望提高性能和可維護性的開發人員來説,掌握高效的工具和流程都至關重要。對於許多希望構建現代單頁 React 應用程序的人來説,Vite 已成為 Create React App (CRA) 的自然繼任者。在本綜合指南中,我們將逐步介紹將您的項目從 CRA 遷移到 Vite 的步驟,重點是實用性和易用性。 距離 Vite 推出已經有4年時間,Vite 5.0

react , vite , create-react-app , 前端

收藏 評論

mob64ca13ff5b03 - html5 - React驗證碼組件實現

📖 前言 在現代Web應用中,驗證碼系統是保障安全的重要組成部分。本文將詳細介紹如何從零開始構建一個功能完整的驗證碼圖片管理系統,涵蓋前端React開發、後端接口對接、狀態管理等關鍵技術點。 🎯 項目概述 系統功能: 驗證碼圖片列表展示與分頁 關鍵詞搜索過濾 批量選擇與刪除 單個驗證碼答案實時

搜索 , 後端開發 , 驗證碼 , typescript , 前端 , Python

收藏 評論

李志健 - Bower的安裝與基本使用

Bower是什麼東西? 一個前端包管理工具。能夠幫我們管理Web站點上的各種框架,類庫等等。主要作用有如下:能夠幫助我們跟蹤前端包,並且保證他們是最新(或者是你指定的特定版本),Bower能夠管理前端裏面的HTML,CSS,JS,甚至還可以是圖片。Bower還有一個最大的好處,它對我們前端進行了優化。如果多個包依賴於一個包,例如jQuery,那麼Bower將只下載jQuery一次,這樣就稱為扁平依

構建工具 , php , bower , 前端 , Javascript

收藏 評論

林一一 - 刨析 JS 中的forEach、for in、for of三類循環原理和性能

大家好,我是林一一,這是一篇比較 JS 中三類循環的原理和性能的文章,希望能給你帶來點幫助 😁 性能比較 for 循環和 while 循環的性能對比 let arr = new Array(999999).fill(1) console.time('forTime') for(let i = 0; i arr.length; i++){} console.timeEnd('forTime

foreach , arguments轉換成數組 , 前端 , Javascript

收藏 評論

曹旭升 - 獨立開發者的 2025:我為什麼還在做一個“看起來很普通”的客服系統

過去幾年裏,技術社區反覆討論同樣幾個話題:AI、出海、SaaS、獨立開發者。 熱度在變,説法在升級,但真正把一個系統長期跑起來的人,感受往往更具體也更現實。 2025 年對我來説,並不是一個有明顯拐點的年份,沒有爆發式增長,也沒有戲劇性轉向,只是持續做事、持續暴露問題、持續修正判斷的一年。 這篇文章,算是一次不太宏大的回顧——記錄我在 2025 年圍繞一個客服系統所做的選擇、踩過

Android , JAVA , ios , 後端 , 前端

收藏 評論

前端子魚 - Virtual DOM 簡直就是揮霍

徹底澄清“Virtual DOM 飛快”的神話。 注意:原文發表於2018-12-27,隨着框架不斷演進,部分內容可能已不適用。 近年來,如果你有使用過 JavaScript 框架,那麼你可能聽説過“Virtual DOM 飛快”,甚至認為比真實的 DOM 還要快。 令人震驚的是,這種説法竟然深入人心。 有人曾問我 Svelte 不使用 Virtual DOM,它為何更快?看來現在是時候仔細探討一

svelte , virtual-dom , 前端 , Javascript

收藏 評論

UXbot - Web界面設計工具全景洞察:技術賦能下的全鏈路協作與選型策略

在智能化轉型縱深推進的當下,Web界面設計已成為定義產品核心競爭力的關鍵環節。其不僅承載着用户體驗的具象化表達,更貫穿於產品戰略落地、跨角色協同及研發效能提升的全鏈路。對於UI/UX設計師、產品管理者及前端研發團隊而言,精準遴選適配的Web設計工具,是實現設計價值最大化、構建高效協作閉環的核心前提。 本文聚焦全球主流Web界面設計工具,從技術架構、核心能力、場景適配性及協作效能四大維度,深度

code , vue.js , 程序員 , 前端 , Web

收藏 評論

luxigaola - 在Vue2和Vue3中JSX的使用集錦

Vue2安裝JSX支持 有時候,我們使用渲染函數(render function)來抽象組件,而渲染函數使用Vue的h函數來編寫Dom元素相對template語法差別較大,體驗不佳,這個時候就派 JSX 上場了。然而在Vue3中默認是帶了JSX支持的,而在 Vue2 中使用 JSX,需要安裝並使用 Babel 插件: @vue/babel-preset-jsx @vue/babel-help

vue.js , jsx , 前端 , html5 , Javascript

收藏 評論

拆技 - 音頻專用 ADC/DAC 與通用 ADC/DAC 的本質區別 ——從架構、性能到前後端設計的系統性解析

音頻專用 ADC/DAC 與通用 ADC/DAC 的本質區別 ——從架構、性能到前後端設計的系統性解析 在電子工程和嵌入式系統中,模數轉換器(ADC)與數模轉換器(DAC)是連接模擬世界和數字世界的核心器件。根據應用場景不同,這些轉換器可以大致分為音頻專用 ADC/DAC以及通用 ADC/DAC兩大類。它們雖然都完成模擬與數字之間的轉換,但在架構、指標、採樣特性以及外圍電路設計等方面存在本質差異。

觀點 , 知識 , 後端 , 前端

收藏 評論

OpenTiny社區 - TinyEngine2.9版本發佈:更智能,更靈活,更開放!

前言 TinyEngine 是一款面向未來的低代碼引擎底座,致力於為開發者提供高度可定製的技術基礎設施——不僅支持可視化頁面搭建等核心能力,更可通過 CLI 工程化方式實現深度二次開發,幫助團隊快速構建專屬的低代碼平台。 無論是資源編排、服務端渲染、模型驅動應用,還是移動端、大屏端、複雜頁面編排場景,TinyEngine 都能靈活適配,成為你構建低代碼體系的堅實基石。 最近我們正式發佈TinyEn

vue.js , 低代碼 , 前端

收藏 評論

小皇帝James - 編寫markdown-it的插件和規則

前言 最近看vuePress源碼時發現在使用markdownLoader之餘使用了大量的 markdown-it 插件,除了社區插件(如高亮代碼、錨點、emoji識別等),同時也自行編寫了很多自定義插件(如內外鏈區分渲染等)。 文章結合源碼和自己之前寫過的插件來詳細解讀如何編寫一個 markdown-it 插件規則。 簡介 markdown-it 是一個輔助解析markdown的庫,可以完成

plugin , vuepress , 前端 , Javascript , Markdown

收藏 評論

JackySummer - 【解讀 ahooks 源碼系列】DOM篇(一)

前言 本文是 ahooks 源碼系列的第二篇,下面鏈接是第一篇 DOM 篇的前置講解: 【解讀 ahooks 源碼系列】(開篇)如何獲取和監聽 DOM 元素 後續的文章將會直入主題,每篇文章解讀四至六個 Hooks 源碼實現。 useEventListener 優雅的使用 addEventListener。 官方文檔 用法 import React, { useState, useRe

react , hooks , 前端 , Javascript

收藏 評論

Apifox - Node.js 是什麼?Node.js 簡介及安裝配置詳解指南!

Node.js 是一個基於 Chrome V8 引擎的開源、跨平台的 JavaScript 運行時環境。它允許開發者使用 JavaScript 構建高性能、可擴展的網絡應用程序,使 JavaScript 能夠在服務器端運行,而不僅僅侷限於瀏覽器端。Node.js 的包管理器 npm,是全球最大的開源庫生態系統。使用 Node.js 可以實現前端開發和後端開發,它具有事件驅動、非阻塞 IO 模型等特

node.js , nodejs爬蟲 , 程序員 , 前端 , Javascript

收藏 評論