simonallen 技術部落格

Sign in Subscribe

HTML

淺談 Web EME API

淺談 Web EME API

什麼是 EME？ EME 是簡稱，全名 Encrypted Media Extensions （加密媒體擴充 API），它現在是瀏覽器標準內建的 Web API，讓瀏覽器可以播放受 DRM 保護的影片。使用它的核心目標是讓 HTML5 <video> 支援加密內容，並確保只有合法授權的使用者能夠解碼和播放影片。要注意的是： EME 不負責解密影片，它只是 API，提供 Interface 與電腦底層 DRM 系統溝通的機制。為什麼需要 EME？早年大多數的線上影音網站使用 Flash 或 Silverlight 來播放影片（這些技術也有實作 DRM 的保護機制，例如 Flash 的 Flash Media Rights Management、

改善網站效能：將 icon 轉為 font 字型

改善網站效能：將 icon 轉為 font 字型

現代網站設計中充滿了各式各樣的 icon，若是自有品牌或產品，設計師更常會為了強化視覺一致性而客製一整套的 icon 圖示。而從我們工程師的角度來看，icon 本質上就是一種圖片，既然是圖片的一種形式，當 icon 使用量一多，自然就會牽涉到與圖片相同的效能問題。為什麼 icon 太多會影響效能？為什麼 icon 太多會影響效能？通常 icon 是以圖片檔案（例如： SVG 或 PNG ）呈現，若網站載入時每個 icon 圖示都會觸發一個 HTTP Request，不僅延長載入時間，一次大量圖片載入會增加 Render 渲染時間或主執行緒負擔。別忘了，Client Browser 的 JavaScript 執行是單執行緒，無論是同步或非同步操作，本質上都還是在爭奪主執行緒資源。如果沒有另外開啟 Web Worker，圖片的下載、解析與渲染過程都會壓在主執行緒上，

Next.js 入門：由 CRA 至 Gatsby 與 Next.js

此文不會講解為什麼 SSR 對 SEO 和 LCP 有幫助的原因如果不懂 LCP 是什麼，可見 Google 關於 LCP 指標的說明如果連 SPA 和 SSR 是什麼都不太懂，可以參考 Huli 大大寫的跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR 前言前陣子的 React 生態圈可謂是振奮人心，官方在今年 6 月初公布了 18 版的計畫，其中基於 Suspense 的 Server Side Rendering 架構另許多開發者眼睛一亮，畢竟從 Client Side Rendering (以下簡稱 CSR)跨到

Next.js 入門：使用 next export 輸出 static file

此篇以 Next.js 11.0.1 版為主，內容僅供參考。若要使用 Next.js SSG 額外輸出 static HTML，不打算把 SSG 的內容置於 Next.js 的 Node.js Server 上的話，光靠目前 package.json 的 scripts 指令是不夠的，我們需要使用 next export。修改 package.json scripts 使用 create-next-app 建立好預設 Next 專案後，到 package.json 修改 scripts，在 "

用 HTML br 替換 ↵ 換行前先想一想

這篇算是一個隨手紀錄，不要輕易用 <br/> 替換換行 ↵，先想想有沒有其他的方式。起因前陣子在處理前人的 Legacy code，有個情境是使用者在後台頁面輸入文章，前端把其 show 在前台頁面上。當然後端會在需顯示的前台頁面 API 將其(字串)發過來，這個字串不包含 HTML 標籤，可能包含換行符號，為了處理這個狀況，前人寫了個共用 function 來將換行符號替換成 HTML <br/> 標籤，例如： const setTextLineFeed = text => text.replace(/\n/g,'<br/>'); 將後端傳來包含換行符號的字串，先丟進這個 function

自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad？ 1. 減少頻寬浪費圖片與影片是網站中最吃資源的元素之一，尤其在行動網路環境下，過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入，只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度圖片載入不只是下載，還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片，提升 First Paint 時間，讓內容更快顯示。 3. 強化使用者體驗使用者更快看到畫面上可見的內容，自然會覺得「這網頁好快」。反之，如果等圖卡住了頁面，體驗就會大打折扣。各大網站 LazyLoad 的應用範例 PChome 先顯示灰底圖片，等圖片載入後才替換。 ETtoday 有 loading 動畫的底圖，載入圖片後再替換。 Medium 的高級做法：漸進式圖片置換 Medium 的做法分成三階段： 1.

IE 議題

前陣子與到各種 IE 問題真的有夠痛苦，實在不理解為什麼都 2019 年了還要支援到 IE9？IE11 就算了，IE9 欸？？IE 有多少使用量不就 GA 報表一看就知道了嗎？主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了，哀抱怨歸抱怨，這裡紀錄一下遇到的問題：問題：HTML 5 的 input placeholder 這個屬性 attribute，要在 IE10 才支援解決：在與 PO 討論後、請資深 RD 與 PO 討論後，請 RD Leader 再和