tag 前端

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

@前端 / 博客 RSS 訂閱

beckyyyy 頭像

beckyyyy - 對BFC的理解

在前端的面試中，相對JavaScript而言，CSS佈局方面考察的內容會相對少一些，其中BFC是佈局樣式方面常考的一個考點。 什麼是BFC BFC，全稱為Block Formatting Context，翻譯過來即塊格式化上下文。 之前在其他文章中看到的説明是，網頁上一個獨立且隔離的渲染區域。現在呢，我稍微查閲了一些官方的信息。 在瞭解BFC之前，我們需要先了解一些其他概念： 包含塊（contai

佈局 , bfc , Css , HTML , 前端

收藏 評論

ntksol 頭像

歐雷 - 前端有未來嗎？

最近一段時間，通過各種方式與同行們交流了「前端技術」與「前端工程師」的現狀及未來發展的方向性問題，大家在一些方面有所共鳴。 下面就來説説我的一些看法—— 困惑 多多少少，有人曾經或正在困惑：「前端有未來嗎？」 有此困惑的人，TA 可能是—— 正在學習 web 前端技術，就是純粹的 HTML、CSS 和 JS，在用這幾樣做網頁。練習的過程中發現，或者説突然想到：「現在微信小程序風行，在其與原生客户端

前端工程師 , 前端

收藏 評論

seanshi_fe 頭像

Sean - Vue.js中如何去定位解決內存泄漏？

Vue.js 是一個流行且強大的 JavaScript 框架，它允許我們構建動態和交互式 Web 應用程序。 然而，與任何軟件一樣，Vue.js 應用程序有時會遇到內存泄漏，從而導致性能下降和意外行為。 今天，我們將深入探討 Vue.js 應用程序中內存泄漏的原因，並探索如何定位和修復這些問題的有效策略。 什麼是內存泄漏 ? 當程序執行過程中保留不再需要的內存時（主要是一些 變量、 方法等），會阻

vue.js , 性能 , 前端 , Javascript

收藏 評論

jianrendechaomian_czry72 頭像

億元程序員 - Cocos獨立遊戲開發框架之對象池：缺對象你就new一個

引言 本系列是《8年主程手把手打造Cocos獨立遊戲開發框架》，歡迎大家關注分享收藏訂閲。 我們遊戲開發中的對象池裏的對象並非小夥伴們想的現實中的對象，現實中的對象需要大家不斷地努力，才能如願以償。下面我們來探討一下游戲開發中的對象池管理，它可以更有效地管理遊戲對象的創建和回收。 本文源碼和源工程在文末獲取，小夥伴們自行前往。 什麼是對象池？ 對象池，也稱為資源池，是一種用於存儲和重複使用對象的機

遊戲開發 , 對象池 , cocos , 對象 , 前端

收藏 評論

thjjames 頭像

小皇帝James - 前端腳手架（簡易版）搭建攻略

簡介 腳手架CLI(command-line-interface)是一類快速形成工程化目錄的工具。 開發過程中，如果需要新建前端項目，我們經常都會用到腳手架來創建工程，通過命令行式的交互，可快速選擇選項並完成初始項目的搭建。而CV大法往往會帶來很多重複的刪減工作，且會導致項目分散、架構不統一等等弊端。 常見的主流框架都有自己的腳手架： create-vite @vue/cli create

腳手架cli , 工具 , 前端工程化 , 前端 , Javascript

收藏 評論

winnn 頭像

Winn - 純css編寫開關按鈕點擊切換

效果圖預覽： 完整代碼如下： !DOCTYPE html html head title純css編寫開關按鈕點擊切換/title style type="text/css" #toggle-button{ display: none; } .button-label{ position: relative; displa

Css , 程序員 , css3動畫 , 前端 , html5

收藏 評論

winnn 頭像

Winn - 【前端面試】V8事件輪詢

在前端面試中，面試官可能會問你V8的引擎機制，給你這樣的一道題目如下： console.log(1); setTimeout(() = { console.log(2); }); new Promise(reslove = { console.log(3); reslove(); }).then(() = { console.log(4); }); console.log(5)

v8 , 面試 , 瀏覽器原理 , 程序員 , 前端

收藏 評論

winnn 頭像

Winn - 一個讓vue開發效率翻倍的小工具

分享一個很實用的工具庫 VueUse，它是基於 Vue Composition Api，也就是組合式API。支持在Vue2和Vue3項目中進行使用，據説是目前世界上Star最高的同類型庫之一。 它的初衷就是將一切原本並不支持響應式的 JS API 變得支持響應式，省去程序員自己寫相關代碼。 官方地址：https://vueuse.org/ 中文地址：https://www.vueusej

