阅读 724

前端面试(个人收藏总结)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…