第一部分：基礎篇（一）

HTML、HTTP、web綜合問題

1.前端須要注意哪些SEO

• 合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
• 語義化的HTML代碼，符合W3C規範：語義化代碼讓搜引擎容易理解網頁
• 重要的內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
• 重要內容不要用js輸出：爬蟲不會執行js獲取的內容
• 少用iframe:搜索引擎不會抓取iframe中的內容
• 非裝飾性圖片必須加alt
• 提升網站速度： 網站速度是搜索引擎排序的一個重要指標

2.<img>的title和alt有什麼區別

• title屬性當鼠標滑動到元素上時顯示內容
• alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提升圖片可訪問i性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析

3.HTTP的幾種請求方法用途

• GET方法

  • 發送一個請求來取得服務器上的某一資源

• POST方法

  • 向URL指定的資源提交數據或附加新的數據

• PUT方法

  • 跟POST方法很像，也是想服務器提交數據。可是，它們之間有不一樣。PUT指定了資源在服務器上的位置，而POST沒有

• HEAD方法

  • 只請求頁面的首部

• DELETE方法

  • 刪除服務器上的某資源

• OPTIONS方法

  • 它用於獲取當前URL所支持的方法。若是請求成功，會有一個Allow的頭包含相似「GET,POST」這樣的信息

• TRACE方法

  • TRACE方法被用於激發一個遠程的，應用層的請求消息迴路

• CONNECT方法

  • 把請求鏈接轉換到透明的TCP/IP通道

4.從瀏覽器地址欄輸入url到顯示頁面的步驟

基礎版本

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發送請求;
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖像等）;
• 瀏覽器對加載到資源 （HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構，如（HTML的DOM）;
• 載入解析到的資源文件，渲染頁面，完成。

詳細版

1. DNS解析

• 將域名解析爲ip地址

• 走緩存

• 瀏覽器DNS緩存

• 本機DNS緩存

• 路由器DNS緩存

• 網絡運營商服務器DNS緩存 （80%的DNS解析在這完成的）

• 遞歸查詢 www.a.b.com.cn

2. TCP鏈接

• TCP三次握手
  • 第一次握手：瀏覽器發給服務器，告訴服務器，我將要發送請求
  • 第二次握手：服務器發送瀏覽器，告訴瀏覽器，我準備好了，你放馬過來
  • 第三次握手：瀏覽器發送服務器，告訴瀏覽器，我來了

3. 發送請求

   • 請求報文

4. 返回響應

   • 響應報文

5. 解析報文，渲染頁面

• 先預解析（將須要發送請求的標籤的請求發出去）

• 從上到下解析html文件

  • 遇到HTML標籤，調用html解析器將其解析DOM樹

  • 遇到css標記，調用css解析器將其解析CSSOM樹

    • link 阻塞 - 爲了解決閃屏，全部解決閃屏的樣式

    • style 非阻塞，與閃屏的樣式不相關的

• 將DOM樹和CSSOM樹結合在一塊兒，造成render樹

• layout佈局 render渲染

• 遇到script標籤，阻塞，調用js解析器解析js代碼，可能會修改DOM樹，也可能會修改CSSOM樹，

• 將DOM樹和CSSOM樹結合在一塊兒，造成render樹

• layout佈局 render渲染（重排重繪）

• script標籤的屬性

  • async 異步 誰先回來誰就先解析，不阻塞
  • defer 異步 按照前後順序（defer）解析，不阻塞

• script標籤放在body下，放置屢次重排重繪，可以操做dom

6. 斷開連接

• TCP四次揮手（瀏覽器揮手兩次，服務器揮手兩次。 斷開請求須要兩次揮手, 斷開響應須要兩次揮手）

• 第一次揮手：瀏覽器發送服務器，告訴服務器，我東西（請求報文）發完了，服務器準備關閉

• 第二次揮手：服務器發送瀏覽器，告訴瀏覽器，我東西接受完了，我準備關閉，你也準備關閉

• 第三次揮手：服務器發送瀏覽器，告訴瀏覽器，我東西（響應報文）發完了，瀏覽器準備關閉

• 第四次揮手：瀏覽器發送服務器，告訴服務器，我東西接受完了，我準備關閉，你也準備關閉

5.如何進行網站性能優化

• content方面
  • 減小HTTP請求：合併文件、CSS精靈、inline Image
  • 減小DNS查詢：DNS緩存、將資源分佈到恰當數量的主機名
  • 減小DOM元素數量
