整理的前端面試題1

1. Doctype作用？標準模式與兼容模式各有什麼區別?

（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於<html> 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

（2）、標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬鬆的向後兼容的方式顯示,模擬老式瀏覽器的行爲以防止站點無法工作。

2. HTML5 爲什麼只需要寫 <!DOCTYPE HTML>？

Html5 不基於 SGML(標準通用語言)，因此不需要對DTD(文檔類型定義)進行引用，但是需要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；

而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3. 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

（1）行內元素有：a b span img input select strong（強調的語氣）

（2）塊級元素有：div ul ol li dl dt dd h1 ~h6 p

（3）常見的空元素：<br> <hr> <img> <input> <link><meta>

鮮爲人知的是：

替換元素：img、input、textarea、select、object都是替換元素。這些元素往往沒有實際的內容，即是一個空元素。

非替換元素：大多數的元素都是非替換元素，如p

4. 頁面導入樣式時，使用link和@import有什麼區別？

（1）link屬於XHTML標籤；@import是CSS提供的，只能用於加載CSS;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

（4）dom控制樣式差別，JavaScript控制dom去改變樣式的時候，只能用link標籤

5. 瀏覽器的內核分別是什麼?

IE瀏覽器的內核Trident， -ms-

Firefox的內核Gecko -moz-

Chrome和safari的內核webkit -webkit-

Opera用的是presto引擎，後改爲webkit引擎； Opera早期瀏覽器 -o-

6. 常見的兼容性問題？

(1) 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

(2) IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。塊+float+橫向margin

浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;};這種情況之下IE會產生20px的距離

解決方案是在float的標籤樣式控制中加入 _display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

