WebSocket 對象簡介
WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。 何為 WebSocket 對象？ WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。 WebSocket 對
昵稱 編程三昧
@前端
貢獻者508
粉絲0
貢獻者
@前端
動態 列表
從頁面加載到數據請求，前端頁面性能優化實踐分享
背景 做過前端開發都知道前端的工作內容是很多的，對於HTML、CSS、Javascript、Image、Flash等各種內容的使用。為了更好提升應用的性能，我們需要對各種資源內容進行不同方面的優化。 對用户而言，優化可以讓應用的響應速度加快，加載更加迅速，可以帶來更好的使用體驗。 對於服務商而言，前端優化能夠減少頁面請求數量，寬帶所佔帶寬，有效的節省資源。 前端優化的內容很多，按照粒度等級劃
昵稱 葡萄城技術團隊
【客户端建設及調優實踐】
“音視頻+無限可能” 是一扇LiveVideoStackCon面向新興領域開啓的大門，在移動互聯網紅利消失、內卷的局面下，智能車、製造、金融、醫療、出海等新興領域還在迫切追尋新技術帶來的增值。在“音視頻+無限可能” ，提前看到新機會、新案例、新實踐。 4月15日-16日，LiveVideoStackCon 2022 音視頻技術大會 上海站，和你一同開啓通向未來的大門。 客户端建設及調優實踐 軟/硬
昵稱 LiveVideoStack
【包真】我的第一次webpack優化，首屏渲染從9s到1s
大家好，我是貓小白，本文基於vue2，全文閲讀大約需要3分鐘。 談到webpack優化大部分人可能都看膩了，無非就那幾招嘛，我之前也是看過許多類似的文章，但都沒有自己真正上手過，下面是我用公司的項目真實操練下來的，首屏加載速度提升很大（刷刷的），希望能幫到你。 廢話不多説，先看看對比成果！ 類型 優化前 優化後 js文件大小
昵稱 華仔
try/catch/finally：“前端的好厚米，我覺得你們不夠了解我呀~”
這篇文章想跟大家一起重新温習一下關於使用 try...catch 進行異常捕獲的一些知識點。為了提升大家的閲讀興趣，我們先來做三個小練習題，如果你都做對的話，那麼表明你這一部分的知識掌握的很熟練，可以不用讀這篇文章啦~ 如果做錯了某道題的話，説明我們還有一些知識點需要再次鞏固一下，話不多説，我們先來看看這三道題： function doTask () { try { con
昵稱 dreamapplehappy
MVVM與MVC的區別
MVC和MVVM都是一種設計模式。 MVC MVC Model：模型，用於存儲業務數據； View：視圖，界面的展示； Controller：控制器，處理視圖與數據的交互。 MVC之間的關係： View展示數據依賴Model，View可以直接訪問Model； View更新數據通過Controller，Controller更新Model。 MVVM MVVM Model：模型，用於存儲業務
昵稱 要出家的鍵盤
純CSS實現魔法漸變邊框卡片
如圖所示，這是一個很炫酷的卡片效果，關鍵效果在於卡片的邊框呈漸變色變化着，在網頁中有這樣一個卡片相信可以極大的增強用户體驗交互。本次文章將解讀如何使用純CSS實現這個炫酷的卡片效果。 基於上面的動圖可以分析出以下是本次實現的主要幾點： 卡片的邊框是漸變色 卡片的邊框呈順時針動畫 卡片底部還有陰影隨着邊框動畫而變化 鼠標懸停時動畫隱藏顯示靜態的卡片 實現過程 看到這樣的邊框首先要想到的
昵稱 南城FE
基於 Letterize.js + Anime.js 實現炫酷文本特效
如上面gif動圖所示，這是一個很炫酷的文字動畫效果，文字的每個字符呈波浪式的擴散式展開。本次文章將解讀如何實現這個炫酷的文字效果。 基於以上的截圖效果可以分析出以下是本次要實現的主要幾點： 文案呈圓環狀擴散開，擴散的同時文字變小 文字之間的間距從中心逐個擴散開，間距變大 文案呈圓環狀擴散開，擴散的同時文字變大 文字之間的間距從中心逐個聚攏，間距變小 動畫重複執行以上4個步驟 實現過
昵稱 南城FE
純CSS實現炫酷背景霓虹燈文字效果
如圖所示，這是一個很炫酷的霓虹燈文字效果且背景炫酷，就像很多個燈光閃爍着不同的顏色。 本次文章將解析如何用CSS代碼實現這個效果，根據上面的動圖分析出我們要實現的幾個主要功能點： 整個背景中有平均分佈的小點襯托中心區域 文字閃爍效果如同霓虹燈一樣 文字背景呈多個平均分佈的亮點 背景亮點的顏色整體呈現漸變色變化 1. 默認背景色 首先我們來看看如何通過CSS創建一個多個小點背景效果。
昵稱 南城FE
純CSS絲滑邊框線條動畫
在這個網站（minimal-portfolio-swart.vercel.app）發現一個不錯的交互效果，用户體驗效果很不錯。如封面圖所示，這個卡片上有一根白色的線條圍繞着卡片移動，且在線條的卡片內部跟隨這一塊模糊陰影，特別是在線條經過卡片圓角部分有特別絲滑的感覺。 今天的文章就來解析如何實現這種效果，文末附源碼預覽地址。根據示例圖片分析需要實現的功能點如下： 線條跟隨卡片邊框勻速移動 線
昵稱 南城FE
純 CSS 實現計時器效果
本文翻譯自 How to Make a CSS Timer，作者：PREETHI SAM， 略有刪改。 有時候我們需要再網站中使用計時器。比如下單購物成功後增加倒計時回到首頁；或者一些時間管理工具（番茄工作法），當遇到這些情況時，我會毫不猶豫地使用JavaScript，因為它可能是處理這類事情的更強大的工具。 然而在某些場景下 CSS 替代品也同樣有趣和高效。現在的電子郵件客户端具有很強的 CSS
昵稱 南城FE
可視化學習：如何生成簡單動畫讓圖形動起來
大家好，本文分享的是如何生成簡單動畫讓圖形動起來。 在可視化展現中，動畫它是強化數據表達，吸引用户的重要技術手段。 在具體實現動畫之前，我們先來了解一下動畫的三種形式，分別是固定幀動畫、增量動畫和時序動畫。 graph LR A[動畫的三種形式] -- B[固定幀動畫] A -- D[增量動畫] A -- E[時序動畫] B -- F[使用已生成的靜態圖像，將圖像依次播放] D -- C[動態繪製
昵稱 beckyyyy
純CSS實現海浪文字效果
如圖所示，這是一個很炫酷的文字波動效果，文字呈現出一個海浪波動的效果，這樣的動畫效果可以顯著加強文案本身的含義。本文將解析如何使用純CSS實現這個特效，基於這個動圖可以分析出實現這個效果的主要功能要點： 整體呈現出3D文案效果 文案呈現波動狀態動畫 文案有漸變顏色的變化 文案在變化過程中有傾斜分層的效果 1. 基礎樣式 首先我們從佈局和基礎樣式開始。 通過上面的圖片可以看出動畫中的
昵稱 南城FE
掌控物體運動藝術：圖撲 Easing 函數實踐應用
現如今，前端開發除了構建功能性的網站和應用程序外，還需要創建具有吸引力且尤為流暢交互的用户界面，其中動畫技術在其中發揮着至關重要的作用。在數字孿生領域，動畫的應用顯得尤為重要。數字孿生技術通過精確模擬現實世界中的對象、過程和系統，對動畫的需求遠遠超過傳統前端開發。 在這種環境中，動畫不僅僅是為了美觀，更是用於實現系統與現實的同步、演示覆雜過程和數據可視化的關鍵手段。 HT 動畫介紹 在足夠短的時間
昵稱 hightopo
基於小程序請求接口 wx.request 封裝的類 axios 請求
Introduction wx.request 的配置、axios 的調用方式 源碼戳我 feature 支持 wx.request 所有配置項 支持 axios 調用方式 支持 自定義 baseUrl 支持 自定義響應狀態碼對應 resolve 或 reject 狀態 支持 對響應（resolve/reject）分別做統一的額外處理 支持 轉換請求數據和響應數據 支持 請
昵稱 海闊天空_mac
我是如何在 Vue 項目中做代碼分割的
通常為了開發效率，我們會使用 vue-cli 創建項目，這樣創建的項目默認情況下編譯是會對代碼進行分割的。但是如果是自行配置的 webpack 環境的話，還是很有必要熟悉代碼分割的相關知識的。 為什麼要做代碼分割 在配置 webpack 的過程中，很多時候我們的 webpack 入口只寫了一個 entry: '${sourceDir}/index.js’，默認情況下只會生成一個 bundle 文件
昵稱 EthanProcess
當我們進行性能優化，我們在優化什麼（LightHouse優化實操）
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_214 好的互聯網產品不僅僅在功能上要高人一籌，在性能層面也需要出類拔萃，否則金玉其外敗絮其中，頁面是美輪美奐了，結果首屏半天加載不出來，難免讓用户乘興而來，敗興而歸。 幸運的是，前端的性能優化有諸多有跡可循的理論和方法，其中相對權威的，無疑是LightHouse。 LightHouse 是一個開源的自動化工具，它作為 Chrom
昵稱 劉悦的技術博客
從 MVC 到 Flux，從 Redux 到 Mobx
前端狀態管理的工具庫紛雜，在開啓一個新項目的時候不禁讓人糾結，該用哪個？其實每個都能達到我的目的，我們想要的無非就是管理好系統內的狀態，使代碼利於維護和拓展，儘可能降低系統的複雜度。 使用 Vue 的同學可能更願意相信其官方的生態，直接上 vuex/pinia，不用過多糾結。由於我平常使用 React 較多，故就當前應用較廣泛的 Redux、Mobx 倆工具庫為例，研讀了一番，記錄下自己的一些閒言
昵稱 Sadhu
淺析MVC
一、MVC是什麼？ M 就是 model, 即數據模型，負責數據相關的任務，包括對數據的增刪改查 V 就是view, 即視圖層，即用户能看得到的界面 C 就是 Controller，控制器，負責監聽用户事件，然後調用 M 和 V 更新數據和視圖 接下來將分別用偽代碼表示三個部分的工作內容 1.1 Model 數據模型 //示例 let Model={ data:{數據源},
昵稱 Natcret
基於 Hexo 鍵入分享功能
原文鏈接：基於 Hexo 鍵入分享功能 前言 本站基於Hexo搭建，用的 🦋 hexo-theme-butterfly 主題 v3.7.1，請注意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.2.2 。 如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意。 注意：我的博客根目錄路徑為 【G:/hexo-blog/blog-demo
昵稱 唐志遠
基於 Hexo 鍵入評論功能
原文鏈接：基於 Hexo 鍵入評論功能 注意：本站的評論系統已從 Valine 更換成 Twikoo。 前言 本站基於Hexo搭建，用的 🦋 hexo-theme-butterfly 主題 v3.7.1，請注意最新的🦋 hexo-theme-butterfly 版本已經更新到 v4.3.0 。 如果你是 v3.7.1 之外的版本，可能有些地方會有出入，請留意。 注
昵稱 唐志遠
關於Vercel被牆導致獲取Twikoo評論失敗的解決方案
原文鏈接：關於Vercel被牆導致獲取Twikoo評論失敗的解決方案 前言 由於 Vercel 官方域名的 Dns 污染問題，導致 Vercel 部署的 Twikoo 評論無法正常獲取數據。在配置 Twikoo 評論時，如果 envId 用了 vercel 自帶的域名（類似 https://xxxxx.vercel.app/），則會遇到以上問題。 解決方案是用自定義的域名去代替 vercel 的
昵稱 唐志遠
NPM 自動更新版本號
本文首發於 YFun's Blog。 前言 ChenYFan 大佬的文章：SpeedUp!使用黑科技為你的網站提速 有提到過將 Hexo 博客的全部靜態文件上傳至 NPM 達到加速效果。 但是 NPM 版本號不能重複，而且為了精準命中緩存和防止邊緣 @latest 緩存過長，就必須指定版本號。 本人在 我的圖牀解決方案 一文中使用的方法是 npm version patch。 但這個方法也
昵稱 OhhhCKY
優雅的使用Webstack打造個人網址導航
原文鏈接：優雅的使用Webstack打造個人網址導航 前言 一款基於 WebStackPage 的 Hexo 主題。本人選擇的是 hexo-theme-webstack。 效果預覽 具體效果請移步 個人網址導航。 步驟 在目標路徑（我這裏選的路徑為【D:/studytype/My_Blog】）打開cmd命令窗口，執行hexo init初始化項目。 hexo init Nav
昵稱 唐志遠