• Server方面
  • 使用CDN
  • 配置ETag
  • 對組件使用Gzip壓縮
• Cookie方面
  • 減少cookie大小
• css方面
  • 將樣式表放到頁面頂部
  • 不使用CSS表達式
  • 使用<link> 不使用@import
• javascript方面
  • 將腳本放到頁面底部
  • 將javascritpt 和css從外部引入
  • 壓縮javascript 和css
  • 刪除不須要的腳本
  • 減小DOM訪問
• 圖片方面
  • 優化圖片：根據實際顏色須要選擇色深、壓縮
  • 優化css精靈
  • 不要在HTML中拉伸圖片

6.HTTP狀態碼及其含義

• 1xx：信息狀態碼
  • 100 Continue繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
• 2xx:成功狀態碼
  • 200 ok 正常返回信息
  • 201 Created 請求成功而且服務器建立了新的資源
  • 202 Accepted服務器已接受請求，但還沒有處理
• 3xx： 重定向
  • 301 Move Permanently 請求的網頁已永久移動到新網址，搜索引擎抓新網址內容和新網址
  • 302 Found臨時重定向，資源臨時被轉移到新網址，搜索引擎抓新網址內容和舊網址
  • 303 See Other 臨時性重定向，且老是使用 GET 請求新的 URI。
  • 304 Not Modified 資源重定向瀏覽器緩存中 自從上次請求後，請求的網頁未被修改過
• 4xx:客戶端錯誤
  • 400 Bad Requset服務爲其沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求
  • 401 Unauthorized請求未受權。
  • 403 Forbidden 禁止訪問
  • 404 Not Found 找不到如何與URI相匹配的資源。輸入網址有誤
• 5xx:服務器錯誤
  • 500 Internal Server Error 最多見的服務器端錯誤。
  • 503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

7. 語義化的理解

• 用正確的標籤作正確的事情！
• HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析。
• 在沒有css樣式狀況下也以一種文檔格式顯示，而且使容易閱讀的。
• 搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於SEO。
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

8.介紹一下你對瀏覽器內核的理解

• 主要分紅兩部分：渲染引擎（layout engineer或Rendering Engine）和JS引擎
• 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS），以及計算網頁的顯式方式，而後會輸出至顯式器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不用，因此渲染效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其餘須要編輯、顯式網絡內容的應用程序都須要內核
• JS引擎：解析和執行JavaScript來實現網頁的動態效果
• 最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎.有一個網頁標準計劃小組製做了一個 ACID 來測試引擎的兼容性和性能。內核的種類不少，如加上沒什麼人使用的非商業的免費內核，可能會有10多種，可是常見的瀏覽器內核能夠分這四種：Trident、Gecko、Blink、Webkit。
  • Trident(IE內核)：國內不少的雙核瀏覽器的其中一核即是 Trident，美其名曰 "兼容模式"。表明： IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、獵豹安全瀏覽器、360極速瀏覽器、百度瀏覽器等。Window10 發佈後，IE 將其內置瀏覽器命名爲 Edge，Edge 最顯著的特色就是新內核 EdgeHTML。
  • Gecko(firefox)： Mozilla FireFox(火狐瀏覽器) 採用該內核，Gecko 的特色是代碼徹底公開，所以，其可開發程度很高，全世界的程序員均可覺得其編寫代碼，增長功能。 惋惜這幾年已經沒落了， 好比 打開速度慢、升級頻繁、豬同樣的隊友flash、神同樣的對手chrome。
  • webkit(Safari)：Safari 是蘋果公司開發的瀏覽器，所用瀏覽器內核的名稱是大名鼎鼎的 WebKit。如今不少人錯誤地把 webkit 叫作 chrome內核（即便 chrome內核已是 blink 了），蘋果感受像被別人搶了媳婦，都哭暈再廁所裏面了。表明瀏覽器：傲遊瀏覽器三、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 默認瀏覽器
  • Chromium/Bink(chrome)在 Chromium 項目中研發 Blink 渲染引擎（即瀏覽器核心），內置於 Chrome 瀏覽器之中。Blink 實際上是 WebKit 的分支。大部分國產瀏覽器最新版都採用Blink內核。
  • Presto(Opera)：Presto 是挪威產瀏覽器 opera 的 "前任" 內核，爲什麼說是 "前任"，由於最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了。
