資訊專欄INFORMATION COLUMN
摘要：發(fā)生在很久以前的及更老的瀏覽器向過渡時期。數(shù)據(jù)始終在同源的請求中攜帶即使不需要，會在瀏覽器和服務(wù)器間來回傳遞。存儲大小數(shù)據(jù)大小不能超過。與上面問題相連，比也是明智的選擇。表現(xiàn)與結(jié)構(gòu)相分離。兩種設(shè)計思想是有不同的考慮。
前言：
“吾生也有涯,而知也無涯，以有涯隨無涯，殆己”————莊子
閱讀本文前請做好以下心理準備：
本系列文章將不定期更新。
本系列文章不是很嚴謹。
你真的了解瀏覽器么？
HTML中的Doctype是什么鬼？
多了個X的XHTML與HTML有什么不一樣？
不常見的Quirks!
標簽語義化是神馬
Part B：標簽與屬性系列行內(nèi)元素與塊級元素都有啥？
img的alt與title有何異同？b與strong的區(qū)別、i與em的區(qū)別？
cookies,sessionStorage和localStirage區(qū)別？
link和import的區(qū)別？
src與href的區(qū)別？
Part C：前端設(shè)計與優(yōu)化系列div+css的布局較table布局有什么優(yōu)點？
漸進增強還是優(yōu)雅降級？
為什么利用多個域名來存儲網(wǎng)站資源會更有效？
在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。
Part D: HTML5系列HTML5 為什么只需要寫 ？
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
HTML5的form如何關(guān)閉自動完成功能？
答案如下 Part A：常識系列1. 你真的了解瀏覽器么？
答：該題考察常見瀏覽器和內(nèi)核。
IE：Trident內(nèi)核
Firefox：Gecko內(nèi)核
Safari：Webkit內(nèi)核
Chrome：Blink內(nèi)核（Webkit的一個分支吧）
Opera：Presto（7版本至12版本）；Blink（從14版本以后）
國產(chǎn)大雙核瀏覽器系列：就是Trident加Webkit
2. HTML中的Doctype是什么鬼？
答：簡單說，這個聲明位于文檔最前面，用于告訴瀏覽器的解析器，以什么文檔類型規(guī)范解析當前文檔。
3. 多了個X的XHTML與HTML有什么不一樣？
答：簡單說，XHTML 是以 XML 格式編寫的 HTML，要求更加嚴格。詳細的區(qū)別比如
元素語法：
XHTML 元素必須正確嵌套
XHTML 元素必須始終關(guān)閉
XHTML 元素必須小寫
XHTML 文檔必須有一個根元素
屬性語法：
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號包圍
XHTML 屬性最小化也是禁止的
更詳細的區(qū)別在[這里][1]
4. 不常見的Quirks!
答：Quirks又被稱為是怪癖模式、詭異模式、混雜模式，對應(yīng)的是Standard模式。
這是個歷史遺留問題。發(fā)生在很久以前的IE5.5及更老的瀏覽器向IE6過渡時期。
簡單說，就是以這種模式模擬老瀏覽器行為，來兼容較早的網(wǎng)頁。
詳細區(qū)別如下：
總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。
(1)盒模型：在W3C標準中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
(2)設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。
(3)設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的.
(4)用margin:0 auto設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
5. 標簽語義化是神馬
答：簡單說，用正確的標簽做正確的事情。 html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO; 使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。Part B：標簽與屬性系列
1. 行內(nèi)元素與塊級元素都有啥？
答：簡單說，塊級和行內(nèi)區(qū)別就是能不能自己占一行！ 塊級：div ul ol li p h1（標題系列） dl dt dd（描述列表系列） 行內(nèi)：span a b img input select strong 對了，還有空元素系列 常見的空元素：
鮮為人知的是：
2. img的alt與title有何異同？b與strong的區(qū)別、i與em的區(qū)別？
答：(1)alt：簡單說，就是圖片出不來時顯示的字。 官方解釋是——為不能顯示圖像、窗體或applets的用戶代理（UA）， alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。 title：簡單說，就是鼠標移過去的提示信息 官方解釋：title屬性為設(shè)置該屬性的元素提供建議性的信息。 (2)strong是標明重點內(nèi)容，有語氣加強的含義， 使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時：會重讀，而是展示強調(diào)內(nèi)容。 (3)i內(nèi)容展示為斜體，em表示強調(diào)的文本；
3. cookies,sessionStorage和localStirage區(qū)別？
答：區(qū)別主要有以下3點
保存路徑
cookie是網(wǎng)站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù) （通常經(jīng)過加密）。cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要）， 會在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲大小：
cookie數(shù)據(jù)大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制， 但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)； sessionStorage 數(shù)據(jù)在當前瀏覽器窗口關(guān)閉后自動刪除。 cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉
4. link和import的區(qū)別？
答： （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用； 而@import是CSS提供的，只能用于加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載 （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;
5. src與href的區(qū)別？
答：簡單說，src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯(lián)系。 src常用于js/img/frame等元素，href常用于a/css等。 src的元素，下載時不能干別的了。href就可以。 所以把js的src放在底部是個明智的選擇。與上面問題相連，href比@import也是明智的選擇。Part C：前端設(shè)計與優(yōu)化系列
1. div+css的布局較table布局有什么優(yōu)點？
答：table布局是很老的網(wǎng)頁設(shè)計了，時代在進步嘛，前者的優(yōu)點還很多的： (1)改版的時候更方便 只要改css文件。 (2)頁面加載速度更快、結(jié)構(gòu)化清晰、頁面顯示簡潔。 (3)表現(xiàn)與結(jié)構(gòu)相分離。 (4)易于優(yōu)化（seo）搜索引擎更友好，排名更容易靠前。
2. 漸進增強還是優(yōu)雅降級？
答：漸進增強（Progressive enhancement）：
簡單說，就是照顧老瀏覽器。先實現(xiàn)基本功能，再玩點花里胡哨的。
優(yōu)雅降級（Graceful degradation）：
簡單說，就是先構(gòu)建完整功能，再考慮老版本的兼容性。
兩種設(shè)計思想是有不同的考慮。
實話說，我更喜歡優(yōu)雅降級的。用IE6的用戶，對不起，不想做兼容了。您老升級下瀏覽器吧。。
3. 為什么利用多個域名來存儲網(wǎng)站資源會更有效？
答：(1)CDN緩存更方便
(2)突破瀏覽器并發(fā)限制
(3)節(jié)約Cookie帶寬
(4)節(jié)約主域名連接數(shù)，優(yōu)化頁面響應(yīng)速度
(5)防止不必要的安全問題
4. 在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
答：DNS緩存、CDN緩存、瀏覽器緩存、服務(wù)器緩存
5. 一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法優(yōu)化這些圖片的加載，給用戶更好的體驗。
答：這個問題有意思～
(1)圖片懶加載，在頁面上的未可視區(qū)域可以添加一個滾動條事件，
判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小于后者，優(yōu)先加載。
(2)如果為幻燈片、相冊等，可以使用圖片預加載技術(shù)，
將當前展示圖片的前一張和后一張優(yōu)先下載。
(3)如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
(4)如果圖片過大，可以使用特殊編碼的圖片，
加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
(5)如果圖片展示區(qū)域小于圖片的真實大小，
則在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。
Part D: HTML5系列
1. HTML5 為什么只需要寫 ？
答：HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行； 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
2. html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
新特性
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集， 主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。 繪畫 canvas; 用于媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失; sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除; 語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section; 表單控件，calendar、date、time、email、url、search; 新的技術(shù)webworker, websocket, Geolocation;
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes；
支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式。 當然也可以直接使用成熟的框架、比如html5shim;
如何區(qū)分HTML5：
DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素
3. HTML5的離線儲存怎么使用，工作原理能不能解釋一下？
答：在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。
原理：
HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
如何使用：
頁面頭部像下面一樣加入一個manifest的屬性；
在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。
4. 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
答：在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。
5. HTML5的form如何關(guān)閉自動完成功能？
答：給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50317.html
摘要：定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間?？梢灾缹傩杂幸韵聨讉€特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...
摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習簡歷篇 - 掘金 有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內(nèi)部推薦的機會，非常感謝他們對我的幫助?，F(xiàn)在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...
摘要：獲取的對象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據(jù)我測試不同環(huán)境結(jié)果可能有差異而就是。 花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項目地址 https:...
平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
平日學習接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個網(wǎng)址：http://www.kancloud.cn/jsfron... 03月份前端資源分享 1. Javascript 175453545 Redux compose and middleware 源碼分析 深入 Promise(二)——進擊的 Promise Effective JavaScript leeheys blog -...
閱讀 898·2023-04-25 19:17
閱讀 2199·2021-09-10 11:26
閱讀 1912·2019-08-30 15:54
閱讀 3434·2019-08-30 15:53
閱讀 2688·2019-08-30 11:20
閱讀 3406·2019-08-29 15:12
閱讀 1241·2019-08-29 13:16
閱讀 2397·2019-08-26 12:19
