時至5G時代，是否還有必要談：前端性能優化？
之前，何同學的視頻在網上活了一陣子。引發了我們思考：5G將會給我們帶來什麼。同時也回顧了4G乃至3G時代已經給我們帶來了哪些新的變革。最近，一個問題總是時不時的冒出我的腦海：前端性能優化時候還有必要？ 回顧前端性能優化 然後我找到了 雅虎軍規 的 35 條 儘量減少 HTTP 請求個數——須權衡 使用 CDN（內容分發網絡） 為文件頭指定 Expires 或 Cache-Con
Nickname 源泉
@前端性能
Contributes17
Followers0
Contributes
@前端性能
Stories List
前端監控(出錯場景還原)
所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。 最近收到一個用户提的需求場景，當JavaScript發生異常錯誤時，如果我們能記錄出錯前鼠標點擊、頁面跳轉、網絡請求，控制枱打印等信息，這樣我們便能更快速的帶您重返"失事"現場。我覺得這個想法挺好的，那就加入我們的前端監控試試呢？我實現了一套目前的解決方案：一鍵還原出錯代碼和出錯場景還原。如果你們有更好的解決方案，一定要聯繫我
Nickname 前端開源監控作者
閾值報警功能
所謂web,即使你我素未謀面，便知志趣相投；足不出户，亦知世界之大。 01 - 什麼是閾值報警功能 在我們前端監控系統中，雖然我們收集了用户實時訪問應用數據信息，並提供可視化界面方便用户查詢，但是作為一款監控系統，卻少了靈魂的東西，那就是自動報警功能，因為我們並不喜歡，也沒人願意時時刻刻查看監控系統。因此，我們需要自動報警。 那自動報警怎麼做呢？自動報警意味着我們事先定義好一系列規
Nickname 前端開源監控作者
UC研發效能產品內測邀請——雲真機、自動化測試、WEB前端監控
十年磨一劍 過去十年移動互聯網的高速發展，跟日常生活息息相關的如購物、娛樂、辦公等紛紛在移動化。移動端的產品交付，怎樣才能應對激烈的競爭呢？如何在保證質量，如何提升研試效率？如何在產品上線後及時獲悉異常，及時修復呢？ UC研發效能在多年摸索建設中，沉澱出一套完善的交付體系，其中尤為關鍵的質效保障環節，是靠着兩款產品在保障的——巖鼠雲設備平台、嶽鷹應用全景監控平台。 從17年開始這兩款產品已經走出U
Nickname Riacya12
10分鐘徹底搞懂前端頁面性能監控
本文首發於知乎《10分鐘徹底搞懂前端頁面性能監控》，搬運轉載請註明出處，否則追究版權責任。 前言 前端頁面性能是一個非常核心的用户體驗指標。本文介紹阿里UC 嶽鷹全景監控平台 如何設計一個通用、低侵入性、自動上報的頁面性能監控方案。主要採用的是Navigation Timing API以及sendBeacon等方法。 為什麼要監控頁面性能？ 一個頁面性能差的話會大大影響用户體驗。用户打開頁面等待的
Nickname Marks
不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規
不可不知的 WEB 前端網站優化—— 雅虎 34 條軍規 不得不説現在依然適用於大部分的網站 當年雅虎推薦了一套優化網站加載速度的34條法則（包括Yslow規則22條），以下是詳細説明。 1. Minimize HTTP Requests 減少 HTTP 請求 圖片、css、script、flash 等等這些都會增加 http 請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能
Nickname smalike
前端初級新人，如何撕去菜鳥標籤
原文地址：https://github.com/ruizhengyu... 作為前端新人，我們常以菜鳥自居，主要是專業程度不高，還有就是自謙。其實，作為菜鳥的我們也想撕掉這類標籤，我們也努力，可還是學不好前端，是真的不適合做這行還是方法不對，沒人告訴我們？如果你覺得自己還處在菜鳥階段的迷茫區，那可以看看本篇文章，希望看完之後你能得到想要的。如果你要闡述你的想法，請在評論區留下你的文字。
Nickname 前端早8點
夢迴前端-數據類型篇
關於夢迴前端 每天一個重要的知識點，以問答的形式進行反推，利用碎片時間來完成自我提升 Day1 數據類型篇 説在前面 JS是典型的弱類型(動態)語言, 意味着你不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定, 也意味着你可以使用同一個變量保存不同類型的數據 請簡述Js中有哪些數據類型? Js中每一個值都屬於某一種數據類型, 根據最新的語言標準，一共有8種類型 Boolean N
Nickname 刀哥
DIY 一個前端性能監控系統
Github鏈接:Nemo Metrics 輕量性能採集系統 Nemo近一年以來做了不少h5活動，，積累了不少優化開發流程經驗以及優化用户加載與性能經驗。 但是每次覆盤轉化率都不高,我們不希望任何用户流失。 用户為什麼會離開，是不是頁面報錯了？ 是不是某些地區解析DNS，服務器資源/CDN資源加載慢？ 大部分用户打開我們的網頁都在哪些時間區間(哪些國家/地區，哪些版本，哪些手機的用户打開用
Nickname 文叔叔叔叔
網站性能優化--性能指標及採集
引言 在平時工作中可能會遇到用户反饋：“哥們，你們的網站感覺很卡啊！”。這種來自用户的吐槽對前端同學可以説是直擊心靈的衝擊。此時就應該好好想想如何讓用户不再出現這樣的吐槽呢。首先就是指標化的瞭解自己的網站。 常用的衡量指標 可以結合兩張圖 第一張圖是瀏覽器加載整個頁面的時間線，第二張圖則是這個是Google力推的指標，主要從4個視覺反饋階段來描述頁面性能。 總結一下常用的性能指標
Nickname 求實亭下
「交流分享」從入門到放棄之計算機網絡
前言 計算機網絡對於程序員的重要性,想必不用多提～最近在梳理這方面的知識,由點成面,需要一個過程。 梳理了幾個點,借鑑了很多大佬的文章。(站在巨人的肩膀上!) 發出來大家一起學習進步一哈～之後會陸續梳理更新。 啊~枯燥的計算機網絡！ 我用 nodejs 對下面的其中幾個點做了簡單的實踐,進一步驗證原理,加深印象和理解。 HTTP/2 帶來了什麼 HTTPS 連接到底發生了什麼 什麼是中間人攻擊
Nickname null仔
前端標準規範-v1.0
總體原則：極簡、極快、解耦 主要適用範圍：vue 單頁項目+ 文件組織規範 文件結構 原則：文件少、層級淺、資源集中、相對獨立互不影響 基本結構： . |_ node_modules |_ dist |_ src |_ assets // 公共資源 |_ img // 全局圖片 |- favicon.png |- comm
Nickname 前端一鍋煮
JSON.parse 比 Object 字面量語法更快
寫在前面 原文地址： https://www.bram.us/2019/11/25/faster-javascript-apps-with-json-parse/ 原文中包含油管視頻，有梯子並且英文好的可以直接點開鏈接觀看。 針對太長不看的讀者 因為 JSON 語法比 Javascript 的語法更簡單，因此解析 JSON 比解析 Javascript 更高效。當一個 web app 需要加載在首
Nickname littlelyon
前端通用性能優化之cdn
通過cdn的方式可以快速訪問到靜態資源 在當前的前端框架下，結合webpack使用cdn更方便，分兩部進行 1、把dist下的圖片，js，css上傳到cdn 2、在webpack裏配置output.publicPath: 'http://cdn.test.com'，css的輸出在css-loader裏配置，同樣圖片的輸出在url-loader裏配置。 打包後的index.html
Nickname 楊龍飛
瀏覽器事件循環
完整高頻題庫倉庫地址：https://github.com/hzfe/awesome-interview 完整高頻題庫閲讀地址：https://febook.hzfe.org/ 相關問題 什麼是瀏覽器事件循環 瀏覽器為什麼需要事件循環 Node.js 中的事件循環 回答關鍵點 任務隊列 異步 非阻塞 瀏覽器需要事件循環來協調事件、用户操作、腳本執行、渲染、網絡請求等。通過事件循環，瀏覽器
Nickname HZFEStudio
聊聊前端性能指標那些事兒
作者：京東科技 郝梁 前言：作為 C 端前端研發，除了攻克業務難點以外，也要有更深層的自我目標，那就是性能優化。這事兒説大不大，説小也不小，但難度絕對不一般，所涉及的範圍優化點深入工程每個細胞。做好前端性能優化絕非簡單之事！文章主要內容介紹前端性能考核指標及優化方案。 一、前端性能指標有哪些？ 根據 chrome Lighthouse 最新規則，前端性能指標考量主要有 FCP（First Cont
Nickname 京東雲開發者
帶你揭開神秘的javascript AST面紗之AST 基礎與功能
作者：京東科技 周明亮 AST 基礎與功能 在前端裏面有一個很重要的概念，也是最原子化的內容，就是 AST ，幾乎所有的框架，都是基於 AST 進行改造運行，比如：React / Vue /Taro 等等。 多端的運行使用，都離不開 AST 這個概念。 在大家理解相關原理和背景後，我們可以通過手寫簡單的編譯器，簡單實現一個 Javascript 的代碼編譯器，編譯後在瀏覽器端正常運行。 創建數字小
Nickname 京東雲開發者
卡口服務 —— 基於前端巡檢系統的拓展實踐｜得物技術
1 背景 體驗是得物的業務關鍵詞之一，對於前端開發而言，提高用户體驗更是重要工作內容之一。 得物前端平台目前有巡檢系統、監控平台等多種手段保障線上頁面穩定運行，但是仍有一部分問題處於“監控死角”，而且巡檢、監控都屬於後置告警手段，為了確保頁面上線前就能得到一定的用户體驗保障，結合公司的戰略目標，我們決定開發一個H5頁面檢測服務，用來前置檢測即將上線的頁面，提前暴露該頁面可能存在的問題反饋給對應的開
Nickname 得物技術
React請求機制優化思路 | 京東雲技術團隊
説起數據加載的機制，有一個繞不開的話題就是前端性能，很多電商門户的首頁其實都會做一些垂直的定製優化，比如讓請求在頁面最早加載，或者在前一個頁面就進行預加載等等。隨着react18的發佈，請求機制這一塊也是被不斷談起，並且在後續其實也給出了明確的方向。 假如我們頁面中有三個組件C1、C2、C3依次嵌套，每個組件中有對應的請求F1、F2、F3，通常大多數人會使用useeffect和state變量來實現
Nickname 京東雲開發者
用 Apifox 的 Mock 功能模擬常見業務數據的最佳方法
Apifox 擁有強大的Mock 功能，兼容 Mock.js 語法的同時還提供 Nunjucks 和自定義腳本支持，能夠滿足不同場景需求。 今天給大家分享一些常見業務場景的 Mock 使用技巧，當然，實現的方法不唯一。在開始之前，你需要將 Apifox 的當前環境切換為「本地 Mock」或「雲端 Mock」環境。 模擬簡單數據 要模擬一些簡單的數據，只需在 「返回響應」 裏定義字段，系統便會自動使
Nickname Apifox
極致性能優化：前端SSR渲染利器Qwik.js | 京東雲技術團隊
引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互，而前端框架的選擇對於實現這些目標至關重要。然而，傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下，我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架，更是一種前端性能的終極解決方案。它不僅提供了卓越的性能，還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q
Nickname 京東雲開發者