今年的關鍵字包括看書學習、業務研發、產品思維、交互設計、興趣愛好等,已瀏覽相關書籍或專欄 30 篇,平均每周閱讀 10~20 篇技術博文。
  這些資料的內容我不可能全部消化記住,但可以讓我在解決實際問題時,會有個印象,便于給出不同的方案。
  維護著的技術倉庫[daily](https://github.com/pwstrick/daily)也在繼續補充著 2024 年的[面試資料](https://github.com/pwstrick/daily/blob/master/article/2024.md)、[性能優化](https://github.com/pwstrick/daily/blob/master/article/optimization.md)、[技術工具](https://github.com/pwstrick/daily/blob/master/article/tool.md)等信息。
  在公司方面,自從去年裁員之后,團隊人員就穩定在 3 人,全年基本都撲在業務研發上,基建工作也只是做些優化迭代,沒有大動作。
  盡管如此,全年下來在工作上還是有些亮點,團隊技術也一直在革新,例如首次進行了 Electron 研發、首次使用 Taro 框架、首次引入 Ant Design Pro 等等。
  而自己在完成本職工作后,會騰出更多的精力去涉足更上層的產品、交互等工作,讓自己的技能更加復合,也為了能更好的協作與服務。
  平時有空也會去數據分析平臺看些用戶指標變化,或者去瀏覽下其他組的 OKR,以及了解下各個組的核心指標。
  也會去 Wiki 上看看品牌、運營、產品等各個小組記錄的各類文檔,想了解下他們的工作內容,還有我們服務的是一群什么樣的用戶。
  讓自己知道他們都在關心什么,也能更好的理解他們為什么提出這個需求,想要的結果是什么,我除了完成技術支撐,還能為他們提供哪些幫助或建議。
  公司去年提出了 4 項企業價值觀,我覺得挺好的,蠻正向的,我們團隊和個人也是遵循該價值觀在慢慢的成長。
1. 用戶導向:以用戶的需求和體驗為中心,交付讓用戶滿意的產品和服務。
2. 樂于創造:思考問題本質,打破慣性思維,用創造性方案去解決本質問題。
3. 積極分享:積極真誠分享用戶洞察、工作信息等讓團隊共同成長。
4. 使命必達:以結果為導向,全力推進問題解決,促進目標達成。
  下面的思維圖列舉出了今年做的一些比較重要的事情。
:-: 
## 一、項目經歷
  今年總共完成了 7 個版本迭代,大大小小 90 多個需求,這里就列舉其中 3 個比較重要的項目,包括殺豬盤、PC 直播助手和社群小程序。
**1)殺豬盤**
  殺豬盤是一個保護用戶安全,識別詐騙用戶的需求,涉及到多端聯調,此項目從 2023 年 6 月份開始,至 2024 年 8 月份才上線,研發周期長達 1 年多。
  這里面有客觀資源問題,也有人的問題,技術方案改了好幾版,計算方式從一端改到另一端,每次的改變都幾乎是重寫,所以說出現了很大的技術規劃問題。
  產品組也是奔潰了,不斷的投訴另外兩個組,我們組維護的部分比較輕量,所以時刻配合的變化。
  這個項目暴露了太多的問題,從我的視角看,還是前期的技術準備不夠充分,不夠重視,把需求也想簡單了。
  在寫代碼時,寫到某個位置,才發現這里有問題,然后拉上產品,討論一通,這種情況發生了好幾次,換誰都會不爽。
  不斷的在調整方案,最后將計算的邏輯從一個組調整到另一個組,直接重寫,這么拖拖拉拉的,周期肯定會被拉長。
  項目上線后,還是有效果的,殺豬盤相關的舉報變少了,雖然殺豬盤沒變少,但是每天都能封禁很多相關賬號,避免發生殺豬盤。
  這個項目對我們組也是一個警示,是一個反面教材,讓我們在應對復雜需求時要做好萬全的準備。
