1茅主、常用那幾種瀏覽器測(cè)試?有哪些內(nèi)核****(Layout Engine)?
1土榴、瀏覽器:IE诀姚,Chrome,F(xiàn)ireFox玷禽,Safari赫段,Opera。
2矢赁、內(nèi)核:Trident糯笙,Gecko,Presto撩银,Webkit给涕。
2、 說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別蜒蕾?行內(nèi)塊元素的兼容性使用?(****IE8 以下)
行內(nèi)元素:會(huì)在水平方向排列焕阿,不能包含塊級(jí)元素咪啡,設(shè)置width無(wú)效,height無(wú)效(可以設(shè)置line-height)暮屡,margin上下無(wú)效撤摸,padding上下無(wú)效。
塊級(jí)元素:各占據(jù)一行,垂直方向排列准夷。從新行開(kāi)始結(jié)束接著一個(gè)斷行钥飞。
兼容性:display:inline-block;display:inline;zoom:1;
3、 清除浮動(dòng)有哪些方式衫嵌?比較好的方式是哪一種读宙?
(1)父級(jí)div定義height。
(2)結(jié)尾處加空div標(biāo)簽clear:both楔绞。
(3)父級(jí)div定義偽類(lèi):after和zoom结闸。
(4)父級(jí)div定義overflow:hidden。
(5)父級(jí)div定義overflow:auto酒朵。
(6)父級(jí)div也浮動(dòng)桦锄,需要定義寬度。
(7)父級(jí)div定義display:table蔫耽。
(8)結(jié)尾處加br標(biāo)簽clear:both结耀。
(Q2) 比較好的是第3種方式,好多網(wǎng)站都這么用匙铡。
4图甜、****box-sizing常用的屬性有哪些?分別有什么作用慰枕?
box-sizing: content-box|border-box|inherit;
content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框具则。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制具帮。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度博肋。
5、****Doctype作用蜂厅?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別****?
1匪凡、告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)掘猿。
2病游、標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中稠通,頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作衬衬。
6、****HTML5 為什么只需要寫(xiě)<!DOCTYPE html> 改橘?
HTML5不基于 SGML滋尉,因此不需要對(duì)DTD進(jìn)行引用,但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)飞主。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用狮惜,才能告知瀏覽器文檔所使用的文檔類(lèi)型高诺。
7、 頁(yè)面導(dǎo)入樣式時(shí)碾篡,使用****link和****@import有什么區(qū)別虱而?
(1)link屬于XHTML標(biāo)簽,除了加載CSS外开泽,還能用于定義RSS, 定義rel連接屬性等作用牡拇;而@import是CSS提供的,只能用于加載CSS;
(2)頁(yè)面被加載的時(shí)眼姐,link會(huì)同時(shí)被加載诅迷,而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
(3)import是CSS2.1 提出的,只在IE5以上才能被識(shí)別众旗,而link是XHTML標(biāo)簽罢杉,無(wú)兼容問(wèn)題。
8贡歧、介紹一下你對(duì)瀏覽器內(nèi)核的理解滩租?
主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
1利朵、渲染引擎:負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML律想、XML、圖像等等)绍弟、整理訊息(例如加入CSS等)技即,以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后會(huì)輸出至顯示器或打印機(jī)樟遣。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同而叼,所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器豹悬、電子郵件客戶端以及其它需要編輯葵陵、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
2瞻佛、JS引擎則:解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果脱篙。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確,后來(lái)JS引擎越來(lái)越獨(dú)立伤柄,內(nèi)核就傾向于只指渲染引擎绊困。
9、****html5有哪些新特性适刀?如何處理****HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題秤朗?如何區(qū)分 ****HTML 和 ****HTML5?
1蔗彤、HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集川梅,主要是關(guān)于圖像,位置然遏,存儲(chǔ)贫途,多任務(wù)等功能的增加。
(1)繪畫(huà) canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)待侵,瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語(yǔ)意化更好的內(nèi)容元素丢早,比如 article、footer秧倾、header怨酝、nav、section;
(6)表單控件那先,calendar农猬、date、time售淡、email斤葱、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
2揖闸、IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽揍堕,
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,瀏覽器支持新標(biāo)簽后汤纸,還需要添加標(biāo)簽?zāi)J(rèn)的樣式衩茸。當(dāng)然也可以直接使用成熟的框架、比如html5shim贮泞,
10楞慈、簡(jiǎn)述一下你對(duì)****HTML語(yǔ)義化的理解?
用正確的標(biāo)簽做正確的事情隙畜。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化抖部,結(jié)構(gòu)更清晰,便于對(duì)瀏覽器议惰、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示慎颗,并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊言询,便于閱讀維護(hù)理解俯萎。
JavaScript部分
1、介紹****js的基本數(shù)據(jù)類(lèi)型
答: Undefined运杭、Null夫啊、Boolean、Number辆憔、String
2撇眯、****js有哪些內(nèi)置對(duì)象报嵌?
答:數(shù)據(jù)封裝類(lèi)對(duì)象:Object、Array熊榛、Boolean锚国、Number 和 String
其他對(duì)象:Function、Arguments玄坦、Math血筑、Date、RegExp煎楣、Error
3豺总、****this對(duì)象的理解
答:this總是指向函數(shù)的直接調(diào)用者(而非間接調(diào)用者);
如果有new關(guān)鍵字择懂,this指向new出來(lái)的那個(gè)對(duì)象喻喳;
在事件中,this指向觸發(fā)這個(gè)事件的對(duì)象困曙,特殊的是沸枯,IE中的attachEvent中的this總是指向全局對(duì)象Window。
4赂弓、****eval是做什么的绑榴?
答:它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行;
應(yīng)該避免使用eval盈魁,不安全翔怎,非常耗性能(2次,一次解析成js語(yǔ)句杨耙,一次執(zhí)行)赤套。
由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval,var obj =eval('('+ str +')')珊膜。
5容握、****DOM怎樣添加、移除车柠、移動(dòng)剔氏、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)
答:
// 創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
// 添加竹祷、移除谈跛、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
// 查找
getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)
getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)塑陵,會(huì)得到一個(gè)數(shù)組感憾,其中包括id等于name值的)
getElementById() //通過(guò)元素Id,唯一性
6令花、****null和****undefined的區(qū)別阻桅?
答:
null是一個(gè)表示"無(wú)"的對(duì)象凉倚,轉(zhuǎn)為數(shù)值時(shí)為0;undefined是一個(gè)表示"無(wú)"的原始值嫂沉,轉(zhuǎn)為數(shù)值時(shí)為NaN占遥。
undefined:
(1)變量被聲明了,但沒(méi)有賦值時(shí)输瓜,就等于undefined。
(2) 調(diào)用函數(shù)時(shí)芬萍,應(yīng)該提供的參數(shù)沒(méi)有提供尤揣,該參數(shù)等于undefined。
(3)對(duì)象沒(méi)有賦值的屬性柬祠,該屬性的值為undefined北戏。
(4)函數(shù)沒(méi)有返回值時(shí),默認(rèn)返回undefined漫蛔。
null:
(1) 作為函數(shù)的參數(shù)嗜愈,表示該函數(shù)的參數(shù)不是對(duì)象。
(2) 作為對(duì)象原型鏈的終點(diǎn)莽龟。
7蠕嫁、****new操作符具體干了什么呢****?
答:
(1)創(chuàng)建一個(gè)空對(duì)象,并且 this 變量引用該對(duì)象毯盈,同時(shí)還繼承了該函數(shù)的原型剃毒。
(2)屬性和方法被加入到 this 引用的對(duì)象中。
(3)新創(chuàng)建的對(duì)象由 this 所引用搂赋,并且最后隱式的返回 this 赘阀。
8、****JSON 的了解脑奠?
答:
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式基公。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小宋欺。
格式:采用鍵值對(duì)轰豆,例如:{'age':'12', 'name':'back'}
9、****call() 和 ****apply() 的區(qū)別和作用齿诞?
答:
apply()函數(shù)有兩個(gè)參數(shù):第一個(gè)參數(shù)是上下文秒咨,第二個(gè)參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null掌挚,則使用全局對(duì)象代替雨席。
如:function.apply(this,[1,2,3]);
call()的第一個(gè)參數(shù)是上下文,后續(xù)是實(shí)例傳入的參數(shù)序列吠式。
如:function.call(this,1,2,3);
10陡厘、如何獲取****UA抽米?
答:
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
其他
1、****HTTP狀態(tài)碼知道哪些糙置?
答:
100 Continue 繼續(xù)云茸,一般在發(fā)送post請(qǐng)求時(shí),已發(fā)送了http header之后服務(wù)端將返回此信息谤饭,表示確認(rèn)标捺,之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請(qǐng)求,但尚未處理
301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置揉抵。
302 Found 臨時(shí)性重定向亡容。
303 See Other 臨時(shí)性重定向,且總是使用 GET 請(qǐng)求新的 URI冤今。
304 Not Modified 自從上次請(qǐng)求后闺兢,請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。
400 Bad Request 服務(wù)器無(wú)法理解請(qǐng)求的格式戏罢,客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求屋谭。
401 Unauthorized 請(qǐng)求未授權(quán)。
403 Forbidden 禁止訪問(wèn)龟糕。
404 Not Found 找不到如何與 URI 相匹配的資源桐磁。
500 Internal Server Error 最常見(jiàn)的服務(wù)器端錯(cuò)誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求(可能是過(guò)載或維護(hù))讲岁。
2所意、你有哪些性能優(yōu)化的方法?
答:
(1) 減少http請(qǐng)求次數(shù):CSS Sprites, JS催首、CSS源碼壓縮扶踊、圖片大小控制合適;網(wǎng)頁(yè)Gzip郎任,CDN托管秧耗,data緩存 ,圖片服務(wù)器舶治。
(2) 前端模板 JS+數(shù)據(jù)分井,減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi),前端用變量保存AJAX請(qǐng)求結(jié)果霉猛,每次操作本地變量尺锚,不用請(qǐng)求,減少請(qǐng)求次數(shù)
(3) 用innerHTML代替DOM操作惜浅,減少DOM操作次數(shù)瘫辩,優(yōu)化javascript性能。
(4) 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
(5) 少用全局變量伐厌、緩存DOM節(jié)點(diǎn)查找的結(jié)果承绸。減少I(mǎi)O讀取操作。
(6) 避免使用CSS Expression(css表達(dá)式)又稱(chēng)Dynamic properties(動(dòng)態(tài)屬性)挣轨。
(7) 圖片預(yù)加載军熏,將樣式表放在頂部,將腳本放在底部 加上時(shí)間戳卷扮。
3荡澎、 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)?
答:
優(yōu)雅降級(jí):Web站點(diǎn)在所有新式瀏覽器中都能正常工作晤锹,如果用戶使用的是老式瀏覽器摩幔,則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問(wèn)題抖甘,針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效葫慎。
漸進(jìn)增強(qiáng):從被所有瀏覽器支持的基本功能開(kāi)始衔彻,逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)偷办,它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用艰额。
4、哪些常見(jiàn)操作會(huì)造成內(nèi)存泄漏椒涯?
答:
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在柄沮。
垃圾回收器定期掃描對(duì)象,并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量废岂。如果一個(gè)對(duì)象的引用數(shù)量為 0(沒(méi)有其他對(duì)象引用過(guò)該對(duì)象)祖搓,或?qū)υ搶?duì)象的惟一引用是循環(huán)的,那么該對(duì)象的內(nèi)存即可回收湖苞。
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話拯欧,會(huì)引發(fā)內(nèi)存泄漏。
閉包财骨、控制臺(tái)日志镐作、循環(huán)(在兩個(gè)對(duì)象彼此引用且彼此保留時(shí),就會(huì)產(chǎn)生一個(gè)循環(huán))隆箩。
5该贾、線程與進(jìn)程的區(qū)別
答:
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程。
線程的劃分尺度小于進(jìn)程捌臊,使得多線程程序的并發(fā)性高杨蛋。
另外,進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元,而多個(gè)線程共享內(nèi)存六荒,從而極大地提高了程序的運(yùn)行效率护姆。
線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口掏击、順序執(zhí)行序列和程序的出口卵皂。但是線程不能夠獨(dú)立執(zhí)行,必須依存在應(yīng)用程序中砚亭,由應(yīng)用程序提供多個(gè)線程執(zhí)行控制灯变。
從邏輯角度來(lái)看,多線程的意義在于一個(gè)應(yīng)用程序中捅膘,有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行添祸。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用,來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配寻仗。這就是進(jìn)程和線程的重要區(qū)別刃泌。