頁面為了能在各個品牌、各個版本的瀏覽器上正常顯示，需要處理各種兼容問題：將現代的 JavaScript 語法（ESNext）轉譯為舊版的 JavaScript 語法（ES5）；為不兼容的 CSS 樣式添加瀏覽器前綴（-webkit-、-moz-）；等等。 現代的前端頁面開發流程，都有相應的工具為開發者自動地處理這些兼容問題：Autoprefixer - 為 CSS 樣式，自動添加不兼容的瀏覽器前綴
postMessage 是 html5 引入的 API，postMessage 方法允許來自不同源的腳本採用異步方式進行通信，其實同源不同頁面的腳本也可以採用 postMessage 方法進行通信。 介紹 發送數據 需要在接收數據窗口的全局對象下調用該方法。 targetWindow.postMessage(message, targetOrigin, [transfer]) targetWi
利用grid佈局可以高效地實現二維佈局。但是其眾多的屬性以及屬性值，讓很多剛剛接觸的人和沒有系統性總結的人云裏霧裏，這增加了使用grid的成本。 為此，從實用角度出發，按照類別，系統性地總結了日常開發常用的知識點。 網格容器屬性 聲明元素為網格佈局 通過 display: grid 聲明某個元素為網格佈局： .wrapper { /* 聲明一個容器 */ display: grid;
在瀏覽器中，JavaScript 代碼通常是通過若干個 script 標籤引入的。而瀏覽器在執行每個 script 標籤時，會有如下特點： 每個 script 標籤引入的 JavaScript 代碼，都是一個宏任務（也就是説，微任務隊列必須在下一個script標籤執行前，全部執行完畢）。 那麼，每個 JavaScript代碼的執行機制是什麼的呢？接下來詳細介紹一下。 變量提升 每一段 Jav
在一次開發中，遇到了生成海報的需求：在圖片相冊界面用户選擇若干張圖片，在海報編輯界面用户通過拖動這些圖片生成一張海報，供用户下載。 在圖片相冊界面，圖片均展示正常且無報錯發生。當用户選擇若干張圖片之後，進入海報編輯界面前，添加cors屬性img crossOrigin=anonymous重新加載這些圖片，以便canvas處理這些圖片數據（圖片添加cors屬性原因）。神奇的是：所有的圖片均無法顯示，
一年多之前，為了能在老舊的 Vue 項目中開發 React 頁面，特地調研了一些主流的微前端框架：qiankun、無界等等。但都發現其實現的方案無法擺脱 JavaScript 的限制，不是 100%的將多個框架分離開，實施過程中，坑太多。於是採用了iframe這個天然的沙箱，將多個框架 100%分離開。從現在的角度來看，這個技術選型依然是正確的。接下來，詳細介紹一下iframe。 介紹 ifram
對於頁面的佈局，前端開發者都大概瞭解：block元素佔據網頁一整行空間，從上到下排列；多個inline元素共享網頁一整行空間，從左到右，超出橫向空間時，則向下排列。但在開發頁面時，會經常遇到浮動高度塌陷、垂直方向上的margin重疊or溢出等場景。雖然利用CSS Hack可以快速解決問題，但其背後的原理始終沒去理解。有時候某個CSS Hack還有副作用，雖然解決了問題，但又新增了其他問題；為此還需
