前端面試題整理


HTML&CSS

1. 常用哪幾種瀏覽器測試?有哪些內核(Layout Engine)?
(Q1)瀏覽器:IE,Chrome,FireFox,Safari,Opera。
(Q2)內核:Trident,Gecko,Presto,Webkit。

詳細介紹:

  1. 一、Trident內核代表產品Internet Explorer,又稱其為IE內核。Trident(又稱為MSHTML),是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括:IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

  2.  

    二、Gecko內核代表作品Mozilla FirefoxGecko是一套開放源代碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一,僅次於Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。

  3.  

    三、WebKit內核代表作品Safari、Chromewebkit 是一個開源項目,包含了來自KDE項目和蘋果公司的一些組件,主要用於Mac OS系統,它的特點在於源碼結構清晰、渲染速度極快。缺點是對網頁代碼的兼容性不高,導致一些編寫不標准的網頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。

  4.  

    四、Presto內核代表作品OperaPresto是由Opera Software開發的瀏覽器排版引擎,供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎,包括加入動態功能,例如網頁或其部分可隨着DOM及Script語法的事件而重新排版。

 

2. 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)
(Q1)行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-height),margin上下無效,左右有效,padding上下左右都有效。
  塊級元素:各占據一行,垂直方向排列。
(Q2)兼容性:display:inline-block;*display:inline;*zoom:1;

 

3.說說對zoom:1的理解?

(Q1)zoom:1;屬性是IE瀏覽器的專有屬性,Firefox等其它瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的hasLayout屬性,清除浮動、清除margin的重疊等。但很遺憾的是,它通不過W3C驗證.

 

4.說說對IE的haslayout的理解?

(Q1)haslayout是Windows Internet Explorer渲染引擎的一個內部組成部分。在Internet Explorer中,使用布局概念來控制元素的尺寸和定位。在理想情況下,所有元素都控制自己的尺寸和定位。但是,這在IE中會導致很大的性能問題。因此,IE開發團隊決定只將布局應用於實際需要它的那些元素,這樣就可以充分地減少性能開銷。

具體什么是haslayout請看這篇文章 : http://www.cnblogs.com/yuqingfamily/p/6866285.html

 

5.清除浮動有哪些方式?比較好的方式是哪一種?
(Q1)
(1)父級div定義height。
(2)結尾處加空div標簽clear:both。
(3)父級div定義偽類:after和zoom。
(4)父級div定義overflow:hidden。
(5)父級div定義overflow:auto。
(6)父級div也浮動,需要定義寬度。
(7)父級div定義display:table。
(8)結尾處加br標簽clear:both。
(Q2)比較好的是第3種方式,好多網站都這么用。

 

6.box-sizing常用的屬性有哪些?分別有什么作用?
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

 

7.Doctype作用?標准模式與兼容模式各有什么區別?
(Q1)<!DOCTYPE>告知瀏覽器的解析器用什么文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
(Q2)標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中,頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

 

8.HTML5 為什么只需要寫 <!DOCTYPE HTML>?
HTML5不基於 SGML,因此不需要對DTD進行引用,但是需要doctype來規范瀏覽器的行為(讓瀏覽器按照它們應該的方式來運行)。
而HTML4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型。

 

