@重繪 / 博客 RSS 訂閱

Nov 16 2025

前端小巷子 - 前端虛擬長列表

前端虛擬長列表 當一次性渲染十萬條 DOM 節點時，瀏覽器會瞬間陷入「卡頓—白屏—崩潰」三連擊。虛擬長列表（Virtual Scroller）把「按需渲染」做到極致：只繪製可見區域並加少量緩衝，讓巨量數據在低端設備也能保持 60 FPS。 一、問題本質：渲染成本與滾動成本的矛盾 渲染成本等於節點數量乘以單個節點複雜度，滾動成本等於佈局重排乘以樣式重繪。瀏覽器單幀預算約 16

複雜度 , 重繪 , Math , 前端開發 , Javascript

收藏 評論

Dec 24 2025

16213681 - GeoScene Maps SDK for JavaScript鷹眼效果

鷹眼的實現最常用的是添加一個MapControl，顯示全圖，並與主地圖控件進行交互。 axMapControl1 主地圖控件 axMapControl2 鷹眼地圖控件 1.載入地圖到鷹眼控件 地圖載入到主地圖控件的同時也載入鷹眼控件。在axMapControl1_OnMapReplaced事件中添加相應函數 循環遍歷axMapControl1控件中的所有

控件 , 圖層 , 重繪 , 前端開發 , Javascript

收藏 評論

Dec 02 2025

網絡安全守衞 - winform 自繪ProgresssBar

今天需要做在winform窗口顯示並播放gif動畫圖片效果，網上找了找，並整理如下： 基本上都是使用RascallySnake的代碼： 測試時調用Loadgif() #region 動畫 //首先定義私有變量 private Image m_img = null; private EventHandl

雲計算 , 重繪 , 雲原生 , Image , gif動畫

收藏 評論

Nov 22 2025

前端小巷子 - 深入 Vue 的 nextTick

深入 Vue 的 nextTick 在初學 Vue 時，我們經常會遇到這樣的困惑：數據明明已經改了，可頁面卻沒立刻變化；或者手動去獲取更新後的 DOM，結果拿到的是舊值。這時候，Vue 官方會推薦我們使用 this.$nextTick()。它到底做了什麼？為什麼“等一下”就能解決問題？本文嘗試用通俗的語言把它的作用和實現原理講清楚。 一、nextTick 的作用 Vue 的響

事件循環 , 重繪 , Vue , 前端開發 , Javascript

收藏 評論

Nov 21 2025

blueice - 如何使用SVG及其動畫技術為你的 Web 前端開發帶來一些新鮮的體驗

SVG（可縮放矢量圖形）動畫在現代前端開發中應用廣泛，但性能問題常導致頁面卡頓。本文基於 gh_mirrors/fr/frontend-stuff 項目，測試主流 SVG 動畫庫的渲染速度，幫助開發者選擇最優方案。 測試環境與工具 測試環境基於項目配置，核心依賴包括： Recharts（v3.3.0）：用於數據可視化的 SVG 圖表庫，pack

幀率 , 重繪 , Css , 前端開發 , HTML , svg

收藏 評論

Dec 18 2025

mob64ca14089531 - vue grafana 圖表

本文流程： 1.安裝插件→2.引入Echarts→3.創建圖表→4.修改樣式→5.接入數據 一.安裝插件 方法一：npm安裝Echarts npm install echarts -S 方法二：cnpm安裝Echarts 1.首先我們需要安裝cnpm npm install -g

vue grafana 圖表 , 分割線 , 雲計算 , 圖例 , 重繪 , 雲原生

收藏 評論

Dec 25 2025

mob64ca14031c97 - JavaScript 實現的推流

頁面的顯示過程： 1.生成DOM樹(DOM TREE) 2.加載CSS 3.生成渲染樹(RENDER TREE),渲染樹是和樣式相關的 4.瀏覽器基於GPU(顯卡)開始按照RENDER TREE畫頁面 重繪(repaint)： 當某一個DOM元素 樣式更改 (位置沒變只是樣式更改，例

重繪 , JavaScript 實現的推流 , 解決方案 , 前端開發 , 虛擬內存 , Javascript

收藏 評論