前端面試（我的收藏總結）javascript篇（二）

前端面試（我的收藏總結）HTML篇

前端面試（我的收藏總結）CSS篇

前端面試（我的收藏總結）javascript篇（一）

DOM是哪一種基本數據結構

樹

DOM節點的attribute和property有何區別

• property：是一個對象的屬性的修改

• attribute：是對html標籤屬性的修改

如何檢測瀏覽器的類型/內核/是否移動端

navigator.userAgent

拆解url各部分

location

// URL:http://www.example.com/test.html?key=value＃PART
location.href //返回完整的URL
// https://www.example.com/test.html?key=value＃PART
location.protocol //返回一個URL協議
// https
location.hostname //返回URL的主機名
// www.example.com
location.port //返回一個URL的端口號
// 若是端口號是80,則返回空
location.host //返回一個URL的主機名和端口
// www.example.com(若是端口號是80,則不顯示)
location.pathname //返回的URL路徑名
// test.html
location.search //返回一個URL的查詢部分
// ?key=value
location.hash //返回一個URL的錨部分
// ＃PART
複製代碼

事件

事件級別：

DOM0:element.onclick=()=>{}

DOM2:element.addEventListener('click',()=>{},false)

DOM3:DOM2基礎上增長支持更多事件類型

事件模型：

• 捕獲：從頂層一直往下至目標元素
• 冒泡：從目標元素一直往上至頂層

描述事件流機制

即事件發生順序

捕獲階段=>目標階段=>冒泡階段

自定義事件

new Event()

手寫ajax

var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false);
xhr.onreadystatechange = function(){
  if(xhr.readyState==4 && xhr.status==200){
  		conse.log(xhr.responseText)
	}
}
xhr.send(null);
複製代碼

描述cookie，sessionStorage和localStorage的區別

都是本地存儲

• cookie自己用於客戶端和服務器的通訊。存儲量少，約4k。

每次請求都會攜帶，會影響獲取資源的效率。

• sessionStorage localStorage H5的本地存儲技術，存儲容量大。

sessionStorage一個會話結束後儲存數據會被銷燬

localStorage則不會，不手動清除則能永久保存

AMD,CMD,CommonJS的區別

• AMD：require.js，異步的，依賴前置

• CMD：swa.js，同步的，就近依賴

• CommonJS：服務端模塊化規範，

  • module.exports={key:value} 匿名輸出（暴露），exports.key=value 對象輸出

• ES6模塊化：export/import

詳細原理參考：很全很全的JavaScript的模塊講解

跨域

緣由：同源策略，cookie、localstorage、indexdb沒法讀取、dom沒法操做、ajax沒法發送

先後端通訊方式：ajax、websocket、CORS

解決：

• JSONP：網頁動態插入<script>元素由它向跨源網址發出請求，服務器收到請求後，將數據放在一個指定名字的回調函數裏傳回來。只能發get請求
• window.postMessage：window對象新增了一個方法，容許跨窗口通訊
• CORS：跨源資源共享。服務器配置
• websocket：是HTML5提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。
• Nginx反向代理

詳細原理參考：www.ruanyifeng.com/blog/2016/0…