9.頁面導入樣式時,使用link和@import有什么區別?
(1)link屬於XHTML標簽,除了加載CSS外,還能用於定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的,只能用於加載CSS;
(2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;
(3)import是CSS2.1 提出的,只在IE5以上才能被識別,而link是XHTML標簽,無兼容問題;

 

10.介紹一下你對瀏覽器內核的理解?
主要分成兩部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,然后會輸出至顯示器或打印機。瀏覽器的內核的不同對於網頁的語法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎則:解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確,后來JS引擎越來越獨立,內核就傾向於只指渲染引擎。

 

9.html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
(Q1) 
HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
(4)sessionStorage 的數據在瀏覽器關閉后自動刪除;
(5)語意化更好的內容元素,比如 article、footer、header、nav、section;
(6)表單控件,calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(Q2)
IE8/IE7/IE6支持通過document.createElement方法產生的標簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標簽,
瀏覽器支持新標簽后,還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

(Q3)

文檔聲明,語意結構,H5新標簽的使用

 

10.簡述一下你對HTML語義化的理解?
用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示,並且是容易閱讀的;
搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO;
使閱讀源代碼的人對網站更容易將網站分塊,便於閱讀維護理解。

 

11.請描述一下 cookies,sessionStorage 和 localStorage 的區別?
cookie是網站為了標示用戶身份而儲存在用戶本地終端(Client Side)上的數據(通常經過加密)。
cookie數據始終在同源的http請求中攜帶(即使不需要),也會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。
存儲大小:
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。
有期時間:
localStorage      存儲持久數據,瀏覽器關閉后數據不丟失除非主動刪除數據;
sessionStorage  數據在當前瀏覽器窗口關閉后自動刪除。
cookie          設置的cookie過期時間之前一直有效,即使窗口或瀏覽器關閉

 

12.iframe有那些缺點?
iframe會阻塞主頁面的Onload事件;
搜索引擎的檢索程序無法解讀這種頁面,不利於SEO;
iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的並行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript動態給iframe添加src屬性值,這樣可以繞開以上兩個問題。

 

13.如何實現瀏覽器內多個標簽頁之間的通信?
WebSocket、SharedWorker
也可以調用localstorge、cookies等本地存儲方式。
localstorge另一個瀏覽上下文里被添加、修改或刪除時,它都會觸發一個事件,我們通過監聽事件,控制它的值來進行頁面信息通信。
注意quirks:Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常。

 

14.如何在頁面上實現一個圓形的可點擊區域?
(1)map+area或者svg
(2)border-radius
(3)純js實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

 

15.介紹一下標准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
(1)有兩種, IE 盒子模型、W3C 盒子模型。
(2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border)。
(3)區  別: IE的content部分把 border 和 padding計算了進去。

 

16.CSS優先級算法如何計算?
優先級就近原則,同權重情況下樣式定義最近者為准;
載入樣式以最后載入的定位為准;
優先級為:
!important >  id > class > tag
important比內聯優先級高(style)

 

17.為什么要使用CSS sprites
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background-position”的組合進行背景定位,這樣可以減少很多圖片請求的開銷,因為請求耗時比較長;請求雖然可以並發,但是如果請求太多會給服務器增加很大的壓力。

 

18.display:none和visibility:hidden的區別?
display:none  隱藏對應的元素,在文檔布局中不再給它分配空間,它各邊的元素會合攏,就當他從來不存在。
visibility:hidden  隱藏對應的元素,但是在文檔布局中仍保留原來的空間。

 

19.position的absolute與fixed區別
absolute浮動定位是相對於父級中設置position為relative或者absolute最近的父級元素
fixed浮動定位是相對於瀏覽器視窗的

 

20.IE 8以下版本的瀏覽器中的盒模型有什么不同?
IE8以下瀏覽器的盒模型中定義的元素的寬高包括內邊距和邊框(怪異盒子模型)

 

JavaScript

1.介紹js的基本數據類型
Undefined、Null、Boolean、Number、String

 

2.js有哪些內置對象?
數據封裝類對象:Object、Array、Boolean、Number 和 String
其他對象:Function、Arguments、Math、Date、RegExp、Error

 

3.this對象的理解
this總是指向函數的直接調用者(而非間接調用者);
如果有new關鍵字,this指向new出來的那個對象;
在事件中,this指向觸發這個事件的對象,特殊的是,IE中的attachEvent中的this總是指向全局對象Window;

 

4.eval是做什么的?
它的功能是把對應的字符串解析成JS代碼並運行;
應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。
由JSON字符串轉換為JSON對象的時候可以用eval,var obj =eval('('+ str +')');

 

5.DOM怎樣添加、移除、移動、復制、創建和查找節點

// 創建新節點
createDocumentFragment()    //創建一個DOM片段
createElement()   //創建一個具體的元素
createTextNode()   //創建一個文本節點
// 添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節點前插入一個新的子節點
// 查找
getElementsByTagName()    //通過標簽名稱
getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強,會得到一個數組,其中包括id等於name值的)
getElementById()    //通過元素Id,唯一性

 

6.null和undefined的區別?
null是一個表示"無"的對象,轉為數值時為0;undefined是一個表示"無"的原始值,轉為數值時為NaN。
undefined:
(1)變量被聲明了,但沒有賦值時,就等於undefined。
(2) 調用函數時,應該提供的參數沒有提供,該參數等於undefined。
(3)對象沒有賦值的屬性,該屬性的值為undefined。
(4)函數沒有返回值時,默認返回undefined。
null:
(1) 作為函數的參數,表示該函數的參數不是對象。
(2) 作為對象原型鏈的終點。

具體差別可查看這篇文章:http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

 

7.new操作符具體干了什么呢?
(1)創建一個空對象,並且 this 變量引用該對象,同時還繼承了該函數的原型。
(2)屬性和方法被加入到 this 引用的對象中。
(3)新創建的對象由 this 所引用,並且最后隱式的返回 this 。

 