• 移動端的瀏覽器內核主要說的是系統內置瀏覽器的內核：目前移動設備瀏覽器上經常使用的內核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等蘋果 iOS 平臺主要是 WebKit，Android 4.4 以前的 Android 系統瀏覽器內核是 WebKit，Android4.4 系統瀏覽器切換到了Chromium，內核是 Webkit 的分支 Blink，Windows Phone 8 系統瀏覽器內核是 Trident。

9.html5有哪些新特性、移除了哪些元素？

• html5如今已經不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長
  • 繪畫canvas
  • 用於媒體播放的video和audio
  • 本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失
  • sessionStorage 的數據在瀏覽器關閉後自動刪除
  • 語義化更好的內容元素，好比article、footer、header、nav、section
  • 表單控件，calendar、date、time、email、url、search
  • 新的技術 webworker、webscket、Geolocation
• 移除的元素：
  • 純表現的元素：basefont、big、center、font、s、strike、tt、u
  • 對可用性產生負面影響的元素：frame、frameset、noframes
• 支持HTML5新標籤
  • IE8/IE7/IE6支持經過document.createElement方法產生的標籤
  • 能夠利用這一特性讓這些瀏覽器支持html5新標籤
  • 瀏覽器支持新標籤後，還須要添加標籤默認的樣式
• 固然也能夠直接使用成熟的框架，好比html5shim

10.HTML5的離線存儲怎麼使用，工做原理能不能解釋一下？

• 在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件
• 原理：html5的離線存儲是一個基於新建的.appcache文件的緩存機制（不是存儲技術），經過這個文件上的解析清單離線存儲資源，這些資源就會想cookie同樣被存儲從了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲技的數據進行頁面展現
• 如何使用：
  • 頁面頭部加入一個mainfest的屬性。
  • 在cache.mainfest 文件中編寫離線存儲的資源。
  • 在離線狀態時，操做window.applicationCache進行需求實現

11.瀏覽器是怎麼對html5的離線存儲資源進行管理和加載的呢？

• 在線的狀況下，瀏覽器發現html頭部有mainfest屬性，它會請求mainfest文件，若是是第一次訪問app，那麼瀏覽器就會根據mainfest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app或網頁而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的mainfest文件與舊的mainfest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。
• 離線的狀況下，瀏覽器就直接使用離線存儲的資源。

12.請描述一下cookie，sessionStorage，和localStorage的區別？

• cookie 是網站爲了標示用戶身份而存儲在用戶本地終端（Client Side）上的數據（一般通過加密）
• cookie數據始終在同源的http請求中攜帶（即便不須要），就會在瀏覽器和服務器間來回傳遞
• sessionStorage和localStorage不會自動把數據發給服務器，僅保存在本地
• 存儲大小;
  • cookie 數據大小不能超過4k
  • sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多能夠達到5M或者更大
• 有期時間：
  • localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
  • sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
  • cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

13.iframe有哪些缺點

• iframe會阻塞主頁面的Onload事件
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
• 解決：
  • 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過JavaScript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題

14.WEB標準以及W3C標準是什麼？

• 標籤閉合、標籤小寫、不亂嵌套、使用外鏈CSS和JS、結構行爲表現的分離

15.xhml和html有什麼區別？

• 一個是功能上的差異
  • 主要是XHTML可其兼容各大瀏覽器、手機以及PDA，而且瀏覽器也能快速正確地編譯網頁
• 另外是書寫習慣的差異
  • XHTML元素必須被正確的嵌套，閉合，區分大小寫，文檔必須擁有根元素

16.Doctype做用？嚴格模式與混雜模式如何區分？它們有何意義

• <!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器， 用什麼文檔類型 規範來解析這個文檔
• 嚴格模式的排版和 JS 運做模式是 以該瀏覽器支持的最高標準運行
• 在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。Doctype不存在或格式不正確會致使文檔以混雜模式呈現

17.行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？行內元素和塊級元素有什麼區別？

• 行內元素有: a b span img input select strong
• 塊級元素有：div ul ol li dl dd h1~h6 p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內元素不能夠設置寬高，不獨佔一行
• 塊級元素能夠設置寬高，獨佔一行
• 塊級元素能夠包含塊級元素和內聯元素，而行內元素只能包含文本
• 塊級元素能夠設置margin和padding屬性，行內元素只有margin-left、margin-right、padding-left、padding-right起做用

