博客 RSS 訂閱

nanchengfe 頭像

南城FE - 螺旋文字滾動特效源碼解析

如圖所示，今天看到一個很炫酷的雙文字螺旋滾動特效，兩行文字呈螺旋狀變化，在網站中這樣的效果對用户很有吸引力。本文將基於原網站解析如何實現這個炫酷的效果，基於這個動圖可以分析出需要實現的要點： 文字呈螺旋狀滾動 滾動過程中文字大小變化 動畫過程無縫鏈接 兩行文字滾動 實現過程 文字展示 為了方便更改文案將文案定義變量，通過JS代碼動態創建DOM，定義文案、螺旋的角度以及動畫的持續時間：

動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS螢火蟲按鈕特效

如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事

css3 , 動畫 , 前端

收藏 評論

nanchengfe 頭像

南城FE - CSS炫酷光暈按鈕特效

如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 按鈕背景為漸變顏色 懸停時按鈕有放大效果 懸停時文案有發光漸變動畫 懸停時按鈕有旋轉發光效果 實現過程 漸變按鈕 漸變色背景我們設置background-image的line

css3 , 動畫 , Css , 前端

收藏 評論

nanchengfe 頭像

南城FE - 純CSS實現有趣emoji切換開關

這是一個純CSS創建的動畫切換開關，它不僅能夠在視覺上吸引用户，還能通過交互提供即時反饋。本文將解析源碼的核心實現邏輯，這個項目的核心是使用CSS變量、3D變換和過渡效果來實現一個動態的、響應式的用户界面元素。 關鍵技術點 CSS變量：用於動態調整樣式。 3D變換：用於創建翻轉動畫效果。 過渡效果：用於平滑地改變元素的樣式。 emoji：並不是真正的emoji而是通過CSS繪製。 實

css3 , 動畫 , Css , 前端

收藏 評論

jump_and_jump 頭像

jump__jump - 利用 XState(有限狀態機) 編寫易於變更的代碼

目前來説，無論是 to c 業務,還是 to b 業務，對於前端開發者的要求越來越高，各種絢麗的視覺效果，複雜的業務邏輯層出不窮。針對於業務邏輯而言，貫穿後端業務和前端交互都有一個關鍵點 —— 狀態轉換。 當然了，這種代碼實現本身並不複雜，真正的難點在於如何快速的進行代碼的修改。 在實際開發項目的過程中，ETC 原則，即 Easier To Change，易於變更是非常重要的。為什麼解耦很好？ 為

有限狀態機 , fsm , 前端優化 , 代碼質量 , Javascript

收藏 評論

solvep 頭像

solvep - 前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged

整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format

前端工程化 , 前端優化 , 前端 , Git

收藏 評論

dantiedan 頭像

彈鐵蛋同學 - [譯] 如何使用 useRef 修復 React 性能問題

原文地址：How to useRef to Fix React Performance Issues 原文作者：Sidney Alcantara 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc

react , react-hooks , 前端優化 , 前端 , Javascript

收藏 評論

familyaboveall 頭像

familyAboveAll - vue移動端項目骨架屏的實現

Vue應用加載過程 我們先來看看vue的入口文件index.html裏面的內容， !DOCTYPE html html lang="en" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=de

vue.js , 前端優化

收藏 評論

liuyue_5e7eb6745e089 頭像

劉悦的技術博客 - 石火電光追風逐日|前端優化之次時代圖片壓縮格式WebP的項目級躬身實踐(Python3 PIL+Nginx)

原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_190 我們知道，在前端界有一個共識：速度就是生命，帶寬就是金錢。怎樣將頁面加載速度有效提升是無數前端工程師無時不刻在思考的課題，目前的網絡環境中，除了視頻，圖片仍舊是佔用流量較大的一部分，對於app端尤其如此，因此，如何在保證圖片視覺不失真的前提下縮小圖片體積，對於節省帶寬和電池電量都十分重要，因此Google在十年前提出了一種

python3 , 圖片壓縮 , webp , 前端優化 , Nginx

收藏 評論

jackn 頭像

Jack_N - 前端進階（1）Web前端性能優化

前端進階（1）Web前端性能優化 Web前端性能優化, 不僅能夠改善站點的用户體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。 1. 服務器優化 1.1. 使用內容分發網絡（CDN） 把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。 1.2. 服務器使用http2.0協議 Htt

