tag 前端

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

@前端 / 博客 RSS 訂閱

kuailedehuanggua 頭像

kuailedehuanggua - 瀏覽器如何確定最終的CSS屬性值？解析計算優先級與規則

前言上篇文章中有提到CSS值的處理過程，但如果想要確定一個元素的最終樣式值可以不需要這麼多步。實際上我們寫的任何一個標籤元素無論寫沒寫樣式，它都會有一套完整的樣式。理解這一點非常重要‼️比如：一個簡單的p標籤 打開瀏覽器控制枱，選中元素，切換到computed選項，勾選show all，這裏就能夠看到元素的所有CSS樣式，儘管你什麼樣式也沒寫，它們也是有默認值的。任何標籤都是

xss , 前端

收藏 評論

fenanjiu 頭像

南玖 - 通過performance面板驗證瀏覽器資源加載與渲染機制

前言 一個網頁的核心由HTML、CSS和JavaScript組成，三者協同工作以呈現內容並實現交互。但瀏覽器如何解析這些資源？加載順序如何影響用户體驗？讀完本本文你將徹底弄懂以下核心知識 為什麼需要生成DOM樹？ CSS是否會阻塞HTML解析？是否阻塞頁面渲染？ JavaScript是否會阻塞HTML解析？ JavaScript的異步加載機制如何影響解析過程？ 如何通過performa

渲染 , 瀏覽器 , 面試 , 前端

收藏 評論

immerse 頭像

沉浸式趣談 - Promise 這個新 API 真香！

Hey, 我是 沉浸式趣談 本文首發於【沉浸式趣談】，我的個人博客 https://yaolifeng.com 也同步更新。 轉載請在文章開頭註明出處和版權信息。 如果本文對您有所幫助，請 點贊、評論、轉發，支持一下，謝謝！ 聊到異步，Promise 大家肯定都不陌生，是咱們處理異步操作的神器 不過呢，就算有 Promise，有時候處理一些既可能是同步又可能是異步的函數，或者那種隨時可

promise , ecmascript , 程序員 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO關鍵詞的研究與優化 一

關鍵詞研究和優化是SEO的核心。通過深入瞭解目標受眾使用的搜索詞，我們可以優化網站內容，提高搜索引擎排名，並吸引更多相關流量。本章將詳細探討關鍵詞研究的方法、和最佳實踐。 關鍵詞類型對比分析 1. 關鍵詞研究的基礎 瞭解不同類型的關鍵詞對於制定全面的SEO策略至關重要。每種類型的關鍵詞都有其獨特的特點和應用場景： 1.1 主關鍵詞 定義： 通常由1-2個詞組成，代表廣泛的主題或概念。 特點

seo , 程序員 , HTML , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO的關鍵詞研究與優化 二

回顧上一篇文章 3. 關鍵詞評估和選擇 關鍵詞評估和選擇是SEO策略中至關重要的一步。這個過程不僅僅是選擇搜索量最高的詞，而是要在多個因素之間找到平衡，以確定最有價值的關鍵詞。 3.1 搜索量分析 https://segmentfault.com/a/1190000046496136 搜索量是評估關鍵詞潛力的首要指標，但它不應該是唯一的考慮因素。使用Google Keyword Planner、S

seo , 程序員 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - SEO與國際化

在當今互聯網時代，企業的成功不再侷限於本地市場。國際化SEO（搜索引擎優化）為企業提供了一個強大的工具，可以幫助他們在全球範圍內擴展影響力，吸引更多的國際客户。 1. 🌍理解國際化SEO的重要性 國際化SEO不僅僅是將網站翻譯成不同的語言，它是一個全面的策略，旨在優化我們的網站以吸引和服務於全球受眾。💡 🌍 擴大全球市場覆蓋範圍 🌎 接觸到新的國際市場和客户羣 🚀 增加品牌

seo , 前端

收藏 評論

rentian 頭像

任天鏜 - navigator.mediaDevices.getUserMedia undefined問題解決

navigator.mediaDevices.getUserMedia只有在https或者localhost下使用。 如果需要再http協議下使用navigator.mediaDevices.getUserMedia，需要打開不安全的配置。 火狐瀏覽器打開多媒體不安全的配置： chomre打開不安全配置： 瀏覽器輸入chrome://flags/ 搜索Insecure o

chrome , firefox , HTML , 前端 , Javascript

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - Nuxt3還能用嗎？

Nuxt3還能用嗎？ 前一段時間，我完成了整個產品，從Nuxt到Next的遷移，因為面臨了一些在框架層面就無法解決的問題。 payload json化 在所有的的Nuxt中，我們都能看到有這樣一個東西。 其實有這個東西也很正常，在Next中也會把服務端渲染的數據掛載html保持數據同步，這就是一個水合的必要步驟。在Next中是這樣的。 可以看到在Next新一點的版本中是

seo , 前端

收藏 評論

fenanjiu 頭像

南玖 - Safari 隱私模式下，URL 參數為何神秘消失？

