又LAG隨性筆記
  • 關於我
  • 作品集
  • 生活隨筆
  • 與我聯絡
  • 隨手扎

隨手扎

September 27, 2022

你可能不知道的Call Stack

前言

Call Stack，中文「呼叫堆疊」，是一個很重要的概念。這並不是Web相關技術中特有的，不過為了解釋後續的內容，我決定安插一節說一下Call Stack的概念。

Call Stack

Stack 是一個先進後出(First-In-Last-Out / FILO)的資料結構。就像一本本書疊起來，然後只能一本本從最上面開始拿下來。

image alt

Call Stack 就是每次函式呼叫，都會將函數的環境狀態保存進Stack，函數的環境狀態通常叫做「Call Frame」，而儲存Call Frame的Stack，就是Call Stack。

最明顯的例子就是遞歸函式，比如：

function sum(accum, end) {
  if (end === 0)
    return accum;
  return sum(accum + end, end -1);
}

sum(0, 5);

sum()是將 0 到 end 之間的整數累加起來，且end必須是大於等於0的整數。

當呼叫sum(0, 5)的時候，Call Stack便會儲存這筆資訊

September 26, 2022

你可能不知道的即時更新方案:multipart/x-mixed-replace

multipart/x-mixed-replace

除了Polling、Long Polling、Server Send Event(SSE)和WebSocket以外，還可以透過multipart/x-mixed-replace來更新資料。

multipart/x-mixed-replace和Server Send Event(SSE)一樣，只能夠由Server單向傳送資料給瀏覽器。

不同的是它可能不能使用JavaScript處理更新的資料，但現在主流瀏覽器多數還是支援其中部分特性，這使得從前端部分實現非常簡單。

不再支持 XMLHttpRequest 中的 multipart 属性和 multipart/x-mixed-replace 响应。这是一个 Gecko 独有的特性，从来没被标准化过。你可以使用Server-Sent Events, Web Sockets (en-US)或者在 progress 事件中查看 responseText 属性的变化来实现同样的效果。1

Lab

資源

這次實驗會透過不斷讀取不同圖片，讓瀏覽器上不斷更新圖片內容。首先是圖片資源：

這些圖片資源名稱是： 1.jpg、2.jpg、3.jpg。後續會輪流讀取回傳給瀏覽器。

前端畫面

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>即時更新內容 - multipart/x-mixed-replace</title>
  </head>
  <body>
    <img alt="" src="/fake_video"/>
  </body>
</html>

基本上這次連JavaScript都不需要寫，只要載入一張圖片資源即可。

September 25, 2022

你可能不知道的即時更新方案:WebSocket

WebSocket

image alt

WebSocket進一步解決了Long Polling會遇到的兩個問題：

  1. 取得Response後，需要在建立一次Reqeust。
  2. 僅能夠單向傳輸更新資訊。

不過WebSocket並不是超文本傳輸協定(HyperText Transfer Protocol，HTTP)，但確實由HTTP開始的。因此首先是在瀏覽器發起Request之後，要進行協議的切換。Server會回傳切換資訊。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: gx+UXBfX3qJcxachxkN/n8/3+WQ=
Sec-WebSocket-Extensions: permessage-deflate
Date: Sun, 04 Sep 2022 10:36:52 GMT

在這之後就可以進行雙向傳輸，當然以可以用於更新畫面資料。

優點

  1. 雙向傳輸
  2. 連線可以重複使用

缺點

實現複雜。不是所有瀏覽器都支援，不過現在主流瀏覽器基本支援。對於伺服器也有一定要求，在我經驗上許多免費服務器是無法使用相關技術的。

Lab

September 24, 2022

你可能不知道的即時更新方案:Server Send Event

Server Send Event

Server Send Event(SSE)解決了Long Polling會需要建立多次Request的問題。相比起Long Polling「取得Response後，需要在建立一次Reqeust」。Server Send Event在同一次HTTP連線中，由Server送出多次更新資料。

優點

連線可重複使用。

相比起Long Polling「取得Response後，需要在建立一次Reqeust」。Server Send Event在同一次HTTP連線中，由Server送出多次更新資料。

缺點

僅能夠由Server傳送訊息到瀏覽器的單向傳輸。

Lab

前端頁面