前端優化 , Css , HTML , Javascript

收藏 評論

bianchengsanmei 頭像

編程三昧 - WebSocket 對象簡介

WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。 何為 WebSocket 對象？ WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。 WebSocket 對

websocket , 技能表 , 前端優化 , 前端

收藏 評論

ranck 頭像

張儀ranck - 前端性能優化總結

本文將記錄我所掌握的全部整套前端性能優化模型 http協議層面 http協議緩存（應用緩存，瀏覽器默認緩存，自定義瀏覽器緩存，代理服務器緩存，服務器緩存） gzip壓縮 chrome併發6個請求 使用loading優化請求中的體驗 預加載 PreloadJS （瀏覽器緩存） 工程化 圖片base64 代碼切割 按需加載 BundleAnalyzerPlugin 靜態分離，第

前端優化

收藏 評論

fantasticlbp 頭像

杭城小劉 - 打造一套客户端功能最全的 APM 監控系統

APM 是 Application Performance Monitoring 的縮寫，監視和管理軟件應用程序的性能和可用性。應用性能管理對一個應用的持續穩定運行至關重要。所以這篇文章就從一個 iOS App 的性能管理的緯度談談如何精確監控以及數據如何上報等技術點 App 的性能問題是影響用户體驗的重要因素之一。性能問題主要包含：Crash、網絡請求錯誤或者超時、UI 響應速度慢、主線程卡頓、

性能監控 , react-native , apm , 前端優化 , ios

收藏 評論

grapecity 頭像

葡萄城技術團隊 - 從頁面加載到數據請求，前端頁面性能優化實踐分享

背景 做過前端開發都知道前端的工作內容是很多的，對於HTML、CSS、Javascript、Image、Flash等各種內容的使用。為了更好提升應用的性能，我們需要對各種資源內容進行不同方面的優化。 對用户而言，優化可以讓應用的響應速度加快，加載更加迅速，可以帶來更好的使用體驗。 對於服務商而言，前端優化能夠減少頁面請求數量，寬帶所佔帶寬，有效的節省資源。 前端優化的內容很多，按照粒度等級劃

websocket , spreadjs , 前端優化 , 前端

收藏 評論

geelinklivevideostack 頭像

LiveVideoStack - 【客户端建設及調優實踐】

“音視頻+無限可能” 是一扇LiveVideoStackCon面向新興領域開啓的大門，在移動互聯網紅利消失、內卷的局面下，智能車、製造、金融、醫療、出海等新興領域還在迫切追尋新技術帶來的增值。在“音視頻+無限可能” ，提前看到新機會、新案例、新實踐。 4月15日-16日，LiveVideoStackCon 2022 音視頻技術大會 上海站，和你一同開啓通向未來的大門。 客户端建設及調優實踐 軟/硬

前端優化 , 客户端 , 前端

收藏 評論

asmallwhitecat 頭像

華仔 - 【包真】我的第一次webpack優化，首屏渲染從9s到1s

大家好，我是貓小白，本文基於vue2，全文閲讀大約需要3分鐘。 談到webpack優化大部分人可能都看膩了，無非就那幾招嘛，我之前也是看過許多類似的文章，但都沒有自己真正上手過，下面是我用公司的項目真實操練下來的，首屏加載速度提升很大（刷刷的），希望能幫到你。 廢話不多説，先看看對比成果！ 類型 優化前 優化後 js文件大小

前端優化 , webpack , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 聊聊併發控制鎖

對於企業應用來説，完全不涉及到併發的問題，基本是不可能的。因為對於一個應用中很多的事情都是同時進行的。併發可能發生在數據獲取，服務調用乃至於用户交互中。併發問題有兩個重要的解決方案，一個是隔離，另一個是不變性。 併發問題會發生在多個執行單元同時訪問同一資源的時候，此時，一個好的方法就是分好“蛋糕”，讓每一個執行單元都能訪問到各自的資源。好的併發設計就是：找到創建好隔離區的辦法，然後通過分析工作流讓

樂觀鎖 , 鎖 , 前端優化 , 併發 , Json

收藏 評論

dreamapplehappy 頭像

dreamapplehappy - try/catch/finally：“前端的好厚米，我覺得你們不夠了解我呀~”

