前端開發基礎知識整理--web綜合篇

時間 2019-11-08

標籤前端開發基礎知識整理 web 綜合欄目 HTML 简体版

原文原文鏈接

awesome-frontend-interviews是一個用於整理、收集前端基礎知識的開源項目，放在Github上，內容會一直更新，歡迎提交好的內容共同進步，歡迎star。javascript

該篇是 web綜合篇，主要包含了HTML(HTML5)、http、頁面優化及其餘一些概念性的問題

doctype是什麼？標準模式與兼容模式各有什麼區別?

<!doctype>聲明必須處於HTML文檔的頭部，在<html>標籤以前，HTML5中不區分大小寫,它告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點沒法工做。css

行內元素、塊級元素、空(void)元素分別是什麼？經常使用的有那些？

行內元素：行內元素不造成新內容塊，即在其左右能夠有其餘元素，常見的有：a、span、img、b、i、em、strong、label、input、textarea、select、button、sub、sup、q
塊級元素：塊級元素佔據其父元素（容器）橫向的整個內容區域，常見的有：div、ul、ol、li、dl、dt、dd、h1-h六、p、table、form、hr、iframe、pre，html5增長的有：header、nav、section、article、aside、footer、audio、video
空元素：沒有內容的 HTML 元素，常見的空元素： br、hr、img 、input 、link 、meta

href和src區別? title和alt

href: 指定網絡資源的位置（超文本引用），從而在當前元素或者當前文檔和由當前屬性定義的須要的錨點或資源之間定義一個連接或者關係，在 link和a 等元素上使用
src: 屬性僅僅嵌入當前資源到當前文檔元素定義的位置，是頁面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用
title: 既是html標籤，又是html屬性，title做爲屬性時，用來爲元素提供額外說明信息,一般當鼠標滑動到元素上的時候顯示
alt: alt是html標籤的屬性，alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用於網頁中圖片沒法正常顯示時給用戶提供文字說明使其瞭解圖像信息

iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。html

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。前端

繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失;
sessionStorage 的數據在瀏覽器關閉後自動刪除;
語意化更好的內容元素，好比 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;

移除的元素：html5

純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：java

IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。
也能夠直接使用成熟的框架、好比html5shim

如何區分HTML5： DOCTYPE聲明新增的結構元素功能元素css3

HTML5的離線儲存怎麼使用，工做原理？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。git

原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。github

如何使用：web

一、頁面頭部像下面同樣加入一個manifest的屬性；

二、在cache.manifest文件的編寫離線存儲的資源；

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html

三、在離線狀態時，操做window.applicationCache進行需求實現。

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

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

如何理解HTML結構的語義化？

HTML結構的語義化是指經過使用包含語義的標籤恰當地表示文檔結構，語義化的好處：

搜索引擎友好
便於團隊開發和維護
去掉樣式或樣式丟失後，頁面也能呈現清晰的結構
能夠更好的被屏幕閱讀器能夠讀出網內容

漸進加強和優雅降級？

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容

HTTP中GET與POST的區別？

關於這個題目，曾經有一篇文章一度很火：99%的人都理解錯了HTTP中GET與POST的區別，後來劇情反轉，知乎出現一篇：據說『99% 的人都理解錯了 HTTP 中 GET 與 POST 的區別』？？

下面引用w3schools的解答：

GET 方法

可被緩存
保留在瀏覽器歷史記錄中
可被收藏爲書籤
不該在處理敏感數據時使用
有長度限制
只應當用於取回數據

POST 方法

不會被緩存
不會保留在瀏覽器歷史記錄中
不能被收藏爲書籤
對數據長度沒有要求

如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

WebSocket、SharedWorker，也能夠調用localstorge、cookies等本地存儲方式，監聽localstorge的改變來觸發一個事件，經過這個事件，控制它的值來進行頁面信息通訊（注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常）

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket
ActiveX HTMLFile (IE)
基於 multipart 編碼發送 XHR
基於長輪詢的 XHR

在瀏覽器中輸入URL到整個頁面顯示在用戶面前時這個過程當中到底發生了什麼？

這個題目好像是必考題了，大神能夠講幾天，推薦這篇文章：從輸入 URL 到頁面加載完成的過程當中都發生了什麼事情？

從網上找到的簡答版本以下：

瀏覽器會開啓一個線程來處理這個請求，對 URL 分析判斷若是是 http 協議就按照 Web 方式來處理;
調用瀏覽器內核中的對應方法，好比 WebView 中的 loadUrl 方法;
經過DNS解析獲取網址的IP地址，設置 UA 等信息發出第二個GET請求;
進行HTTP協議會話，客戶端發送報頭(請求報頭);
進入到web服務器上的 Web Server，如 Apache、Tomcat、Node.JS 等服務器;
進入部署好的後端應用，如 PHP、Java、JavaScript、Python 等，找到對應的請求處理;
處理結束回饋報頭，此處若是瀏覽器訪問過，緩存上有對應資源，會與服務器最後修改時間對比，一致則返回304;
瀏覽器開始下載html文檔(響應報頭，狀態碼200)，同時使用緩存;
文檔樹創建，根據標記請求所需指定MIME類型的文件（好比css、js）,同時設置了cookie;
頁面開始渲染DOM，JS根據DOM API操做DOM,執行事件綁定等，頁面顯示完成

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

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

前端優化方式有哪些方式？

前端優化的途徑有不少，按粒度大體能夠分爲兩類，第一類是頁面級別的優化，第二類則是代碼層面的優化。

頁面級別的優化：

這個就不得不看看雅虎軍規35條了，中文版的能夠看看毫秒必爭，前端網頁性能最佳實踐，主要是對雅虎軍規35條的實踐和總結

性能優化的原則是：多使用內存、緩存或者其餘方法減小CPU計算、減小網絡請求、減小IO

代碼層面的優化, 列舉部分：

少用全局變量
用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能
緩存DOM節點查找的結果
避免使用CSS表達式
避免全局查詢
避免使用with(with會建立本身的做用域，會增長做用域鏈長度)、eval(容易用錯、性能差、容易引發安全問題)、Function(一樣性能差，和eval同樣，都不利於壓縮工具執行壓縮)
多個變量聲明合併
避免圖片和iframe等的空src。空src會從新加載當前頁面，影響速度和效率
儘可能避免寫在HTML標籤中寫style屬性
不濫用float,float在渲染時計算量比較大，儘可能減小使用

隨着CSS3的廣泛，同時須要注意優化的點：

儘可能使用css3動畫，開啓硬件加速
移動端適當使用touch事件代替click事件
避免使用css3漸變陰影效果
能夠用 transform: translateZ(0) 來開啓硬件加速
不濫用web字體,web字體須要下載，解析，重繪當前頁面，儘可能減小使用
合理使用requestAnimationFrame動畫代替setTimeout
CSS中的屬性（CSS3 transitions、CSS3 3D transforms、opacity、canvas、webGL、video）會觸發GPU渲染，要合理使用，過渡使用會引起手機過耗電增長

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。