18.Html全局屬性（global attribute）有哪些

• class:爲元素設置類標識
• data-: 爲元素增長自定義屬性
• draggable: 設置元素是否可拖拽
• id: 元素id，文檔內惟一
• lang: 元素內容的的語言
• style: 行內css樣式
• title: 元素相關的建議信息

19.Canvas和SVG有什麼區別？

• svg繪製出來的每個圖形的元素都是獨立的DOM節點，可以方便的綁定事件或用來修改。canvas輸出的是一整幅畫布
• svg輸出的圖形是矢量圖形，後期能夠修改參數來自由放大縮小，不會失真和鋸齒。而canvas輸出標量畫布，就像一張圖片同樣，放大會失真或者鋸齒

20.HTML爲何只須要寫

• HTML5 不基於 SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲
• 而HTML4.01基於SGML,因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

21.如何在頁面上實現一個圓形的可點擊區域？

• svg
• border-radius
• 純js實現須要一個點在不在圓上的簡單算法、獲取鼠標座標等等

22.網頁驗證是幹嗎的，是爲了解決什麼安全問題？

• 區分用戶是計算機愛是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水
• 有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試

23.viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
    // device-width  設備寬度
    // height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
    // initial-scale    默認縮放比例（初始縮放比例），爲一個數字，能夠帶小數
    // minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
    // maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
    // user-scalable    是否容許手動縮放
   
複製代碼

• 延伸提問

  • 怎麼處理移動端1px被渲染成2px的問題 局部處理

• mate標籤中的viewport屬性，initial-scale設置爲1

• rem按照設計稿標準走，外加利用transform的scale（0.5）縮小一倍便可；

全局處理

• mate標籤中的viewport屬性，initial-scale設置爲0.5
• rem按照設計稿標準走

24.渲染優化

• 禁止使用iframe（阻塞父文檔onload事件）
  • iframe會阻塞主頁面的onload事件
  • 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO
  • iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載
  • 若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題
• 禁止使用GIF圖片實現loading效果（下降cpu消耗，提高渲染性能）
• 使用css3代碼替代JS動畫（儘量避免重繪重排）
• 對於一些小圖標，可使用base64位編碼，以減小網絡請求。但不太建議大圖使用，比較耗費cpu
  • 小圖標優點在於
    • 減小HTTP請求
    • 避免文件跨域
    • 修改及時生效
• 頁面頭部的<style></style> <script></script>會阻塞頁面，（由於renderer進程中JS線程和渲染線程是互斥的）
• 頁面中空的href和src會阻塞頁面其餘資源的加載（阻塞下載進程）
• 網頁gzip，CDN託管，data緩存，圖片服務器
• 前端模板JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存ajax請求結果，每次操做本地變量，不用請求，減小請求次數
• 用innerHTML代替DOM操做，減小DOM操做次數，優化JavaScript性能
• 當須要設置的樣式不少時設置className而不是直接操做style
• 少用全局變量。緩存DOM節點查找的結果，減小IO讀取操做
• 圖片預加載，將樣式表放在頂部，將腳本放在底部，加上時間戳
• 對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO

25.meta viewport相關