(3圖片默認有間距,幾個img標籤放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。

解決方案：使用float屬性爲img佈局

備註：因爲img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裏，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。

(4) 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。

解決方法：a 在子標籤最後清浮動{<divstyle=”height:0;clear:both;”> </div>}

b 父標籤添加{overflow：hidden；}

c 給父標籤設置高度

(5) Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性-webkit-text-size-adjust: none;

(6) 超鏈接訪問過後hover樣式就不出現了

被點擊訪問過的超鏈接樣式不在具有hover和active了

解決方法是改變CSS屬性的排列順序:L-V-H-A: a:link {} a:visited {} a:hover {} a:active {}

7. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和HTML5？

HTML5 增加了 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

sessionStorage 的數據在瀏覽器關閉後自動刪除

語意化更好的內容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術webworker,websockt, Geolocation

section:頁面中一個內容區塊

article：頁面中和上下文不相關的獨立內容

aside：aritle元素的內容之外，與aritle元素內容相關的輔助信息

header：頁面中一個內容區塊或整個頁面的標題

hgroup：整個頁面或頁面中一個內容區塊的標題進行組合

footer：整個頁面或者頁面中一個內容區塊的腳註

nav：頁面中的導航鏈接部分

figure：一段獨立的流內容，一般表示文檔主體流內容的一個獨立單元

embed：插入各種多媒體

mark：需要突出顯示或高亮顯示的文字

progress：運行中的進程

canvas：圖形，比如圖表和其他圖像

command：表示命令按鈕，比如單選按鈕，複選框或按鈕

detail：用戶要求得到並且可以得到的細節信息

datalist：可選數據列表

keygen：生成祕鑰

output：不同類型的輸出，比如腳本的輸出

source：元素的媒介元素，定義媒介資源。

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

IE8/IE7/IE6支持通過document.createElement方法產生的標籤，可以利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還需要添加標籤默認的樣式：

當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!–[if ltIE 9]>

<![endif]–>

如何區分： DOCTYPE聲明\新增的結構元素\功能元素

8. 語義化的理解？

用正確的標籤做正確的事情！

html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

在沒有樣式CCS情況下也以一種文檔格式顯示，並且是容易閱讀的。

搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於SEO。

使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

9. iframe有那些優缺點？

優點：1. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

2. Security sandbox

3. 並行加載腳本

缺點：1. iframe會阻塞主頁面的Onload事件

2. 即時內容爲空，加載也需要時間

3. 沒有語意，使用ifame框架的弊端是無法被搜索引擎所爬行抓取；

10. HTML5的form如何關閉自動完成功能？

給不想要提示的 form設置爲 autocomplete=off。

11. 如何實現瀏覽器內多個標籤頁之間的通信?

調用localstorge、cookies等本地存儲方式

12. webSocket如何兼容低瀏覽器？

Adobe Flash Socket 、 ActiveX HTMLFile(IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR

13. CSS的盒子模型？

（1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border).

14. CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

3.標籤選擇器（div, h1, p）

4.相鄰選擇器（h1 + p）

5.子選擇器（ul > li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

8.屬性選擇器（a[rel =”external”]）

9.僞類選擇器（a: hover, li:nth - child）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;

不可繼承的樣式：border padding margin width height ;

優先級就近原則，同權重情況下樣式定義最近者爲準;

載入樣式以最後載入的定位爲準;

優先級爲: !important > id >class > tag important 比內聯優先級高

CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個<p> 元素的每個 <p> 元素。

p:last-of-type 選擇屬於其父元素的最後<p> 元素的每個 <p> 元素。

p:only-of-type 選擇屬於其父元素唯一的<p> 元素的每個 <p> 元素。

p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。

:enabled :disabled 控制表單控件的禁用狀態。

:checked 單選框或複選框被選中。

15. 如何居中div？如何居中一個浮動元素？

（1）給一個已知寬度的元素居中

div{ width:200px; margin:0 auto; }

（2）居中一個浮動的元素

<ul>

</ul>

</div>

.pagination {

float: left;

width: 100%;

overflow: hidden;

position: relative;

}

.pagination ul {

clear: left;

float: left;

position: relative;

left: 50%;/*整個分頁向右邊移動寬度的50%*/

text-align: center;

}

.pagination li {

line-height: 25px;

margin: 0 5px;

display: block;

float: left;

position: relative;

right: 50%;/*將每個分頁項向左邊移動寬度的50%*/

}

(3)絕對定位實現一個已知寬度元素的居中

.element {

width: 600px; height:400px;

position: absolute; left:50%; top: 50%;

margin-top: -200px; /* 高度的一半 */

margin-left: -300px; /* 寬度的一半 */

}

使用css3中的translate,transform中translate偏移的百分比值是相對於自身大小的

.element {

width: 600px; height:400px;

position: absolute; left:50%; top: 50%;

transform: translate(-50%,-50%); /* 50%爲自身尺寸的一半 */

}

(4)絕對定位實現一個未知寬度的元素居中

.pagination {

position: relative;

}

.pagination ul {

position: absolute;

left: 50%;//列表的元素向右移動50%

}

.pagination li {

line-height: 25px;

margin: 0 5px;

float: left;

position: relative;/*注意，這裏不能是absolute，大家懂的*/

right: 50%;//列表項向左移動一半

}

水平居中和垂直居中：

水平居中（text-align）塊級元素（margin:0 auto;）

垂直居中：vertical-align:middle;

父元素高度不確定的文本，圖片，塊級元素的豎直居中：給父元素設置相同的上下邊距實現

父元素高度確定的單行文本垂直居中：line-height值與父元素的高度值相同

16. 列出display的值，說明他們的作用。position的值，relative和absolute定位原點是？

（1） block 像塊類型元素一樣顯示。

none 缺省值。像行內元素類型一樣顯示。

inline-block 像行內元素一樣顯示，但其內容像塊類型元素一樣顯示。

list-item 像塊類型元素一樣顯示，並添加樣式列表標記。

（2）static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。

fixed （老IE不支持）相對於瀏覽器窗口固定，即使窗口滾動它也不會移動。與文檔流無關，不佔空間

relative：相對於原來的位置，原來的位置仍保留，移動元素會導致覆蓋其他框。

absolute：相對於最近已經定位的元素；

inherit 規定從父元素繼承position 屬性的值。

17. CSS3有哪些新特性？

邊框：border-radius（圓角），box-shadow（陰影），border-image

文本效果：text-shadow（文本陰影），

text-overflow：clip （修剪文本）， ellipsis （顯示省略符號來代表被修剪的文本）。 string（使用給定的字符串來代表被修剪的文本）

word-wrap：normal（只在允許的斷字點換行）；break-word（在長單詞或 URL 地址內部進行換行）

word-break：（normal）使用瀏覽器默認的換行規則；break-all（允許在單詞內換行）；keep-all（只能在半角空格或連字符處換行）

轉換：transform 過渡：transition

@keyframes創建動畫，需要把它綁定到一個選擇器

多列：column-count，column-gap

resize：指定一個元素是否應該由用戶去調整大小

box-sizing：content-box（default），border-box，padding-box。

content-box，border和padding不計算入width之內

padding-box，padding計算入width內

border-box，border和padding計算入width之內，其實就是怪異模式了~

CSS3 彈性盒子(FlexBox)***

18. css定義的權重

以下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，以下例子是演示各種定義的權重值：

/*權重爲1*/

div{

}

/*權重爲10*/

.class1{

}

/*權重爲100*/

#id1{

}

