原创 前端性能精進之優化方法論(二)——分析

  在上一節中曾提到過兩種性能監控:SYN 和 RUM,那麼對應的也有兩種分析:數據分析和實驗室分析。   數據分析會通過採集上來的性能信息來剖析和定位可能存在的各種問題。   實驗室分析會通過某個線上或本地的測試工具對頁面進行單點測試,得

原创 前端性能精進之優化方法論(一)——測量

  性能優化的重要性不言而喻,Google 的研究表明,當網站達到核心 Web 指標(Core Web Vitals)閾值時,用戶放棄加載網頁的可能性會降低 24%。   如何科學地定位到網頁的性能瓶頸,就需要找到一個合理的方式來測量和監控

原创 我好像找到了點學習英文的技巧

  在開頭,我得先聲明一句,學習英語沒有捷徑,但是有技巧。   在之前的幾年,我陸續的也發過 2 篇英語學習的文章《程序員英語高效學習法》和《每次閱讀外文技術資料都頭疼,終於知道原因了》。   還特地蒐集了上千個計算機相關的英語單詞,但是很

原创 shin-monitor源碼分析

  在經過兩年多的線上沉澱後,將監控代碼重新用 TypeScript 編寫,刪除冗餘邏輯,正式開源。   根據 shin-monitor 的目錄結構可知,源碼集中在 src 目錄中。關於監控系統的迭代過程,可以參考專欄。 一、入口   入口

原创 帶團隊後的日常思考(十一)

一、日常問題 1)需求的討價還價   做最大的努力,維護自己團隊成員的開發利益。   產品和運營會根據他們的業務來提出需求,從他們的角度來說,這些需求無可厚非。   不過,他們提出的需求,在實現時有些改動會比較複雜。那麼就需要與他們協商。

原创 【譯】我們對 2023 年核心頁面指標的建議

  原文地址:https://web.dev/top-cwv-2023,在正文開始前,推薦一款前端監控腳本:shin-monitor,它能監控前端的錯誤、通信、打印等行爲,以及計算各類性能參數,包括 FMP、LCP、FP 等。   我們 G

原创 【譯】15 個有用的 JavaScript 技巧

原文地址:https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd 1)數字分隔符 爲了提高數字的可讀性,可以使用下劃線作爲分隔符。 const l

原创 Node.js躬行記(26)——接口攔截和頁面回放實驗

  最近在研究 Web自動化測試,之前做了些實踐,但效果並不理想。   對於 QA 來說,公司的網頁交互並不多,用手點點也能滿足。對於前端來說,如果要做成自動化,就得維護一堆的腳本。   當然,這些腳本也可以 QA 來維護,但前提是得讓他們

原创 【譯】2022 年回顧:Web 性能有哪些新變化?

  原文地址:https://www.debugbear.com/blog/2022-in-web-performance   若對文中提到的一些性能參數不太熟悉,可以參考我之前的一篇博文《性能參數和優化手段》。   衡量和優化網站速度的方

原创 穩中求進的2022年

  2022 年年初做了一份年度計劃,給自己列了 13 條今年完成的事情,除了 1 條完全沒有啓動之外,其餘 12 條或完成,或還在進行中。   給自己還定了 5 個核心目標,除了個別需要與其他組協調的任務進度緩慢之外,大部分完成的還是蠻順

原创 數據化運營初探

  最近在研讀《數據化運營系統方法與實踐案例》,特在此做信息記錄。   先明確這次分析到底需要達成什麼目的,在瞭解業務的基礎上,明確應該從什麼角度去切入,應該從哪些指標着手,再去確認哪些數據現階段已有,哪些指標現階段需要推動去建設,然後統籌

原创 Node.js躬行記(25)——Web自動化測試

  網頁在提測流轉給 QA 後,如何能幫他們更有效而準確的完成測試,是我一直在思考的一個問題。   QA 他們會對網頁編寫測試用例,在提測之前會讓我們將優先級最高的用例跑通,這在一定程度上能夠避免頻繁的返工,保證測試的順暢。   自己之前想

原创 HTML躬行記(4)——Web音視頻基礎

  公司目前的業務會接觸比較多的音視頻,所以有必要了解一些基本概念。   文章涉及的一些源碼已上傳至 Github,可隨意下載。 一、基礎概念   本節音視頻的基礎概念摘自書籍《FFmpeg入門詳解 音視頻原理及應用》。 1)音頻   聲音

原创 HTML躬行記(3)——WebRTC視頻通話

  WebRTC 在創建點對點(P2P)的連接之前,會先通過信令服務器交換兩端的 SDP 和 ICE Candidate,取兩者的交集,決定最終的音視頻參數、傳輸協議、NAT 打洞方式等信息。   在完成媒體協商,並且兩端網絡連通之後,就可

原创 HTML躬行記(2)——WebRTC基礎實踐

  WebRTC (Web Real-Time Communications) 是一項實時通訊技術,在 2011 年由 Google 提出,經過 10 年的發展,W3C 於 2021 年正式發佈 WebRTC 1.0 標準。      We