**2)PC 直播助手**
  由于主播反映模擬器操作麻煩、輸出效果打折且經常出各類問題,因此就需要一款穩定的 PC 客戶端的直播助手軟件。
  公司直播使用的是聲網的服務,聲網說有 Electron 的 SDK,于是我們就基于 Electron 來開發這個直播助手,從 2 月份開始,到 4 月份上線第一版。
  首次基于 Electron 開發,還是有些陌生的,簡單理解地話,這是一個可以改造的瀏覽器環境,我們的業務開發其實并不需要改造環境。
  聲網的 SDK 會集成到 Electron 中,然后他們打包給我們,在此基礎上開發業務。
  直播間的通信基于騰訊 IM,以上麥為例,在上麥時客戶端會向 IM 服務器發送上麥消息,服務端在完成上麥處理后,讓 IM 服務端發送響應消息給客戶端。
  核心業務其實就是根據通信收到的 Code 碼,完成不同的操作。
  但是在業務中會涉及到大量的 Code 碼,沒有文檔,沒有統一結構,我們這邊等于是邊開發,邊與客戶端核對,非常費時間。
  還有些問題是由于客戶端和 Electron 環境的差異導致的,例如客戶端的主播先以觀眾身份進入直播間的,但是在 PC 助手中沒有這個身份,那樣對應的處理邏輯就會不同。
  第三方服務商的接口文檔不清晰不完整,也會給我們的開發造成些阻礙,有的時候還需要讓他們去修改源碼。
  打包的時候發現公司都是 Mac,而主播大部分是 Windows,還要去找相應的電腦,打包出的客戶端還有點問題,都花了時間排查。
  總之,這個項目完成下來不容易,但是上線后的反饋也并不好,主要還是功能太少,還無法滿足主播的日常使用。
  但是現有的資源還不足以完成一套完整的直播服務,因此,這個項目上線第一版后,就被擱置了,非常遺憾。
**3)社群小程序**
  公司開展了一項新業務,就是購買公司的一個商品,可以獲得積分,然后用積分可以在社群小程序中兌換徒步活動或者禮品。
  小程序就是當前業務中缺失的一環,于是就投入了 1 個產品、1 個UI、7 名技術人員來實現這個需求。
  項目周期從 6 月 5 號到 9 月 13 號正式上線,期間也經歷了資源問題,導致項目不斷的延期。
  在這個項目中,首次使用 Ant Design Pro 和 Taro 框架,首次與 Go 的新框架對接,首次部署新框架,首次參與電商需求等。
  產品文檔更新過 3 版,總共產出 11 份獨立文檔,12612 個字,總大小 53.34 M。總共 58 個接口,630 條測試用例,測出 268 個 BUG,60 個高等級 BUG。
  UI 驗收時提出 19 個界面優化,產品驗收提出 40 個功能優化點。總之,大家對這個項目都很重視。
  在上線后,也陸陸續續迭代了多個版本,運營的意思是兩周一個迭代,不過當然,沒那么多的資源支持,大家都得妥協。
  這個項目讓我們體驗了好多個新技術,其中 Ant Design Pro 讓后臺的研發更加的簡單化,自己之前也封裝過多個后臺組件。
  我發現我那些組件與成熟的庫有著異曲同工之妙,只是開源庫的功能更加的完善,可以適應更多的場景。
  雖然現在小程序的用戶量只有幾百人,但是可以參與到一個從 0 到 1 的項目,還是可以學習到很多。
## 二、工作優化
  雖然人員減少了,但是工作上的優化沒有停下,都是小步迭代。
  其中比較有代表性的就是根據飛書告警優化業務邏輯,完善前端監控系統的功能,各類營收和體驗優化等。
**1)飛書告警**
  大部分的飛書告警都不會讓頁面白屏,但有可能影響頁面的性能,今年總共處理了將近 1700 多條的告警(每日新增數)。
  例如有些頁面每天有 140 多條白屏記錄,分析后發現是因為接口響應超過 1 秒導致,主要的時間消耗在傳輸,因為傳輸的內容要 1.5M,當網絡不好時,就會拉大通信時間。
  于是將圖被轉化成 base64 存儲在數據庫中,將頁面請求轉換成 URL 方式,大大降低了頁面尺寸,提升了傳輸速度。
  在 7 月份,發現圖像告警數量異常,經過排查,確認問題來源于某個特定地區的訪問異常。
  我將這一結論傳達給運維,推動問題得到解決。幾天后,另一個業務組也上報了該地區 CDN 異常的問題,進一步驗證了我分析的準確性。
  在 11 月中旬,通過每日發送的監控記錄數量,發現突然暴增將近 68W 條,經過分析是因為打印記錄的增多導致的,于是就注釋掉幾處通用代碼中的打印,總量馬上就下來了。
