閾值報警功能
所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。 01 - 什麼是閾值報警功能 在我們前端監控系統中，雖然我們收集了用户實時訪問應用數據信息，並提供可視化界面方便用户查詢，但是作為一款監控系統，卻少了靈魂的東西，那就是自動報警功能，因為我們並不喜歡，也沒人願意時時刻刻查看監控系統。因此，我們需要自動報警。 那自動報警怎麼做呢？自動報警意味着我們事先定義好一系列規
昵称 前端開源監控作者
@前端優化
贡献者25
粉丝0
贡献者
@前端優化
动态 列表
不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規
不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規 不得不説現在依然適用於大部分的網站 當年雅虎推薦了一套優化網站加載速度的34條法則（包括Yslow規則22條），以下是詳細説明。 1. Minimize HTTP Requests 減少 HTTP 請求 圖片、css、script、flash 等等這些都會增加 http 請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能
昵称 smalike
夢迴前端-數據類型篇
關於夢迴前端 每天一個重要的知識點，以問答的形式進行反推，利用碎片時間來完成自我提升 Day1 數據類型篇 説在前面 JS是典型的弱類型(動態)語言, 意味着你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定, 也意味着你可以使用同一個變量保存不同類型的數據 請簡述Js中有哪些數據類型? Js中每一個值都屬於某一種數據類型, 根據最新的語言標準，一共有8種類型 Boolean N
昵称 刀哥
DIY 一個前端性能監控系統
Github鏈接:Nemo Metrics 輕量性能採集系統 Nemo近一年以來做了不少h5活動，，積累了不少優化開發流程經驗以及優化用户加載與性能經驗。 但是每次覆盤轉化率都不高,我們不希望任何用户流失。 用户為什麼會離開，是不是頁面報錯了？ 是不是某些地區解析DNS，服務器資源/CDN資源加載慢？ 大部分用户打開我們的網頁都在哪些時間區間(哪些國家/地區，哪些版本，哪些手機的用户打開用
昵称 文叔叔叔叔
網站性能優化--性能指標及採集
引言 在平時工作中可能會遇到用户反饋：“哥們，你們的網站感覺很卡啊！”。這種來自用户的吐槽對前端同學可以説是直擊心靈的衝擊。此時就應該好好想想如何讓用户不再出現這樣的吐槽呢。首先就是指標化的瞭解自己的網站。 常用的衡量指標 可以結合兩張圖 第一張圖是瀏覽器加載整個頁面的時間線，第二張圖則是這個是Google力推的指標，主要從4個視覺反饋階段來描述頁面性能。 總結一下常用的性能指標
昵称 求實亭下
利用 XState(有限狀態機) 編寫易於變更的代碼
目前來説，無論是 to c 業務,還是 to b 業務，對於前端開發者的要求越來越高，各種絢麗的視覺效果，複雜的業務邏輯層出不窮。針對於業務邏輯而言，貫穿後端業務和前端交互都有一個關鍵點 —— 狀態轉換。 當然了，這種代碼實現本身並不複雜，真正的難點在於如何快速的進行代碼的修改。 在實際開發項目的過程中，ETC 原則，即 Easier To Change，易於變更是非常重要的。為什麼解耦很好？ 為
昵称 jump__jump
前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged
整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format
昵称 solvep
[譯] 如何使用 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
昵称 彈鐵蛋同學
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
昵称 familyAboveAll
石火電光追風逐日|前端優化之次時代圖片壓縮格式WebP的項目級躬身實踐(Python3 PIL+Nginx)
原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_190 我們知道，在前端界有一個共識：速度就是生命，帶寬就是金錢。怎樣將頁面加載速度有效提升是無數前端工程師無時不刻在思考的課題，目前的網絡環境中，除了視頻，圖片仍舊是佔用流量較大的一部分，對於app端尤其如此，因此，如何在保證圖片視覺不失真的前提下縮小圖片體積，對於節省帶寬和電池電量都十分重要，因此Google在十年前提出了一種
昵称 劉悦的技術博客
前端進階（1）Web前端性能優化
前端進階（1）Web前端性能優化 Web前端性能優化, 不僅能夠改善站點的用户體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。 1. 服務器優化 1.1. 使用內容分發網絡（CDN） 把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。 1.2. 服務器使用http2.0協議 Htt
昵称 Jack_N
WebSocket 對象簡介
WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。 何為 WebSocket 對象？ WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。 WebSocket 對
昵称 編程三昧
前端性能優化總結
本文將記錄我所掌握的全部整套前端性能優化模型 http協議層面 http協議緩存（應用緩存，瀏覽器默認緩存，自定義瀏覽器緩存，代理服務器緩存，服務器緩存） gzip壓縮 chrome併發6個請求 使用loading優化請求中的體驗 預加載 PreloadJS （瀏覽器緩存） 工程化 圖片base64 代碼切割 按需加載 BundleAnalyzerPlugin 靜態分離，第
昵称 張儀ranck
打造一套客户端功能最全的 APM 監控系統
APM 是 Application Performance Monitoring 的縮寫，監視和管理軟件應用程序的性能和可用性。應用性能管理對一個應用的持續穩定運行至關重要。所以這篇文章就從一個 iOS App 的性能管理的緯度談談如何精確監控以及數據如何上報等技術點 App 的性能問題是影響用户體驗的重要因素之一。性能問題主要包含：Crash、網絡請求錯誤或者超時、UI 響應速度慢、主線程卡頓、
昵称 杭城小劉
從頁面加載到數據請求，前端頁面性能優化實踐分享
背景 做過前端開發都知道前端的工作內容是很多的，對於HTML、CSS、Javascript、Image、Flash等各種內容的使用。為了更好提升應用的性能，我們需要對各種資源內容進行不同方面的優化。 對用户而言，優化可以讓應用的響應速度加快，加載更加迅速，可以帶來更好的使用體驗。 對於服務商而言，前端優化能夠減少頁面請求數量，寬帶所佔帶寬，有效的節省資源。 前端優化的內容很多，按照粒度等級劃
昵称 葡萄城技術團隊
【客户端建設及調優實踐】
“音視頻+無限可能” 是一扇LiveVideoStackCon面向新興領域開啓的大門，在移動互聯網紅利消失、內卷的局面下，智能車、製造、金融、醫療、出海等新興領域還在迫切追尋新技術帶來的增值。在“音視頻+無限可能” ，提前看到新機會、新案例、新實踐。 4月15日-16日，LiveVideoStackCon 2022 音視頻技術大會 上海站，和你一同開啓通向未來的大門。 客户端建設及調優實踐 軟/硬
昵称 LiveVideoStack
【包真】我的第一次webpack優化，首屏渲染從9s到1s
大家好，我是貓小白，本文基於vue2，全文閲讀大約需要3分鐘。 談到webpack優化大部分人可能都看膩了，無非就那幾招嘛，我之前也是看過許多類似的文章，但都沒有自己真正上手過，下面是我用公司的項目真實操練下來的，首屏加載速度提升很大（刷刷的），希望能幫到你。 廢話不多説，先看看對比成果！ 類型 優化前 優化後 js文件大小
昵称 華仔
聊聊併發控制鎖
對於企業應用來説，完全不涉及到併發的問題，基本是不可能的。因為對於一個應用中很多的事情都是同時進行的。併發可能發生在數據獲取，服務調用乃至於用户交互中。併發問題有兩個重要的解決方案，一個是隔離，另一個是不變性。 併發問題會發生在多個執行單元同時訪問同一資源的時候，此時，一個好的方法就是分好“蛋糕”，讓每一個執行單元都能訪問到各自的資源。好的併發設計就是：找到創建好隔離區的辦法，然後通過分析工作流讓
昵称 jump__jump
try/catch/finally：“前端的好厚米，我覺得你們不夠了解我呀~”
這篇文章想跟大家一起重新温習一下關於使用 try...catch 進行異常捕獲的一些知識點。為了提升大家的閲讀興趣，我們先來做三個小練習題，如果你都做對的話，那麼表明你這一部分的知識掌握的很熟練，可以不用讀這篇文章啦~ 如果做錯了某道題的話，説明我們還有一些知識點需要再次鞏固一下，話不多説，我們先來看看這三道題： function doTask () { try { con
昵称 dreamapplehappy
vue性能優化之異步組件和路由懶加載
今天來聊聊vue2的性能小優化之異步組件跟路由懶加載 一、組件優化 目前代碼塊中包含了兩個子組件，它們在符合條件的情況下才會渲染，採用了最基礎的方式進行導入。 頁面刷新後會加載五個文件，在點擊顯示兩個組件時，只會新增一個文件，加載的是element的字體文件，也就是説在頁面初始化時就已經加載了組件文件。 現在我們把它改寫成異步組件，再來做個對比： 當我們點擊顯示組件時，控制枱會新增一個請求
昵称 Winn
什麼是SSL證書，又該如何申請免費SSL證書
如今越來越多的網站在主頁上使用 HTTPS加密連接，以確保您的網站安全並防止任何不想要的攻擊。您可能會問：“為什麼要安裝 HTTPS證書？”讓我們看看如何使用免費 SSL證書來滿足您的需求，這篇文章將告訴您如何免費申請和安裝 SSL證書，以保護您的網站免受各種威脅。 一、什麼是 SSL證書？ SSL證書是由受信任的 CA機構簽發的數字證書，它允許您通過 HTTPS連接與服務器通信。該
昵称 靦腆的充值卡
前端鏟💩日記 #2：易被忽略的「domain」
若看了上篇筆記，眼尖的鐵汁們應該發現，最終的重構成果並未出現目錄結構調整方案提到的 domain 文件夾。 這是因為領域建模是個相對較難且需要長期去做的事情，所以我們不急，慢慢來，要用心地思考與處理——從本篇筆記開始就會涉及到相關內容啦！ 在進行實際的鏟💩演練之前，這篇筆記先來講解下 domain 文件夾的重要性，請各位鐵汁搬來小板凳坐坐好，用小拇指清理下👂🏼聽我説—— 在我所設計的「模塊化
昵称 歐雷
前端鏟💩日記 #3：重構「個人主頁」
鐵汁們聽好了哈——從本篇筆記開始，將進入實際的鏟💩演練啦！ 這首先要被剷除的💩，是分佈在我接手官網項目後最先接觸的用户個人主頁裏。 在這系統中，用户分個人與項目方兩種，它們的個人主頁雖看起來一樣，但視覺細節和數據結構等還是有些差異的，佈局結構大致如圖所示： 個人主頁原先代碼中，其他部分還算有點封裝意識，但最重要的課程、活動等列表部分的代碼看起來就是初級水平，將它們全部糅合在一個 React
昵称 歐雷
基於小程序請求接口 wx.request 封裝的類 axios 請求
Introduction wx.request 的配置、axios 的調用方式 源碼戳我 feature 支持 wx.request 所有配置項 支持 axios 調用方式 支持 自定義 baseUrl 支持 自定義響應狀態碼對應 resolve 或 reject 狀態 支持 對響應（resolve/reject）分別做統一的額外處理 支持 轉換請求數據和響應數據 支持 請
昵称 海闊天空_mac