iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

從點擊到顯示:深度解析網頁運作的神秘之旅 系列

每當我們點擊一個連結,背後所進行的一連串動作其實相當複雜。但是,大多數的使用者可能從未深入思考過這中間的過程。身為一名前端工程師,在開發專案的過程中,需要深入探討這些背後的原理,深知每一步都充滿了技術的挑戰與機會。

在這系列文章中,我將帶領各位從開發者的視角,深入探討這些背後的原理。不僅如此,我會分享我的實戰經驗,講述如何優化這些過程、如何結構化整體架構,以及我在此過程中的所思所感。

無論你是初入此行的新手,還是已有豐富經驗的資深工程師,這系列文章都將為你提供新的啟示和實用的技巧。

參賽天數 4 天 | 共 8 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

從點擊到顯示:整個網頁運作的神秘之旅

從我們點擊瀏覽器的那一刻起,背後的技術過程比你想象的還要豐富。 瀏覽器的運作原理、資料運算、網頁渲染... 一切都是為了給使用者更好的體驗。 瀏覽器如何解析...

2023-09-16 ‧ 由 hooty868 分享
DAY 2

提升網頁效能的小技巧(字體載入)

在當今的網頁開發中,優化效能始終是一個追求的目標。我們都希望在短時間內,讓使用者得到最好的體驗。 於是,我們在開發過程中,努力地優化Lighthouse上的指標...

2023-09-17 ‧ 由 hooty868 分享
DAY 3

如何深度優化圖片:從next/image學到的事

在Next.js中使用next/image、觀察器、預加載和背景圖片技術優化流暢容器的圖片加載 Next.js,這個受歡迎的React框架,不斷努力使網頁優化變...

2023-09-18 ‧ 由 hooty868 分享
DAY 4

讓我們了解 Flex/Grid的魔法

Flexbox:靈活的單維布局工具 Flexbox,正如其名,是一個為了提供更大靈活性而生的布局模型。它主要解決的是單維布局問題,即行布局或列布局。其核心概念簡...

2023-09-19 ‧ 由 hooty868 分享
DAY 4

Atomic Design?優化網頁元件架構的設計原則

當我們回首網頁設計的歷史,會發現設計的範疇從最初的靜態頁面,漸漸地演變成一個複雜、多元的生態系。 如今,我們需要的不再只是一個視覺上吸引的網頁,而是一個功能完善...

2023-09-21 ‧ 由 hooty868 分享
DAY 4

Tailwind CSS 快入上手(最熱門的CSS框架)

Tailwind CSS簡介 Tailwind CSS 是一款富有創意、高度可定制的實用程序第一的 CSS 框架,旨在快速開發現代化的用戶界面。它提供的不是預製...

2023-09-21 ‧ 由 hooty868 分享
DAY 4

深度優化圖片(2):如何實作圖片載入優化

你知道嗎?在網路的世界裡,我們對於等待是有多不耐煩的。 特別是當我們正在迫不及待地想看到那張美麗的照片時,但你的網站就是不給力,好像一開始進去都是空白頁面......

2023-09-22 ‧ 由 hooty868 分享
DAY 4

JavaScript 中的 Object 使用方法深度解析

在 JavaScript 中,Object是我們很常拿來使用的資料結構。 無論您是初學者還是資深開發者,了解 Object 提供的方法都蠻幫助你在程式碼上寫的更...

2023-09-23 ‧ 由 hooty868 分享