代碼層面探索前端性能

最近在做性能優化,具體優化手段,網上鋪天蓋地,這裡就不重覆了。性能優化可分為以下幾個維度:代碼層面、構建層面、網路層面。本文主要是從代碼層面探索前端性能,主要分為以下 4 個小節。使用 CSS 替代 JS、深度剖析 JS、前端演算法、電腦底層 ...

聊聊 QianKun JS 沙箱的那些事

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:空山 什麼是沙箱 沙箱即 SandBox,它是一種安全機制,用於嚴格控制訪問資源。通過在程式中創建一個獨立的運行環境,把一些來源不可信、具有破壞力或者又是無法 ...

vue3+ant design的form數組表單,如何校驗

首先,先說說我要實現的內容:如下圖,點“新增”會添加一個灰框內容,form表單是一個數組,一個灰框為一個對象,各對象保存時各自校驗自己表單里的內容,互不幹擾! 上頁面代碼(看部分代碼就懂了): 1 <div v-for="(item,index) in formList" :key="index"> ...

vue~封裝一個文本框標簽組件

用到的技術 父組件向子組件的傳值 類型檢查和預設值:您可以為props指定類型檢查和預設值。這可以確保傳遞給子組件的數據符合期望的類型,以及在沒有傳遞數據時具有合理的預設值。例如: props: { message: { type: String, default: 'Default Message ...

vue~封裝一個文本框添加與刪除的組件

標簽組件的效果如下 組件作用 這是一個div,包含了兩個文本框,後面是添加和刪除按鈕 添加按鈕複製出新的div,除了文本框沒有內容,其它都上面一樣 刪除按鈕將當前行div刪除 組件實現 <template> <div> <template v-for="(item,index) in tags"> ...

vue3 + mark.js | 實現文字標註功能

頁面效果 具體實現 新增 1、監聽滑鼠抬起事件,通過window.getSelection()方法獲取滑鼠用戶選擇的文本範圍或游標的當前位置。 2、通過 選中的文字長度是否大於0或window.getSelection().isCollapsed (返回一個布爾值用於描述選區的起始點和終止點是否位於 ...

記錄--前端實現併發請求限制

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 前兩天我的新同事告訴我一個困擾著他的問題,就是低代碼平臺中存在很多模塊,這些模塊的渲染是由模塊自身處理的,簡言之就是組件請求了自己的數據,一個兩個模塊還好,要是一次請求了幾十個模塊,就會出現請求阻塞的問題,而且模塊的請求都特別大。 ...

pbjs 無法編碼 bytes 類型數據問題的解決方案

一段包含 bytes 類型的 protobuf 二進位數據,經過 pbjs 解碼生成的 json 文件,再傳遞給 pbjs 編碼後生成的二進位數據和原始數據差異巨大,經過一番探究,發現居然是 pbjs 的一個 bug,快來看看你是否踩過這個坑吧~ ...

vue+el 實現 階梯效果

[簡介]: 關鍵代碼; <el-row class='midPart' style=''>{{ menu.name }}</el-row>.midPart { float: left; width: 4%; padding: 7px 7px; background: #444;} [內容]: <te ...

改變NPM安裝依賴位置,節省C盤空間

npm 依賴安裝 眾所周知,npm 全局安裝依賴位置預設是c盤,c盤一般是系統安裝盤,裝太多東西容易造成系統運行緩慢,因此想將依賴包安在指定位置 node.js的安裝 nodejs的安裝可以直接到菜鳥教程查看: http://www.runoob.com/nodejs/nodejs-install- ...

全棧工程師必須要掌握的前端JavaScript技能

作為一名全棧工程師,在日常的工作中,可能更側重於後端開發,如:C#,Java,SQL ,Python等,對前端的知識則不太精通。在一些比較完善的公司或者項目中,一般會搭配前端工程師,UI工程師等,來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師,在一些小型項目或者初創公... ...

Remix 2.0 正式發佈,現代化全棧Web框架!

9 月 16 日,全棧 Web 框架 Remix 正式發佈了 2.0 版本,Remix 團隊在發佈 1.0 版本後經過近 2 年的持續努力,發佈了 19 個次要版本、100 多個補丁版本,並解決了數千個問題和拉取請求,終於迎來了第二個主要版本! Remix 具有以下特性: 追求速度、用戶體驗(UX) ...

前端高頻面試題彙總正題+(附答案解析)

在現代的Web開發中,優化用戶體驗至關重要。一種常見的方法是在頁面載入時預載入圖片,並展示一個載入進度條,讓用戶瞭解載入進度。在本文中,我們將深入探討如何實現這兩個關鍵功能,以提高網站性能和用戶滿意度 ...

antd/fusion表格增加圈選複製功能

背景介紹 我們存在著大量在PC頁面通過表格看數據業務場景,表格又分為兩種,一種是 antd / fusion 這種基於 dom 元素的表格,另一種是通過 canvas 繪製的類似 excel 的表格。 基於 dom 的表格功能豐富較為美觀,能實現多表頭、合併單元格和各種自定義渲染(如表格中渲染圖形 ...

2023 年前端 UI 組件庫概述,百花齊放!

UI組件庫提供了各種常見的 UI 元素,比如按鈕、輸入框、菜單等,只需要調用相應的組件並按照需求進行配置,就能夠快速構建出一個功能完善的 UI。 雖然市面上有許多不同的UI組件庫可供選擇,但在2023年底也並沒有出現一兩個明確的解決方案能夠適用於所有情況。因為不同的前端框架(例如React、Angu ...

竟然可以在一個項目中混用 Vue 和 React?

React和Vue是前端開發中的兩大熱門框架,各自都有著強大的功能和豐富的生態系統。然而,你有沒有想過,在一個項目中同時使用React和Vue?是的,你沒有聽錯,可以在同一個項目中混用這兩個框架!本文就來分享 3 個用於混合使用 React 和 Vue 的工具! Veaury Veaury 是一個基 ...

Vue-進階:路由及elementUI組合開發

Vue-router路由 什麼是vue-router? 服務端路由指的是伺服器根據用戶訪問的 URL 路徑返回不同的響應結果。當我們在一個傳統的服務端渲染的 web 應用中點擊一個鏈接時,瀏覽器會從服務端獲得全新的 HTML,然後重新載入整個頁面。 然而,在單頁面應用中,客戶端的 JavaScrip ...

Node練習 | fs module 使用

搭建後臺管理系統模板 2.1項目初始化 今天來帶大家從0開始搭建一個vue3版本的後臺管理系統。一個項目要有統一的規範,需要使用eslint+stylelint+prettier來對我們的代碼質量做檢測和修複,需要使用husky來做commit攔截,需要使用commitlint來統一提交規範,需要使 ...

一周排行
  • 前言 JSON Web Token(JWT)是一個非常輕巧的規範。這個規範允許我們使用 JWT 在用戶和伺服器之間傳遞安全可靠的信息。一個 JWT 實際上就是一個字元串,它由三部分組成,頭部、載荷與簽名。前兩部分需要經過 Base64 編碼,後一部分通過前兩部分 Base64 編碼後再加密而成。針對 ...
  • 一:背景 1. 講故事 今天本來想寫一篇 非托管泄露 的生產事故分析,但想著昨天就上了一篇非托管文章,連著寫也沒什麼意思,換個口味吧,剛好前些天有位朋友也找到我,說他們的拍攝監控軟體卡死了,讓我幫忙分析下為什麼會卡死,聽到這種軟體,讓我不禁想起了前些天 在程式員桌子上安裝監控 的新聞,參考如下: 我 ...
  • 文章目錄 介紹 ABP的依賴註入系統是基於Microsoft的依賴註入擴展庫(Microsoft.Extensions.DependencyInjection nuget包)開發的。所以我們採用dotnet自帶的註入方式也是支持的。 由於ABP是一個模塊化框架,因此每個模塊都定義它自己的服務併在它自 ...
  • 前言 外觀模式,英文名稱是:Facade Pattern。我們先從名字上來理解一下“外觀模式”。我看到了“外觀”這個詞語,就想到了“外表”這個詞語,兩者有著很相近的意思。就拿談戀愛來說,“外表”很重要,如果第一眼看著很舒服、有眼緣,那就有交往下去的可能。如果長的“三寸釘、枯樹皮”,估計就夠嗆了。在這 ...
  • 模擬.NET實際應用場景,綜合應用三個主要知識點:一是使用dnSpy反編譯第三庫及調試,二是使用Lib.Harmony庫實現第三庫攔截、偽造,三是實現同一個庫支持多版本同時引用。 ...
  • 通過strimzi部署的kafka集群,如何部署prometheus+grafana去監控呢?官方文檔信息量太大,即便照著做也可能失敗,這裡有一份詳細的保姆級操作指南,助您成功部署監控服務 ...
  • 在工具類中封裝getBean,使用哪個介面來實現 實事上,在工具類中,實現BeanFactoryPostProcessor和ApplicationContextAware介面後,使用它們構造方法里的對象ConfigurableListableBeanFactory和ApplicationContex ...
  • 1章:系統基礎信息模塊詳解 通過第三方模塊獲取伺服器的基本性能、塊設備、網卡介面、網路地址庫等信息。 1.1 系統性能模塊psutil:獲取系統性能信息、記憶體信息、磁碟信息、網路信息、用戶信息等。 1.2 IP地址處理模塊IPy: 處理IP地址,網段等。 1.3 DNS處理模塊dnspython: ...
  • EasyExcel動態表頭導出(支持多級表頭) 在很多業務場景中,都會應用到動態表頭的導出,也會涉及到多級表頭的導出,如下圖所示 通過EasyExcel,我們可以快速實現這一需求,具體代碼如下 DynamicHeader import java.util.List; /** *@Author: <a ...
  • 基於java線上婚紗定製系統設計與實現,可適用於線上婚紗攝影預定系統,基於web的婚紗影樓管理系統設計,基於web的婚紗影樓管理系統設計,婚紗攝影網系統,婚紗攝影網站系統,婚紗攝影網站系統,婚紗系統,婚紗管理系統等等; ...