<!DOCTYPE html>  <!--H5標準聲明，使用 HTML5 doctype，不區分大小寫-->
<head lang=」en」> <!--標準的 lang 屬性寫法-->
<meta charset=’utf-8′>    <!--聲明文檔使用的字符編碼-->
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/>   <!--優先使用 IE 最新版本和 Chrome-->
<meta name=」description」 content=」不超過150個字符」/>       <!--頁面描述-->
<meta name=」keywords」 content=」」/>     <!-- 頁面關鍵詞-->
<meta name=」author」 content=」name, email@gmail.com」/>    <!--網頁做者-->
<meta name=」robots」 content=」index,follow」/>      <!--搜索引擎抓取-->
<meta name=」viewport」 content=」initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no」> <!--爲移動設備添加 viewport-->
<meta name=」apple-mobile-web-app-title」 content=」標題」> <!--iOS 設備 begin-->
<meta name=」apple-mobile-web-app-capable」 content=」yes」/>  <!--添加到主屏後的標題（iOS 6 新增）
是否啓用 WebApp 全屏模式，刪除蘋果默認的工具欄和菜單欄-->
<meta name=」apple-itunes-app」 content=」app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL」>
<!--添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）-->
<meta name=」apple-mobile-web-app-status-bar-style」 content=」black」/>
<meta name=」format-detection」 content=」telphone=no, email=no」/>  <!--設置蘋果工具欄顏色-->
<meta name=」renderer」 content=」webkit」> <!-- 啓用360瀏覽器的極速模式(webkit)-->
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge」>     <!--避免IE使用兼容模式-->
<meta http-equiv=」Cache-Control」 content=」no-siteapp」 />    <!--不讓百度轉碼-->
<meta name=」HandheldFriendly」 content=」true」>     <!--針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓-->
<meta name=」MobileOptimized」 content=」320″>   <!--微軟的老式瀏覽器-->
<meta name=」screen-orientation」 content=」portrait」>   <!--uc強制豎屏-->
<meta name=」x5-orientation」 content=」portrait」>    <!--QQ強制豎屏-->
<meta name=」full-screen」 content=」yes」>              <!--UC強制全屏-->
<meta name=」x5-fullscreen」 content=」true」>       <!--QQ強制全屏-->
<meta name=」browsermode」 content=」application」>   <!--UC應用模式-->
<meta name=」x5-page-mode」 content=」app」>   <!-- QQ應用模式-->
<meta name=」msapplication-tap-highlight」 content=」no」>    <!--windows phone 點擊無高亮
設置頁面不緩存-->
<meta http-equiv=」pragma」 content=」no-cache」>
<meta http-equiv=」cache-control」 content=」no-cache」>
<meta http-equiv=」expires」 content=」0″>
複製代碼

26.你作的頁面在哪些瀏覽器測試過？這些瀏覽器的內核分別是什麼？

• IE：trident 內核
• Firefox：gecko內核
• Safari：webkit內核
• Opera:之前是presto內核，Opera現已改用Google - Chrome的Blink內核
• Chrome:Blink(基於webkit，Google與Opera Software共同開發)

27.div+css佈局較table佈局有什麼優勢？

• 改版的時候更方便 只要更改css文件
• 頁面加載速度更快、結構化更清晰、頁面顯示簡潔
• 表現與結構相分離。
• 易於優化（seo）搜索引擎更友好，排名更容易靠前

28.a：img的alt與title有何異同？b：strong與em的異同？

