tag 前端優化

標籤
貢獻29
71
05:54 PM · Oct 25 ,2025

@前端優化 / 博客 RSS 訂閱

文叔叔叔叔 - DIY 一個前端性能監控系統

Github鏈接:Nemo Metrics 輕量性能採集系統 Nemo近一年以來做了不少h5活動,,積累了不少優化開發流程經驗以及優化用户加載與性能經驗。 但是每次覆盤轉化率都不高,我們不希望任何用户流失。 用户為什麼會離開,是不是頁面報錯了? 是不是某些地區解析DNS,服務器資源/CDN資源加載慢? 大部分用户打開我們的網頁都在哪些時間區間(哪些國家/地區,哪些版本,哪些手機的用户打開用

性能監控 , 性能分析 , 前端優化 , 前端性能 , typescript

收藏 評論

求實亭下 - 網站性能優化--性能指標及採集

引言 在平時工作中可能會遇到用户反饋:“哥們,你們的網站感覺很卡啊!”。這種來自用户的吐槽對前端同學可以説是直擊心靈的衝擊。此時就應該好好想想如何讓用户不再出現這樣的吐槽呢。首先就是指標化的瞭解自己的網站。 常用的衡量指標 可以結合兩張圖 第一張圖是瀏覽器加載整個頁面的時間線,第二張圖則是這個是Google力推的指標,主要從4個視覺反饋階段來描述頁面性能。 總結一下常用的性能指標

前端優化 , 前端性能

收藏 評論

海闊天空_mac - 基於小程序請求接口 wx.request 封裝的類 axios 請求

Introduction wx.request 的配置、axios 的調用方式 源碼戳我 feature 支持 wx.request 所有配置項 支持 axios 調用方式 支持 自定義 baseUrl 支持 自定義響應狀態碼對應 resolve 或 reject 狀態 支持 對響應(resolve/reject)分別做統一的額外處理 支持 轉換請求數據和響應數據 支持 請

小程序 , 前端工程師 , 前端優化 , 前端 , Javascript

收藏 評論

雲魚 - JavaScript之函數柯理化

引語 最近在社區閲讀技術博客的時候偶然間看到了函數柯里化幾個字,還有要求手寫js函數柯里化,心想是柯里化是什麼高級的東西?沒聽説過啊? 就帶着問題出發,專門去學習了一下,做了一些整理。 什麼是函數柯里化? 什麼是函數柯里化?先看看維基百科如何解釋: 在計算機科學中,柯里化(英語:Currying),又譯為卡瑞化或加里化,是把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數

前端優化 , currying , Javascript

收藏 評論

solvep - 前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged

整潔的代碼如同優美的散文。—— Grady Booch 前言: 在繁雜的業務迭代時,接手其他項目,如果沒有一個統一的代碼風格,閲讀起來是相當困難的,畢竟團隊裏的每個人習慣不一樣。團隊協作,意味着需要犧牲一些個性,減少一些沒必要的爭吵。 1.Prettier是什麼? 顧名思義 prettier(更漂亮的),讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format

前端工程化 , 前端優化 , 前端 , Git

收藏 評論

吉古力 - 微前端是什麼,可以帶來什麼收益

轉自掘金原文《微前端究竟是什麼,可以帶來什麼收益》 本文將講解微前端誕生的背景,詳細解説微前端概念的緣由以及其深入理解,讀完本文,相信你對微前端有一個比較全面的認知,明白它可以解決您團隊以及整個企業什麼問題,帶來怎麼樣的收益。 一.背景 現在很多企業,基本在物理上進行了應用代碼隔離,實行單個應用單個庫,閉環部署更新測試環境、預發佈環境和正式環境。於是,我們的探討的是,基於不同應用不同庫並獨立部署的

前端框架 , 前端優化 , 前端設計 , 微前端 , Javascript

收藏 評論

彈鐵蛋同學 - [譯] 如何使用 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

react , react-hooks , 前端優化 , 前端 , Javascript

收藏 評論

familyAboveAll - 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

vue.js , 前端優化

收藏 評論

jump__jump - 聊聊不可變數據結構

三年前,我接觸了 Immutable 庫,體會到了不可變數據結構的利好。 Immutable 庫具有兩個最大的優勢: 不可修改以及結構共享。 不可修改(容易回溯,易於觀察。減少錯誤的發生) let obj = { a: 1 }; handleChange(obj); // 由於上面有 handleChange,無法確認 obj 此時的狀態 console.log(obj) 結構共享(

性能優化 , 開發工具 , 前端優化 , immutable-js , Javascript

收藏 評論

劉悦的技術博客 - 石火電光追風逐日|前端優化之次時代圖片壓縮格式WebP的項目級躬身實踐(Python3 PIL+Nginx)

原文轉載自「劉悦的技術博客」https://v3u.cn/a_id_190 我們知道,在前端界有一個共識:速度就是生命,帶寬就是金錢。怎樣將頁面加載速度有效提升是無數前端工程師無時不刻在思考的課題,目前的網絡環境中,除了視頻,圖片仍舊是佔用流量較大的一部分,對於app端尤其如此,因此,如何在保證圖片視覺不失真的前提下縮小圖片體積,對於節省帶寬和電池電量都十分重要,因此Google在十年前提出了一種

python3 , 圖片壓縮 , webp , 前端優化 , Nginx

收藏 評論

EthanProcess - 我是如何在 Vue 項目中做代碼分割的

通常為了開發效率,我們會使用 vue-cli 創建項目,這樣創建的項目默認情況下編譯是會對代碼進行分割的。但是如果是自行配置的 webpack 環境的話,還是很有必要熟悉代碼分割的相關知識的。 為什麼要做代碼分割 在配置 webpack 的過程中,很多時候我們的 webpack 入口只寫了一個 entry: '${sourceDir}/index.js’,默認情況下只會生成一個 bundle 文件

vue.js , 前端優化 , webpack , 前端

收藏 評論