前端面試問題集-1

Meow Meow Picture

目錄


常見問題


描述漸進漸強和優美退化的差異

漸進漸強

從基本功能開始開發，保證系統在各種環境都可以執行，再逐步增加功能及提升使用者體驗。

初期投入的成本較高，但以長遠來看是較為穩定的。

優美退化

開發系統時，就針對最新最完善的環境來設計。而對於較舊的平台僅提供基本功能，而非完整功能。

初期僅針對某個環境進行開發，適合用於產品雛形開發。

說出三種能加快網頁讀取速度的方法

  1. 將 Javascript 和 CSS 瘦身：將不必要的程式碼拿掉
  2. 外部載入 Javascript 和 CSS：避免將 Javascript 和 CSS 直接寫在頁面上
  3. 使用 CSS Sprites 減少載入圖片載入次數

什麼是 FOUC？ 如何避免 FOUC？

Flash of Unstyled Content

瀏覽器加載網頁時會出現短暫的 CSS 失效畫面
瀏覽器會先加整個畫面的 DOM，再載入外部的 CSS，
這中間的過渡期就會產生 FOUC

原因大致為

1. 使用 import 方法匯入樣式表。
2. 將樣式表放在頁面底部。
3. 有幾個樣式表，放在 html 結構的不同位置。

原理

當樣式表晚於結構性 html 載入，當載入到此樣式表時，頁面將停止之前的渲染。
此樣式表被下載和解析後，將重新渲染頁面，也就出現了短暫的花屏現象。

解決方法

使用 LINK 標籤將樣式表放在文件 HEAD 中。

HTML 問題


DOCTYPE 做什麼用的？

Document Type 縮寫，此宣告是為了讓網頁符合 W3C 的標準化，檢查所編寫 HTML、XHTML 的標籤是採用什麼樣的版本。

standards mode 和 quirks mode 有什麼不同？

standards mode

有宣告doctype

quirks mode

沒有宣告doctype，使用較舊的瀏覽器模式。

Box Model 定義不同

standards mode： width代表內容寬

quirks mode：width包含內容寬 + padding + border

data- 屬性的好處在哪？

前端開發者提供自定義屬性，這些屬性集可以通過對象的 dataset 屬性獲取，
不支持該屬性的瀏覽器可以通過 getAttribute 方法獲取

需要注意的是：

data-之後的以連字符分割的多個單詞組成的屬性，獲取的時候使用 駝峰 風格。


組成 HTML5 的技術有哪些？

  • 語意標籤
  • video、audio
  • canvas
  • communication API
  • geolocation API
  • data storage

請描述 cookies, sessionStorage 和 localStorage 的不同？

cookies

每個HTTP request都會送到伺服器端，拖慢載入速度和頻寬。

sessionStorage、localStorage

HTML5新增的功能，儲存在本機。

sessionStorage

生命週期僅存活到瀏覽器或頁面關閉

locationStorage

生命週期較長，要等到使用 Javascript 清空 localStorage 或清空 cache 才會消失。

描述下列之間的不同 <script> 和 <script async> 和 <script defer>。

<script src="demo.js"></script>

webpage render 會停止，等到 demo.js 載入完畢才會繼續 render。


<script src="demo.js" async></script>

wepage render 不會停止，demo.js 在背景載入。

demo.js 載入完畢，render 停止，開始執行 demo.js。

demo.js 執行完畢，render 繼續。


<script src="demo.js" defer></script>

webpage render 不會停止，demo.js 在背景載入

等到 webpage 載入完畢才會執行 demo.js


什麼是漸進式呈現？

用於提高網頁性能，盡快呈現頁面的技術。

EX： 圖片加載

頁面上圖片不會一次載入，當用戶滾動頁面到圖片部分時，JavaScript 才加載並顯示圖片。


參考來源

https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese-traditional/