**2)基建迭代**
  基建的工作也趨于穩定,榜單活動配置化在今年已經發布了 12 個活動,降本提效的典型案例,并且今年也修復了幾個小問題。
  靜態頁面配置是另一個后臺可配的網頁,是組員在使用中發現問題,而主動做了功能上完善和優化。
  前端監控增加了兩個監控項目:PC 直播助手和社群小程序,日志搜索增加了操作系統的查詢條件,性能監控堆疊面積圖和指標增加顏色標識。
  自己也去買了幾本書、看了幾篇專欄去研究可觀測性的概念,對于監控有了更深刻的理解。
  都是些比較細節的優化,社群小程序是個新項目,包括發布都是新部署的,依照之前的文檔,還增加了飛書指令發布的功能。
  就是在 IM 界面輸入關鍵字,就能直接發布,省去了進入云效后臺界面的步驟。
  除了系統優化之外,今年還推動將幾個老舊無人維護的 Node 服務接口遷移到了 Go 服務,例如直播狀態、贈送物品等。
  今年維護和新建了近百份文檔,其中包括多份技術分享、Code Review 記錄、項目介紹等,組內也緊跟時髦學習了些 AI 技術資料。
**3)成本優化**
  作為支撐部門,我們一般都是消耗公司資源,但有時候也能做些成本優化,最直接是就算減少數據庫的存儲。
  5 月份清理了 MongoDB 中 5 張表,共減少 276G 的容量,刪除了 4 張冗余表,定期清理 1 張表。
  讓整個 MongoDB 維持在 11G,每個月的存儲費用可減少 150 不到點。
  10 月份每天凌晨 3 點會有數據庫的 CPU 告警,分析后發現是一條刪除語句造成,在刪除語句時增加 limit 限制。
  然后分析發現,刪除的那張表會將數據遷移到另一個數據庫中,但是數據組已經做了同步。
  也就是說,我們這邊的同步是冗余的,于是就將另一個數據庫中的 2 張表直接清空,還有 1 張表做定期清理。
  總共減少1TB的數據量,每個月至少節約 1600 元,這比之前的 MongoDB 給力多了。
  公司發展了這么多年,肯定有很多地方的技術費用是多付的,就看各個維護人員平時會不會關心這事兒了。
**4)體驗優化**
  我們組的用戶包括自己、公司同事以及會員,我們要把所有的用戶都伺候好了才行。
  管理后臺暗黑模式是我在瀏覽開源庫的時候,突發奇想,也要給我們的后臺整一套。
  翻閱 Ant Design 4.X 的文檔后,找到了改造流程,修改了代碼后,就上線了,然后再慢慢的給個別組件或頁面進行適配。
  運營看到后臺的暗黑模式后,馬上去催促產品,給客戶端也去整一套,產品一臉無奈,囧。
  5 月份為兩個對外的項目開啟了強緩存,從 3 個小時慢慢加到 3 天,1 秒內白屏占比從 92.04% 提升至 95.32%,1 秒內首屏占比從 79.71% 提升至 88.03%
  還有個比較頑疾的匹配問題,一開始也沒重視,隔幾天會報上來幾個,也修復過幾次,但還是有問題,最后決定徹底大改下,改完后。
  讓測試走了遍主流程,就上線了,14點左右上的,觀察了一個下午,沒啥問題,后面也沒人上報了。
  管理后臺陸陸續續做了些優化,例如完善提示、增加限制、顯示有用的數據等。雖然都是小小的改動,但能大大幫助了同事們的日常工作。
  伺候好了其他人,也要伺候好我們自己組,Android 6 以后,就不能抓包 HTTPS 的請求,客戶端調試很不方便,于是自己去研究了些[WebView的調試方法](https://www.cnblogs.com/strick/p/17913802.html)。
  iOS 的調試比較簡單,可以借助 Safari 瀏覽器實現;Android 配置調試的過程比較波折,可以借助 Chrome 瀏覽器實現。
**5)績效考核**
  年底的時候制訂了明年的績效考核,包括業務指標和重要項目。
  業務指標包括交付質量、雙月用戶滿意度、業務支撐;重要項目包括基礎建設和社群小程序。
  交付質量就是線上急高等級的 BUG 數、SLA 和慢響應占比這些指標需要在一個好的范圍內。
  雙月用戶滿意度就是我們自己做的一張問卷,每個雙月推給各個協作方,讓他們打分,滿分 5 分。
  業務支撐就是完成率和延期率不能超過某一個值。
  基礎建設就是完成團隊和項目的迭代,包括組員能力成長、數據庫優化、活動標準化、前端監控平臺等。
  雖然這一項比較難以量化,但是可以作為一個指導方向,讓我們團隊可以時刻關注著這塊,到年底也能說道說道。
  社群小程序是我們所維護的一個持續迭代的重要項目,考核標準是按期上線以及線上急高 BUG 數。
