tag 前端

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

@前端 / 博客 RSS 訂閱

musicfe 頭像

雲音樂技術團隊 - 社交直播遊戲場景前端解決方案專欄（一）：關於Alice.js的起點

本文作者：QHC 前言： 長久以來，傳統前端的工作大多時候在與DOM打交道，近年來，瀏覽器廠商也在不斷努力提高DOM渲染性能，以提高用户體驗。但是更多複雜場景的出現，例如近幾年隨着在線直播、社交娛樂、各種小遊戲的火爆，前端性能的關注度持續提高。特別是遊戲場景，而我們團隊也面臨着一大波h5遊戲化場景，那麼這個系列文章，將帶讀者朋友們一起了解，雲音樂社交直播業務的遊戲化場景解決方案的整體思路與落地案例

dom , canvas , 前端

收藏 評論

panpanpanya 頭像

潘潘潘呀 - React18+Vite4+Zustand4 後台管理系統搭建🎉

前言 老闆：搞個管理系統，我明天就要。 前端：沒空，誰愛做誰做！(小聲bb) 老闆：（突然抬頭）你説什麼？ 前端：好的老闆 用後端的話來説，一個管理系統而已 要不是人手不夠，後端也能做。 看吧，前端就是這麼人微言輕~ 該乾的活還是得幹。 起步 # 使用ant design pro npm i @ant-design/pro-cli -g pro create myapp

react , react-router4 , vite , typescript , 前端

收藏 評論

fenanjiu 頭像

南玖 - pnpm才是前端工程化項目的未來

前言 相信小夥伴們都接觸過npm/yarn，這兩種包管理工具想必是大家工作中用的最多的包管理工具，npm作為node官方的包管理工具，它是隨着node的誕生一起出現在大家的視野中，而yarn的出現則是為了解決npm帶來的諸多問題，雖然yarn提高了依賴包的安裝速度與使用體驗，但它依舊沒有解決npm的依賴重複安裝等致命問題。pnpm的出現完美解決了依賴包重複安裝的問題，並且實現了yarn帶來的所有優

工程化 , npm , 前端

收藏 評論

arextest 頭像

AREX_中文社區 - 如何實現在純 Web 端完成各類 API 調試？

在軟件開發過程中，對於各類 API 的調試工作至關重要。API調試是驗證和測試應用程序接口的有效性和正確性的關鍵步驟。傳統的API調試方法通常依賴於獨立的工具或桌面應用程序，限制了調試過程的靈活性和效率。 為推動API調試向更便捷、高效的方向發展，越來越多的開發人員開始尋求在純Web端完成各類API調試的解決方案。純Web端的API調試具有許多優勢，包括無需安裝額外軟件、跨平台支持、便於團隊協作等

API , 調試 , 前端

收藏 評論

esunr 頭像

EsunR - 解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題

前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時，通常會遇到一個很麻煩的問題，即我們無法提前獲取到當前頁面所需的資源，從而不能提前加載當前頁面所需的 CSS，導致客户端在獲取到服務端渲染的 HTML 時，得到的只有 HTML 文本而沒有 CSS 樣式，之後需要等待一會兒才能將 CSS 加載出來，也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐，可以參考：

服務端渲染 , webpack , Css , ssr , 前端

收藏 評論

johanazhu 頭像

山頭人漢波 - 前端學Ruby：前言

人與人的區別不是”受過教育“和”沒受過教育“，而是”喜歡閲讀“和”不喜歡閲讀“ ——《納瓦爾寶典》 寫在前面，筆者是一名前端，現在來學習 ruby，打算寫一系列的文章，將自己學習 ruby on rails 的經驗分享出來，於是就有了這一系列文章：「前端學Ruby：七天筆記」 第一天 安裝 Ruby、Rails 第二天 熟悉 Ruby 語法 第三天 熟悉 Rails 第四天 唐詩API 項目 第五

ruby-on-rails , ruby , rubygems , 前端

收藏 評論

johanazhu 頭像

山頭人漢波 - 前端學 Ruby：安裝Ruby、Rails

Ruby 是什麼 Ruby 是一個注重均衡的語言，它的發明者松本行弘，混合了他喜歡的多門語言（Perl、Smalltalk、Eiffel、Ada 和 Lisp），創造出了一種兼具函數式編程和命令式編程特色的新語言 他“試着讓 Ruby 更自然，而不是更簡單”，讓一切符合生活常規 除此之外，他還提到： Ruby 就像人的身體一樣，表面上看來簡單，但是內部卻相當複雜 如何安裝 ruby 筆者所用的電腦

ruby-on-rails , ruby , 後端 , 前端

收藏 評論

fenanjiu 頭像

南玖 - V8是如何執行JavaScript代碼的？