/*權重爲100+1=101*/

#id1 div{

}

/*權重爲10+1=11*/

.class1 div{

}

/*權重爲10+10+1=21*/

.class1 .class2 div{

}

如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

19. 如果需要手動寫動畫，你認爲最小時間間隔是多久，爲什麼？

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔爲1/60＊1000ms ＝ 16.7ms

20. display:inline-block 移除空格？

讓列表的結束標籤與下一個列表的開始標籤連在一起，

使用margin負值、使用font-size:0、letter-spacing、word-spacing

letter-spacing可以控制文字間的水平距離的，設置爲負值

21. 說幾條寫JavaScript的基本規範？

1.不要在同一行聲明多個變量。

2.請使用 ===/!==來比較true/false或者數值

3.使用對象字面量替代new Array這種形式

4.不要使用全局函數。

5.switch語句必須帶有default分支

6.函數不應該有時候有返回值，有時候沒有返回值。

7.for循環必須使用大括號

8.If語句必須使用大括號

9.for-in循環中的變量應該使用var關鍵字明確限定作用域，從而避免作用域污染。

22. eval是做什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；

應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。

eval(“x=10;y=20;document.write(x*y)”) //200

23. Node.js的適用場景？

高併發、聊天、實時消息推送

24. 介紹js的基本數據類型。

boolean，number, string, null ,undefined, object

25. 如何創建一個對象?

工廠模式，構造函數模式，原型模式，組合使用構造函數和原型模式，動態原型模式，寄生構造函數模式，穩妥構造函數模式

（1）工廠模式

function createPerson(name){

var o=new Object();

o.name=name;

o.sayName=function(){

alert(this.name);

}

return o;

}

var person=createPerson(“lwg”);

(2)構造函數模式

functionPerson(name) {

this.name = name;

this.sing = function() {alert(this.name); };

}

var person=newPerson(“lwg”);

(3) 原型模式

function Person(){}

Person.prototype.name=”lwg”;

Person.prototype.sayName=function(){

alert(this.name);

}

var person=newPerson();

(4)組合使用構造函數和原型模式

function Person(name){

this.name=name; //構造函數用於定義實例屬性

}

Person.prototype={ //原型模式定義方法和共享屬性

constructor:Person,

sayName:function (){

alert(this.name);

} }

(5) 動態原型模式

functionPerson(name){

this.name=name;

if(typeof this.sayName!=”function”){

Person.prototype.sayName=function (){

Person.prototype.sayName=function(){

alert(this.name);

} } } }

(6)寄生構造函數模式函數的作用僅僅是封裝創建對象的代碼，然後返回新對象

functionPerson(name){

var o=new Object();

o.name=name;

o.sayName=function(){

alert(this.name); } ;

rerurn o; }

var person=newPerson(“lwg”); person.sayName();

(7) 穩妥構造函數模式

functionPerson(name){

var o=new object();

o.sayName=function(){

alert(name);

} ;

return o; }

varperson=Person(“lwg”); person.sayName();

26. 談談This對象的理解

this是js的一個關鍵字，隨着函數使用場合不同，this的值會發生變化。

但是有一個總原則，那就是this指的是調用函數的那個對象。

this一般情況下：是全局對象Global。作爲方法調用，那麼this就是指這個對象

通過call和apply可以重新定義函數的執行環境，即this的指向

27. 事件是？IE與火狐的事件機制有什麼區別？如何阻止冒泡？

我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行爲。

事件處理機制：IE是事件冒泡、火狐是事件捕獲；

ev.stopPropagation();

事件流的三個階段：事件捕獲階段處於目標階段事件冒泡階段

28. new操作符具體幹了什麼呢?

1、創建一個新對象。

2、將構造函數的作用域賦給新對象（this指向新對象）

3、執行構造函數的代碼，爲新對象添加屬性

4 返回新對象

29. Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是hasOwnProperty

30. JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

JSON中對象通過“{}”來標識，一個“{}”代表一個對象，如{“AreaId”:”123”}，對象的值是鍵值對的形式（key：value）。{“age”:”12”, “name”:”back”}

31. js延遲加載的方式有哪些？

defer和async、動態創建DOM方式（用得最多）、通過ajax下載js腳本，動態添加script節點，通過監聽onload事件，動態添加script節點，按需異步載入js

32. 如何解決跨域問題?

跨域：域名，協議，端口一個不同，則是不同的域

常用的方法：document.domain+iframe設置，JSONP，window.name，HTML5中的window.postMessage

（1）document.domain+iframe的設置

對於主域相同而子域不同的例子，可以通過設置document.domain的辦法來解決。具體的做法是可以在http://www.a.com/a.html和http://script.a.com/b.html兩個文件中分別加上document.domain= ‘a.com’；然後通過a.html文件中創建一個iframe，去控制iframe的contentDocument，這樣兩個js文件之間就可以“交互”了。

www.a.com上的a.html

<iframe src=” http://script.a.com/b.html” id=”iframe” οnlοad=”test()”></iframe>

<script>

document.domain = ‘a.com’;

functiontest(){

alert(document.getElementById(‘iframe’).contentWindow);

};

</script>

script.a.com上的b.html

document.domain = ‘a.com’;

document.domain的設置是有限制的，只能把document.domain設置成自身或者更高一級的父域，且主域必須相同。例如a.b.example.com的domain只能設置成a.b.example.com，b.example.com，example.com中的一個

（2） JSONP

通過script標籤引入一個js文件，這個js文件載入成功後，會執行url參數中指定的函數，並且把需要的json數據作爲參數傳入

比如a.html需要通過ajax獲取不同域上的json數據，假設這個json數據是http://example.com/data.php

a.html中的代碼如下：

functiondosomething(jsondata){

//獲取json數據

}

</script>

//通過這個得到js文件，並且它的參數是需要的json數據

因爲當做js文件來引入，所以example.com返回一個能執行的js文件

<? PHP

callback= _GET[‘callback’]; //得到回調函數名

$data=array(‘a’,’b’,’c’); //要返回的數據

echo callback.′(′jsonencode( data).’)’; //輸出

jQuery實現jsonp操作：

$getJSON(‘http://example.com/data.php?callback=?’,function(jsondata){

//處理獲得的json數據

});

</script>

jquery會自動生成一個全局函數來替換callback=?中的問號，之後獲取到數據又自動銷燬。$getJSON會自動判斷是否跨域，不跨域的話，調用普通的ajax方法，跨域的話，異步加載js文件調用jsonp回調函數

（3） window.name

在一個窗口的生命週期內，窗口載入的所有頁面都共享一個window.name，每個頁面對window.name都有讀寫權限。window.name是持久存在一個窗口載入過的所有頁面中，不會因爲新的頁面載入而重置

比如有一個www.example.com/a.html頁面，需要通過a.html頁面的js獲取另一個位於不同域上的頁面www.cnblogs.com/data.html裏的數據

data.html頁面裏，給當前的window.name設置一個a.html頁面想要得到的數據值

window.name=’頁面a需要的數據’；

</script>

想要a.html不跳轉也能得到data.html裏的數據，在a.html頁面中使用一個隱藏的iframe,由iframe去獲取data.html的數據，然後a.html再去得到iframe獲取到的數據

function getData(){

var iframe=docunment.getElementById(“iframe”);

iframe.οnlοad=function(){

var data=iframe.contentWindow.name; //獲取iframe的window.name,

alert(data);

}

iframesrc=’b.html’;//和a.htm同源的任何頁面，目的是讓a訪問到iframe

}

（4） HTML5 的window.postMessage方法實現跨域

window.postMessage(message,targetOrigin)可以用來向其他window對象發消息，無論這個window對象是同源的還是不同源的。

第一個參數message是要發送的消息，類型是字符串。第二個參數是限定接收消息的那個window對象所在域。如果不限定域，可以使用通配符*

要接收消息的window對象，可以監聽自身的message事件獲取穿過來的消息，消息內容存儲在該事件對象的data屬性中

頁面http://test.com/a.html

function onLoad(){

var iframe=docunment.getElementById(“iframe”);

var win=iframe.contentWindow;//獲取window對象

win.postMessage(‘來自頁面a的消息’，’*’);

}

