HTML
- HTML5語義化
cookie、sessionStorage和localStorage的區別- 爲什麼最好把 CSS 的
<link>標籤放在<head></head>之間？爲什麼最好把 JS 的<script>標籤恰好放在</body>之前，有例外情況嗎？ - 什麼是漸進式渲染（progressive rendering）
- viewport
- Reflow和Repaint
- img中的alt和元素的title屬性作用
- href和src區別
- 瀏覽器的渲染過程
- 爲何會出現瀏覽器兼容問題
- doctype有什麼用
HTML5語義化
什麼是語義化？就是用合理、正確的標籤來展示內容，比如h1~h6定義標題。
好處
- 易於用戶閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。
- 有利於SEO，搜索引擎根據標籤來確定上下文和各個關鍵字的權重。
- 方便其他設備解析，如盲人閱讀器根據語義渲染網頁
- 有利於開發和維護，語義化更具可讀性，代碼更好維護，與CSS3關係更和諧。
http://www.daqianduan.com/6549.html
cookie、sessionStorage和localStorage的區別。
上面提到的技術名詞，都是在客戶端以鍵值對存儲的存儲機制，並且只能將值存儲爲字符串。
cookie |
localStorage |
sessionStorage |
|
|---|---|---|---|
| 由誰初始化 | 客戶端或服務器，服務器可以使用Set-Cookie請求頭。 |
客戶端 | 客戶端 |
| 過期時間 | 手動設置 | 永不過期 | 當前頁面關閉時 |
| 在當前瀏覽器會話（browser sessions）中是否保持不變 | 取決於是否設置了過期時間 | 是 | 否 |
| 是否隨着每個 HTTP 請求發送給服務器 | 是，Cookies 會通過Cookie請求頭，自動發送給服務器 |
否 | 否 |
| 容量（每個域名） | 4kb | 5MB | 5MB |
| 訪問權限 | 任意窗口 | 任意窗口 | 當前頁面窗口 |
爲什麼最好把 CSS 的<link>標籤放在<head></head>之間？爲什麼最好把 JS 的<script>標籤恰好放在</body>之前，有例外情況嗎？
把<link>放在<head>中
把<link>標籤放在<head></head>之間是規範要求的內容。此外，這種做法可以讓頁面逐步呈現，提高了用戶體驗。將樣式表放在文檔底部附近，會使許多瀏覽器（包括 Internet Explorer）不能逐步呈現頁面。一些瀏覽器會阻止渲染，以避免在頁面樣式發生變化時，重新繪製頁面中的元素。這種做法可以防止呈現給用戶空白的頁面或沒有樣式的內容。
把<script>標籤恰好放在</body>之前
腳本在下載和執行期間會阻止 HTML 解析。把<script>標籤放在底部，保證 HTML 首先完成解析，將頁面儘早呈現給用戶。
例外情況是當你的腳本里包含document.write()時。但是現在，document.write()不推薦使用。同時，將<script>標籤放在底部，意味着瀏覽器不能開始下載腳本，直到整個文檔（document）被解析。也許，對此比較好的做法是，<script>使用defer屬性，放在<head>中。
什麼是漸進式渲染（progressive rendering）？
漸進式渲染是用於提高網頁性能（尤其是提高用戶感知的加載速度），以儘快呈現頁面的技術。
在以前互聯網帶寬較小的時期，這種技術更爲普遍。如今，移動終端的盛行，而移動網絡往往不穩定，漸進式渲染在現代前端開發中仍然有用武之地。
一些舉例：
- 圖片懶加載——頁面上的圖片不會一次性全部加載。當用戶滾動頁面到圖片部分時，JavaScript 將加載並顯示圖像。
- 確定顯示內容的優先級（分層次渲染）——爲了儘快將頁面呈現給用戶，頁面只包含基本的最少量的 CSS、腳本和內容，然後可以使用延遲加載腳本或監聽
DOMContentLoaded/load事件加載其他資源和內容。 - 異步加載 HTML 片段——當頁面通過後臺渲染時，把 HTML 拆分，通過異步請求，分塊發送給瀏覽器。更多相關細節可以在這裏找到。
viewport
Viewport ：字面意思爲視圖窗口，在移動web開發中使用。表示將設備瀏覽器寬度虛擬成一個特定的值（或計算得出），這樣利於移動web站點跨設備顯示效果基本一致。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。
在移動端瀏覽器當中，存在着兩種視口，一種是可見視口（也就是我們說的設備大小），另一種是視窗視口（網頁的寬度是多少）。
舉個例子：如果我們的屏幕是320像素 * 480像素的大小（iPhone4），假設在瀏覽器中，320像素的屏幕寬度能夠展示980像素寬度的內容。那麼320像素的寬度就是可見視口的寬度，而能夠顯示的980像素的寬度就是視窗視口的寬度。
爲了顯示更多的內容，大多數的瀏覽器會把自己的視窗視口擴大，簡易的理解，就是讓原本320像素的屏幕寬度能夠容下980像素甚至更寬的內容（將網頁等比例縮小）。
Viewport屬性值
- width 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
- initial-scale 設置頁面的初始縮放值，爲一個數字，可以帶小數
- minimum-scale 允許用戶的最小縮放值，爲一個數字，可以帶小數
- maximum-scale 允許用戶的最大縮放值，爲一個數字，可以帶小數
- height 設置layout viewport 的高度，這個屬性對我們並不重要，很少使用
- user-scalable 是否允許用戶進行縮放，值爲"no"或"yes", no 代表不允許，yes代表允許這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開就行了。
Reflow和Repaint
Reflow
當涉及到DOM節點的佈局屬性發生變化時，就會重新計算該屬性，瀏覽器會重新描繪相應的元素，此過程叫Reflow（迴流或重排）。
Repaint
當影響DOM元素可見性的屬性發生變化 (如 color) 時, 瀏覽器會重新描繪相應的元素, 此過程稱爲Repaint（重繪）。因此重排必然會引起重繪。
引起Repaint和Reflow的一些操作
- 調整窗口大小
- 字體大小
- 樣式表變動
- 元素內容變化，尤其是輸入控件
- CSS僞類激活，在用戶交互過程中發生
- DOM操作，DOM元素增刪、修改
- width, clientWidth, scrollTop等佈局寬高的計算
Repaint和Reflow是不可避免的，只能說對性能的影響減到最小，給出下面幾條建議：
- 避免逐條更改樣式。建議集中修改樣式，例如操作className。
- 避免頻繁操作DOM。創建一個documentFragment或div，在它上面應用所有DOM操作，最後添加到文檔裏。設置display:none的元素上操作，最後顯示出來。
- 避免頻繁讀取元素幾何屬性（例如scrollTop）。絕對定位具有複雜動畫的元素。
- 絕對定位使它脫離文檔流，避免引起父元素及後續元素大量的迴流
https://harttle.land/2015/08/11/reflow-repaint.html
http://www.blueidea.com/tech/web/2011/8365.asp
img中的alt和元素的title屬性作用
- img的alt屬性
如果無法顯示圖像，瀏覽器將顯示alt指定的內容 - 元素title屬性
在鼠標移到元素上時顯示title的內容
href和src區別
- href
href標識超文本引用，用在link和a等元素上，href是引用和頁面關聯，是在當前元素和引用資源之間建立聯繫
若在文檔中添加href ，瀏覽器會識別該文檔爲 CSS 文件，就會並行下載資源並且不會停止對當前文檔的處理。這也是爲什麼建議使用 link 方式加載 CSS，而不是使用 @import 方式。 - src
src表示引用資源，替換當前元素，用在img，script，iframe上，src是頁面內容不可缺少的一部分。
當瀏覽器解析到src ，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等也如此，類似於將所指向資源應用到當前內容。這也是爲什麼建議把 js 腳本放在底部而不是頭部的原因。
https://blog.csdn.net/lhjuejiang/article/details/80795081
瀏覽器的渲染過程
- 解析HTML生成DOM樹。
- 解析CSS生成CSSOM規則樹。
- 將DOM樹與CSSOM規則樹合併在一起生成渲染樹。
- 遍歷渲染樹開始佈局，計算每個節點的位置大小信息。
- 將渲染樹每個節點繪製到屏幕。
https://baijiahao.baidu.com/s?id=1593097105869520145&wfr=spider&for=pc
爲何會出現瀏覽器兼容問題
- 同一產品，版本越老 bug 越多
- 同一產品，版本越新，功能越多
- 不同產品，不同標準，不同實現方式
處理兼容問題的思路
- 要不要做
- 產品的角度（產品的受衆、受衆的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度 (有無必要做某件事)
2.做到什麼程度
- 讓哪些瀏覽器支持哪些效果
3..如何做
根據兼容需求選擇技術框架/庫(jquery)
根據兼容需求選擇兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
條件註釋、CSS Hack、js 能力檢測做一些修補
漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 (graceful degradation): 一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
https://github.com/jirengu/frontend-interview/issues/35
doctype有什麼用
doctype是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什麼樣的文檔類型定義（DTD）來解析文檔。
<!DOCTYPE>聲明是用來指示web瀏覽器關於頁面使用哪個HTML版本進行編寫的指令。
<!DOCTYPE>聲明必須是HTML文檔的第一行，位於html標籤之前。
瀏覽器本身分爲兩種模式，一種是標準模式，一種是怪異模式，瀏覽器通過doctype來區分這兩種模式，doctype在html中的作用就是觸發瀏覽器的標準模式，如果html中省略了doctype，瀏覽器就會進入到Quirks模式的怪異狀態，在這種模式下，有些樣式會和標準模式存在差異，而html標準和dom標準值規定了標準模式下的行爲，沒有對怪異模式做出規定，因此不同瀏覽器在怪異模式下的處理也是不同的，所以一定要在html開頭使用doctype。