這篇文章想跟大家一起重新温習一下關於使用 try...catch 進行異常捕獲的一些知識點。為了提升大家的閲讀興趣，我們先來做三個小練習題，如果你都做對的話，那麼表明你這一部分的知識掌握的很熟練，可以不用讀這篇文章啦~ 如果做錯了某道題的話，説明我們還有一些知識點需要再次鞏固一下，話不多説，我們先來看看這三道題： function doTask () { try { con

面試問題 , 前端優化 , 異常處理 , 前端 , Javascript

收藏 評論

winnn 頭像

Winn - vue性能優化之異步組件和路由懶加載

今天來聊聊vue2的性能小優化之異步組件跟路由懶加載 一、組件優化 目前代碼塊中包含了兩個子組件，它們在符合條件的情況下才會渲染，採用了最基礎的方式進行導入。 頁面刷新後會加載五個文件，在點擊顯示兩個組件時，只會新增一個文件，加載的是element的字體文件，也就是説在頁面初始化時就已經加載了組件文件。 現在我們把它改寫成異步組件，再來做個對比： 當我們點擊顯示組件時，控制枱會新增一個請求

編程 , vue.js , 前端優化 , 圖片上傳 , 程序員

收藏 評論

tiandechongzhika 頭像

靦腆的充值卡 - 什麼是SSL證書，又該如何申請免費SSL證書

如今越來越多的網站在主頁上使用 HTTPS加密連接，以確保您的網站安全並防止任何不想要的攻擊。您可能會問：“為什麼要安裝 HTTPS證書？”讓我們看看如何使用免費 SSL證書來滿足您的需求，這篇文章將告訴您如何免費申請和安裝 SSL證書，以保護您的網站免受各種威脅。 一、什麼是 SSL證書？ SSL證書是由受信任的 CA機構簽發的數字證書，它允許您通過 HTTPS連接與服務器通信。該

ssl證書 , 網站安全 , HTTPS , 前端優化 , 運維安全

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #2：易被忽略的「domain」

若看了上篇筆記，眼尖的鐵汁們應該發現，最終的重構成果並未出現目錄結構調整方案提到的 domain 文件夾。 這是因為領域建模是個相對較難且需要長期去做的事情，所以我們不急，慢慢來，要用心地思考與處理——從本篇筆記開始就會涉及到相關內容啦！ 在進行實際的鏟💩演練之前，這篇筆記先來講解下 domain 文件夾的重要性，請各位鐵汁搬來小板凳坐坐好，用小拇指清理下👂🏼聽我説—— 在我所設計的「模塊化

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

ntksol 頭像

歐雷 - 前端鏟💩日記 #3：重構「個人主頁」

鐵汁們聽好了哈——從本篇筆記開始，將進入實際的鏟💩演練啦！ 這首先要被剷除的💩，是分佈在我接手官網項目後最先接觸的用户個人主頁裏。 在這系統中，用户分個人與項目方兩種，它們的個人主頁雖看起來一樣，但視覺細節和數據結構等還是有些差異的，佈局結構大致如圖所示： 個人主頁原先代碼中，其他部分還算有點封裝意識，但最重要的課程、活動等列表部分的代碼看起來就是初級水平，將它們全部糅合在一個 React

react , 前端架構 , 前端優化 , next.js , 重構

收藏 評論

zjkal 頭像

zjkal - ⏱️TimeHelper——一個簡單快捷的PHP日期時間助手類庫

TimeHelper 是一個簡單易用的PHP時間日期助手類庫,可以快速實現常用的時間日期操作,比如獲取指定時間的秒數,獲取友好的時間格式,判斷時間範圍,計算兩個時間相差值,返回N小時/天/星期/月/年前或者後的時間戳等等 🧩特性 簡單易用: 不依賴任何擴展,開箱即用 化繁為簡: 所有方法都可以傳入任意類型的時間日期格式或時間戳 快捷高效: 所有操作只需要一個靜態方法即可完成 長期維護:

composer , 類庫 , 日期格式化 , 時間 , php

收藏 評論

jianfei 頭像

濰坊老登程序員 - Composer 源管理

抄襲至此，節省搜索時間 ，方便開發時複製 當前項目切換 composer config repo.packagist composer {source} 全局切換 composer config -g repo.packagist composer {source} 全局查看配置 composer config -g -l 當前項目查看配置 composer conf

composer

收藏 評論