</script>

頁面b.html的代碼

window.onmessage=function(e){

e=e|evevt;//獲取事件對象

alert(e.data);

}

</script>

33. documen.write和innerHTML的區別

document.write是直接將內容寫入頁面的內容劉，會導致頁面全部重繪，innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪。document.write只能重繪整個頁面；innerHTML可以重繪頁面的一部分

document.write是直接寫入到頁面的內容流，如果在寫之前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉之後重新調用該函數，會導致頁面被重寫。

innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。

34. .call() 和 .apply() 的區別？

兩個函數都是用來改變this指向的，call的第二個參數是參數依次傳遞，apply傳遞的第二個參數是參數數組

fuction add(c,d){ return this.a+this.b+c+d; }

var num={a:1,b:3};

add.call(num,5,7);//16

add.apply(num,[10,20]);//34

35. 那些操作會造成內存泄漏？

內存泄漏指任何對象在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的內存即可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。

閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

36. 你有哪些性能優化的方法？

（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）圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。

（8）避免在頁面的主體佈局中使用table，table要等其中的內容完全下載之後纔會顯示出來，顯示比div+css佈局慢。

將css放在頁面最上面,將script放在頁面最下面, 把js和css放到外部文件中, 避免重定向,

37. http狀態碼有那些？分別代表是什麼意思？

100-199 用於指定客戶端應相應的某些動作。

200-299 用於表示請求成功。

300-399 用於已經移動的文件並且常被包含在定位頭信息中指定新的地址信息。

400-499 用於指出客戶端的錯誤。

400–語義有誤，當前請求無法被服務器理解。

401–當前請求需要用戶驗證

403 –服務器已經理解請求，但是拒絕執行它。

500-599 用於支持服務器錯誤。 503–服務不可用

38. 一個頁面從輸入URL 到頁面加載顯示完成，這個過程中都發生了什麼？

1、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操作。

2、在發送http請求前，需要域名解析(DNS解析)，解析獲取相應的IP地址。

3、瀏覽器向服務器發起tcp連接，與瀏覽器建立tcp三次握手。

4、握手成功後，瀏覽器向服務器發送http請求，請求數據包。

5、服務器處理收到的請求，將數據返回至瀏覽器

6、瀏覽器收到HTTP響應

7、讀取頁面內容，瀏覽器渲染，解析html源碼

8、生成Dom樹、解析css樣式、js交互

39. 子元素的margin和padding設置爲百分數

margin和padding都可以使用百分比值的，就是 margin-top | margin-bottom | padding-top |padding-bottom 的百分比值參照的不是容器的高度，而是寬度。無論垂直還是水平，百分比值始終參考寬度。

40. jQuery中attr()、prop()、data()用法及區別？

從性能上對比，.prop() > .data() > .attr()。

attr返回屬性的值（標籤自帶屬性和自定意屬性都可以返回）

prop返回true或false（只能返回標籤自帶屬性，不能返回自定義屬性）

data向被選元素附加數據，或者從被選元素獲取數據（即H5的自定義屬性）

attribute表示HTML文檔節點屬性，property表示JS對象的屬性。

<!– 這裏的id、class、data_id均是該元素文檔節點的attribute –>

// 這裏的name、age、url均是obj的property