vue.js , 開發工具 , 前端工程師 , 程序員 , 前端

收藏 評論

qingzhan 頭像

青湛 - 再聊 Reducer Context 和 Redux

原文鏈接 這是一次突發奇想的感悟，感覺還挺神奇的，遂記錄一下。 前言 作為一個React的開發者已經蠻久的了，大大小小的應用也開發了不少，除了一開始學習React時用過Redux以外，後來基本都不碰了，不管多麼複雜的應用，我也簡單的覺得使用Context就能夠解決我所有的問題。説來慚愧，我基本沒有思考過Redux存在的原因，可能是React真的做的太好了，又或者是我們現在的設備性能已經嚴重

react , redux , context , 前端

收藏 評論

wentaohu12138 頭像

牛刀殺雞 - 服務端渲染SSR

1.項目背景 需要將一箇舊的用vue+svg搭建的地鐵圖h5改造成有個ssr項目，以提升首屏渲染時間。 2.分析 項目現狀，項目組已有koa搭建的業務中間層，且需要改造的項目為一箇舊項目，綜合考慮，將舊項目進行改造，而非使用nuxt重寫。 3.SSR原理 1.所謂SSR就是將一個項目通過兩種打包配置，分別生成兩份打包代碼，一份在服務端（nodejs）執行，另一份在客户端（browser）上執行。當

vue.js , node.js , ssr , 前端

收藏 評論

vleedesigntheory 頭像

維李設論 - 面向邊緣場景的PWA實踐

背景 隨着5G技術的發展，物聯網邊緣側主要應用於數據傳輸量大、安全要求高以及數據實時處理等行業與應用場景中。其中，邊緣計算是一種分佈式計算模式，其將計算資源和數據處理能力推向接近數據源的邊緣設備，以減少延遲並提高響應速度。 對前端領域而言，面對邊緣場景下的應用開發也發生了相應的變化，其通常需要考慮邊緣側與終端側的實現方式，並且還需考慮相較於傳統 B/S 架構下的部署方案。本文旨在通過工業互聯網場

pwa , 雲計算 , 邊緣計算 , serverless , 前端

收藏 評論

13592899917 頭像

浪跡天涯小king - 一套代碼打包多個微信小程序，一套代碼打包多個抖音小程序，有需要請到uniapp插件裏面下載享用

走過路過不要錯過，只説一遍，真的很好用，不好用你可以在評論裏面噴我、踩我 uniapp插件地址（https://ext.dcloud.net.cn/plugin?id=15196） 一套代碼打包多個微信小程序 一套代碼打包多個抖音小程序 簡介 此項目是用來免除手動替換小程序appid的煩惱。有些公司會在開發環境是一個appid，測試，準生產，生產又是另一個appid，避免我們每次手動填寫，打包構建

vue.js , 小程序 , 前端工程化 , uniapp , 前端

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十四】CSS3新特性

前言 本篇章主要講述CSS3新特性，如svg、canvans以及動畫。 面試回答 1.canvas畫圓：首先獲取canvas對象，設置好寬高，用getContext方法設置2d繪圖，然後用arc方法進行繪製，arc的參數分別是圓心的x，y座標、半徑、以x軸為基準的起始角度以及結束角度，這裏設置，0到2π即可。 知識點 1.SVG 參考博客：https://juejin.cn/post/684490

css3 , less , Css , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 極致性能優化：前端SSR渲染利器Qwik.js | 京東雲技術團隊

引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互，而前端框架的選擇對於實現這些目標至關重要。然而，傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下，我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架，更是一種前端性能的終極解決方案。它不僅提供了卓越的性能，還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q

性能優化 , 前端性能 , ssr , 前端

收藏 評論

jueqiangdeqianbi 頭像

倔強的鉛筆 - 深入探討Node.js文件寫入：逐步教程

文件寫入是 Node.js 中的一項重要任務，它允許你將數據保存到本地文件系統中，供後續使用。這個功能在許多應用中都有廣泛的應用，包括數據備份、日誌記錄、配置文件更新等。在本文，我們將介紹如何在 Node.js 中執行文件寫入操作，提供基本概念、常用方法、使用場景和實踐案例。 基本概念 在開始之前，讓我們先了解一些基本概念。 文件系統模塊 Node.js 提供了內置的文件系統模塊 fs，它包含了

node.js , 最佳實踐 , 前端工程師 , 程序員 , 前端

收藏 評論

moyuzai_zxp616510038 頭像

馳驥 - 【十五】CSS性能