8.JSON 的了解?
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 占用帶寬小。
格式:采用鍵值對,例如:{'age':'12', 'name':'back'}

 

9.call() 和 apply() 的區別和作用?
apply()函數有兩個參數:第一個參數是上下文,第二個參數是參數組成的數組。如果上下文是null,則使用全局對象代替。
如:function.apply(this,[1,2,3]);
call()的第一個參數是上下文,后續是實例傳入的參數序列。
如: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;  
    }  

  navigator.userAgent 獲取瀏覽器UA

 

11.HTTP狀態碼知道哪些?
100  Continue  繼續,一般在發送post請求時,已發送了http header之后服務端將返回此信息,表示確認,之后發送具體參數信息
200  OK   正常返回信息
201  Created  請求成功並且服務器創建了新的資源
202  Accepted  服務器已接受請求,但尚未處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向,且總是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求后,請求的網頁未修改過。
400 Bad Request  服務器無法理解請求的格式,客戶端不應當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未授權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。
500 Internal Server Error  最常見的服務器端錯誤。
503 Service Unavailable 服務器端暫時無法處理請求(可能是過載或維護)。

 

12.JS數組去重
以下是展示三種方法:

        Array.prototype.unique1 = function() {
                var n = []; //一個新的臨時數組
                for(var i = 0; i < this.length; i++) //遍歷當前數組
                {
                    //如果當前數組的第i已經保存進了臨時數組,那么跳過,
                    //否則把當前項push到臨時數組里面
                    if(n.indexOf(this[i]) == -1) n.push(this[i]);
                }
                return n;
            }

            Array.prototype.unique2 = function() {
                var n = {},
                    r = []; //n為hash表,r為臨時數組
                for(var i = 0; i < this.length; i++) //遍歷當前數組
                {
                    if(!n[this[i]]) //如果hash表中沒有當前項
                    {
                        n[this[i]] = true; //存入hash表
                        r.push(this[i]); //把當前數組的當前項push到臨時數組里面
                    }
                }
                return r;
            }

            Array.prototype.unique3 = function() {
                var n = [this[0]]; //結果數組
                for(var i = 1; i < this.length; i++) //從第二項開始遍歷
                {
                    //如果當前數組的第i項在當前數組中第一次出現的位置不是i,
                    //那么表示第i項是重復的,忽略掉。否則存入結果數組
                    if(this.indexOf(this[i]) == i) n.push(this[i]);
                }
                return n;
            }

 

13.js操作獲取和設置cookie

//創建cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

 

14.ajax 有那些優缺點?如何解決跨域問題?
(Q1)
優點:
(1)通過異步模式,提升了用戶體驗.
(2)優化了瀏覽器和服務器之間的傳輸,減少不必要的數據往返,減少了帶寬占用.
(3)Ajax在客戶端運行,承擔了一部分本來由服務器承擔的工作,減少了大用戶量下的服務器負載。
(4)Ajax可以實現動態不刷新(局部刷新)
缺點:
(1)安全問題 AJAX暴露了與服務器交互的細節。
(2)對搜索引擎的支持比較弱。
(3)不容易調試。
(Q2)jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面。

 

15.JavaScript原型,原型鏈 ? 有什么特點?
(1)原型對象也是普通的對象,是對象一個自帶隱式的 __proto__ 屬性,原型也有可能有自己的原型,如果一個原型對象的原型不為null的話,我們就稱之為原型鏈。
(2)原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈。

 

16.GET和POST的區別,何時使用POST?
GET:一般用於信息獲取,使用URL傳遞參數,對所發送信息的數量也有限制,一般在2000個字符
POST:一般用於修改服務器上的資源,對所發送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值,而POST方式通過Request.Form來獲取變量的值,
也就是說Get是通過地址欄來傳值,而Post是通過提交表單來傳值。
然而,在以下情況中,請使用 POST 請求:
無法使用緩存文件(更新服務器上的文件或數據庫)
向服務器發送大量數據(POST 沒有數據量限制)
發送包含未知字符的用戶輸入時,POST 比 GET 更穩定也更可靠

 

17.請解釋一下 JavaScript 的同源策略
概念:同源策略是客戶端腳本(尤其是Javascript)的重要的安全度量標准。它最早出自Netscape Navigator2.0,其目的是防止某個文檔或腳本從多個不同源裝載。
這里的同源策略指的是:協議,域名,端口相同,同源策略是一種安全協議。
指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制?
我們舉例說明:比如一個黑客程序,他利用iframe把真正的銀行登錄頁面嵌到他的頁面上,當你使用真實的用戶名,密碼登錄時,他的頁面就可以通過Javascript讀取到你的表單中input中的內容,這樣用戶名,密碼就輕松到手了。

 

