Web前端面試題（前端開發(fā)人員必備）
時(shí)間：2023-05-18 16:12:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-05-18 16:12:01 來源：網(wǎng)站運(yùn)營(yíng)
Web前端面試題（前端開發(fā)人員必備）：本人也在學(xué)習(xí)前端方面的技術(shù)，為以后轉(zhuǎn)行前端做好準(zhǔn)備：
HTML:
1.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)
標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性；
2.xhtml和html有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范（html/Xhtml）一般為 嚴(yán)格 過度 基于框架的html文檔
加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?
塊級(jí)元素：div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
Css盒模型:內(nèi)容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時(shí)加載
前者無兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
標(biāo)簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
7.前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
8.css的基本語(yǔ)句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁(yè)面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點(diǎn)擊后失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級(jí)添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
11.標(biāo)簽上title與alt屬性的區(qū)別是什么?
Alt 當(dāng)圖片不顯示是 用文字代表。
Title 為該屬性提供信息
12.描述css reset的作用和用途。
Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量
14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
15.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
16.什么是語(yǔ)義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處
17.清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)
1.使用空標(biāo)簽清除浮動(dòng) clear:both（理論上能清楚任何標(biāo)簽，，，增加無意義的標(biāo)簽）
2.使用overflow:auto（空標(biāo)簽元素清除浮動(dòng)而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE）
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)
18、常用那幾種瀏覽器測(cè)試？有哪些內(nèi)核(Layout Engine)?
瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。
內(nèi)核：Trident，Gecko，Presto，Webkit。
19、 說下行內(nèi)元素和塊級(jí)元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8 以下）
行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無效，height無效(可以設(shè)置line-height)，margin上下無效，padding上下無效。
塊級(jí)元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個(gè)斷行。
兼容性：display:inline-block;*display:inline;*zoom:1;
20、 清除浮動(dòng)有哪些方式？比較好的方式是哪一種？
（1）父級(jí)div定義height。
（2）結(jié)尾處加空div標(biāo)簽clear:both。
（3）父級(jí)div定義偽類: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。
比較好的是第3種方式，好多網(wǎng)站都這么用。
21、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)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
22、Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
23、HTML5 為什么只需要寫<!DOCTYPE html> ？
HTML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。
24、 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
?。?）頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
?。?）import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無兼容問題。
25、介紹一下你對(duì)瀏覽器內(nèi)核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(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)核。
JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
26、html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
(1)繪畫 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;
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim，
JavaScript:
1.解釋jsonp的原理，以及為什么不是真正的ajax?
動(dòng)態(tài)創(chuàng)建script標(biāo)簽，回調(diào)函數(shù)
Ajax是頁(yè)面無刷新請(qǐng)求數(shù)據(jù)操作
2. apply和call的用法和區(qū)別:
用法:
都能繼承另一個(gè)對(duì)象的方法和屬性,區(qū)別在于參數(shù)列表不一樣
區(qū)別:
Function.apply(obj, args) args是一個(gè)數(shù)組,作為參數(shù)傳給Function
Function.call(obj, arg1, arg2,...) arg*是參數(shù)列表
apply一個(gè)妙用: 可以將一個(gè)數(shù)組默認(rèn)的轉(zhuǎn)化為一個(gè)參數(shù)列表
舉例說明: 有一個(gè)數(shù)組arr要push進(jìn)一個(gè)新的數(shù)組中去, 如果用call的話需要把數(shù)組中的元素一個(gè)個(gè)取出來再push, 而用apply只有Array.prototype.push.apply(this, arr)
3. bind函數(shù)的兼容性
用法:
bind()函數(shù)會(huì)創(chuàng)建一個(gè)新函數(shù), 為綁定函數(shù)。當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí),綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入bind方法的第一個(gè)參數(shù)作為this,傳入bind方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(shí)本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù).
一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)?！?br>
4. 解釋下事件代理
事件委托利用了事件冒泡, 只指定一個(gè)事件處理程序, 就可以管理某一類型的所有事件.
例: html部分: 要點(diǎn)擊li彈出其id
html 代碼效果預(yù)覽
12345678
<ul id="list">
<li id="li-1">Li 2</li>
<li id="li-2">Li 3</li>
<li id="li-3">Li 4</li>
<li id="li-4">Li 5</li>
<li id="li-5">Li 6</li>
<li id="li-6">Li 7</li>
</ul>
javascript 代碼效果預(yù)覽
12345678
//js部分
document.getElementById("list").addHandler("click", function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toUpperCase == "LI"){
console.log("List item", e,target.id, "was clicked!");
}
});
5. 解釋下js中this是怎么工作的?
this 在 JavaScript 中主要由以下五種使用場(chǎng)景。
作為函數(shù)調(diào)用，this 綁定全局對(duì)象，瀏覽器環(huán)境全局對(duì)象為 window 。
內(nèi)部函數(shù)內(nèi)部函數(shù)的 this 也綁定全局對(duì)象，應(yīng)該綁定到其外層函數(shù)對(duì)應(yīng)的對(duì)象上，這是 JavaScript的缺陷，用that替換。
作為構(gòu)造函數(shù)使用，this 綁定到新創(chuàng)建的對(duì)象。
作為對(duì)象方法使用，this 綁定到該對(duì)象。
使用apply或call調(diào)用 this 將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。
6. 繼承
參考：js怎么實(shí)現(xiàn)繼承？
7. AMD vs. CommonJS？
AMD是依賴提前加載
CMD是依賴延時(shí)加載
8. 什么是哈希表?
哈希表（Hash table，也叫散列表），是根據(jù)關(guān)鍵碼值(Key value)而直接進(jìn)行訪問的數(shù)據(jù)結(jié)構(gòu)。也就是說，它通過把關(guān)鍵碼值映射到表中一個(gè)位置來訪問記錄，以加快查找的速度。這個(gè)映射函數(shù)叫做散列函數(shù)，存放記錄的數(shù)組叫做散列表。
使用哈希查找有兩個(gè)步驟:
使用哈希函數(shù)將被查找的鍵轉(zhuǎn)換為數(shù)組的索引。在理想的情況下，不同的鍵會(huì)被轉(zhuǎn)換為不同的索引值，但是在有些情況下我們需要處理多個(gè)鍵被哈希到同一個(gè)索引值的情況。
所以哈希查找的第二個(gè)步驟就是處理沖突。處理哈希碰撞沖突。有很多處理哈希碰撞沖突的方法，比如拉鏈法和線性探測(cè)法。
元素特征轉(zhuǎn)變?yōu)閿?shù)組下標(biāo)的方法就是散列法。散列法當(dāng)然不止一種，下面列出三種比較常用的：
1，除法散列法
最直觀的一種，上圖使用的就是這種散列法，公式： index = value % 16
學(xué)過匯編的都知道，求模數(shù)其實(shí)是通過一個(gè)除法運(yùn)算得到的，所以叫“除法散列法”。
2，平方散列法
求index是非常頻繁的操作，而乘法的運(yùn)算要比除法來得省時(shí)（對(duì)現(xiàn)在的CPU來說，估計(jì)我們感覺不出來），所以我們考慮把除法換成乘法和一個(gè)位移操作。公式： index = (value * value) >> 28 （右移，除以2^28。記法：左移變大，是乘。右移變小，是除。）
如果數(shù)值分配比較均勻的話這種方法能得到不錯(cuò)的結(jié)果，但我上面畫的那個(gè)圖的各個(gè)元素的值算出來的index都是0——非常失敗。也許你還有個(gè)問題，value如果很大，value * value不會(huì)溢出嗎？答案是會(huì)的，但我們這個(gè)乘法不關(guān)心溢出，因?yàn)槲覀兏静皇菫榱双@取相乘結(jié)果，而是為了獲取index。
3，斐波那契（Fibonacci）散列法
解決沖突的方法:
1. 拉鏈法
將大小為M 的數(shù)組的每一個(gè)元素指向一個(gè)條鏈表，鏈表中的每一個(gè)節(jié)點(diǎn)都存儲(chǔ)散列值為該索引的鍵值對(duì)，這就是拉鏈法.
對(duì)采用拉鏈法的哈希實(shí)現(xiàn)的查找分為兩步，首先是根據(jù)散列值找到等一應(yīng)的鏈表，然后沿著鏈表順序找到相應(yīng)的鍵。
2. 線性探測(cè)法:
使用數(shù)組中的空位解決碰撞沖突
參考：淺談算法和數(shù)據(jù)結(jié)構(gòu): 十一 哈希表 哈希表的工作原理
9. 什么是閉包? 閉包有什么作用?
閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù). 創(chuàng)建閉包常見方式,就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù).
作用:
匿名自執(zhí)行函數(shù) (function (){ ... })(); 創(chuàng)建了一個(gè)匿名的函數(shù)，并立即執(zhí)行它，由于外部無法引用它內(nèi)部的變量，因此在執(zhí)行完后很快就會(huì)被釋放，關(guān)鍵是這種機(jī)制不會(huì)污染全局對(duì)象。
緩存, 可保留函數(shù)內(nèi)部的值
實(shí)現(xiàn)封裝
實(shí)現(xiàn)模板
參考: js閉包的用途
10. 偽數(shù)組:
什么是偽數(shù)組:
偽數(shù)組是能通過Array.prototype.slice 轉(zhuǎn)換為真正的數(shù)組的帶有l(wèi)ength屬性的對(duì)象
比如arguments對(duì)象,還有像調(diào)用getElementsByTagName,document.childNodes之類的，它們都返回NodeList對(duì)象都屬于偽數(shù)組
我們可以通過Array.prototype.slice.call(fakeArray)將偽數(shù)組轉(zhuǎn)變?yōu)檎嬲腁rray對(duì)象: 返回新數(shù)組而不會(huì)修改原數(shù)組
參考：偽數(shù)組
11. undefined和null的區(qū)別, 還有undeclared:
null表示沒有對(duì)象, 即此處不該有此值. 典型用法:
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
（2） 作為對(duì)象原型鏈的終點(diǎn)。
( 3 ) null可以作為空指針. 只要意在保存對(duì)象的值還沒有真正保存對(duì)象,就應(yīng)該明確地讓該對(duì)象保存null值.
undefined表示缺少值, 即此處應(yīng)該有值, 但還未定義.
（1）變量被聲明了，但沒有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對(duì)象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
undeclared即為被污染的命名, 訪問沒有被聲明的變量, 則會(huì)拋出異常, 終止執(zhí)行. 即undeclared是一種語(yǔ)法錯(cuò)誤
參考: undefined與null的區(qū)別
12. 事件冒泡機(jī)制:
從目標(biāo)元素開始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。
13. 解釋下為什么接下來這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達(dá)式)：function foo(){ }();?
而函數(shù)定義（語(yǔ)句以function關(guān)鍵字開始）是不能被立即執(zhí)行的，這無疑會(huì)導(dǎo)致語(yǔ)法的錯(cuò)誤（SyntaxError）。當(dāng)函數(shù)定義代碼段包裹在括號(hào)內(nèi)，使解析器可以將之識(shí)別為函數(shù)表達(dá)式，然后調(diào)用。IIFE: (function foo(){})()
區(qū)分 (function(){})(); 和 (function(){}()); 其實(shí)兩者實(shí)現(xiàn)效果一樣。
函數(shù)字面量：首先聲明一個(gè)函數(shù)對(duì)象，然后執(zhí)行它。(function () { alert(1); })();
優(yōu)先表達(dá)式：由于Javascript執(zhí)行表達(dá)式是從圓括號(hào)里面到外面，所以可以用圓括號(hào)強(qiáng)制執(zhí)行聲明的函數(shù)。(function () { alert(2); }());
14. "attribute" 和 "property" 的區(qū)別是什么？
DOM元素的attribute和property兩者是不同的東西。attribute翻譯為“特性”，property翻譯為“屬性”。
attribute是一個(gè)特性節(jié)點(diǎn)，每個(gè)DOM元素都有一個(gè)對(duì)應(yīng)的attributes屬性來存放所有的attribute節(jié)點(diǎn)，attributes是一個(gè)類數(shù)組的容器，說得準(zhǔn)確點(diǎn)就是NameNodeMap，不繼承于Array.prototype，不能直接調(diào)用Array的方法。attributes的每個(gè)數(shù)字索引以名值對(duì)(name=”value”)的形式存放了一個(gè)attribute節(jié)點(diǎn)。<div class="box" id="box" gameid="880">hello</div>
property就是一個(gè)屬性，如果把DOM元素看成是一個(gè)普通的Object對(duì)象，那么property就是一個(gè)以名值對(duì)(name=”value”)的形式存放在Object中的屬性。要添加和刪除property和普通的對(duì)象類似。
很多attribute節(jié)點(diǎn)還有一個(gè)相對(duì)應(yīng)的property屬性，比如上面的div元素的id和class既是attribute，也有對(duì)應(yīng)的property，不管使用哪種方法都可以訪問和修改。
總之，attribute節(jié)點(diǎn)都是在HTML代碼中可見的，而property只是一個(gè)普通的名值對(duì)屬性。
15. 請(qǐng)指出 document load 和 document ready 兩個(gè)事件的區(qū)別。
document.ready和onload的區(qū)別——JavaScript文檔加載完成事件。頁(yè)面加載完成有兩種事件:
一是ready，表示文檔結(jié)構(gòu)已經(jīng)加載完成（不包含圖片等非文字媒體文件）
二是onload，指示頁(yè)面包含圖片等文件在內(nèi)的所有元素都加載完成。
jQuery中$(function(){});他的作用或者意義就是:在DOM加載完成后就可以可以對(duì)DOM進(jìn)行操作。一般情況先一個(gè)頁(yè)面響應(yīng)加載的順序是，域名解析-加載html-加載js和css-加載圖片等其他信息。
16. 什么是use strict? 其好處壞處分別是什么?
在所有的函數(shù) (或者所有最外層函數(shù)) 的開始處加入 "use strict"; 指令啟動(dòng)嚴(yán)格模式。
"嚴(yán)格模式"有兩種調(diào)用方法
1）將"use strict"放在腳本文件的第一行，則整個(gè)腳本都將以"嚴(yán)格模式"運(yùn)行。如果這行語(yǔ)句不在第一行，則無效，整個(gè)腳本以"正常模式"運(yùn)行。如果不同模式的代碼文件合并成一個(gè)文件，這一點(diǎn)需要特別注意。
2）將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中。
好處
- 消除Javascript語(yǔ)法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
- 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
- 提高編譯器效率，增加運(yùn)行速度；
- 為未來新版本的Javascript做好鋪墊。
壞處
同樣的代碼，在"嚴(yán)格模式"中，可能會(huì)有不一樣的運(yùn)行結(jié)果；一些在"正常模式"下可以運(yùn)行的語(yǔ)句，在"嚴(yán)格模式"下將不能運(yùn)行
17. 瀏覽器端的js包括哪幾個(gè)部分?
核心( ECMAScript) , 文檔對(duì)象模型(DOM), 瀏覽器對(duì)象模型(BOM)
18. DOM包括哪些對(duì)象?
DOM是針對(duì)HTML和XML文檔的一個(gè)API(應(yīng)用程序編程接口). DOM描繪了一個(gè)層次化的節(jié)點(diǎn)樹, 允許開發(fā)人員添加, 移除和修改頁(yè)面的某一部分.
常用的DOM方法:
getElementById(id)
getElementsByTagName()
appendChild(node)
removeChild(node)
replaceChild()
insertChild()
createElement()
createTextNode()
getAttribute()
setAttribute()
常用的DOM屬性
innerHTML 節(jié)點(diǎn)(元素)的文本值
parentNode 節(jié)點(diǎn)(元素)的父節(jié)點(diǎn)
childNodes
attributes 節(jié)點(diǎn)(元素)的屬性節(jié)點(diǎn)
參考: HTML DOM 方法
19. js有哪些基本類型?
Undefined, Null, Boolean, Number, String
Object是復(fù)雜數(shù)據(jù)類型, 其本質(zhì)是由一組無序的名值對(duì)組成的.
20. 基本類型與引用類型有什么區(qū)別?
基本類型如上題所示. 引用類型則有: Object, Array, Date, RegExp, Function
存儲(chǔ)
基本類型值在內(nèi)存中占據(jù)固定大小的空間,因此被保存在棧內(nèi)存中
引用類型的值是對(duì)象, 保存在堆內(nèi)存中. 包含引用類型的變量實(shí)際上包含的并不是對(duì)象本身, 而是一個(gè)指向改對(duì)象的指針
復(fù)制
從一個(gè)變量向另一個(gè)變量復(fù)制基本類型的值, 會(huì)創(chuàng)建這個(gè)值的一個(gè)副本
從一個(gè)變量向另一個(gè)變量復(fù)制引用類型的值, 復(fù)制的其實(shí)是指針, 因此兩個(gè)變量最終都指向同一個(gè)對(duì)象
檢測(cè)類型
確定一個(gè)值是哪種基本類型可以用typeof操作符,
而確定一個(gè)值是哪種引用類型可以使用instanceof操作符
21. 關(guān)于js的垃圾收集例程
js是一門具有自動(dòng)垃圾回收機(jī)制的編程語(yǔ)言,開發(fā)人員不必關(guān)心內(nèi)存分配和回收問題
離開作用域的值將被自動(dòng)標(biāo)記為可以回收, 因此將在垃圾收集期間被刪除
"標(biāo)記清除"是目前主流的垃圾收集算法, 這種算法的思路是給當(dāng)前不使用的值加上標(biāo)記, 然后再回收其內(nèi)存
另一種垃圾收集算法是"引用計(jì)數(shù)", 這種算法的思想是跟蹤記錄所有值被引用的次數(shù). js引擎目前都不再使用這種算法, 但在IE中訪問非原生JS對(duì)象(如DOM元素)時(shí), 這種算法仍然可能會(huì)導(dǎo)致問題
當(dāng)代碼中存在循環(huán)引用現(xiàn)象時(shí), "引用計(jì)數(shù)" 算法就會(huì)導(dǎo)致問題
解除變量的引用不僅有助于消除循環(huán)引用現(xiàn)象, 而且對(duì)垃圾收集也有好處. 為了確保有效地回收內(nèi)存, 應(yīng)該及時(shí)解除不再使用的全局對(duì)象, 全局對(duì)象屬性以及循環(huán)引用變量的引用
22. ES5中, 除了函數(shù),什么能夠產(chǎn)生作用域?
try-catch 和with延長(zhǎng)作用域. 因?yàn)樗麄兌紩?huì)創(chuàng)建一個(gè)新的變量對(duì)象.
這兩個(gè)語(yǔ)句都會(huì)在作用域鏈的前端添加一個(gè)變量對(duì)象. 對(duì)with語(yǔ)句來說, 會(huì)將指定的對(duì)象添加到作用域鏈中. 對(duì)catch語(yǔ)句來說, 會(huì)創(chuàng)建一個(gè)新的變量對(duì)象, 其中包含的是被拋出的錯(cuò)誤對(duì)象的聲明.
當(dāng)try代碼塊中發(fā)生錯(cuò)誤時(shí)，執(zhí)行過程會(huì)跳轉(zhuǎn)到catch語(yǔ)句，然后把異常對(duì)象推入一個(gè)可變對(duì)象并置于作用域的頭部。在catch代碼塊內(nèi)部，函數(shù)的所有局部變量將會(huì)被放在第二個(gè)作用域鏈對(duì)象中。請(qǐng)注意，一旦catch語(yǔ)句執(zhí)行完畢，作用域鏈機(jī)會(huì)返回到之前的狀態(tài)。try-catch語(yǔ)句在代碼調(diào)試和異常處理中非常有用，因此不建議完全避免。你可以通過優(yōu)化代碼來減少catch語(yǔ)句對(duì)性能的影響。一個(gè)很好的模式是將錯(cuò)誤委托給一個(gè)函數(shù)處理
with(object) {statement}。它的意思是把object添加到作用域鏈的頂端
23. js有幾種函數(shù)調(diào)用方式?
方法調(diào)用模型 var obj = { func : function(){};} obj.func()
函數(shù)調(diào)用模式 var func = function(){} func();
構(gòu)造器調(diào)用模式
apply/ call調(diào)用模式
24. 描述事件模型?IE的事件模型是怎樣的？事件代理是什么？事件代理中怎么定位實(shí)際事件產(chǎn)生的目標(biāo)？
捕獲->處于目標(biāo)->冒泡，IE應(yīng)該是只有冒泡沒有捕獲。
事件代理就是在父元素上綁定事件來處理，通過event對(duì)象的target來定位。
25. js動(dòng)畫有哪些實(shí)現(xiàn)方法?
用定時(shí)器 setTimeout和setInterval
26. 還有什么實(shí)現(xiàn)動(dòng)畫的方法?
js動(dòng)畫:
使用定時(shí)器 setTimeout和setInterval
CSS : transition , animation
transition 包含4種屬性：transition-delaytransition-durationtransition-propertytransition-timing-function，對(duì)應(yīng)動(dòng)畫的4種屬性： 延遲、持續(xù)時(shí)間、對(duì)應(yīng)css屬性和緩動(dòng)函數(shù)，
transform 包含7種屬性：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-directionanimation-iteration-countanimation-fill-modeanimation-play-state，它們可以定義動(dòng)畫名稱，持續(xù)時(shí)間，緩動(dòng)函數(shù)，動(dòng)畫延遲，動(dòng)畫方向，重復(fù)次數(shù)，填充模式。
HTML5 動(dòng)畫
canvas
svg
webgl
參考：前端動(dòng)畫效果實(shí)現(xiàn)的簡(jiǎn)單比較
27. 面向?qū)ο笥心膸讉€(gè)特點(diǎn)?
封裝, 繼承, 多態(tài)
28. 如何判斷屬性來自自身對(duì)象還是原型鏈?
hasOwnPrototype
29. ES6新特性
1) 箭頭操作符 inputs=>outputs: 操作符左邊是輸入的參數(shù)，而右邊則是進(jìn)行的操作以及返回的值
2) 支持類, 引入了class關(guān)鍵字. ES6提供的類實(shí)際上就是JS原型模式的包裝
3) 增強(qiáng)的對(duì)象字面量.
1. 可以在對(duì)象字面量中定義原型 __proto__: xxx //設(shè)置其原型為xxx,相當(dāng)于繼承xxx
2. 定義方法可以不用function關(guān)鍵字
3. 直接調(diào)用父類方法
4) 字符串模板: ES6中允許使用反引號(hào) ` 來創(chuàng)建字符串，此種方法創(chuàng)建的字符串里面可以包含由美元符號(hào)加花括號(hào)包裹的變量${vraible}。
5) 自動(dòng)解析數(shù)組或?qū)ο笾械闹?。比如若一個(gè)函數(shù)要返回多個(gè)值，常規(guī)的做法是返回一個(gè)對(duì)象，將每個(gè)值做為這個(gè)對(duì)象的屬性返回。但在ES6中，利用解構(gòu)這一特性，可以直接返回一個(gè)數(shù)組，然后數(shù)組中的值會(huì)自動(dòng)被解析到對(duì)應(yīng)接收該值的變量中。
6) 默認(rèn)參數(shù)值: 現(xiàn)在可以在定義函數(shù)的時(shí)候指定參數(shù)的默認(rèn)值了，而不用像以前那樣通過邏輯或操作符來達(dá)到目的了。
7) 不定參數(shù)是在函數(shù)中使用命名參數(shù)同時(shí)接收不定數(shù)量的未命名參數(shù)。在以前的JavaScript代碼中我們可以通過arguments變量來達(dá)到這一目的。不定參數(shù)的格式是三個(gè)句點(diǎn)后跟代表所有不定參數(shù)的變量名。比如下面這個(gè)例子中，…x代表了所有傳入add函數(shù)的參數(shù)。
8) 拓展參數(shù)則是另一種形式的語(yǔ)法糖，它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。
9) let和const關(guān)鍵字: 可以把let看成var，只是它定義的變量被限定在了特定范圍內(nèi)才能使用，而離開這個(gè)范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。
10) for of值遍歷 每次循環(huán)它提供的不是序號(hào)而是值。
11) iterator, generator
12) 模塊
13) Map, Set, WeakMap, WeakSet
14) Proxy可以監(jiān)聽對(duì)象身上發(fā)生了什么事情，并在這些事情發(fā)生后執(zhí)行一些相應(yīng)的操作。一下子讓我們對(duì)一個(gè)對(duì)象有了很強(qiáng)的追蹤能力，同時(shí)在數(shù)據(jù)綁定方面也很有用處。
15) Symbols Symbol 通過調(diào)用symbol函數(shù)產(chǎn)生，它接收一個(gè)可選的名字參數(shù)，該函數(shù)返回的symbol是唯一的。之后就可以用這個(gè)返回值做為對(duì)象的鍵了。Symbol還可以用來創(chuàng)建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。
16) Math, Number, String, Object的新API
17) Promises是處理異步操作的一種模式
參考：ES6新特性概覽
30. 如何獲取某個(gè)DOM節(jié)點(diǎn)
獲取節(jié)點(diǎn): getElementById() getElementsByTagName()
31. 用LESS如何給某些屬性加瀏覽器前綴？
可以自定義一個(gè)函數(shù)
.border-radius(@values) {
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
.border-radius(10px);
}
32.eval是做什么的？
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；
應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）。
33. 圖片預(yù)加載的實(shí)現(xiàn)
使用jQuery圖片預(yù)加載插件Lazy Load
1.加載jQuery, 與jquery.lazyload.js
2.設(shè)置圖片的占位符為data-original, 給圖片一個(gè)特別的標(biāo)簽,比如class=".lazy"
3.然后延遲加載: $('img.lazy').lazyload();這個(gè)函數(shù)可以選擇一些參數(shù):
3.1.圖片預(yù)先加載距離：threshold，通過設(shè)置這個(gè)值，在圖片未出現(xiàn)在可視區(qū)域的頂部距離這個(gè)值時(shí)加載。
3.2.事件綁定加載的方式：event
3.3.圖片限定在某個(gè)容器內(nèi)：container
使用js實(shí)現(xiàn)圖片加載: 就是new一個(gè)圖片對(duì)象, 綁定onload函數(shù), 賦值url
用CSS實(shí)現(xiàn)圖片的預(yù)加載
寫一個(gè)CSS樣式設(shè)置一批背景圖片，然后將其隱藏
改進(jìn): 使用js來推遲預(yù)加載時(shí)間, 防止與頁(yè)面其他內(nèi)容一起加載
用Ajax實(shí)現(xiàn)預(yù)加載
其實(shí)就是通過ajax請(qǐng)求請(qǐng)求圖片地址. 還可以用這種方式加載css,js文件等
34. 如果在同一個(gè)元素上綁定了兩個(gè)click事件, 一個(gè)在捕獲階段執(zhí)行, 一個(gè)在冒泡階段執(zhí)行. 那么當(dāng)觸發(fā)click條件時(shí), 會(huì)執(zhí)行幾個(gè)事件? 執(zhí)行順序是什么?
我在回答這個(gè)題的時(shí)候說是兩個(gè)事件, 先執(zhí)行捕獲的后執(zhí)行冒泡的. 其實(shí)是不對(duì)的.
綁定在目標(biāo)元素上的事件是按照綁定的順序執(zhí)行的!!!!
即: 綁定在被點(diǎn)擊元素的事件是按照代碼順序發(fā)生，其他元素通過冒泡或者捕獲“感知”的事件，按照W3C的標(biāo)準(zhǔn)，先發(fā)生捕獲事件，后發(fā)生冒泡事件。所有事件的順序是：其他元素捕獲階段事件 -> 本元素代碼順序事件 -> 其他元素冒泡階段事件 。
參考: JavaScript-父子dom同時(shí)綁定兩個(gè)點(diǎn)擊事件，一個(gè)用捕獲，一個(gè)用冒泡時(shí)執(zhí)行順序
35. js中怎么實(shí)現(xiàn)塊級(jí)作用域?
使用匿名函數(shù), (立即執(zhí)行函數(shù))
(function(){...})()
使用es6
塊級(jí)作用域引入了兩種新的聲明形式,可以用它們定義一個(gè)只存在于某個(gè)語(yǔ)句塊中的變量或常量.這兩種新的聲明關(guān)鍵字為:
let: 語(yǔ)法上非常類似于var, 但定義的變量只存在于當(dāng)前的語(yǔ)句塊中
const: 和let類似,但聲明的是一個(gè)只讀的常量
使用let代替var可以更容易的定義一個(gè)只在某個(gè)語(yǔ)句塊中存在的局部變量,而不用擔(dān)心它和函數(shù)體中其他部分的同名變量有沖突.在let語(yǔ)句內(nèi)部用var聲明的變量和在let語(yǔ)句外部用var聲明的變量沒什么差別,它們都擁有函數(shù)作用域,而不是塊級(jí)作用域.
36. 構(gòu)造函數(shù)里定義function和使用prototype.func的區(qū)別？
1. 直接調(diào)用function，每一個(gè)類的實(shí)例都會(huì)拷貝這個(gè)函數(shù)，弊端就是浪費(fèi)內(nèi)存（如上）。prototype方式定義的方式，函數(shù)不會(huì)拷貝到每一個(gè)實(shí)例中，所有的實(shí)例共享prototype中的定義，節(jié)省了內(nèi)存。
2. 但是如果prototype的屬性是對(duì)象的話，所有實(shí)例也會(huì)共享一個(gè)對(duì)象（這里問的是函數(shù)應(yīng)該不會(huì)出現(xiàn)這個(gè)情況），如果其中一個(gè)實(shí)例改變了對(duì)象的值，則所有實(shí)例的值都會(huì)被改變。同理的話，如果使用prototype調(diào)用的函數(shù)，一旦改變，所有實(shí)例的方法都會(huì)改變。——不可以對(duì)實(shí)例使用prototype屬性，只能對(duì)類和函數(shù)用。
37. js實(shí)現(xiàn)對(duì)象的深克隆
因?yàn)閖s中數(shù)據(jù)類型分為基本數(shù)據(jù)類型(number, string, boolean, null, undefined)和引用類型值(對(duì)象, 數(shù)組, 函數(shù)). 這兩類對(duì)象在復(fù)制克隆的時(shí)候是有很大區(qū)別的. 原始類型存儲(chǔ)的是對(duì)象的實(shí)際數(shù)據(jù), 而對(duì)象類型存儲(chǔ)的是對(duì)象的引用地址(對(duì)象的實(shí)際內(nèi)容單獨(dú)存放, 為了減少數(shù)據(jù)開銷通常放在內(nèi)存中). 此外, 對(duì)象的原型也是引用對(duì)象, 它把原型的屬性和方法放在內(nèi)存中, 通過原型鏈的方式來指向這個(gè)內(nèi)存地址.
于是克隆也會(huì)分為兩類:
淺度克隆:
原始類型為值傳遞, 對(duì)象類型仍為引用傳遞
深度克隆:
所有元素或?qū)傩跃耆珡?fù)制, 與原對(duì)象完全脫離, 也就是說所有對(duì)于新對(duì)象的修改都不會(huì)反映到原對(duì)象中
我是胖虎，一個(gè)正在創(chuàng)業(yè)的前端工程師，如果你同樣迷茫不知道前端該如何學(xué)習(xí)，可以加入我的自學(xué)團(tuán)，會(huì)有知識(shí)分享，匹配學(xué)習(xí)伙伴，還可以參加我組織的上線項(xiàng)目及活動(dòng)。想加入的伙伴給我留言或者直接私信。原文鏈接：Web前端面試題（前端開發(fā)人員必備）_獨(dú)家記憶-涂仕明的專欄-CSDN博客
在線咨詢