前端面试（我的收藏总结）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…