前言 最近在排查Safari在隱私模式下頁面參數丟失的問題，如果通過Safari直接打開B頁面，此時在B頁面可以正常獲取到頁面鏈接上的參數，但是如果Safari先打開A頁面，然後通過A頁面再跳轉到B頁面（A、B頁面部署在不同域名下），此時的B頁面通過JS就獲取不到鏈接上的參數了🤔，這樣就會導致一些依賴頁面參數的功能出現異常！ 問題演示 B頁面鏈接格式如下：xx.qq.com?au=xx... 通

safari , 瀏覽器 , 前端 , url

收藏 評論

chaoqipengbodemogu_eceqzp 頭像

Ming - MetisUI-一套企業級 React-Tailwind 組件庫

Metis UI 的目標是為那些喜歡 Ant Design 的開發者提供一個更靈活的選擇，特別是希望結合 Tailwind CSS 的開發者。我們在保留 Ant Design 組件設計邏輯的基礎上，提供了以下改進： 樣式覆蓋更靈活基於 Tailwind CSS 的樣式體系，開發者可以方便地對組件的各個元素進行樣式覆蓋，無需編寫複雜的自定義樣式，快速實現個性化設計。 增強的交互功能內置了一些

react , tailwind-css , antd , typescript , 前端

收藏 評論

vivo_tech 頭像

vivo互聯網技術 - FunProxy - 使用 Rust 構建跨平台全鏈路測試抓包代理工具

作者：vivo 互聯網大前端團隊- Song Jiachao 在軟件開發過程中，軟件測試對於保障軟件質量和用户滿意度起着關鍵作用。為最大程度上提升軟件品質，我們積極開展全鏈路測試實踐，打造了用Rust語言開發的自研一站式抓包代理工具FunProxy，基於其跨平台、高性能、易於擴展、安全性高等特性，讓全鏈路抓包和環境代理如絲綢般絲滑。 一、背景介紹 1.1 什麼是全鏈路測試 全鏈路測試就是"

工具 , 效率 , rust , 測試 , 前端

收藏 評論

xishui_5ac9a340a5484 頭像

夕水 - 手寫一個動態海洋和天空效果的vue hooks

背景 常規的後台管理系統登陸頁面可能就只是一個簡單的背景頁面，這不太好看，接下來讓我們來使用three.js來實現一個動態的海洋和天空效果當作背景，這樣的效果總會讓人眼前一亮，如下圖所示。 代碼實現 接下來，讓我們用trae來編寫實現這個功能吧。 1. 組合式 API 初始化 import { onMounted, onBeforeUnmount } from "vue"; import * a

vue.js , three.js , 前端 , Javascript

收藏 評論

carlsonblog 頭像

夢開始的地方 - JavaScript WebSocket 封裝與優化：自動重連、心跳機制與連接狀態監控》

背景 在我做過的一個對接海康威視監控實現直播流的項目中，需要處理 WebSocket 的長連接，以便於和服務器保持實時通信。WebSocket 的一個挑戰是連接的穩定性，特別是在網絡波動或斷開時，如何確保能自動重連並保持通信流暢。為了簡化這一過程，我決定封裝一個 WebSocket 類，使得開發者無需每次都重複編寫連接、心跳、重連等邏輯。 這個 CustomSocket 類支持以下功能： 心跳

vue.js , websocket , 前端 , Javascript

收藏 評論

tuzixiansen_63d4d65909d62 頭像

兔子先森 - 動態tabbar後的tabbar高度獲取