<!-- www-data/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>即時更新內容 - Sever Send Event</title>
  </head>
  <body>
    <h1 id="content"></h1>
  </body>
  <script defer type="module">
   const DEFAULT_TIMEOUT = 30000 /*ms*/;
   const HEATBEAT_INTVAL = 5000 /*ms*/;
   const contentEl = document.querySelector('#content');

   let evtSource = new EventSource("/connect");

   /* recive default message
   evtSource.addEventListener('message', async (event) => {
       console.log(`recive message: ${event.data}`);
   })
   */


   /* recive special event - update */
   evtSource.addEventListener('update', (event) => {
       contentEl.innerText = event.data;
   });
</script>
</html>

前端頁面實現也算是簡單的，透過EventSource()建立Server Send Event來源的連線。透過監聽message或<event>來取得更新資訊。

後端API

September 23, 2022

你可能不知道的即時更新方案:Long Polling

Long Polling

Polling 有兩個明顯的缺點：

  1. 就算資料沒有更新，也會有一次 Request / Response 的來回。
  2. 資料有了更新，也需要等待下一次的Request才會知道。

Long Polling解決了這兩個問題。

雖然行為概觀上與Polling一樣，是一次Request後得到Response，才再發出一個Request。但是Reponse的回傳可能會拉的老長，過了許久才回應，像彗星(Comet)一樣。也確實有一種方式就叫做彗星(Comet)，Long Polling是他的變種1。

在Long Polling模式下，有一個長期連線，這個連線在資料一更新時，變會回傳Response，並結束此輪連線，然後再發起一次長連線請求，以做到即時更新的效果。

有一段時間在Facebook、Plurk可以見得此種方式。甚至現在還在Facebook、Plurk還是可以見得一些Request長時間沒有Response，不過我無法確定是否同為Long Polling。

下圖是Plurk的部份網路請求節圖。其中可以看到一個/connect相關的請求，並過一段時間後才返回Response，隨後又建立一比連線：

September 22, 2022

你可能不知道的即時更新方案:Polling

靜態網頁 & 動態網頁

全球資訊網路(World Wide Web, WWW)最早用於學術研究機構，用於分享研究報告成果。起初常見型態為：資訊分享者自行建立Web伺服器，提供HTML靜態頁面，讓資訊受者透過瀏覽器取得資訊。

英國科學家提姆·柏內茲-李於1989年發明了全球資訊網。1990年他在瑞士CERN的工作期間編寫了第一個網頁瀏覽器。網頁瀏覽器於1991年1月向其他研究機構發行，並於同年8月向公眾開放。1

「資訊分享者自行建立Web伺服器，提供HTML靜態頁面，讓資訊受者透過瀏覽器取得資訊」這從現在來看，可能分成兩個不同維度的類型：

  1. Web 1.0: 資訊分享者自行建立Web伺服器。用戶只能單向被動的接受由權威內容服務提供商提供的內容，用戶大部分為內容消費者，而網站則由內容驅動2
  2. 靜態內容網頁。網頁內容並不會因為內容接收者的不同、時間地區的不同而有所不同。

隨後出現部落格平台、線上論壇，出現可以提供資訊內容的網站使用者。在此，網站內容不再簡單以HTMl方式儲存，更多的內容儲存於資料庫，由使用者提供，動態的提供給瀏覽器。這是 動態網頁 和 Web 2.0 。

此外伴隨者瀏覽器腳本語言與API的逐漸統一，確立了 ECMAScript / JavaScript 在瀏覽器的地位，結束了過往百家爭鳴的情況(不過現在還有一些原生支援特殊腳本語言的瀏覽器存在，但JavaScript已成主流)。 似動非動，吸引人眼球由JS、CSS建立動畫效果的網頁內容開始玲瑯滿目地出現。

1996年11月，網景正式向ECMA（歐洲電腦製造商協會）提交語言標準。1997年6月，ECMA以JavaScript語言為基礎制定了ECMAScript標準規範ECMA-262。JavaScript成為了ECMAScript最著名的實現之一。除此之外，ActionScript和JScript也都是ECMAScript規範的實作語言。3

其中也還有另一個令人興奮、今天廣泛使用的技術出現： Ajax(Asynchronous JavaScript and XML)。

在現今，Ajax技術主要以XMLHttpRequest和fetch兩個API呈現。也可能隱藏在jQuery4、Axios等比較高層次的套件函式庫之下。

這也使得由瀏覽器處理、在前端渲染生成不同內容的畫面成為可能。儘管這不是當前唯一的技術方式，但有許多別具特色的功能、前後分離的網站都依賴者這項能力。

接著就讓我們來探索幾個取得更新資訊的模式吧！

  • ««
  • «
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  •  … 
  • 34
  • »
  • »»
© 又LAG隨性筆記 2025