14 篇有 "web browser" 標籤的文章
SSR 與 CSR 深度解析：從渲染方式到效能最佳化
本文詳細比較 SSR (Server-Side Rendering，伺服器端渲染) 與 CSR (Client-Side Rendering，客戶端渲染) 的特點和優缺點，並探討如何最佳化效能。了解渲染技術背後的原理，以便選擇適合您專案的策略。 目錄 CSR (Client…
Read more →每個軟體工程師都應該懂的HTTPS：深入淺出加密原理、TLS協議
HTTPS 不僅是資訊安全中不可或缺的要角，對軟體工程師而言也是很必要的知識。簡單的說，HTTPS 是安全版本的 HTTP。HTTP 和 HTTPS 的差別在於，HTTPS 使用 TLS 協議來加密 HTTP 請求和回應。TLS…
Read more →經典前端面試題：從瀏覽器網址列輸入 URL 按下 enter 發生了什麼？
從瀏覽器網址列輸入URL按下enter發生了什麼？這個問題是一道常見的面試題，其中至少包含了域名解析、建立 TCP 連接、發起 HTTP(S) 請求、伺服器處理並返回請求、瀏覽器渲染頁面等步驟。 域名解析 (DNS Lookup) 建立 TCP 連接 瀏覽器發起 HTTP(S…
Read more →HTTP/2
Reference https://developers-google-com.translate.goog/web/fundamentals/performance/http2?_x_tr_sl=auto&_x_tr_tl=zh-TW&_x_tr_hl=zh-TW&_x_tr…
Read more →深入了解 CORS (跨來源資源共用): 如何正確設定 CORS？
這篇文章將會帶你了解 CORS (Cross-Origin Resource Sharing) 的概念和設定方法，確保您的網站能在遵守同源政策的前提下正確處理跨來源請求。學習如何設定 Access-Control-Allow-Methods、Access-Control…
Read more →Cookie 是什麼：如何使用 JavaScript 操作 document.cookie
了解什麼是 cookie，學習如何使用 JavaScript 讀取和設定 cookie，掌握 Path、Domain、Max-Age、Expires、Secure、HttpOnly、SameSite 等參數的應用，並深入探討 cookie 安全性議題。 目錄 Cookie…
Read more →Web Share API - Navigator.share() 介紹
Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。 目錄 Web Share API 是什麼？ Web Share API…
Read more →如何用 Intersection Observer API 實作 Infinite Scroll/Lazy Loading
現代瀏覽器提供的 Intersection Observer API 非常適合用來實現 Infinite Scroll 和 Lazy Loading 等前端常見的需求。這篇文章將會教你 Intersection Observer API…
Read more →深入了解 getBoundingClientRect() 函數，輕鬆獲得元素的大小和位置
本文詳細介紹實用方法 getBoundingClientRect()，以及 left、top、right、bottom、width、height 等相關屬性，並教你如何搭配 window.pageXOffset 和 window.pageYOffset…
Read more →DOM 元素尺寸與位置：clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft 詳解
本文詳細介紹 JavaScript 中常用的 DOM 元素尺寸和位置屬性，包括 clientHeight, clientWidth, offsetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop…
Read more →Preload, Prefetch 和 Preconnect 的差異
現代瀏覽器提供了 preload、prefetch 和 preconnect 等功能，能讓開發者指定 link tag 的 rel 屬性提示瀏覽器提前下載圖片、JS、CSS等資源，以達到最佳化效能的效果。這篇文章將會教你這三種 resource hint…
Read more →瀏覽器事件：Event Bubbling, Event Capturing 及 Event Delegation
這篇教學介紹瀏覽器事件的運作原理，包含event bubbling、event capturing。第二部分介紹event delegation的寫法及應用時機。教學內容主要參考javacript.info 的 Introduction into Events。 目錄 Event…
Read more →如何使用 img srcset 讓圖片在 RWD 網頁顯示適當解析度
這篇文章將會教你如何設定 img 的 srcset 屬性，依據螢幕的 pixel density 或是寬度載入適當解析度的圖片，達成圖片的 RWD 效果；另外也會教你如何使用 HTML5 picture 標籤設定不同解析度下的多組圖片。 目錄 TL;DR img srcset…
Read more →瀏覽器渲染效能最佳化 (Browser Rendering Optimization)
這篇教學簡介瀏覽器轉譯/渲染(Browser Rendering)的原理，如何使用Chrome DevTool找到效能瓶頸，以及如何避開導致效能瓶頸的作法。 Critical Rendering Path What Goes Into One Frame? Layout and…
Read more →