18.Flash、Ajax各自的優缺點,在使用中如何取舍?
Flash適合處理多媒體、矢量圖形、訪問機器;對CSS、處理文本上不足,不容易被搜索。
Ajax對CSS、文本支持很好,支持搜索;多媒體、矢量圖形、機器訪問不足。
共同點:與服務器的無刷新傳遞消息、用戶離線和在線狀態、操作DOM

 

19.什么是閉包?
閉包,官方對閉包的解釋是:一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數),因而這些變量也是該表達式的一部分。閉包的特點:
(1)作為一個函數變量的一個引用,當函數返回時,其處於激活狀態。
(2) 一個閉包就是當一個函數返回時,一個沒有釋放資源的棧區。
簡單的說,Javascript允許使用內部函數---即函數定義和函數表達式位於另一個函數的函數體內。而且,這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時,就會形成閉包。

 

20.javascript里面的繼承怎么實現,如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承,避免對象共享可以參考經典的extend()函數,很多前端框架都有封裝的,就是用一個空函數當做中間變量

 

21.ajax過程
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象.
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.
(3)設置響應HTTP請求狀態變化的函數.
(4)發送HTTP請求.
(5)獲取異步調用返回的數據.
(6)使用JavaScript和DOM實現局部刷新.

 

22.AMD和CMD的區別?

AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。
類似的還有 CommonJS Modules/2.0 規范,是 BravoJS 在推廣過程中對模塊定義的規范化產出。

這些規范的目的都是為了 JavaScript 的模塊化開發,特別是在瀏覽器端的。
目前這些規范的實現都能達成瀏覽器端模塊化開發的目的。

區別:

1. 對於依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.

2. CMD 推崇依賴就近,AMD 推崇依賴前置

        // CMD
            define(function(require, exports, module) {
                var a = require('./a') a.doSomething()
                // 此處略去 100 行   
                var b = require('./b')
                // 依賴可以就近書寫   
                b.doSomething()
                // ... 
            })
            // AMD 默認推薦的是
            define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好    
                a.doSomething()
                // 此處略去 100 行   
                b.doSomething()
            })

 

23.ajax不可避免的問題都有什么?如何解決呢?

(Q1)ajax以何種數據格式交換數據和跨域的問題如何解決

(Q2)這兩大問題,都有不同的解決方案,但是最被推崇的就是用JSON來傳數據,靠JSONP來跨域

 

其他

1.你有哪些性能優化的方法?
(1) 減少http請求次數:CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網頁Gzip,CDN托管,data緩存 ,圖片服務器。
(2) 前端模板 JS+數據,減少由於HTML標簽導致的帶寬浪費,前端用變量保存AJAX請求結果,每次操作本地變量,不用請求,減少請求次數
(3) 用innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能。
(4) 當需要設置的樣式很多時設置className而不是直接操作style。
(5) 少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
(6) 避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。
(7) 圖片預加載,將樣式表放在頂部,將腳本放在底部  加上時間戳。

 

2.什么叫優雅降級和漸進增強?
優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型布局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來並發揮作用。

 

3.哪些常見操作會造成內存泄漏?
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象,並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環的,那么該對象的內存即可回收。
setTimeout 的第一個參數使用字符串而非函數的話,會引發內存泄漏。
閉包、控制台日志、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)

 

4.線程與進程的區別
一個程序至少有一個進程,一個進程至少有一個線程. 
線程的划分尺度小於進程,使得多線程程序的並發性高。 
另外,進程在執行過程中擁有獨立的內存單元,而多個線程共享內存,從而極大地提高了程序的運行效率。 
線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。但是線程不能夠獨立執行,必須依存在應用程序中,由應用程序提供多個線程執行控制。 
從邏輯角度來看,多線程的意義在於一個應用程序中,有多個執行部分可以同時執行。但操作系統並沒有將多個線程看做多個獨立的應用,來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

 

5.一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發生了什么?
(1)查找瀏覽器緩存
(2)DNS解析、查找該域名對應的IP地址、重定向(301)、發出第二個GET請求
(3)進行HTTP協議會話
(4)客戶端發送報頭(請求報頭)
(5)服務器回饋報頭(響應報頭)
(6)html文檔開始下載
(7)文檔樹建立,根據標記請求所需指定MIME類型的文件
(8)文件顯示

 

部分摘自:http://www.qdfuns.com/notes/23515/c9163ddd620baac5dd23141d41982bb8.html,部分有所修改和完善,后續博主本人還會再繼續加一些常用的面試題進來,不斷補充這篇文章!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM