动态

列表
创建 时间

告別代碼焦慮,單元測試讓你代碼自信力一路飆升!

本文由體驗技術團隊董福俊原創。 背景 一次偶然,我看到了 Kent C. Dodds 的文章中的一個觀點:寫測試代碼的原因,是為了獲得對自己代碼的信心。我覺得深有感觸,於是翻看了kent的所有文章,結合我自己的開發體會,總結了一些關於前端單元測試的觀點。 認識單元測試 單元測試是什麼? 單元測試(UT)是測試系統中的一環,測試系統還包含很多其它環,例如:端到端測試E2E、集成測試Integrati

创建 时间

“Performance面板”一文通,解鎖前端性能優化工具基礎用法!

本文由體驗技術團隊董福俊原創。 一、背景 在做前端頁面性能優化時,Performance面板是一個必不可少的工具。這個工具比較強大,既可以從全局視角分析整個網頁加載情況,又可以從代碼細節,挖掘某個具體環節的性能情況。但這個工具的結果可能讓人看着感覺難以理解,因為它本質上是將各種運行信息呈現給我們,而不是直接告訴我們問題在哪兒。我們需要將各類信息:瀏覽器加載過程、框架打包(webpack)、代碼編譯

创建 时间

TinyVue表格重構5大關鍵幀一次曝光!內存節省 27%,JS 執行時間減少 43% ,FPS 提升 110%

本文由體驗技術團隊岑灌銘原創。 前言 表格作為組件庫高頻使用的組件,它作為承載、展示和交互數據的核心載體,每一次卡頓都可能意味着時間的浪費與耐心的消磨。 然而有小夥伴反饋説,表格組件樹表數據滾動場景卡頓,偶爾會出現白屏現象,甚至會出現表頭和表體滾動不同步的情況。 後來據瞭解是小夥伴的機器性能較為普通,加上表格樹表大數據虛擬滾動確實存在較大的性能瓶頸,存在大量的計算與dom操作。

创建 时间

實戰解析前端優化工具Performance面板!

一、背景 關於Performance面板的基礎用法介紹,可參考上一篇文章《“Performance面板”一文通,解鎖前端性能優化工具基礎用法!》。文章中還從一個HTTP請求的四階段的角度來介紹Performance圖的"觀看方式",並重點介紹了worker線程跟主線程的協作關係 本篇文章中,我們將會以一個實際網頁 ——VPC列表頁為例,介紹Performance抓圖及分析的過程,並將上一篇文章中介

创建 时间

老闆要排名可視化?我反手甩出TinyChart 排名進度圖

本文由張顥嚴同學原創。 前言 OpenTiny HUICharts 是一套功能強大的前端可視化圖表庫,提供豐富的圖表組件、支持 Vue、React、Angular 等主流前端框架,並內置多套主題且可靈活定製,同時完全兼容 ECharts API,使開發高性能、響應式的數據可視化應用變得簡單便捷。 RankProcessChart 基於 HUICharts 開發,專門用於展示排名及流程類數據的可視化

创建 时间

如何使用 TinyEditor 快速部署一個協同編輯器?

本文由曹裏林同學原創。 簡介 TinyEditor 是一個框架無關的富文本編輯器,既可以在原生 JavaScript 項目中使用,也可以在 Vue、React 等前端框架中使用。 本篇文章帶來的是如何使用 TinyEditor 最新的協同編輯模塊快速部署多人實時協作編輯。 前端集成 1、安裝TinyEditor 首先需要安裝 TinyEditor pnpm i @opentiny/fluent-