1，闡述清楚浮動的幾種方式（常見問題）
（1）父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題，
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
（2）父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
（3） 結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
2，解釋css sprites ，如何使用？
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置，
CSS Sprites為一些大型的網站節約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片
3，如何用原生js給一個按鈕系結兩個onclick事件？
//事件監聽 系結多個事件
var btn = document.getElementById("btn");
btn.addEventListener("click",hello1);
btn.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
4，拖拽會用到哪些事件
· dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設定拖拽所需資料,從作業系統拖拽檔案到瀏覽器時不觸發此事件.
· dragenter:拖拽滑鼠進入元素時在該元素上觸發,用于給拖放元素設定視覺反饋,如高亮
· dragover:拖拽時滑鼠在目標元素上移動時觸發.監聽器通過阻止瀏覽器默認行為設定元素為可拖放元素.
· dragleave:拖拽時滑鼠移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設定的視覺效果.
· drag:拖拽期間在被拖拽元素上連續觸發
· drop:滑鼠在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集資料并且執行所需操作.如果是從作業系統拖放檔案到瀏覽器,需要取消瀏覽器默認行為.
· dragend:滑鼠在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到作業系統時不會觸發此事件.
5，請列舉jquery中的選擇器：
#id，.class，element，:first，:even，:eq(index)，:contains(text)
鏈接：jQuery選擇器
6，Javascript中的定時器有哪些？他們的區別及用法是什么？
setTimeout 只執行一次
setInterval 會一直重復執行
7，請描述一下 cookies sessionStorage和localstorage區別
（1）相同點：都存盤在客戶端
不同點：1.存盤大小
· cookie資料大小不能超過4k，
· sessionStorage和localStorage 雖然也有存盤大小的限制，但比cookie大得多，可以達到5M或更大，
（2）有效時間
· localStorage 存盤持久資料，瀏覽器關閉后資料不丟失除非主動洗掉資料；
· sessionStorage 資料在當前瀏覽器視窗關閉后自動洗掉，
· cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
（3）資料與服務器之間的互動方式
· cookie的資料會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
· sessionStorage和localStorage不會自動把資料發給服務器，僅在本地保存，
8，撰寫一個方法去掉陣列里面重復的內容？
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個新的陣列
var s = [];
//遍歷陣列
for(var i = 0;i<arr.length;i++){
if(s.indexOf(arr[i]) == -1){ //判斷在s陣列中是否存在，不存在則push到s陣列中
s.push(arr[i]);
}
}
console.log(s);
//輸出結果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]
9，document.write和innerHTML的區別：
document.write是直接寫入到頁面的內容流，如果在寫之前沒有呼叫document.open, 瀏覽器會自動呼叫open，每次寫完關閉之后重新呼叫該函式，會導致頁面被重寫，
innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容，你可以精確到某一個具體的元素來進行更改，如果想修改document的內容，則需要修改document.documentElement.innerElement，
innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪
innerHTML很多情況下都優于document.write，其原因在于其允許更精確的控制要重繪頁面的那一個部分，
10，什么是ajax? ajax的步驟？
ajax(異步javascript xml) 能夠重繪區域網頁資料而不是重新加載整個網頁，
如何使用ajax?
第一步，創建xmlhttprequest物件，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest物件用來和服務器交換資料，
var xhttp;
if (window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對瀏覽器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest物件的open（）和send（）方法發送資源請求給服務器，
第三步，使用xmlhttprequest物件的responseText或responseXML屬性獲得服務器的回應，
第四步，onreadystatechange函式，當發送請求到服務器，我們想要服務器回應執行一些功能就需要使用onreadystatechange函式，每次xmlhttprequest物件的readyState發生改變都會觸發onreadystatechange函式，
11，xml和json的區別
· JSON相對于XML來講，資料的體積小，傳遞的速度更快些
· JSON與JavaScript的互動更加方便，更容易決議處理，更好的資料互動
· XML對資料描述性比較好；
· JSON的速度要遠遠快于XML；
12，js有幾種資料型別，其中基本資料型別有哪些
五種基本型別: Undefined、Null、Boolean、Number和String，
參考型別: Object、Array和Function，
13，undefined和null的區別
null： Null型別，代表“空值”，代表一個空物件指標，使用typeof運算得到 “object”，所以你可以認為它是一個特殊的物件值，
undefined： Undefined型別，當一個宣告了一個變數未初始化時，得到的就是undefined，
null是javascript的關鍵字，可以認為是物件型別，它是一個空物件指標，和其它語言一樣都是代表“空值”，不過 undefined 卻是javascript才有的，undefined是在ECMAScript第三版引入的，為了區分空指標物件和未初始化的變數，它是一個預定義的全域變數，沒有回傳值的函式回傳為undefined，沒有實參的形參也是undefined，
javaScript權威指南： null 和 undefined 都表示“值的空缺”，你可以認為undefined是表示系統級的、出乎意料的或類似錯誤的值的空缺，而null是表示程式級的、正常的或在意料之中的值的空缺
14，http和https有何區別？
http是HTTP協議運行在TCP之上，所有傳輸的內容都是明文，客戶端和服務器端都無法驗證對方的身份，
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上，所有傳輸的內容都經過加密，加密采用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密，此外客戶端可以驗證服務器端的身份，如果配置了客戶端驗證，服務器方也可以驗證客戶端的身份，
15，常見的HTTP狀態碼
2開頭 （請求成功）表示成功處理了請求的狀態代碼，
200 （成功） 服務器已成功處理了請求， 通常，這表示服務器提供了請求的網頁，
201 （已創建） 請求成功并且服務器創建了新的資源，
202 （已接受） 服務器已接受請求，但尚未處理，
203 （非授權資訊） 服務器已成功處理了請求，但回傳的資訊可能來自另一來源，
204 （無內容） 服務器成功處理了請求，但沒有回傳任何內容，
205 （重置內容） 服務器成功處理了請求，但沒有回傳任何內容，
206 （部分內容） 服務器成功處理了部分 GET 請求，
3開頭 （請求被重定向）表示要完成請求，需要進一步操作， 通常，這些狀態代碼用來重定向，
300 （多種選擇） 針對請求，服務器可執行多種操作， 服務器可根據請求者 (user agent) 選擇一項操作，或提供操作串列供請求者選擇，
301 （永久移動） 請求的網頁已永久移動到新位置， 服務器回傳此回應（對 GET 或 HEAD 請求的回應）時，會自動將請求者轉到新位置，
302 （臨時移動） 服務器目前從不同位置的網頁回應請求，但請求者應繼續使用原有位置來進行以后的請求，
303 （查看其他位置） 請求者應當對不同的位置使用單獨的 GET 請求來檢索回應時，服務器回傳此代碼，
304 （未修改） 自從上次請求后，請求的網頁未修改過， 服務器回傳此回應時，不會回傳網頁內容，
305 （使用代理） 請求者只能使用代理訪問請求的網頁， 如果服務器回傳此回應，還表示請求者應使用代理，
307 （臨時重定向） 服務器目前從不同位置的網頁回應請求，但請求者應繼續使用原有位置來進行以后的請求，
4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理，
400 （錯誤請求） 服務器不理解請求的語法，
401 （未授權） 請求要求身份驗證， 對于需要登錄的網頁，服務器可能回傳此回應，
403 （禁止） 服務器拒絕請求，
404 （未找到） 服務器找不到請求的網頁，
405 （方法禁用） 禁用請求中指定的方法，
406 （不接受） 無法使用請求的內容特性回應請求的網頁，
407 （需要代理授權） 此狀態代碼與 401（未授權）類似，但指定請求者應當授權使用代理，
408 （請求超時） 服務器等候請求時發生超時，
409 （沖突） 服務器在完成請求時發生沖突， 服務器必須在回應中包含有關沖突的資訊，
410 （已洗掉） 如果請求的資源已永久洗掉，服務器就會回傳此回應，
411 （需要有效長度） 服務器不接受不含有效內容長度標頭欄位的請求，
412 （未滿足前提條件） 服務器未滿足請求者在請求中設定的其中一個前提條件，
413 （請求物體過大） 服務器無法處理請求，因為請求物體過大，超出服務器的處理能力，
414 （請求的 URI 過長） 請求的 URI（通常為網址）過長，服務器無法處理，
415 （不支持的媒體型別） 請求的格式不受請求頁面的支持，
416 （請求范圍不符合要求） 如果頁面無法提供請求的范圍，則服務器會回傳此狀態代碼，
417 （未滿足期望值） 服務器未滿足"期望"請求標頭欄位的要求，
5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤， 這些錯誤可能是服務器本身的錯誤，而不是請求出錯，
500 （服務器內部錯誤） 服務器遇到錯誤，無法完成請求，
501 （尚未實施） 服務器不具備完成請求的功能， 例如，服務器無法識別請求方法時可能會回傳此代碼，
502 （錯誤網關） 服務器作為網關或代理，從上游服務器收到無效回應，
503 （服務不可用） 服務器目前無法使用（由于超載或停機維護）， 通常，這只是暫時狀態，
504 （網關超時） 服務器作為網關或代理，但是沒有及時從上游服務器收到請求，
505 （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本，
16，如何進行網站性能優化
（1）目的： 從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作回應得更及時，能夠給用戶提供更為友好的體驗，從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源，
（2）措施：
——減少HTTP請求數，
——使用快取，
——腳本的無阻塞加載，
——行內腳本的位置優化等，
——Javascript中的DOM 操作優化、CSS選擇符優化，
——圖片編碼優化，懶加載，
——使用負載均衡方案，
17，什么是mvvm，mvc？區別？
（1）MVC（Model-View-Controller）
MVC是比較直觀的架構模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業務邏輯處理）->Model（資料持久化）->View（將結果反饋給View），MVC使用非常廣泛，比如JavaEE中的SSH框架，
（2）MVVM（Model-View-ViewModel）
如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革，它是將“資料模型資料雙向系結”的思想作為核心，因此在View和Model之間沒有聯系，通過ViewModel進行互動，而且Model和ViewModel之間的互動是雙向的，因此視圖的資料的變化會同時修改資料源，而資料源資料的變化也會立即反應view，微信小程式前端使用mvvm，
18，px和em的區別
px表示像素 (計算機螢屏上的一個點：1px = 1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；
em表示相對于父元素的字體大小，em是相對單位 ，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值，
19，優雅降級和漸進增強
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、互動、追加功能達到更好的體驗，
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然后針對瀏覽器測驗和修復，比如一開始使用 CSS3 的特性構建了一個應用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽，
其實漸進增強和優雅降級并非什么新概念，只是舊的概念換了一個新的說法，在傳統軟體開發中，經常會提到向上兼容和向下兼容的概念，漸進增強相當于向上兼容，而優雅降級相當于向下兼容，
20， JS哪些操作會造成記憶體泄露
（1）意外的全域變數引起的記憶體泄露，
function leak(){
leak="xxx";//leak成為一個全域變數，不會被回收
}
（2）閉包引起的記憶體泄露，
（3）沒有清理的DOM元素參考，
（4）被遺忘的定時器或者回呼 5）子元素存在引起的記憶體泄露，
21，什么是閉包，如何使用它，為什么要使用它？
閉包就是能夠讀取其他函式內部變數的函式，由于在Javascript語言中，只有函式內部的子函式才能讀取區域變數，因此可以把閉包簡單理解成“定義在一個函式內部的函式”，
所以，在本質上，閉包就是將函式內部和函式外部連接起來的一座橋梁，閉包可以用在許多地方，它的最大用處有兩個，一個是前面提到的可以讀取函式內部的變數，另一個就是讓這些變數的值始終保持在記憶體中，
使用閉包的注意點：
· 由于閉包會使得函式中的變數都被保存在記憶體中，記憶體消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致記憶體泄露，解決方法是，在退出函式之前，將不使用的區域變數全部洗掉，
· 閉包會在父函式外部，改變父函式內部變數的值，所以，如果你把父函式當作物件（object）使用，把閉包當作它的公用方法（Public Method），把內部變數當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函式內部變數的值，
22，請解釋一下JavaScript的同源策略，
在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證資料的安全性方面有著重要的意義，同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法，那么什么叫相同域，什么叫不同的域呢？當兩個域具有相同的協議, 相同的埠，相同的host，那么我們就可以認為它們是相同的域，同源策略還應該對一些特殊情況做處理，比如限制file協議下腳本的訪問權限，本地的HTML檔案在瀏覽器中是通過file協議打開的，如果腳本能通過file協議訪問到硬碟上其它任意檔案，就會出現安全隱患，目前IE8還有這樣的隱患，
23，怎樣添加、移除、移動、復制、創建和查找節點？
（1）創建新節點
createDocumentFragment() //創建一個DOM片段
createElement() //創建一個具體的元素
createTextNode() //創建一個文本節點
（2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
（3）查找
getElementsByTagName() //通過標簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
24，瀏覽器是如何渲染頁面的？
渲染的流程如下：
1.決議HTML檔案，創建DOM樹，
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續外部腳本的加載），
2.決議CSS，優先級：瀏覽器默認設定<用戶設定<外部樣式<行內樣式<HTML中的style樣式，
3.將CSS與DOM合并，構建渲染樹（Render Tree），
4.布局和繪制，重繪（repaint）和重排（reflow），
25，從輸入url到顯示頁面，都經歷了什么？
一般會經歷以下幾個程序：
1、首先，在瀏覽器地址欄中輸入url，
2、瀏覽器先查看瀏覽器快取-系統快取-路由器快取，如果快取中有，會直接在螢屏中顯示頁面內容，若沒有，則跳到第三步操作，
3、在發送http請求前，需要域名決議(DNS決議)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它作為可以將域名和IP地址相互映射的一個分布式資料庫，能夠使人更方便的訪問互聯網，而不用去記住IP地址，)，決議獲取相應的IP地址，
4、瀏覽器向服務器發起tcp連接，與瀏覽器建立tcp三次握手，（TCP即傳輸控制協議，TCP連接是互聯網連接協議集的一種，）
5、握手成功后，瀏覽器向服務器發送http請求，請求資料包，
6、服務器處理收到的請求，將資料回傳至瀏覽器，
7、瀏覽器收到HTTP回應，
8、讀取頁面內容，瀏覽器渲染，決議html原始碼，
9、生成Dom樹、決議css樣式、js互動，
10、客戶端和服務器互動，
11、ajax查詢，
26，display:none和visibility:hidden區別？
1.display:none是徹底消失，不在檔案流中占位，瀏覽器也不會決議該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在檔案流中占位，瀏覽器會決議該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生回流（當頁面中的一部分元素需要改變規模尺寸、布局、顯示隱藏等，頁面重新構建，此時就是回流，所有頁面第一次加載時需要產生一次回流），而visibility切換是否顯示時則不會引起回流，
27，JavaScript中如何檢測一個變數是一個String型別？請寫出函式實作
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
28，判斷一個字串中出現次數最多的字符，統計這個次數
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};
var iMax = 0;var iIndex = '';for(var i in json){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
29，$(document).ready()方法和window.onload有什么區別？
(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯檔案)完全加載到瀏覽器后才執行的，
(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，并呼叫執行系結的函式，
30，jquery中$.get()提交和$.post()提交有區別嗎？
相同點：都是異步請求的方式來獲取服務端的資料；
不同點：
（1）請求方式不同：$.get() 方法使用GET方法來進行異步請求的，$.post() 方法使用POST方法來進行異步請求的，
（2）引數傳遞方式不同：get請求會將引數跟在URL后進行傳遞，而POST請求則是作為HTTP訊息的物體內容發送給Web服務器的，這種傳遞是對用戶不可見的，
（3）資料傳輸大小不同：get方式傳輸的資料大小不能超過2KB 而POST要大的多，
（4）安全問題： GET 方式請求的資料會被瀏覽器快取起來，因此有安全問題，
碼字不易，如果覺得有幫助，一定要給我點贊喲~~
不然信不信我砸了你家燈，半夜偷親你 (￣ε ￣) !!!
————————————————
著作權宣告：本文為CSDN博主「就叫小木木呀」的原創文章，遵循 CC 4.0 BY-SA 著作權協議，轉載請附上原文出處鏈接及本宣告，
原文鏈接：https://blog.csdn.net/wangerrong/article/details/90704474
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179045.html
標籤：JavaScript
下一篇：JS中的兼容性問題