1.document.write和innerHTML的區(qū)別；
?答：document.write是直接寫入到頁面的內(nèi)容流，會導致頁面被重寫。innerHTML將內(nèi)容寫入某個DOM節(jié)點，不會導致頁面全部重繪；
2.ajax的步驟；
?答：(1) 創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.?
? ? ? (2) 創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.?
? ? ? (3)設置響應HTTP請求狀態(tài)變化的函數(shù).?
? ? ? (4)發(fā)送HTTP請求.?
? ? ? (5)獲取異步調(diào)用返回的數(shù)據(jù).?
? ? ? (6)使用JavaScript和DOM實現(xiàn)局部刷新.
3.xml和json的區(qū)別；
?答：json數(shù)據(jù)體積小，傳遞速度快，JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互，XML對數(shù)據(jù)描述性比較好；
4.清楚浮動的幾種方法；
?答：(1).父級div定義 height ;(如果高度和父級div不一樣時，會產(chǎn)生問題)
? ? ? (2).結(jié)尾處加空div標簽 clear:both;
? ? ? (2).父級div定義 偽類:after 和 zoom;(IE8以上和非IE瀏覽器才支持:after)
? ? ? (2).父級div定義 overflow:hidden;(不能和position配合使用)
5.box-sizing常用的屬性;
?答：· box-sizing：content-box；(默認屬性值，W3C)
? ? ? · box-sizing：border-box;(IE盒模型)
? ? ? · box-sizing：inherit;
(box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容)
6.常見的ES6語法；
?答：let，const，箭頭函數(shù)，字符串模板，class類，模塊化，promise
7.undefined 和 null 區(qū)別；
?答：null： Null類型，代表“空值”代表一個空對象指針，使用typeof運算得到 “object”
? ? ?undefined： Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。(null 和 undefined 都表示“值的空缺”，你可以認為undefined是表示系統(tǒng)級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常的或在意料之中的值的空缺。)
8.常見的HTTP狀態(tài)碼；
?答：2開頭 （請求成功）、3開頭 （請求被重定向）、4開頭 （請求錯誤）、5開頭（服務器錯誤）
9.網(wǎng)站性能優(yōu)化；
?答：1. JavaScript 壓縮和模塊打包
? ? ? 2. 按需加載資源
? ? ? 3. 緩存
? ? ? 4. 使用索引加速數(shù)據(jù)庫查詢
? ? ? 5. 使用更快的轉(zhuǎn)譯方案
? ? ? 6. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
? ? ? 7. 圖片編碼優(yōu)化
10.JS哪些操作會造成內(nèi)存泄露；
?答：1）意外的全局變量引起的內(nèi)存泄露；
? ? ? 2）閉包引起的內(nèi)存泄露；
? ? ? 3）沒有清理的DOM元素引用；
? ? ? 4）被遺忘的定時器或者回調(diào)；
? ? ? 5）子元素存在引起的內(nèi)存泄露；
11.什么是閉包，如何使用它，為什么要使用它；
?答：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個函數(shù)內(nèi)部的函數(shù)”；由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會造成網(wǎng)頁的性能問題，在IE中可能導致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
12.JavaScript的同源策略；
?答：同源策略規(guī)定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操作另外一個域的絕大部分屬性和方法。
13.瀏覽器是如何渲染頁面的；
?答：1.解析HTML文件，創(chuàng)建DOM樹。自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
? ? ?2.解析CSS。優(yōu)先級：瀏覽器默認設置<用戶設置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；
? ? ?3.將CSS與DOM合并，構(gòu)建渲染樹（Render Tree）；
? ? ?4.布局和繪制，重繪（repaint）和重排（reflow）；
14.從輸入url到顯示頁面，都經(jīng)歷了什么；
?答：1、首先，在瀏覽器地址欄中輸入url
? ? ? 2、瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三步操作。
? ? ? 3、在發(fā)送http請求前，需要域名解析(DNS解析)，解析獲取相應的IP地址。
? ? ? 4、瀏覽器向服務器發(fā)起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協(xié)議。TCP連接是互聯(lián)網(wǎng)連接協(xié)議集的一種。）
? ? ? 5、握手成功后，瀏覽器向服務器發(fā)送http請求，請求數(shù)據(jù)包。
? ? ? 6、服務器處理收到的請求，將數(shù)據(jù)返回至瀏覽器
? ? ? 7、瀏覽器收到HTTP響應
? ? ? 8、讀取頁面內(nèi)容，瀏覽器渲染，解析html源碼
? ? ? 9、生成Dom樹、解析css樣式、js交互
? ? ? 10、客戶端和服務器交互
? ? ? 11、ajax查詢
15.對<meta></meta>標簽有什么理解，meta的作用
?答：可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務；meta里的數(shù)據(jù)是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是可以添加服務器發(fā)送到瀏覽器的http頭部內(nèi)容
16.怎么去設計一個組件封裝；
?答：1)組件封裝的目的是為了重用，提高開發(fā)效率和代碼質(zhì)量
? ? ? 2)低耦合，單一職責，可復用性，可維護性
? ? ? 3)前端組件化設計思路
17.線程，進程
?答： 1)線程是最小的執(zhí)行單元，進程是最小的資源管理單元
? ? ? ?2)一個線程只能屬于一個進程，而一個進程可以有多個線程，但至少有一個線程
18.vue數(shù)據(jù)的雙向數(shù)據(jù)綁定；
?答：vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調(diào)。
19.get與post 通訊的區(qū)別；
?答：1).Get 請求能緩存，Post 不能；
? ? ? 2).Post 相對 Get 安全一點點，因為Get 請求都包含在 URL 里，且會被瀏覽器保存歷史紀錄，Post 不會，但是在抓包的情況下都是一樣的；
? ? ? 3).Post 可以通過 request body來傳輸比 Get 更多的數(shù)據(jù)，Get 沒有這個技術(shù)；
? ? ? 4).URL有長度限制，會影響 Get 請求，但是這個長度限制是瀏覽器規(guī)定的，不是 RFC 規(guī)定的；
? ? ? 5).Post 支持更多的編碼類型且不對數(shù)據(jù)類型限制；
20.頁面導入樣式時，使用link和@import有什么區(qū)別；
?答：（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
? （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
? （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。
21.this對象的理解；
?答：this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
? 如果有new關(guān)鍵字，this指向new出來的那個對象；
? 在事件中，this指向觸發(fā)這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window。
22.eval是做什么的；
?答：它的功能是把對應的字符串解析成JS代碼并運行；
應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。
由JSON字符串轉(zhuǎn)換為JSON對象的時候可以用eval，var obj =eval('('+ str +')')。
23.--------------什么叫優(yōu)雅降級和漸進增強-------------------
?答：優(yōu)雅降級：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。
? 漸進增強：針對低版本的瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的體驗效果。
24.如果解決ajax無法后退的問題；
?答：1).html5里引入了新的API，即：history.pushState,history.replaceState
? ? ? 2).可以通過pushState和replaceSate接口瀏覽器歷史，并且改變當前頁面的URL
? ? ? 3).onpopstate監(jiān)聽后退
25.事件委托；
?答：利用冒泡原理，把事件加到父級上，觸發(fā)執(zhí)行效果
? ? ? 可以大量節(jié)省內(nèi)存占用，減少事件注冊
? ? ? 可以方便地動態(tài)添加和修改元素，不需要因為元素的改動而修改事件綁定
26.let和const的區(qū)別；
?答：let聲明的變量可以改變，值和類型都可以改變，沒有限制；
? ? ? const聲明的變量不得改變值；
27.Cookie的弊端；
?答： cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔了服務器存儲的負擔，但是有很多局限性；
?? ?第一：每個特定的域名下最多生成20個cookie
?? ?第二：IE和Opera 會清理近期最少使用的cookie，F(xiàn)irefox會隨機清理cookie
28.介紹promise；
?答：就是一個對象，用來傳遞異步操作的消息。有三種狀態(tài)：pending(進行中)，resolved(已完成)和rejected(失敗)
? ? ? 有了promise對象，就可以將異步操作以同步操作的流程表示出來，避免了層層嵌套的回調(diào)函數(shù)
29.vue父子組件通信；
?答：父組件是通過props屬性給子組件通信，在子組件里面emit，在父組件監(jiān)聽；
30.移動端兼容問題；
?答：IOS移動端click時間300ms的延遲響應；
? ? ? 一些情況下對非可點擊元素如（label,span）監(jiān)聽click時間，ios下不會觸發(fā)，css增加cursor:poiner就搞定了；
31.cookie和session有什么聯(lián)系和區(qū)別；
?答：cookie數(shù)據(jù)存放在客戶的瀏覽器上，session數(shù)據(jù)放在服務器上
? ? ? session比cookie更安全
? ? ? 單個cookie保存的數(shù)據(jù)不能超過4k，很多瀏覽器都限制一個站點最多保存20個cookie
? ? ? 一般用cookie來存儲sessionid
32.移動端性能優(yōu)化；
?答：1_ 盡量使用css3動畫，開啟硬件加速
? ? ? 2_ 適當使用touch事件代替click事件
? ? ? 3_ 避免使用css3漸變陰影效果
? ? ? 4_ 可以用transform: translateZ(0) 來開啟硬件加速
? ? ? 5_ 不濫用float。float在渲染時計算量比較大，盡量減少使用
? ? ? 6_ 不濫用web字體。web字體需要下載，解析，重繪當前頁面
? ? ? 7_ 合理使用requestAnimationFrame動畫代替setTimeout
33.常見兼容性問題；
?答：1_ png24位的圖片在ie6瀏覽器上出現(xiàn)背景，解決方案是做成png8，也可以引用一段腳本處理；
? ? ? 2_ 瀏覽器默認的margin和padding不同，解決方案是加一個全局的*{margin: 0;padding:0;}來統(tǒng)一；
? ? ? 3_ IE5-8不支持opacity；
? ? ? 4_ ol內(nèi)的序號全為1，不遞增；（為li設置樣式display: list-item）
版權(quán)聲明：本文為CSDN博主「樹尚」的原創(chuàng)文章，稍作修改， 原文鏈接：https://blog.csdn.net/Peng_wl/article/details/94383068