前言 一般來講，電腦是不能直接運行我們的javascript代碼的，它需要一個翻譯程序將人類能夠理解的編程語言 JavaScript，翻譯成機器能夠理解的機器語言。目前市面上有很多種 JavaScript 引擎，諸如 SpiderMonkey、V8、JavaScriptCore 等。而由谷歌開發的開源項目 V8 是當下使用最廣泛的 JavaScript 虛擬機，全球有超過 25 億枱安卓設備，而這

v8 , 前端 , Javascript

收藏 評論

johanazhu 頭像

山頭人漢波 - 前端學 Ruby：熟悉 Ruby 語法

寫在前面 我們當然希望能在本地中執行代碼，如果你還沒有隻是看看，還沒安裝 ruby，可以在 try ruby 或者 replit 在線編寫代碼 本文目錄 Ruby 是什麼 基本語法 變量 算術操作 位運算符 打印輸出 註釋 條件語句：控制流 循環/迭代器 數據結構 String Integer/Float Array Hash Set Range 函數（方法） 面向對

ruby-on-rails , ruby , 前端

收藏 評論

fenanjiu 頭像

南玖 - 一文搞懂V8引擎的垃圾回收機制

前言 我們平時在寫代碼的過程中，好像很少需要自己手動進行垃圾回收，那麼V8是如何來減少內存佔用，從而避免內存溢出而導致程序崩潰的情況的。為了更高效地回收垃圾，V8引入了兩個垃圾回收器，它們分別針對不同場景進行工作。 如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新文章～ 垃圾從何而來 我們先來搞清楚這些‘垃圾’是怎麼產生的 不管使用哪一

v8 , 前端 , Javascript

收藏 評論

hard_heart_603dd717240e2 頭像

Hard heart - Vue與VueComponent的關係

結論：VueComponent.prototype.__proto__ === Vue.prototype Vue與VueComponent的關係如圖所示： （圖一） 前提知識： 每個函數function都有一個prototype屬性，即顯式原型（屬性），它默認指向Object空對象， 每個實例對象都有一個__proto__屬性，即稱隱式原型（屬性）。 關係圖分析：

組件設計 , vue.js , 原型鏈 , 前端 , Javascript

收藏 評論

johanazhu 頭像

山頭人漢波 - 前端學 Ruby：熟悉Rails

前言 一句話介紹，看 Rails Guides 即可 正文 Rails 是使用 Ruby 語言編寫的 Web 應用開發框架，如同 Node 中的 Express、Koa，Python 中的 Django、Flash。但相比其他，它更強大 Rails 哲學包含兩大指導思想： 不要自我重複（DRY） 多約定，少配置（約定優於配置） 因為它約定優於配置的設計，從而可以使 Rails 應用幾乎不需

ruby-on-rails , ruby , 前端

收藏 評論

johanazhu 頭像

山頭人漢波 - 前端學 Ruby：唐詩API項目

前言 我想了半天，該做什麼項目，基於筆者的數據庫知識羸弱，怕一方面做前端一方面做後端會搞得四不像，又累時間又長。所以就想以做純 API 為目的，只做接口會不會更快一些呢 正文 筆者打算做一個全唐詩的 API 項目，此項目只為學習 ruby on rails web 開發並部署至服務器，會逐步從零開始到部署上線，部署手段會有些原始，不過沒事，下個項目筆者會升級部署手段 先新建一個 API 項目 ra

實戰 , ruby-on-rails , ruby , 前端

收藏 評論

daivon 頭像

daivon - 基於zustand維護的一套跨框架(react/vue)跨應用的狀態管理及共享方案

zustand-pub 只要從事前端開發，不論是小程序還是web，都繞不開狀態管理。\ 眾所周知， zustand 是一套輕量、便捷、可拓展的狀態管理方案，不論國內 or 國外，都備受喜愛，star 數已接近 3W。 而 zustand-pub 則基於zustand為Iframe、微前端、Module Fedetation、模塊化、組件化等業務場景，提供跨應用、跨框架的狀態管理及狀態共享能力

vuex , redux , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [JS] javascript中的原型鏈01 prototype&__proto__

