本文以創用 CC 姓名標示-非商業性-相同方式分享 4.0 國際授權釋出
讀者您好
寫著寫著也快要 100 期了,各位喜歡哪些過往介紹的開源專案或是科技新聞呢?歡迎讀者留言分享您的意見,如果有任何建議,也歡迎讀者來信告訴我們。
本期介紹了目前受歡迎的兩大前端框架,以及瀏覽器的內幕與陳年臭蟲背後的故事,希望你會喜歡!
👽開源智識
🔹SerenityOS
SerenityOS 是一款開源的桌面作業系統,從零開始建構。它具有自己的作業系統核心和圖形使用者界面,並配備了一系列應用程式。其風格回溯到 90 年代,但功能卻是現代化的,開發透明且持續活躍。
🔹Next.js
Next.js 是基於 React 的開發框架,它將常見的工作,如路由、渲染和資料獲取,整合到一個框架中,使開發流程更為順暢。此外,Next.js 還提供對多種樣式解決方案和 TypeScript 的支援。
🔹Nuxt.js
Nuxt.js 是基於 Vue.js 的開發框架,主要用於建立伺服器端渲染(SSR)應用程式和靜態網站。它的主要特點在於自動路由生成,無需手動配置路由。此外,Nuxt.js 支援伺服器端渲染,有助於提升網站性能和 SEO,同時也提供預渲染功能,適用於靜態網站建置。框架內還包含中介層、外掛程式系統和異步資料獲取等功能,
🆕科技見聞
🔸陳年臭蟲背後的故事
在過去的 20 多年中,Firefox 一直存在著一個問題,即浮動提示文字(tooltip)在失去焦點時無法正確處理。這個問題長期存在,卻一直未能獲得有效的修復。
然而,最近一位年僅 22 歲的博士生成功解決了這個長期存在的問題。儘管他會程式設計,但在面對像 Firefox 這樣複雜的專案時,完全沒有相關經驗。他的解決方法包括在程式碼中搜索關鍵字並添加除錯訊息,以追蹤問題的根本原因。最終,他成功地找到了問題的源頭並予以解決。
這件事情說明,即使是龐大複雜的開源專案,只要找到追蹤問題的方法以及解決問題的耐心,任何人都可以提出有用的貢獻。
🔸瀏覽器如何工作
想讓使用者在使用網站時體會到快速和流暢,開發者必須知道瀏覽器的運作機制。只有開發者知道了瀏覽器的工作流程,才能找到讓網頁內容流暢的方法。
當使用者輸入網址並按下 Enter 鍵後,瀏覽器首先向 DNS 查詢各項資源的實際存在地址。如果資源過多或網路不穩,將會導致查詢時間過長。與伺服器正確連線之後,通常會取得一個 HTML 檔案,並根據其內容開始解析,進一步建立起 DOM 樹和 CSSOM 樹,以及編譯 JavaScript 程式碼。
瀏覽器會將 DOM 樹以及 CSSOM 樹合併成渲染樹,並依照渲染樹的指示進行畫面繪製。由於瀏覽器大部分的工作是單一執行緒,為了提高效率,瀏覽器會試著合併圖層,並嘗試使用 GPU 加速繪圖。
但流程還不止於此,瀏覽器還需將 JavaScript 程式碼整合到呈現內容中以實現互動。從這些流程可以知道,從輸入網址到最後內容的呈現,每一個環節都涉及了精密的操作,為確保使用者獲得良好的體驗,開發者需要不斷地改善內容的結構和呈現方式。
以上就是本期的內容,喜歡的話請給❤️,分享或轉寄本電子報給有興趣的朋友。如果您有想要介紹的開源專案,也請來信與我們分享,或是在 Twitter 留言給我們,感謝!