Vue CLI 專案頁面開啟時間最佳化：從16秒到2秒內 - dev-zuo 技術日常
在日常開發中，經常要寫一些 demo 來測試一些功能，於是專門新建了一個 github 倉庫來管理，方便積累。這次想著把 vue demo 部署到伺服器，方便 PC/手機 實時看效果。於是把 vue-cli 專案 npm run build 後，將 dist 部署到伺服器 nginx 下，但發現開啟很慢，下面來看看怎麼最佳化。如下圖，DOM 載入完 15 秒，完全載入 16 秒
本文講述了最佳化Vue CLI專案載入速度的方法。原來專案載入時間長達16秒，主要原因是chunk-vendors.js檔案過大。透過以下步驟最佳化：
1. 開啟nginx伺服器的gzip壓縮，使vendors.js從1.7MB減至600KB，載入時間減少5秒。
2. 使用Vue CLI的webpack包體積最佳化工具分析，發現ElementUI和Echarts佔用空間大。將Echarts改為CDN引用，ElementUI改為按需載入，進一步減小vendors.js到596KB。
3. 將Vue和ElementUI也改為外部CDN引用，使vendors.js降至68KB，載入時間約3秒。
4. 最佳化ElementUI CSS引用，從unpkg切換到bootcdn，最終將載入時間最佳化到1.89秒。
透過上述步驟，專案載入時間從16秒最佳化到2秒以內。
展開摘要
www.zuo11.com
People | Web Game Dev
https://www.webgamedev.com/resources/people
這篇文章提供了一份值得關注的人員列表，他們專注於3D、VR和Web遊戲開發的最新進展。其中包括Three.js的建立者Ricardo Cabello和維護者Mugen87，Babylon.js的創造者David Catuhe和維護者Raanan Weber，以及A-Frame的開發者Diego Marcos。此外，還有Meta公司的工程師，如Rik Cabanier、Scott Nagy和Dave Hill，他們在Quest瀏覽器和WebXR領域有所貢獻。其他重要人物包括Hendrik Mans、SimonDev、Don McCurdy等，他們在相關領域有教育和創新專案。關注這些人可以深入瞭解這個行業的動態和學習資源。
展開摘要
www.webgamedev.com
從龜速 11s 到閃電 1s，詳解前端效能最佳化之首屏載入 | HeapDump效能社群
此效能文章由HeapDump效能專家 (งᵒ̌皿ᵒ̌)ง⁼³₌₃ 更新於 2023年08月31日06時05分，全文共6511字/詞，閱讀大概需要13分鐘，太長不看黨請直接移步👉「開始最佳化」部分直接檢視最佳化手段背景前段時間公司伺服器網路波動，網站訪問變慢，一些效能問題也隨之暴露了出來。紛紛反饋在這樣的弱網條件下，訪問新專案時，載入了近1分鐘都沒載入出來，而訪問其他頁面頂多也就30-40s。在網路
文章摘要：
文章詳細闡述了前端效能最佳化，尤其是首屏載入速度的提升，從11秒縮短至1秒以內。最佳化背景源於公司伺服器網路波動導致的訪問速度減慢，以及使用者在弱網環境下的不良體驗反饋。作者透過對專案進行一系列最佳化措施，顯著提高了載入速度。
最佳化手段包括體積最佳化（如移除冗餘依賴、壓縮圖片、使用webP格式、最佳化SVG圖示、精簡Ant-design元件）、傳輸最佳化（如改進分包策略、啟用HTTP2、Gzip壓縮、預載入和預請求資源）、以及感知效能最佳化（如載入動畫、首屏骨架屏、漸進式圖片載入）。文章強調了效能最佳化的目的在於提升使用者體驗，包括“真的快”（客觀指標改善）和“覺得快”（透過視覺引導等手段最佳化使用者感知）。
作者還分享了具體的技術細節，如使用Webpack外掛、調整Babel配置、最佳化依賴管理和圖片處理策略，以及如何利用OSS和CDN加速資源載入。最後，文章指出效能最佳化不僅關乎使用者體驗，還直接影響到業務轉化率和收入，鼓勵開發者建立效能最佳化與產品指標之間的正向聯絡，以便更好地推動技術方案實施。
整體而言，文章提供了全面的前端效能最佳化指南，覆蓋了從理論到實踐的各個方面，對希望提升網頁載入速度的開發者具有很高的參考價值。
展開摘要
heapdump.cn
https://kentcdodds.com/discord
https://dev.to/
Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.
Squoosh is a tool designed to shrink image sizes significantly, enhancing web page loading speeds without compromising quality. It simplifies image optimization, allowing instant savings or customizable adjustments for further reduction. Importantly, it ensures user privacy by processing images locally, preventing data from leaving the device.
展開摘要
squoosh.app
boutique-books/b04-圖形學與視覺化/WebGL程式設計指南.pdf at master
Some of the fine books I have read. Contribute to linghuam/boutique-books development by creating an account on GitHub.
It appears the provided content is not an article but a list of services and features offered by GitHub, along with unrelated links. Here's a concise summary:
GitHub offers various tools for software development including automated workflows, package hosting, security checks for vulnerabilities, instant development environments (Codespaces), AI-assisted coding (GitHub Copilot), code review management, issue tracking, and collaboration beyond code. It also provides learning resources, customer stories, partnerships, and an AI-powered developer platform. Pricing information and sign-up options are available.
Note: The original text did not contain an article to summarize, so this response is based on interpreting the listed features and services.
展開摘要
github.com
https://pagespeed.web.dev/
People | Web Game Dev
https://www.webgamedev.com/resources/people
這篇文章提供了一份值得關注的人員列表，他們專注於3D、VR和Web遊戲開發的最新進展。其中包括Three.js的建立者Ricardo Cabello和維護者Mugen87，Babylon.js的創造者David Catuhe和維護者Raanan Weber，以及A-Frame的開發者Diego Marcos。此外，還有Meta公司的工程師，如Rik Cabanier、Scott Nagy和Dave Hill，他們在Quest瀏覽器和WebXR領域有所貢獻。其他重要人物包括Hendrik Mans、SimonDev、Don McCurdy等，他們在相關領域有教育和創新專案。關注這些人可以深入瞭解這個行業的動態和學習資源。
展開摘要
www.webgamedev.com
How browsers work
https://taligarsiel.com/Projects/howbrowserswork1.htm
The article explains how web browsers work, focusing on the main components and processes involved. It highlights that open-source browsers like Firefox, Chrome, and Safari dominate the market. The browser's primary function is to fetch and display web resources, usually in HTML, CSS, and other formats, using a URI. Browsers interpret HTML and CSS per W3C specifications, with most now conforming to standards to reduce compatibility issues.
The browser consists of a user interface, browser engine, rendering engine, networking component, UI backend, and JavaScript interpreter. The rendering engine plays a crucial role in parsing HTML, creating a DOM tree, and rendering content on the screen. Chrome stands out by running each tab in a separate process.
The article also discusses parsing, with lexical analysis breaking input into tokens and syntax analysis applying language rules. HTML parsing is complex due to its forgiving nature, requiring custom parsers. The HTML5 specification details the tokenization and tree construction process. Overall, the article provides an overview of the intricate mechanisms behind web browsing.
展開摘要
taligarsiel.com
Learn the Latest Tech Skills; Advance Your Career
Learn online and advance your career with courses in programming, data science, artificial intelligence, digital marketing, and more. Gain in-demand technical skills. Join today!
www.udacity.com
undefined:
Vue CLI 專案頁面開啟時間最佳化：從16秒到2秒內 - dev-zuo 技術日常
在日常開發中，經常要寫一些 demo 來測試一些功能，於是專門新建了一個 github 倉庫來管理，方便積累。這次想著把 vue demo 部署到伺服器，方便 PC/手機 實時看效果。於是把 vue-cli 專案 npm run build 後，將 dist 部署到伺服器 nginx 下，但發現開啟很慢，下面來看看怎麼最佳化。如下圖，DOM 載入完 15 秒，完全載入 16 秒
本文講述了最佳化Vue CLI專案載入速度的方法。原來專案載入時間長達16秒，主要原因是chunk-vendors.js檔案過大。透過以下步驟最佳化：
1. 開啟nginx伺服器的gzip壓縮，使vendors.js從1.7MB減至600KB，載入時間減少5秒。
2. 使用Vue CLI的webpack包體積最佳化工具分析，發現ElementUI和Echarts佔用空間大。將Echarts改為CDN引用，ElementUI改為按需載入，進一步減小vendors.js到596KB。
3. 將Vue和ElementUI也改為外部CDN引用，使vendors.js降至68KB，載入時間約3秒。
4. 最佳化ElementUI CSS引用，從unpkg切換到bootcdn，最終將載入時間最佳化到1.89秒。
透過上述步驟，專案載入時間從16秒最佳化到2秒以內。
展開摘要
www.zuo11.com
undefined:
https://juejin.cn/post/6844904131346300942
undefined:
前端效能最佳化 - chrome performance看瀏覽器渲染過程_chrome perform
文章瀏覽閱讀1.4w次，點贊2次，收藏22次。最近一直想看看瀏覽器渲染以及前端效能最佳化的內容，可是在網上找到的都是文字描述，所以想透過網上的知識去對應到chrome performance看到的過程。先看一個非常簡單的頁面程式碼： Test dom load._chrome performance parse html
本文探討了瀏覽器渲染頁面的過程，主要關注Chrome的效能分析。瀏覽器渲染主要包括髮送網路請求、接收響應、解析HTML、更新層樹、繪製和合成層等步驟。在解析HTML階段，會經歷DOMContentLoaded、Recalculate Style和Layout等關鍵點，構建DOM、CSSOM和Render樹。當包含CSS和JS時，JS的載入和執行會阻塞頁面渲染，直到CSSOM和DOM合併成Render樹。總的來說，解析HTML涉及構建DOM、CSSOM樹，然後佈局和繪製，而CSS和JS會影響這個流程。
展開摘要
blog.csdn.net
undefined:
Networking 101: Primer on Latency and Bandwidth -
What every web developer must know about mobile networks, protocols, and APIs provided by browser to deliver the best user experience.
The article emphasizes the crucial role of speed in web performance optimization, as faster sites lead to better user engagement, retention, and conversions. It highlights latency and bandwidth as key factors affecting network performance. Latency refers to the time taken for a packet to travel from source to destination, consisting of propagation, transmission, processing, and queuing delays. Bandwidth represents the maximum data transfer rate of a communication path.
The article explains that while the speed of light sets a limit on propagation time, real-world materials like fiber-optic cables slow signals down. Network latency is influenced by distance, intermediate routers, and traffic loads. Content Delivery Networks (CDNs) help reduce latency by serving content from geographically closer servers.
Bandwidth, though important, is often not the primary bottleneck for website performance compared to latency, especially with modern high-speed backbone networks. However, available bandwidth at the network edges varies greatly and depends on technologies like DSL, cable, and fiber-to-the-home. Tools like speedtest.net can help identify bandwidth bottlenecks.
The increasing demand for high bandwidth, driven by streaming video, is met through strategies like adding more fibers, deploying more links, or improving WDM techniques. Despite capacity growth, managing the variable performance of data networks remains a challenge.
展開摘要
hpbn.co
undefined:
Networking 101: Primer on Latency and Bandwidth -
What every web developer must know about mobile networks, protocols, and APIs provided by browser to deliver the best user experience.
The article emphasizes the crucial role of speed in web performance optimization, as faster sites lead to better user engagement, retention, and conversions. It highlights latency and bandwidth as key factors affecting network performance. Latency refers to the time taken for a packet to travel from source to destination, consisting of propagation, transmission, processing, and queuing delays. Bandwidth represents the maximum data transfer rate of a communication path.
The article explains that while the speed of light sets a limit on propagation time, real-world materials like fiber-optic cables slow signals down. Network latency is influenced by distance, intermediate routers, and traffic loads. Content Delivery Networks (CDNs) help reduce latency by serving content from geographically closer servers.
Bandwidth, though important, is often not the primary bottleneck for website performance compared to latency, especially with modern high-speed backbone networks. However, available bandwidth at the network edges varies greatly and depends on technologies like DSL, cable, and fiber-to-the-home. Tools like speedtest.net can help identify bandwidth bottlenecks.
The increasing demand for high bandwidth, driven by streaming video, is met through strategies like adding more fibers, deploying more links, or improving WDM techniques. Despite capacity growth, managing the variable performance of data networks remains a challenge.
展開摘要
hpbn.co
undefined:
[圖片]
undefined:
前端效能精進（六）——網路 | HeapDump效能社群
此效能文章由HeapDump效能專家 咖啡機KFJ 更新於 2023年07月12日01時15分，網路也是前端效能最佳化的重要一環，網頁上的資源都要經過網路來傳輸。最佳化網路效能除了快取和壓縮之外，還有就是協議和 CDN
本文探討了前端效能最佳化中的網路層面，主要包括快取、壓縮、HTTP協議的演進以及CDN服務。快取分為強快取和協商快取，透過HTTP首部如Cache-Control和ETag來管理。壓縮技術如GZip和Brotli能顯著減少非媒體檔案的傳輸大小。HTTP/2引入二進位制分幀、多路複用和首部壓縮，解決了HTTP/1.1的隊首阻塞問題。HTTP/3基於QUIC協議，進一步減少了延遲。CDN服務透過邊緣節點提供內容分發，提高訪問速度，同時邊緣計算降低了延遲，尤其適用於物聯網和AR/VR場景。透過這些最佳化，網路效能得以大幅提升。
展開摘要
heapdump.cn
undefined:
https://juejin.cn/post/6844904100035821575
undefined:
Who has the fastest F1 website in 2021? Part 3
Deep-diving on the load performance of F1 websites.
In this third part of a series analyzing Formula 1 (F1) team websites' performance, the focus is on Red Bull's site. Despite showing significant improvement over its 2019 version, the site still has room for optimization. Key issues include a 3-second delay due to unnecessary inlining, a 10-second delay for a main image because of a JavaScript-responsive image implementation, and a 40-second delay for a crucial image loaded with JavaScript. Optimizing images, reducing inlining, and improving font loading could significantly enhance the site's speed. Red Bull's site outperforms others in the series, but further optimization could yield even better results.
展開摘要
jakearchibald.com
undefined:
Who has the fastest F1 website in 2021? Part 1
Deep-diving on the load performance of F1 websites.
In this 2021 performance review of Formula 1 (F1) team websites, the author compares the loading speed and efficiency of 10 sites using WebPageTest on a Moto G4 with a 3G connection. The evaluation focuses on first load interactivity and caching efficiency, not design or features. Key findings include:
1. CSS font trackers causing significant delays in content rendering, such as a 7-second delay due to an external font service.
2. Preload resource priority issues leading to 1-second delays.
3. Unnecessary SVG inlining contributing to slower load times.
4. Unnecessary preloading of primary images causing 5-second delays.
5. Poor image compression adding 1-second delays.
6. Content-blocking cookie modals resulting in extended load times.
The author suggests optimization strategies like deleting or reorganizing @import statements, using preload tags, async-loading font stylesheets, and optimizing image compression. The review highlights the importance of considering performance on mid-to-lower-end devices and the impact of HTTP/2 on hosting practices. The series aims to identify common performance issues and provide solutions, emphasizing that the results do not reflect developer abilities.
展開摘要
jakearchibald.com
undefined:
去掉css檔案內import 內聯字型改成link方式
undefined:
Who has the fastest website in F1?
Who has the fastest website in F1?Posted 19 March 2019 I was trying to make my predictions for the new Formula One season by studying the aerodynamics of the cars, their cornering speeds, their ability to run with different amounts of fuel. Then it hit me: I have no idea what I'm doing. So, I'm goin
The article is a humorous approach to predicting the performance of Formula 1 teams by analyzing their website performance instead of traditional factors. The author uses WebPageTest on a Moto G4 with a 3G connection to measure載入速度和互動時間。他們強調了網站在較差網路條件下的可用性，選擇中低端裝置來代表普通使用者的體驗。評分標準是頁面從開始到可互動所需的時間，以及資源大小對資料消耗的影響。
在分析梅賽德斯、法拉利和紅牛的網站時，作者指出了一些常見問題，如阻塞渲染的JavaScript、未最佳化的圖片、延遲載入的字型和缺乏快取控制。他們建議使用defer屬性、預載入、壓縮字型和程式碼分割來提高效能。此外，還提到了不必要的CSS和JavaScript，以及大型影像資源對載入時間的影響。
透過這個非傳統的比較，作者展示瞭如何評估網站效能，並提出了改進網站速度的策略，但強調這並不是對開發團隊能力的評價，而是為了展示最佳化潛力。
展開摘要
jakearchibald.com
undefined:
font-spider 壓縮字型 webfontloader
undefined:
【賞金10元】關於最佳化網路頁面的問題 | HeapDump效能社群
努力努力 釋出於 2022年06月17日01時49分，我們在進行最佳化的時候，其中有一條策略就是使用離線dom減少重排與重繪，就是將dom先隱藏再修改，修改完後再顯示出來。但是瀏覽器的渲染策略更傾向於將一個大的任務拆分成多個小的任務進行實時多次的渲染。那麼離線dom的這種最佳化是不是有可能成為一種負最佳化？將多個渲染任務都集中到一次渲染中，導致頁面渲染不夠及
文章探討了離線DOM作為網頁最佳化策略的有效性。該策略涉及隱藏DOM元素以避免頻繁的重排和重繪，但作者提出，瀏覽器傾向於將大任務拆分為多次小渲染。因此，離線DOM可能會導致負最佳化，將多個渲染任務集中在一次，從而延長當前幀處理時間，引發頁面卡頓。文章引發思考，這種最佳化是否反而影響了頁面的及時渲染。讀者被鼓勵關注“Heapdump效能社群”公眾號獲取更多資訊。
展開摘要
heapdump.cn
undefined:
https://github.com/sisterAn/blog/issues/63
undefined:
構建最佳化總結 - Webpack Guidebook
https://tsejx.github.io/webpack-guidebook/best-practice/optimization/collection/
Webpack 最佳化主要包括：配置 `resolve.modules` 以減少檔案查詢時間，設定 `resolve.mainFields` 和 `resolve.alias` 最佳化入口檔案搜尋，使用 `resolve.extensions` 縮短副檔名查詢，透過 `module.noParse` 忽略非模組化庫，利用 `HappyPack` 並行處理 `Loader`，使用 `ParallelUglifyPlugin` 並行壓縮 JS，以及透過 `DllPlugin` 提前打包常用模組。此外，減少不必要的 `loader` 和 `plugin`，利用 `Tree-Shaking` 去除未使用程式碼，開啟 `devtool` 以生成 source map，根據環境使用 `webpack.DefinePlugin` 定義變數，使用 `UglifyJSPlugin` 和 `cssnano` 壓縮程式碼。對於開發環境，使用 `webpack-dev-server --watch` 監聽檔案變化，`HotModuleReplacement` 實現熱更新，避免在開發時使用壓縮和混淆。在生產環境中，利用 `SplitChunksPlugin` 提取公共程式碼，透過 CDN 加速靜態資源載入，並使用 `externals` 避免重複打包。最後，透過 `webpack-bundle-analyzer` 和 `webpack-analyze` 分析和最佳化打包結果。
展開摘要
tsejx.github.io
undefined:
面試官：線上崩了，說說你是怎麼排查線上問題的？ - 掘金
Hi 你好，我是東東拿鐵，一個正在探索個人IP&副業的後端程式設計師。 工作多年還不會排查線上問題？系統響應時間突增，CPU使用率明顯上升，系統偶爾卡頓，一文教你四個排查方向
抱歉，由於您提供的連結無法訪問，我無法直接獲取文章內容進行摘要。請您提供文章的主要觀點和結論，我將很樂意幫您進行摘要。
展開摘要
juejin.cn
undefined:
https://juejin.cn/post/7351300892572745764
undefined:
開源專案經驗
專案名稱: Fantastic-Project
連結: https://github.com/yourusername/Fantastic-Project
描述: 一款開源的教育平臺，提供線上課程管理和學習跟蹤功能，採用React + Node.js構建。
我的角色: 主要開發者 & UI設計貢獻者
貢獻:
設計並實現前端使用者介面，提升使用者體驗，使用者滿意度提升20%。
重構後端服務，採用GraphQL最佳化資料查詢，響應時間減少40%。
編寫詳細專案文件，促進社群貢獻，新貢獻者增長50%。
技術棧: React, Redux, Node.js, GraphQL, PostgreSQL
undefined:
https://martinfowler.com/
undefined:
Medium: （https://medium.com/）上有大量技術部落格，很多開發者和團隊會在這裡分享專案經驗、技術選型理由、遇到的挑戰及解決方法。內容覆蓋廣泛，從前端到後端，從AI到區塊鏈都有。
Reddit: （https://www.reddit.com/r/programming/）特別是r/programming、r/webdev、r/softwareengineering等子版塊，經常有技術討論和專案分享，社群活躍，可以直接與他人交流。
Tech Blogs and Personal Websites: 許多知名開發者和技術領導者有自己的部落格，他們會詳細記錄專案經驗、技術選型、架構設計思路以及遇到的技術難題和解決方案。例如Martin Fowler的部落格(https://martinfowler.com/)就非常有名。
LinkedIn Pulse: （https://www.linkedin.com/pulse/）LinkedIn上的Pulse板塊，許多專業人士會在這裡分享行業見解、專案經歷和職業發展經驗。
Project Management Websites: 如PMI（Project Management Institute）的部落格(https://www.pmi.org/learning/thought-leadership/blog)或Trello的部落格(https://blog.trello.com/)，提供了專案管理和團隊協作的洞見和案例分析
undefined:
學習Three.js可以遵循以下步驟：
1. 理解基礎概念
WebGL基礎：雖然Three.js對WebGL進行了封裝，但理解WebGL的基本原理有助於深入學習。瞭解它是如何在瀏覽器中實現3D圖形渲染的。
Three.js核心概念：熟悉Three.js的三大基礎元素：Scene（場景）、Camera（相機）和Renderer（渲染器）。理解它們之間的關係和作用。
2. 官方文件與教程
訪問Three.js官網：Three.js官網 提供了大量的官方示例和文件，這是學習的最佳起點。
基礎入門教程：跟隨官網的“Getting Started”指南，動手建立你的第一個Three.js專案。
3. 實戰練習
Hello World：從建立一個簡單的3D立方體開始，理解如何設定場景、新增物體、設定相機視角和渲染。
逐步增加複雜度：隨著學習的深入，嘗試加入光源、材質、紋理等，使場景更加豐富。
4. 學習高階功能
動畫與互動：學習如何使用Tween.js等庫來建立平滑的動畫效果，以及如何處理使用者輸入和互動。
模型載入：學習如何使用載入器（如GLTFLoader）載入外部3D模型，可能需要了解一些基本的3D建模知識（如使用Blender）。
後處理與特效：探索如何應用後期處理效果，如景深、模糊、顏色校正等，以提升視覺效果。
5. 進階技巧
效能最佳化：瞭解如何最佳化渲染效率，特別是在處理大量物件或複雜場景時。
物理模擬：學習如何整合物理引擎（如 Cannon.js 或 Ammo.js）來實現更真實的物理互動。
6. 資源與社群
線上教程與課程：利用網上豐富的教程資源，如YouTube上的教程、Medium文章、或專門的線上課程。
參與社群：加入Three.js相關的論壇、Slack頻道或Discord伺服器，和其他開發者交流心得，解決問題。
檢視例項程式碼：GitHub上有很多使用Three.js的開源專案，檢視和分析這些程式碼可以加深理解。
7. 動手實踐
個人專案：選擇一個小專案作為實踐目標，比如製作一個3D產品展示、遊戲或資料視覺化應用。
持續迭代：在實踐中遇到問題時，查閱文件、搜尋解決方案，並不斷迭代你的專案。
透過上述步驟，結合理論學習與實踐操作，你可以逐步掌握Three.js並開發出精彩的3D Web應用。
undefined:
https://www.wellyyss.cn/demo-old/art-exhibition/#/preview
undefined:
https://playcanvas.com/explore
undefined:
https://2xiao.github.io/leetcode-js/react/
undefined:
https://www.angular.cn/tutorials/learn-angular
undefined:
https://chatglm.cn/video?lang=zh