var obj ={ name: “CodePlayer”, age: 18, url:”http://www.365mini.com/” };

prop()的設計目標用於設置或獲取指定DOM元素(指的是JS對象，Element類型)上的屬性(property);

attr()的設計目標是用於設置或獲取指定DOM元素所對應的文檔節點上的屬性(attribute)。

在html5中DOM標籤可以添加一些data-xxx的屬性，可以把data()看作是存取data-xxx這樣的DOM附加信息的方法。data()存取的內容可以是字符串、數組和對象

<divdata-role=”page” data-last-value=”43”data-hidden=”true”></div>

41. css的渲染順序？

css的渲染順序是從右向左

瀏覽器按“從右向左”讀取。意味着在選擇器 ul > lia[title=”home”] 中，首先被解析的是a[title=”home”]。這第一部分也被稱爲“目標選擇器”，最終選擇的元素是它。

#ID選擇符最高效，通配選擇符效率最低#

這裏有四種目標選擇器：ID,class,tag和通配符。按照效率排列如下。

#main-navigation{ } /* ID (最快)*/

body.home#page-wrap { } /* ID */

.main-navigation{ } /* Class */

ul lia.current { } /* Class *

ul { } /* Tag */

ul li a{ } /* Tag */

* { } /* 通配 (最慢) */

42. label標籤

如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。綁定的方法是：將for屬性值指定爲目的控件（綁定控件）的ID。一般情況下，在使用單選框和複選框時用label綁定比較常見。有兩種使用方法：

方法1：<label for=”userName”>用戶名：</label>

方法2：<label>用戶名：<inputtype=”text”/></label>

綁定的方法是：將for屬性值指定爲目的控件（綁定控件）的ID。一般情況下，在使用單選框和複選框時用label綁定比較常見。

Label中兩個屬性非常有用，一個是for，一個就是accesskey

For屬性：表示Label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點

Accesskey屬性：表示訪問label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。

用法：<labelfor=”inputBox” accesskey=”N”>姓名</label>

侷限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵衝突，否則將優先級或瀏覽器的快捷鍵。

43. readystate的狀態

0：請求未初始化（還沒有調用 open()）。

1：請求已經建立，但是還沒有發送（還沒有調用 send()）。

2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。

3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。

4：響應已完成；您可以獲取並使用服務器的響應了。

44. 手寫事件委託點擊li的內容，刪除對應的li元素

利用冒泡的原理，把事件加到父級上，觸發執行效果。最大的好處就是動態生成的元素還會保留原有的事件綁定。

<li>aaaaaaaa</li>

<li>bbbbbbbb</li>

<li>cccccccc</li>

</ul>

//一般的事件綁定辦法：

window.onload = function(){

var oUl= document.getElementById(“ul”);

var aLi= oUl.getElementsByTagName(“li”);

for(vari=0; i<aLi.length; i++){

aLi[i].onmouseover = function(){

this.style.background = “red”;

}

aLi[i].onmouseout = function(){

this.style.background = “”;

} } }

//利用事件委託綁定：

window.onload = function(){

var oUl= document.getElementById(“ul”);

var aLi= oUl.getElementsByTagName(“li”);

oUl.onmouseover = function(ev){

varev = ev || window.event;

vartarget = ev.target || ev.srcElement;

if(target.nodeName.toLowerCase() == “li”){

target.style.background = “red”;

} }

oUl.οnmοuseοut= function(ev){

varev = ev || window.event;

vartarget = ev.target || ev.srcElement;

if(target.nodeName.toLowerCase() == “li”){

target.style.background = “”;

} } }

//a點擊的時候，ul都會新增一個li，新增的li都有綁定事件

</ul>

//使用常用事件綁定實現

$(“#oUl”).find(“li”).on(“click”,function(){

//do something

})

$(“#addBtn”).on(“click”,function(){

$(“#oUl”).append(“<li></li>”);

$(“#oUl”).find(“li”).on(“click”,function(){

//do something

})

//使用事件委託實現

$(“document”).on(“click”,”#oUlli”,function(){

//dosomething

})

$(“#addBtn”).on(“click”,function(){

$(“#oUl”).append(“<li></li>”);

})

45. 數組去重的方法

（1）遍歷數組，建立新數組，利用indexOf判斷是否存在於新數組中，不存在則push到新數組，最後返回新數組（方法效率很低，需要遍歷數組）

