前端面試知識點錦集 JavaScript

標籤：為什麼   out   解決   bool   pen   表達   瀏覽器   一個   document   

  

 

哪些地方會出現css阻塞，哪些地方會出現js阻塞?

　　js的阻塞特性：

　　所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後才開始繼續並行下載其他資源並呈現內容。為了提高使用者體驗，新一代瀏覽器都支援並行下載JS，但是JS下載仍然會阻塞其它資源的下載(例如.圖片，css檔案等)。

　　由於瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以就會阻塞其他的下載和呈現。

　　嵌入JS會阻塞所有內容的呈現，而外部JS只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部指令碼的載入，但會阻塞外部指令碼的執行。

　　CSS怎麼會阻塞載入?

　　CSS本來是可以並行下載的，在什麼情況下會出現阻塞載入了(在測試觀察中，IE6下CSS都是阻塞載入)

　　當CSS後面跟著嵌入的JS的時候，該CSS就會出現阻塞後面資源下載的情況。而當把嵌入JS放到CSS前面，就不會出現阻塞的情況了。

　　根本原因：因為瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先載入、解析完。而嵌入的JS會阻塞後面的資源載入，所以就會出現上面CSS阻塞下載的情況。

　　JS應該放在什麼位置?

　　(1)、放在底部，雖然放在底部照樣會阻塞所有呈現，但不會阻塞資源下載。

　　(2)、如果嵌入JS放在head中，請把嵌入JS放在CSS頭部。

　　(3)、使用defer(只支援IE)

　　(4)、不要在嵌入的JS中調用已耗用時間較長的函數，如果一定要用，可以用setTimeout來調用

　　Javascript無阻塞載入具體方式

　　將指令碼放在底部。\還是放在head中，用以保證在js載入前，能載入出正常顯示的頁面。\

　　此技術的重點在於：無論在何處啟動下載，檔案額下載和運行都不會阻塞其他頁面處理過程。即使在head裡(除了用於下載檔案的http連結)。

　　19、對比Flash與ajax哪個好?

　　Ajax的優勢：

　　(1)、可搜尋性

　　普通的文本網頁會更有利於SEO。常值內容是搜尋引擎容易檢索的，而繁瑣的swf位元組碼卻是搜尋引擎不願觸及的。雖然Google等一些大型的搜尋引擎可以檢索SWF內部的內容，但是仍然有很多麻煩存在。

　　(2)、開放性

　　Flash常年以來被Macromedia看的很死。包括Flex、FMS等輔佐技術一直都需要昂貴的安裝、維護費用。而JS則沒有這樣的麻煩。沒有人願意承擔法律和著作權的風險。

　　費用

　　Flash開發是很昂貴的，因為FlashIDE等環境都是要收費的.而Ajax則不同.雖然有一些便宜的產生swf的工具，但是他們的工能實在無法滿足複雜需求。

　　(3)、易用性

　　Ajax程式有更好的易用性。由於中間有一層Flashplayer代理層，因此許多協助工具功能無法被Flash靈活利用。而且Flash在一些方面有著不好的口碑。比如彈出廣告、比如惡意代碼。

　　(http://awflasher.com個人認為這八成是亂上xx網站造成的)

　　(4)、易於開發

　　人們開發複雜的Ajax和Flash應用程式時，都會藉助一些進階的開發工具。普遍來說，Ajax的開發包比Flash簡便、容易。

　　Flash的優勢：

　　(1)、多媒體處理

　　Flash在音頻、視頻等多媒體領域相比HTML有絕對的優勢。現在幾乎所有的網站都包含有Flash內容。

　　(2)、相容性

　　相容性好：由於通過了唯一的FlashPlayer“代理”。人們不必像調試JS那樣，在不同的瀏覽器中偵錯工具。

　　(3)、向量圖型

　　這是Flash最大的優勢，同樣處在這一領域的SVG、Canvas element以及Direct完全不能與Flash相比。

　　(4)、用戶端資源調度

　　Flash能夠更容易的呼叫瀏覽器以外的外部資源。比如網路攝影機、麥克風等。然而這是普通的HTML無法完成的。但是這也許是一個缺點(為什麼呢?)



　　Ajax的劣勢：

　　(1)、它可能破壞瀏覽器的後退功能

　　(2)、使用動態網頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中 ，不過這些都有相關方法解決。

　　Flash的劣勢：

　　(1)、二進位格式

　　(2)、格式私人

　　(3)、flash 檔案經常會很大，使用者第一次使用的時候需要忍耐較長的等待時間

　　(4)/效能問題

　　ajax與flash各有利弊，到底哪個好，這取決於你的需求

　　20、請你解釋一下事件冒泡機制

　　a、在一個對象上觸發某類事件(比如單擊onclick事件)，如果此對象定義了此事件的處理常式，那麼此事件就會調用這個處理常式，如果沒有定義此事件處理常式或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裡到外，直至它被處理(父級對象所有同類事件都將被啟用)，或者它到達了對象層次的最頂層，即document對象(有些瀏覽器是window)。

　　b、冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發

　　c、js冒泡機制是指如果某元素定義了事件A，如click事件，如果觸發了事件之後，沒有阻止冒泡事件，那麼事件將向父級元素傳播，觸發父類的click函數。

　　//阻止冒泡時間方法，相容ie(e.cancleBubble)和ff(e.stopProgation)function stopBubble(e){var evt =e||window.event;evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);//阻止冒泡evt.preventDefault

　　21、請你說說split()與join() 函數的區別?

　　前者是切割成數組的形式，後者是將數群組轉換成字串Join 函數擷取一批字串，然後用分隔字元字串將它們聯結起來，從而返回一個字串。Split 函數擷取一個字串，然後在分隔字元處將其斷開，從而返回一批字串。但是，這兩個函數之間的主要區別在於 Join 可以使用任何分隔字元字串將多個字串串連起來，而 Split 只能使用一個字元分隔字元將字串斷開。 簡單地說，如果你用split，是把一串字元(根據某個分隔字元)分成若干個元素存放在一個數組裡。而Join是把數組中的字串連成一個長串，可以大體上認為是split的逆操作。

　　22、說說你對Promise的理解?

　　ES6 原生提供了 Promise 對象。

　　所謂 Promise，就是一個對象，用來傳遞非同步作業的訊息。它代表了某個未來才會知道結果的事件(通常是一個非同步作業)，並且這個事件提供統一的 API，可供進一步處理。Promise 對象有以下兩個特點。

　　(1)、對象的狀態不受外界影響。Promise 對象代表一個非同步作業，有三種狀態：Pending(進行中)、Resolved(已完成，又稱Fulfilled)和 Rejected(已失敗)。只有非同步作業的結果，可以決定當前是哪一種狀態，任何其他動作都無法改變這個狀態。這也是 Promise這個名字的由來，它的英語意思就是「承諾」，表示其他手段無法改變。

　　(2)、一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise 對象的狀態改變，只有兩種可能：從 Pending 變為Resolved 和從 Pending 變為 Rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對 Promise 對象添加回呼函數，也會立即得到這個結果。這與事件(Event)完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。

　　有了 Promise 對象，就可以將非同步作業以同步操作的流程表達出來，避免了層層嵌套的回呼函數。此外，Promise 對象提供統一的介面，使得控制非同步作業更加容易。

　　Promise 也有一些缺點。首先，無法取消 Promise，一旦建立它就會立即執行，無法中途取消。其次，如果不設定回呼函數，Promise 內部拋出的錯誤，不會反應到外部。第三，當處於 Pending 狀態時，無法得知目前進展到哪一個階段(剛剛開始還是即將完成)。

　　23、談談你對Javascript記憶體回收機制的理解?

　　(1)、標記清除(mark and sweep)

　　這是JavaScript最常見的記憶體回收方式，當變數進入執行環境的時候，比如函數中聲明一個變數，記憶體回收行程將其標記為“進入環境”，當變數離開環境的時候(函數執行結束)將其標記為“離開環境”。

　　記憶體回收行程會在啟動並執行時候給儲存在記憶體中的所有變數加上標記，然後去掉環境中的變數以及被環境中變數所引用的變數(閉包)，在這些完成之後仍存在標記的就是要刪除的變數了

　　(2)、引用計數(reference counting)

　　在低版本IE中經常會出現記憶體泄露，很多時候就是因為其採用引用計數方式進行記憶體回收。引用計數的策略是追蹤記錄每個值被使用的次數，當聲明了一個 變數並將一個參考型別賦值給該變數的時候這個值的引用次數就加1，如果該變數的值變成了另外一個，則這個值得引用次數減1，當這個值的引用次數變為0的時 候，說明沒有變數在使用，這個值沒法被訪問了，因此可以將其佔用的空間回收，這樣記憶體回收行程會在啟動並執行時候清理掉引用次數為0的值佔用的空間。

　　在IE中雖然JavaScript對象通過標記清除的方式進行記憶體回收，但BOM與DOM對象卻是通過引用計數回收垃圾的，也就是說只要涉及BOM及DOM就會出現循環參考問題。

　　24、說說你對原型(prototype)理解?

　　JavaScript是一種通過原型實現繼承的語言與別的進階語言是有區別的，像java，C#是通過類型決定繼承關係的，JavaScript是的動態弱類型語言，總之可以認為JavaScript中所有都是對象，在JavaScript中，原型也是一個對象，通過原型可以實現對象的屬性繼承，JavaScript的對象中都包含了一個” prototype”內部屬性，這個屬性所對應的就是該對象的原型。

　　“prototype”作為對象的內部屬性，是不能被直接存取的。所以為了方便查看一個對象的原型，Firefox和Chrome核心的JavaScript引擎中提供了”proto“這個非標準的訪問器(ECMA新標準中引入了標準對象原型訪問器”Object.getPrototype(object)”)。

　　原型的主要作用就是為了實現繼承與擴充項物件。

　　25、typeof與instanceof的區別是什麼?

　　在 JavaScript 中，判斷一個變數的類型可以用typeof

　　(1)、數字類型， typeof 返回的值是 number。比如說：typeof(1)，傳回值是number

　　(2)、字串類型， typeof 返回的值是 string。比如typeof(“123”)傳回值是string。

　　(3)、布爾類型， typeof 返回的值是 boolean 。比如typeof(true)傳回值是boolean。

　　(4)、對象、數組、null 返回的值是 object 。比如typeof(window)，typeof(document)，typeof(null)返回的值都是object。

　　(5)、函數類型，返回的值是 function。比如：typeof(eval)，typeof(Date)返回的值都是function。

　　(6)、不存在的變數、函數或者undefined，將返回undefined。比如：typeof(abc)、typeof(undefined)都返回undefined。

　　在 JavaScript 中,instanceof用於判斷某個對象是否被另一個函數構造。

　　使用 typeof 運算子時採用參考型別儲存值會出現一個問題，無論引用的是什麼類型的對象，它都返回 “object”。ECMAScript 引入了另一個 Java 運算子 instanceof 來解決這個問題。instanceof 運算子與 typeof 運算子相似，用於識別正在處理的對象的類型。與typeof 方法不同的是，instanceof 方法要求開發人員明確地確認對象為某特定類型。

　　26、說說你對node.js的理解

　　a、Node.js 是一個基於Google Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

　　b、能方便地搭建響應速度快、易於擴充的網路應用，Node.js 使用事件驅動，非阻塞I/O 模型而得以輕量和高效，非常適合在分布式裝置上啟動並執行資料密集型的即時應用。

　　c、 簡單說Node.js就是運行在伺服器端的JavaScript，是現在流行的語言中能同時運行在前端與背景程式語言

　　27、NPM(包管理器)作用是什麼?

　　NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用情境有以下幾種：

　　a、允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。

　　b、允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。

　　c、允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。
更多前端資訊，加群434623999，
如果需要擷取前端就業課程，直接用QQ登入http://www.kgc.cn/index.php?tuin=7124 ，不用下載app，就可以領取課程了

前端面試知識點錦集 JavaScript