## 三、日常生活
  現在下班后讓我再去學技術,已經很難了,回家不是躺著刷手機,就是帶小孩去這邊那邊的玩。
  基本都是碎片時間,很少有大段的時間留給自己,一般也就晚上才會有點空閑時間。
  小孩幼兒園正式畢業,9 月份入學,成為一年級大朋友了。
  學校讀書的原因,也在年中搬了次家,正式入住到新裝修的房子中,去地鐵站的距離加倍了。
**1)旅行**
  今年總共去了 6 個地方旅行,都是帶著小孩的,休閑為主,最遠的是去了青島,高鐵單程 5 個小時,不遠。
  7 月中旬去的青島,4 天 3 夜,天氣一點都不熱,環境很舒服,吃了點海鮮,有 3 天時間去了沙灘,小孩要挖泥沙。
  景點附近容易堵車,不過地鐵也很方便,景點都能到。吃的方面,嶗山可樂有點喝不慣。
  其余的地方就是江浙滬區域,包括常州恐龍園、無錫、同里古鎮、西塘古鎮、森泊,有的自駕有的高鐵,現在去哪都方便。
  高中的時候去過一次常州恐龍園,當時覺得是個公園而已,這次去了另一塊游樂場區域,顛覆了我之前的認知。
**2)興趣**
  今年 3 月份看到鳥山明去世的消息后,就萌發了買套龍珠漫畫的想法,但是我要買的版本得是童年時候內蒙古出版社的那套。
  在閑魚上看到套買的話比之前貴了幾倍,就去散配,但其實也便宜不了,最終搞了一套,放書架。
  還買了圣斗士的三套書籍,幽游白書正好看到有正版授權在賣,就也搞了一套,不過目前就 6 本。
  5 月份又對手辦產生了興趣,又開始買些眼鏡廠、一番賞等系列的手辦,買了一堆,都擺到了書架中。
  就擺在視野最好的那兩層,也留了幾個放在公司辦公桌上當擺件,后面覺得占地方,收手了。
  7 月份在青島玩的時候,買了本介紹水滸卡的電子書,水滸卡就是 1999 年的時候流行的小浣熊水滸卡。
  看了書之后,才了解到原來水滸卡版本有那么多,還分普卡、碎閃、閃卡等等。
  從青島回來后,就開始慢慢的在閑魚上買卡,套買、散配都有,還自己的童年債。
  我玩的比較花,打算把 34 號解珍這個人物的各個版本都搜集到。
  如果每個版本都搜集 108 張,既費錢也費精力,幾乎很難完成,并且卡太多了,都會來不及欣賞。
  水滸閃卡還分軟閃、硬面、獎閃,這部分比較費錢,花的大頭都是在這塊,其價格從當初翻了幾十倍。
  今年是懷舊的一年,買了很多以前就喜歡的東西,把私房錢揮霍的也差不多了。