function removeDuplicatedItem(ar) {

varret = [];

for(var i = 0, j = ar.length; i < j; i++) {

if (ret.indexOf(ar[i]) === -1) {

ret.push(ar[i]);

}

return ret;

}

（2）數組下標判斷法, 遍歷數組，利用indexOf判斷元素的值是否與當前索引相等，如相等則加入

function removeDuplicatedItem3(ar) {

varret = [];

ar.forEach(function(e, i, ar) {

if (ar.indexOf(e) === i) {

ret.push(e);

}

});

return ret;

}

（3）數組先排序，然後比較倆數組一頭一尾進行去重

function removeDuplicatedItem4(ar) {

varret = [], end;

ar.sort(); //先對數組進行排序

end =ar[0];

ret.push(ar[0]);

for(var i = 1; i < ar.length; i++) {

if (ar[i] != end) {

ret.push(ar[i]);

end = ar[i];

}

return ret;

}

（4）遍歷數組，利用object對象保存數組值，判斷數組值是否已經保存在object中，未保存則push到新數組並用object[arrayItem]=1的方式記錄保存

function removeDuplicatedItem2(ar) {

vartmp = {}, ret = []; //tmp爲hash表，ret爲臨時數組

for(var i = 0, j = ar.length; i < j; i++) { //遍歷當前數組

if (!tmp[ar[i]]) { //如果hash表中沒有當前項

tmp[ar[i]] = 1; //存入hash表

ret.push(ar[i]); //把當前數組的當前項push到臨時數組裏面

}

return ret;

}

46. function(event)

document.οnclick=function(){

alert(this.value); //this代表着在該作用域中離它最近的對象。

}

當我們觸發document的click事件時，便會產生一個事件對象，這個對象中包含着這個事件的相關信息，包括導致事件的元素、事件的類型、以及其它與特定事件相關的信息等。這個對象是在執行事件時，瀏覽器通過函數傳遞過來的。在W3C中可以直接接受event對象。但是IE中，是通過window.event來接收。

document.οnclick=function(evt){

var e=evt||window.event;

alert(e);

};

event || (event = window.event); //獲得event對象兼容性寫法

event.target||event.srcElement //獲得target兼容型寫法

// 阻止瀏覽器默認行爲兼容性寫法

event.preventDefault ? event.preventDefault() :(event.returnValue = false);

// 阻止冒泡寫法

event.stopPropagation ? event.stopPropagation(): (event.cancelBubble = true);

//註冊和刪除事件方法的形式

47. 實現文字放不下時顯示省略號的效果（css3）

text-overflow:clip|ellipsis|string;

clip 修剪文本。

ellipsis 顯示省略符號來代表被修剪的文本。

string 使用給定的字符串來代表被修剪的文本。

48. 獲取當前的網址並從中截取信息

window.location.href //返回當前加載頁面的完整URL

window.location.search //獲取 href屬性中跟在問號後面的部分

//解析查詢字符串，然後返回包含所有參數的一個對象

functiongetQueryStringArgs(){

//取得查詢字符串並去掉開頭的問號

varqs=(location.search.length>0?location.search.substring(1):” ”);

varargs={};//保存數據對象

items=qs.length?qs.split(“&”):[],

item=null,name=null,value=null,i=0,len=items.length;

//逐個將每一項添加到args對象中

for(i=0;i<len;i++){

item=item[i].split(“=”);

name=decodeURIComponent(item[0]);

value=decodeURIComponent(item1);

if(name.length){

args[name]=value;

}

return args;

}

49. 數組和字符串的各自的方法

數組的操作：

concat // 用於拼接多個數組，接受多個參數

push // 從數組尾部插入一個數，並返回新的數組長度

pop // 從數組尾部刪除一個數，並返回被刪除的數

shift // 從數組頭部刪除一個數，並返回被刪除的數

unshift //從數組頭部插入一個數，並返回新的數組的長度

sort // 將數組進行排序，可以傳遞一個參數，是一個函數，如果不傳參默認是數字從小到大，字母從A到B

reverse //將數組顛倒，沒有參數

slice // 截取並返回一個新的數組，可以傳兩個參數，截取開始的位置，和截取到的位置

splice // 可以傳入多個參數，沒有限制。第一個參數，找到一個參數的位置，第二個參數是刪除的個數，剩的參數就是要插入的數

join // 將一個數組變爲一個字符串，有一個參數，可以指定之間的分割字符，如果不傳參，默認是一個逗號

toString // 將一個數組變爲一個字符串，用逗號分隔

對字符串的操作：

indexOf //接受一個參數，在字符串中搜索的內容。返回正序搜索的第一次出現的位置。

lastindexOf// 接受一個參數，和上一個一樣。倒敘搜索，返回最後一次出現的位置

charAt // 接受一個數字，是字符串的第幾個字符串的位置，返回搜索位置的那個數

concat // 連接字符串

slice // 截取一個字符串，傳兩個參數，一個開始的位置，和一個結束的位置支持兩個參數，返回一個新的字符串

spilt // 將一個字符串轉化爲一個數組

substr // 截取一個字符串，接受兩個參數，第一個是截取字符串的開始的位置，以及截取的長度

toLowerCase // 將大寫的英文轉化爲小寫

toUpCase // 將小寫的英文轉化的小寫

50. 將數組轉化爲字符串,將一個字符串轉化爲數字，

數組轉字符串：需要將數組元素用某個字符連接成字符串

var a, b;

a = new Array(0,1,2,3,4);

b = a.join(“-“);

字符串轉數組：實現方法爲將字符串按某個字符切割成若干個字符串，並以數組形式返回

var s = “abc,abcd,aaa”;

ss = s.split(“,”);// 在每個逗號(,)處進行分解。

51. 簡述創建函數的幾種方式

1.函數聲明：function sum1(num1,num2){

returnnum1+num2;

}

2.函數表達式：var sum2 = function(num1,num2){

returnnum1+num2;

}

3.函數對象方式：var sum3 = newFunction(“num1”,”num2”,”return num1+num2”);

52. js數據類型和區分

基本數據類型：String,boolean,Number,Undefined, Null

引用數據類型：Object(Array,Date,RegExp,Function)

區分基本數據類型：typeof;

區分引用數據類型：instanceof

區分各數據類型： Object.prototype.toString.call()

53. 強制類型轉換和隱式類型轉換

強制（parseInt,parseFloat,number）

隱式（== –）

54. IE和標準下有哪些兼容性的寫法

var ev = ev || window.event

document.documentElement.clientWidth ||document.body.clientWidth

var target = ev.srcElement||ev.target

55. document.ready與window.onload：

1.執行時間

window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，不必等到加載完畢。

2.編寫個數不同

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個

$(document).ready()可以同時編寫多個，並且都可以得到執行

3.簡化寫法

window.onload沒有簡化寫法

(document).ready(function())</span><spanstyle="color:rgb(51,51,51)">可以簡寫成</span><spanstyle="color:rgb(51,51,51)"> (function(){});

56. px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

57. 什麼叫優雅降級和漸進增強？

漸進增強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級 graceful degradation：

一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給

b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要

c. 降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶

58. 寫出幾種IE6BUG的解決方法

1.雙邊距BUG float引起的使用display

3像素問題使用float引起的使用dislpay:inline -3px

3.超鏈接hover 點擊後失效使用正確的書寫順序 link visited hover active

4.Ie z-index問題給父級添加position:relative

5.Png 透明使用js代碼改

6.Min-height 最小高度！Important 解決’

7.select 在ie6下遮蓋使用iframe嵌套

8.爲什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

59. 你所瞭解到的Web攻擊技術

（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指通過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。

（2）SQL注入攻擊

（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者通過設置好的陷阱，強制對已完成的認證用戶進行非預期的個人信息或設定信息等某些狀態更新。

60. 關於原生dom操作

childNodes //查找父元素的所有子元素（多層），返回一個類數組對象，支持到ie6

parentNode //查找子元素的父節點（一層），返回父元素對象，支持到ie6

previousSibling//查找前一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6

nextSibling //查找後一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6

firstChild //查找父元素下的第一個子元素，返回子元素對象，支持到ie6

lastChild //查找父元素下的最後一個子元素，返回子元素對象，支持到ie6

getElementById(”) //通過元素的id進行查找，兼容到IE6

getElementsByTagName(”) //通過元素的標籤名進行查找，兼容到ie6

getElementsByName(”) //通過元素的name屬性查找，兼容到IE8

getElementsByClass(”)//通過元素的class屬性去查找，html5新出的。兼容性你懂的。

document.createElement() //創建HTML元素節點

document.createTextNode() //創建文本元素節點

appendChild() //向父元素的最後一個子元素處插入

insertBefore() //兩個參數，要插入的節點和作爲參照的節點

replaceChild() //兩個參數，要插入的節點和要替換的節點

removeChild() //要移除的對象

getAttribute() // 傳入一個參數，獲取相應屬性的值

setAttribute() // 兩個參數，第一個：屬性名稱，第二個：屬性的值

removeAttribute() // 刪除屬性，輸入要刪除的屬性名稱

innerHTML // 屬性返回與調用元素的所有子節點（包括元素、註釋和文本節點），當然也可以寫入父元素下的子元素

innerText // 功能和上一條類似，但是隻對操作元素下的文本元素有影響

站內首發文章

_cpeng

發佈了19 篇原創文章 · 獲贊 115 · 訪問量 2萬+

私信關注

整理的前端面試題1

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

java由於越界導致的報錯

前端工具安裝

整理的前端面試題2

你不知道的XHR

javascript 劍指offer

Javascript基礎程序測試題

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結