摘自http://www.lxweimin.com/p/431c91c8140c
1.doctype的作用是什么?
聲明文檔的解析類型(document.compatMode),目的是要告訴標準通用標記語言解析器,它應該使用什么樣的文檔類型定義(DTD)來解析文檔避免瀏覽器的怪異模式。沒有DOCTYPE的聲明,那么compatMode默認就是BackCompat(怪異模式),
2標準模式,接近標準模式,怪異模式的區別?
在標準模式頁面按照HTML,CSS的定義渲染,而在怪異模式就是瀏覽器為了兼容很早之前針對舊版本瀏覽器設計,并未嚴格遵循W3C標準而產生的一種頁面渲染模式。
(1 )盒模型:
(2)圖片元素的垂直對齊方式:
對于inline元素和table-cell元素,標準模式下vertical-align屬性默認取值為baseline,在怪異模式下,table單元格中的圖片的vertical-align屬性默認取值為bottom,因此在圖片底部會有及像素的空間。
(3)元素中的字體:
CSS中,對于font的屬性都是可以繼承的,怪異模式下,對于table元素,字體的某些元素將不會從body等其他封裝元素中繼承得到,特別是font-size屬性。
(4)內聯元素的尺寸:
標準模式下,non-replaced inline元素無法自定義大小,怪異模式下,定義這些元素的width,height屬性可以影響這些元素顯示的尺寸。
(5)元素的百分比高度:
a:CSS中對于元素的百分比高度規定如下:百分比為元素包含塊的高度,不可為負值,如果包含塊的高度沒有顯示給出,該值等同于auto,所以百分比的高度必須在父元素有高度聲明的情況下使用。
b:當一個元素使用百分比高度時,標準模式下,高度取決于內容變化,怪異模式下,百分比高度被正確應用。
(6)元素溢出的處理:
標準模式下,overflow取默認值visible,在怪異模式下,該溢出會被當做擴展box來對待,即元素的大小由其內容決定,溢出不會裁減,元素框自動調整,包含溢出內容。
3.HTML和XHTML的區別?
XHTML 是更嚴格更純凈的 HTML 代碼,指可擴展超文本標簽語言,是一個 W3C 標準
HTML 是用來描述網頁的一種語言,指的是超文本標記語言 ,是一套標記標簽
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素
4.服務器返回application/xhtml+xml格式的頁面有什么問題?
是XHTML系列文檔的類型,要求比較嚴格,必須有head、body標簽且每個元素必須是關閉的。
一些老的瀏覽器不支持
5.cookie,sessionStorage以及localStorage有什么不同?
答: sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據 有了本地數據,
就可以避免數據在瀏覽器和服務器間不必要地來回傳遞。
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可用于web請求之間保存數據。
① session保存在服務器,客戶端不知道其中的信息,數據可以保存在集群、數據庫、文件中;cookie保存在客戶端,服務器能夠知道其中的信息;
② session中保存的是對象,cookie中保存的是字符串;
③ session不能區分路徑,同一個用戶在訪問一個網站期間,所有的session在任何一個地方都可以訪問到。而cookie中如果設置了路徑參數,那么同一個網站中不同路徑下的cookie互相是訪問不到的;
④ session 的運行依賴 session id,而 session id 是存在 cookie 中的,也就是說,如果瀏覽器禁用了 cookie ,同時 session 也會失效;
⑤ 單個cookie在客戶端的限制是3K;
① cookie在瀏覽器和服務器間來回傳遞,而sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存;
② cookie不是很安全。
③ cookie儲存的數據小;4k-5M
④ 數據有效期不同,localStorage始終有效;
⑤ 作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;
⑥ sessionStorage和localStorage接口更多。
6.,以及的不同?
瀏覽器會立即加載并執行相應的腳本。也就是說在渲染script標簽之后的文檔之前,不等待后續加載的文檔元素,讀到就開始加載和執行,此舉會阻塞后續文檔的加載;
有了async(并行異步)屬性,表示后續文檔的加載和渲染與js腳本的加載和執行是并行進行的,即異步執行;------加載完就執行
有了defer屬性,加載后續文檔的過程和js腳本的加載(此時僅加載不執行)是并行進行的(異步),js腳本的執行需要等到文檔所有元素解析完成之后,DOMContentLoaded事件觸發執行之前;雖然異步但是按順序,按加載順序執行腳本
7.使用data-*屬性的好處是什么?
用于存儲頁面或應用程序的私有自定義數據,存儲的(自定義)數據能夠被頁面的 JavaScript 中利用,
屬性名不應該包含任何大寫字母,并且在前綴data- 之后必須有至少一個字符
屬性值可以是任意字符串
data-屬性是 HTML5 中的新屬性.
dataset屬性存取data-
自定義屬性的值data 去掉,后變大寫。只有在Chrome 8+ Firefox(Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+瀏覽器中實現
使用attribute方法可以存取 data-*自定義屬性的值
8.為什么說把CSS 標簽放在標簽里,把正好放在的前面是個好的主意?你知道哪些例外情況嗎?
css和JavaScript不一定寫在head里比較好,我習慣于單獨設立css和js文件,把代碼寫在里面,這樣方便查找和管理
而css和js的引用位置是放在頭部還是尾部取決于一個加載順序
當加載頭部以后會同步加載頭部中引用的文件,而css樣式表在這里加載會規定網頁的總體樣式
js如果需要先加載后運行則寫在頭里,需要其他內容加載完之后在運行則可以寫在尾部。(其他內容加載完再運行)
9.使用過哪些HTML模板語言?
Vue中文本{{}},使用 v-html 指令用于輸出 html 代碼,綁定v-bind 指令,{{JavaScript 表達式}},指令是帶有 v- 前綴的特殊屬性,v-model,|過濾器,
html模板是別人做出來的網頁模板 html是一種編程語音
10.什么是漸進式渲染?說一說你所了解的技術?
對渲染進行分割 從具體的使用的場景, 不同的 Level 實際上對應不同的頁面內容,論壇是一個比較清晰的例子, 想象一個論壇:
網頁的靜態部分, HTML 固定的內容, 比如導航欄和底部
頁面首屏的內容, 比如一個論壇的話題
頁面首屏看不到的內容, 比如話題下面多少回復
切換路由才會顯示的頁面, 比如導航的另一個頁面
對于這樣的情況, 顯然有若干種可行的渲染分割的方案
全在客戶端渲染