先給出名詞的定義： 1、實例對象-被new出來對象稱之為實例對象 例如: const p1 = new Person() p1就是實例對象 2、普通對象-未經new，直接聲明的對象是普通對象 例如：const p2 = { name: "John" } p2就是普通對象 3、prototype， 中文翻譯：原型對象 4、__proto__ ，中文翻譯：原型 (英文可以讀作dunder

原型鏈 , 前端 , Javascript

收藏 評論

zxbing0066 頭像

嘿嘿不務正業 - React SSR - 寫個 Demo 一學就會

今天寫個小 Demo 來從頭實現一下 react 的 SSR，幫助理解 SSR 是如何實現的，有什麼細節。 什麼是 SSR SSR 即 Server Side Rendering 服務端渲染，是指將網頁內容在服務器端中生成併發送到瀏覽器的技術。相比於客户端渲染（CSR），SSR 一般用於以下場景： SEO （搜索引擎優化）：由於部分搜索引擎對 CSR 內容支持不佳，所以 SSR 可以提升網站在

react , ssr , 前端

收藏 評論

tangzhiyuan 頭像

唐志遠 - Hexo + Butterfly 自定義頁腳

原文鏈接 ：Hexo + Butterfly 自定義頁腳 推薦閲讀 基於 Hexo 從零開始搭建個人博客（一）: 環境準備 基於 Hexo 從零開始搭建個人博客（二）: 項目初識 基於 Hexo 從零開始搭建個人博客（三）: 主題安裝 基於 Hexo 從零開始搭建個人博客（四）: 基礎配置 基於 Hexo 從零開始搭建個人博客（五）: 詳細配置 基於 Hexo 從零開始搭建個人博客（

hexo , 前端 , Javascript

收藏 評論

tangzhiyuan 頭像

唐志遠 - 一文吃透 CSS Flex 佈局

原文鏈接：一文吃透 CSS Flex 佈局 教學遊戲 這裏有兩個小遊戲，可用來練習 flex 佈局。 塔防遊戲 送小青蛙回家 Flexbox 概述 Flexbox 佈局也叫 Flex 佈局，彈性盒子佈局。 它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來，更簡便、完整、響應式地實現各種頁面佈局。 它的主要思想是使父元素能夠調整子元素的寬度、高度、排列方式，從而更

flex , Css , 前端

收藏 評論

fenanjiu 頭像

南玖 - 【webpack系列】從核心概念到上手配置

前言 作為前端開發者，相信大家或多或少都接觸過webpack，現如今webpack已經滲透在了前端的各個方面，所以我們有必要來了解並學習webpack，webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器，它能夠以一種相對一致且開放的處理方式，加載應用中的所有資源文件（圖片、CSS、視頻、字體文件等），並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它

工程化 , webpack , 前端 , Javascript

收藏 評論

apifox 頭像

Apifox - Less基礎使用秘籍，讓你的CSS更高效！

Less（Leaner Style Sheets 的縮寫) 是一門向後兼容的 CSS 擴展語言。，它擴展了CSS（層疊樣式表）的功能並提供了更靈活、更強大的樣式定義和管理機制。通過使用 Less，開發人員可以編寫可維護、可重用的樣式代碼，並以簡潔的語法實現複雜的樣式效果。本文將介紹 Less 的基本概念和特性，以及如何使用它來簡化 CSS 開發過程。想要學習更多的知識，可訪問 犀牛書 的 Less

less , 開發 , 程序員 , 後端 , 前端

收藏 評論

dewujishu 頭像

得物技術 - 卡口服務 —— 基於前端巡檢系統的拓展實踐｜得物技術

1 背景 體驗是得物的業務關鍵詞之一，對於前端開發而言，提高用户體驗更是重要工作內容之一。 得物前端平台目前有巡檢系統、監控平台等多種手段保障線上頁面穩定運行，但是仍有一部分問題處於“監控死角”，而且巡檢、監控都屬於後置告警手段，為了確保頁面上線前就能得到一定的用户體驗保障，結合公司的戰略目標，我們決定開發一個H5頁面檢測服務，用來前置檢測即將上線的頁面，提前暴露該頁面可能存在的問題反饋給對應的開

前端工程化 , 前端框架 , 前端工程師 , 前端性能 , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [JS] javascript中的原型鏈02 prototype&constructor

這是構造函數和構造函數的prototype之間的關係 Person.prototype.constructor === Person; // true 那麼對Person創建的實例對象p1 p1.__proto__.constructor === Person; // true 在瀏覽器控制枱中輸入如下代碼 function Person(name) { this.name = name;

原型 , constructor , 原型鏈 , 前端 , Javascript

收藏 評論

xiaoxiaoxiaomaibulaoban 頭像

小邁步老闆 - uniapp項目中全局引入less變量

1.在vue.config.js文件中配置 let path = require('path'); let stylePath = path.resolve(__dirname, './static/css/variable.less') module.exports = { css: { loaderOptions: { less: {

less , 前端

收藏 評論

nanchengfe 頭像

南城FE - 如何使用CSS Grid 居中 div

本文翻譯自 How to Center a Div Using CSS Grid，作者：Fimber Elemuwa, Ralph Mason。 略有刪改 在本文中，我們將介紹使用CSS Grid在水平和垂直方向上居中div的五種方法，當然這些技術可用於任何類型的元素。 初始化 我們首先創建一個容器，其中包含一個簡單的div元素，我們將使用它來演示這些居中方法。下面是HTML： artic

佈局 , css3 , Css , 前端

收藏 評論