- ES6
- 1、let和const
- 2、擴展運算符和剩余參數
- 3、解構
- 4、模板字面量
- 5、對象字面量的擴展
- 6、Symbol
- 7、代碼模塊化
- 8、數字
- 9、字符串
- 10、正則表達式
- 11、對象
- 12、數組
- 13、類型化數組
- 14、函數
- 15、箭頭函數和尾調用優化
- 16、Set
- 17、Map
- 18、迭代器
- 19、生成器
- 20、類
- 21、類的繼承
- 22、Promise
- 23、Promise的靜態方法和應用
- 24、代理和反射
- HTML
- 1、SVG
- 2、WebRTC基礎實踐
- 3、WebRTC視頻通話
- 4、Web音視頻基礎
- CSS進階
- 1、CSS基礎拾遺
- 2、偽類和偽元素
- 3、CSS屬性拾遺
- 4、浮動形狀
- 5、漸變
- 6、濾鏡
- 7、合成
- 8、裁剪和遮罩
- 9、網格布局
- 10、CSS方法論
- 11、管理后臺響應式改造
- React
- 1、函數式編程
- 2、JSX
- 3、組件
- 4、生命周期
- 5、React和DOM
- 6、事件
- 7、表單
- 8、樣式
- 9、組件通信
- 10、高階組件
- 11、Redux基礎
- 12、Redux中間件
- 13、React Router
- 14、測試框架
- 15、React Hooks
- 16、React源碼分析
- 利器
- 1、npm
- 2、Babel
- 3、webpack基礎
- 4、webpack進階
- 5、Git
- 6、Fiddler
- 7、自制腳手架
- 8、VSCode插件研發
- 9、WebView中的頁面調試方法
- Vue.js
- 1、數據綁定
- 2、指令
- 3、樣式和表單
- 4、組件
- 5、組件通信
- 6、內容分發
- 7、渲染函數和JSX
- 8、Vue Router
- 9、Vuex
- TypeScript
- 1、數據類型
- 2、接口
- 3、類
- 4、泛型
- 5、類型兼容性
- 6、高級類型
- 7、命名空間
- 8、裝飾器
- Node.js
- 1、Buffer、流和EventEmitter
- 2、文件系統和網絡
- 3、命令行工具
- 4、自建前端監控系統
- 5、定時任務的調試
- 6、自制短鏈系統
- 7、定時任務的進化史
- 8、通用接口
- 9、微前端實踐
- 10、接口日志查詢
- 11、E2E測試
- 12、BFF
- 13、MySQL歸檔
- 14、壓力測試
- 15、活動規則引擎
- 16、活動配置化
- 17、UmiJS版本升級
- 18、半吊子的可視化搭建系統
- 19、KOA源碼分析(上)
- 20、KOA源碼分析(下)
- 21、花10分鐘入門Node.js
- 22、Node環境升級日志
- 23、Worker threads
- 24、低代碼
- 25、Web自動化測試
- 26、接口攔截和頁面回放實驗
- 27、接口管理
- 28、Cypress自動化測試實踐
- 29、基于Electron的開播助手
- Node.js精進
- 1、模塊化
- 2、異步編程
- 3、流
- 4、事件觸發器
- 5、HTTP
- 6、文件
- 7、日志
- 8、錯誤處理
- 9、性能監控(上)
- 10、性能監控(下)
- 11、Socket.IO
- 12、ElasticSearch
- 監控系統
- 1、SDK
- 2、存儲和分析
- 3、性能監控
- 4、內存泄漏
- 5、小程序
- 6、較長的白屏時間
- 7、頁面奔潰
- 8、shin-monitor源碼分析
- 前端性能精進
- 1、優化方法論之測量
- 2、優化方法論之分析
- 3、瀏覽器之圖像
- 4、瀏覽器之呈現
- 5、瀏覽器之JavaScript
- 6、網絡
- 7、構建
- 前端體驗優化
- 1、概述
- 2、基建
- 3、后端
- 4、數據
- 5、后臺
- Web優化
- 1、CSS優化
- 2、JavaScript優化
- 3、圖像和網絡
- 4、用戶體驗和工具
- 5、網站優化
- 6、優化閉環實踐
- 數據結構與算法
- 1、鏈表
- 2、棧、隊列、散列表和位運算
- 3、二叉樹
- 4、二分查找
- 5、回溯算法
- 6、貪心算法
- 7、分治算法
- 8、動態規劃
- 程序員之路
- 大學
- 2011年
- 2012年
- 2013年
- 2014年
- 項目反思
- 前端基礎學習分享
- 2015年
- 再一次項目反思
- 然并卵
- PC網站CSS分享
- 2016年
- 制造自己的榫卯
- PrimusUI
- 2017年
- 工匠精神
- 2018年
- 2019年
- 前端學習之路分享
- 2020年
- 2021年
- 2022年
- 2023年
- 2024年
- 日志
- 2020