用於做底部懸浮定位，懸浮在tabbar上 在設置tabbar的組件中獲取，利用組件生命週期，獲取tabbar高度，將高度存到本地，用於全局獲取 attached() { let query = wx.createSelectorQuery().in(this); query.select('.custom-tab-bar').bound

react , vue.js , 微信小程序 , 前端 , Javascript

收藏 評論

wbccb 頭像

白邊 - 【微前端】singleSpa&importHTMLEntry（流程圖）源碼解析

single-spa v5.9.3 通過輕量級路由劫持和狀態機設計，實現微前端的動態加載與隔離，主要實現 路由管理：hashchange、popstate、history.pushState、history.replaceState進行劫持，路由變化時，觸發 reroute() 子應用狀態管理：不同執行邏輯轉化不同的狀態，比如 加載流程：toLoadPromise→toBo

源碼分析 , 微前端 , 前端

收藏 評論

wbccb 頭像

白邊 - 【微前端】qiankun v2.10.16（流程圖）源碼解析

整體核心流程 源碼分析 single-spa 存在以下主要的缺點 路由狀態管理不足：無法保持路由狀態，頁面刷新後路由狀態丟失 父子應用間的路由交互以來 postMessage 等方式，開發體驗差 未提供原生的 CSS 和 JS 沙箱隔離，可能導致樣式污染或者全局變量衝突 默認以來 webpack 的構建配置，其他構建工具需要改造後才能兼容 版本兼容性差，如果使用不同的 Vue 版本，

源碼分析 , 微前端 , 前端

收藏 評論

chunzhendexiaogou 頭像

PoloAPI - 谷歌 AI 革命狂飆！Gemini 2.5 搜索引擎即將橫掃搜索市場，顛覆你的認知

隨着 5 月 20 日至 21 日谷歌 I/O 開發者大會的腳步臨近，一則重磅消息在科技業界引發強烈震動 —— 谷歌正緊鑼密鼓地籌備推出基於 Gemini 2.5 的下一代 AI 搜索引擎，這場變革將徹底顛覆沿用多年的傳統搜索框界面。目前，這一全新搜索模式已悄然進入灰度測試階段，標誌着谷歌決心將其最重要的流量入口全面切換至 AI 驅動的 Gemini 生態系統，此舉無疑將給 OpenAI、Perp

gemini-2.5-pro , google , 人工智能 , 後端 , 前端

收藏 評論

chunzhendexiaogou 頭像

PoloAPI - 一文看懂谷歌I/O 2025開發者大會： Android、Chrome、谷歌搜索、Gemini

谷歌I/O開發者大會以"AI原生生態"為核心戰略，圍繞技術升級、產品整合與商業模式展開深度佈局。以下是關鍵內容的結構化總結： 一、AI技術架構突破‌ ‌Gemini模型矩陣‌ Gemini 2.5 Pro新增Deep Think模式，增強複雜推理能力（數學/編程任務準確率提升37%） 輕量級Gemini 2.5 Flash實現移動端40%延遲降低，支持邊緣設備部署 多媒體生成模型V

gemini-2.5-pro , google , 人工智能 , 後端 , 前端

收藏 評論

chunzhendexiaogou 頭像

PoloAPI - Gmail整合Gemini AI功能，支持用户直接管理日曆提升日程效率。

谷歌近期在Gmail移動應用中深度整合Gemini AI功能，實現了郵件與日程管理的無縫銜接。該功能主要通過以下創新提升用户日程效率： 一、跨應用功能整合‌ 支持在Gmail應用內直接創建、修改和刪除日曆事件，無需切換至Google Calendar或其他應用 通過"Ask Gemini"入口實現語音/文字指令操作，例如輸入“將週四會議改到下午3點”即可觸發智能修改 提供每日日程智能概覽功

gemini-2.5-pro , google , 人工智能 , 後端 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - 2025最好的Next.js面試題（一）

2025最好的Next.js面試題（一） 最近在面試，就寫一些關於問到的面試題，同時也過一下知識點。 基礎概念 什麼是Next.js？它與React的關係是什麼？ Next.js是一個基於React的全棧開發框架，由Vercel開發和維護。它在React的基礎上提供了額外的功能和優化，如服務器組件(Server Components)、流式渲染(Streaming)、服務器操作(Server Ac

面試 , next.js , 前端

收藏 評論

lllllxt 頭像

lllllxt_in_sf - vue2 多頁面構建後chunks無法注入script問題

概述 @vue/cli-service@4.x下，配置了多頁面，構建後因為chunks沒有注入到html中，導致訪問頁面時頁面空白 原因 自定義了splitChunks，且單個包的大小達到某些條件後，會分割為多個包，如index~123.111.js，index~123.222.js，其中index~123是 chunkName 而html-webpack-plugin@3.x中，是判斷 i

vue.js , vue-cli4 , 前端框架 , webpack4 , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - Next.js 面試深入剖析緩存機制

決勝 Next.js 面試：深入剖析緩存機制 1. 引言：為何 Next.js 中的緩存如此重要？ Next.js 通過其精密的緩存系統，極大地提升了應用程序的性能、降低了服務器負載，並通過提供預先計算的結果或數據來最小化運營成本。 對於任何期望構建優化應用的開發者而言，深入理解這些緩存層是至關重要的。 在技術面試中，對 Next.js 緩存機制的掌握程度，往往能體現出開發者對 Nex

面試 , next.js , 前端

收藏 評論

ailvyoudetiebanshao 頭像

溪抱魚 - 為什麼選擇React-native

本文總結: 🔹 運行機制 React Native 的運行機制基於兩個線程之間的通信（JavaScript 線程和 Native 線程），通過 Bridge（橋） 實現數據交互。🌉這使得 JS 邏輯與原生界面可以協同工作，實現流暢體驗。 🔹 優勢 👍 學習成本低，JavaScript 和 React 開發者可以快速上手 滿足大部分產品需求，適用於多數中小型 App 代碼

react-native , 面試 , 前端

收藏 評論

sihaihande 頭像

漢得數字平台 - H-ZERO導出組件支持智能分片、異步導出、動態配置等高級特性，讓“一鍵導出”成為現實！

01 引言 H-ZERO 平台團隊始終專注於開發高效的前端工具組件，通過不斷優化交互設計和功能體驗，為企業用户提供更流暢、更符合業務需求的數據導出能力。 為了應對企業日益複雜的數據導出場景，H-ZERO 導出組件突破了普通導出組件功能單一、性能受限的瓶頸，支持多格式動態生成、異步分片導出和智能閾值管控等核心功能，使海量數據導出變得簡單易行。用户無需關注技術細節即可快速完成從配置到下載的全過程，大

開發工具 , 前端設計 , 前端

收藏 評論