• alt(alt text):爲不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成tool tip`顯示)

• title(tool tip):該屬性爲設置該屬性的元素提供建議性的信息

• strong:粗體強調標籤，強調，表示內容的重要性

• em:斜體強調標籤，更強烈強調，表示內容的強調點

29.你能描述一下漸進加強和優雅降級之間的不一樣嗎？

• 漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
• 優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
• 區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

30.爲何利用多個域名來存儲網站資源會更有效？

• CDN緩存更方便
• 突破瀏覽器併發限制
• 節約cookie帶寬
• 節約主域名的鏈接數，優化頁面響應速度
• 防止沒必要要的安全問題

31.簡述一下src與href的區別

• src用於替換當前元素，href用於在當前文檔和引用資源之間確立聯繫。
• src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所咋位置，在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素

<script src ="js.js"></script> 當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部
複製代碼

• href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，若是咱們在文檔中添加
• 那麼瀏覽器會識別該文檔爲`css`文件，就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用`link`方式來加載`css`，而不是使用`@import`方式

32.知道的網頁製做會用到的圖片格式有哪些？

• png-8、png-24、jpeg、gif、svg

• 可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp,Apng。（是否有關注新技術，新鮮事物）

• Webp：WebP格式，谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

• 在質量相同的狀況下，WebP格式圖像的體積要比JPEG格式圖像小40%。

• Apng：全稱是「Animated Portable Network Graphics」, 是PNG的位圖動畫擴展，能夠實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前獲得 iOS safari 8的支持，有望代替GIF成爲下一代動態圖標準

33.在css/js代碼上線以後開發人員常常會優化性能，從用戶刷新網頁開始，一次js請求通常狀況下有哪些地方會有緩存處理？

• dns緩存，cdn緩存，瀏覽器緩存，服務器緩存

34.一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

• 圖片懶加載，在頁面上的未可視區域能夠添加一個滾動事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，若是前者小於後者，優先加載。
• 若是爲幻燈片、相冊等，可使用圖片預加載技術，將當前展現圖片的前一張和後一張優先下載。
• 若是圖片爲css圖片，可使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
• 若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。
• 若是圖片展現區域小於圖片的真實大小，則因在服務器端根據業務須要先行進行圖片壓縮，圖片壓縮後大小與展現一致。

35.web開發中會話跟蹤的方法有哪些

• cookie
• session
• url重寫
• 隱藏input
• ip地址

37.Web存儲技術總結

1、Cookie

1. 是什麼？

• 本質上是一個存儲瀏覽器端的文本

2. 做用：

• 能夠用來給瀏覽器存儲數據的
• 解決http協議無狀態問題

3. 工做原理

• 首次：瀏覽器發送請求給服務器，服務器返回響應給瀏覽器，此時返回了cookie，瀏覽器自動保存下來
• 下次：瀏覽器發送請求時就會自動攜帶上cookie，服務器經過解析cookie，從而判斷瀏覽器以前的行爲（是否登陸過），返回給瀏覽器相應響應

4. 服務器端使用

• 設置/修改cookie res.cookie(key, value, options)
• 獲取cookie app.use(cookieParser()); req.cookies
• 刪除cookie res.clearCookie(key)

5. 瀏覽器使用

• document.cookie 讀寫二合一

• document.cookie = 'hello=123;expires=' + new Date(Date.now() + 1000 * 3600 * 24);

6. cookie的有效期

• 會話cookie （瀏覽器打開到瀏覽器關閉是一次會話）
  • 會話開始時產生，會話結束自動銷燬
• 持久化cookie
  • res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 7}); 7天內生效
  • res.cookie('userId', 'sunwukong', {maxAge: 1000 * 3600 * 24 * 365 * 10}); 10年內生效，永久

7. 缺點：

• 存儲容量有限 大約4kb左右， 數量爲20個左右
• 傳輸流量比較大 若是cookie數量比較多，每次請求時都會自動攜帶cookie

2、ession

1. 是什麼？是一個存儲服務器端會話對象
2. 做用？存儲數據、解決http協議無狀態問題
3. 工做原理

• 瀏覽器首次發送給服務器請求，此時開啓會話，服務器會爲本次會話建立session對象
• 服務器會將session的id做爲cookie返回給瀏覽器，瀏覽器接受後就存起來
• 下一次瀏覽器發送請求就會自動攜帶上cookie，服務器就要解析cookie獲得session_id，
• 經過session_id找到對應session對象，而後根據session對象中的內容返回給瀏覽器相應的響應

4. 使用：

• 想將會話存儲的session進行持久化儲存，就得使用上數據庫
• 設置一箇中間件
• 從此經過 req.session 讀寫二合一

5. cookie 和 session 區別

• 儲存位置： cookie在瀏覽器端 session在服務器端
• 存儲容量大小： cookie較小 session無限大
• 傳輸流量： cookie較多 session只產生一個cookie，較小
• 安全性： cookie安全更低（保存不是敏感數據） session安全更高（登錄、註冊）

3、Webstorage

• SessionStorage和LocalStorage都是本地存儲，不會被髮送到服務器上。同時空間比Cookie大不少，通常支持5-10M
• 瀏覽器端經過 Window.sessionStorage和Window.localStorage 屬性來實現本地存儲機制。
  • Storage.getItem('key');
    • 該方法接受一個鍵名做爲參數，返回鍵名對應的值。
  • Storage.setItem('key', 'value');
    • 該方法接受一個鍵名和值做爲參數，將會把鍵值對添加到存儲中，若是鍵名存在，則更新其對應的值。
  • Storage.removeItem('key');
    • 該方法接受一個鍵名做爲參數，並把該鍵名從存儲中刪除。
  • Storage.clear()
    • 調用該方法會清空存儲中的全部鍵名
    • ·：
      • Storage 對象發生變化時（即建立/更新/刪除數據項時，重複設置相同的鍵值不會觸發該事件，Storage.clear() 方法至多觸發一次該事件）會觸發
    • 在同一個頁面內發生的改變不會起做用
    • 在相同域名下的其餘頁面發生的改變纔會起做用。(修改的頁面不會觸發事件，與它共享的頁面會觸發事件)
• 區別
  • LocalStorage是瀏覽器本地持久化存儲技術，也叫永久存儲
  • SessionStorage是瀏覽器本地臨時存儲技術，也叫會話存儲
• 使用store庫完美兼容全部瀏覽器

4、IndexDB和WebSQL

• IndexedDB 和 WebSQL 都是用於客戶端存儲大量結構化數據。
• 該API使用索引來實現對該數據的高性能搜索。
• 不一樣的是IndexedDB是非關係型，而WebSQL是關係型。
• WebSQL官方不在維護，但兼容性較好，基本不使用。
• IndexedDB在維護，兼容性較差
• 結合localForage庫使用IndexDB和WebStorage
• juejin.im/post/5bdd67…
• github.com/localForage…

5、PWA

• 漸進式網絡應用程序(Progressive Web Application - PWA)，是一種能夠提供相似於原生應用程序(native app)體驗的網絡應用程序(web app)。PWA能夠用來作不少事。其中最重要的是，在離線(offline)時應用程序可以繼續運行功能。這是經過使用名爲 Service Workers的網絡技術來實現的。
• 簡單來說：
  • 可以離線訪問資源
  • 可以使用原生系統功能
• zoumiaojiang.com/article/ama…

6、Manifest

• html5 離線緩存文件
• juejin.im/post/59cdb4…

38.GET請求報文結構是怎樣的

• 首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF
• 首行以後是若干行請求頭，包括general-header，request-header或者entity-header，每一個一行以CRLF結束
• 請求頭和消息實體之間有一個CRLF分隔
• 根據實際請求須要可能包含一個消息實體 一個請求報文例子以下：

報文首行
  GET http://localhost:3000/test?username=123&password=456 HTTP/1.1
    請求方式  請求地址  協議名/版本號 1.0 1.1 2.0
    請求方式、請求地址、get請求查詢字符串參數
  報文頭
  Host: localhost:3000
    主機地址
  Connection: keep-alive
    保持長鏈接
  Cache-Control: max-age=0
    不使用緩存    
    強緩存 Cache-Control（1.1） expires（1.0）
    協商緩存 last-modified  etag    if-modified-since if-none-match
  Upgrade-Insecure-Requests: 1
    容許使用https協議
  User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    用戶代理：瀏覽器內核版本信息
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    容許接受數據
    text/html html文件
    application/xhtml+xml xhtml文件
    application/xml;q=0.9 xml數據，優先級更低
    image/webp,image/apng 圖片的格式  webp chrome推出的壓縮程度更好的圖片，只能在android和chrome使用
    */*;q=0.8  容許接受任意文件/數據，優先級最低
  Accept-Encoding: gzip, deflate, br
    容許接受的文件壓縮格式
  Accept-Language: zh-CN,zh;q=0.9
    語言
  Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    cookie解決http協議問題。
    
 空行
 報文體
複製代碼

39.POST請求報文的結構是怎樣的

報文首行
    POST http://localhost:3000/test HTTP/1.1
    報文頭
    Host: localhost:3000
    Connection: keep-alive
    Content-Length: 29
                        請求體的長度，單位byte
    Cache-Control: max-age=0
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
    Origin: http://localhost:3000
                        訪問服務器的地址
    Content-Type: application/x-www-form-urlencoded
                        application/x-www-form-urlencoded form表單默認值，傳輸數據是採用urlencoded編碼 key=value&key=value
                        application/json 傳輸數據是json
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Referer: http://localhost:63342/class1128/01.nodejs/day03/index.html?_ijt=vdq7mfcge1jbednt6is99tah4c
                        請求來源的地址：  廣告計費、防盜鏈
    Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: Webstorm-129da853=8726c2d8-3b88-48b8-8db0-dd82e62fb79a; _ga=GA1.1.1365509058.1552220281
    報文空行
    報文體
    username=admin&password=admin
    post請求請求參數


複製代碼

40.HTTP response響應報文結構是怎樣的

• 首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
• 首行以後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
• 響應頭部和響應實體之間用一個CRLF空行分隔
• 最後是一個可能的消息實體 響應報文例子以下：

響應首行
    HTTP/1.1 200 OK
          響應狀態碼
    * 響應頭
    X-Powered-By: Express
    Content-Type: text/html; charset=utf-8
                        響應體類型
    Content-Length: 46
    ETag: W/"2e-E6oVGh8rOKZ0GZBtPMn6O0HzO+s"
    Date: Tue, 12 Mar 2019 07:27:03 GMT
    Connection: keep-alive
    * 空行
    * 響應體
    <h1>這是express服務器返回的響應</h1>
    漢字佔3字節 普通佔1字節
複製代碼