前言 本篇章來源於https://juejin.cn/post/7077347573740077069，內容只是經過咀嚼便於自己理解。 面試回答 1.重繪重排：簡單來説重繪就是改變某個節點的樣式，重排就是改變某些節點的佈局，比如元素尺寸變動、元素位置變動以及瀏覽器窗口變動。所以重排一定會引起重繪，而重繪不一定引起重排。減少重繪重排的方式主要是通過集中修改css來完成，比如將樣式統一放在clas

vue.js , less , Css , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現魔法漸變邊框卡片

如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。 基於上面的動圖可以分析出以下是本次實現的主要幾點： 卡片的邊框是漸變色 卡片的邊框呈順時針動畫 卡片底部還有陰影隨着邊框動畫而變化 鼠標懸停時動畫隱藏顯示靜態的卡片 實現過程 看到這樣的邊框首先要想到的

css3 , 動畫 , Css , 用户體驗 , 前端

收藏 評論

nanchengfe 頭像

南城FE - 基於 Letterize.js + Anime.js 實現炫酷文本特效

如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過

css3 , 動畫 , Css , 前端 , Javascript

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 深入跨域 - 從初識到入門 | 京東物流技術團隊

前言 跨域這兩個字就像一塊狗皮膏藥一樣黏在每一個前端開發者身上，無論你在工作上或者面試中無可避免會遇到這個問題。如果在網上搜索跨域問題，會出現許許多多方案，這些方案有好有壞，但是對於闡述跨域的原理和在什麼情況下需要用什麼方案，缺少系統性的説明。大家在工作中可能因為大佬們已經配置好了，不會產生跨域，但是作為一個前端的開發人員，面對跨域的問題，還是需要從原理上去理解跨域的原因，在不同的情況中，我們該如

chrome , 跨域 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現炫酷文本陰影效果

如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。 基於以上動圖可以分析出以下是本次實現的主要幾個功能點： 文本有多個顏色的陰影的效果 文本有空心鏤空的效果 鼠標懸停時文本回到正常效果 鼠標懸停時英文字體的粗細有變化 實現過程 多層顏色陰影 文字的陰影用text-shadow實現，但

css3 , 動畫 , Css , 前端

收藏 評論

tinyang 頭像

豫見世家公子 - js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true，只要有一項為空則返回false

js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true，只要有一項為空則返回false。一開始看到這樣的場景我就覺得很簡單沒難度，可真正上手才發現並不那麼簡單，而且想要讓代碼健壯就又複雜了些。於是經過一個小時的努力加不斷修改、增補，總算實現了自己想要的一個方法。 代碼如下： const isArrayEmpty = arr = { if (!Array.isArray(arr) ||

數組 , 遞歸 , 前端 , Javascript

收藏 評論

nanchengfe 頭像

南城FE - 純CSS動態漸變文本特效

如圖所示，這是一個炫酷的文本漸變效果，如同冰島的極光一般。本次的文章讓我們逐步分解代碼，瞭解其實現原理。 基於以上動圖效果可以分析以下是本次動效實現的主要幾點： 文本中有多個顏色的動畫 每個顏色顯示的半徑不同，有大有小 整體動畫是有規律的重複進行着 實現過程 接下來開始正式的代碼實現過程，通過以上可以分析出會有多個元素來實現顏色的動畫，每個元素的動畫軌跡和運行速度不一致，但當多個不同顏

css3 , 動畫 , Css , 程序員 , 前端

收藏 評論

jdcdevloper 頭像

京東雲開發者 - 前端技術探秘-Nodejs的CommonJS規範實現原理 | 京東物流技術團隊

瞭解Node.js Node.js是一個基於ChromeV8引擎的JavaScript運行環境，使用了一個事件驅動、非阻塞式I/O模型，讓JavaScript 運行在服務端的開發平台，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言。Node中增添了很多內置的模塊，提供各種各樣的功能，同時也提供許多第三方模塊。 模塊的問題 為什麼要有模塊 複雜的

chrome , node.js , commonjs , 前端 , Javascript

收藏 評論

webinfoq 頭像

破曉L - 瞭解關鍵區別：await vs return vs return await

異步編程是現代 JavaScript 開發中一個重要方面，它使我們能夠處理耗時的操作，而不會阻塞其他任務的執行。使用異步函數時，我們會遇到三個重要的關鍵字：await 、return、return await。在本文中，我們將探討這些關鍵字之間的差異，並討論何時使用每個關鍵字。 在深入探討細節之前，讓我們先闡明一下異步函數的用途。異步函數是一種特殊類型的函數，可以使用 await 關鍵字。它允許我

vue.js , promise , async-await , 前端 , Javascript

收藏 評論