前端面試知識點錦集

小花貓Jane發表於2017-12-18


JavaScript

哪些地方會出現

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在一些方面有著不好的口碑。比如彈出廣告、比如惡意程式碼。

  

(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伺服器供別人使用。

想要學習前端開發的同學,可以加群:

543627393 學習哦!


相關文章