一、js面试题

1.深拷贝和浅拷贝的区别

首先，javascript 的数据类型分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

深浅拷贝的区别：https://segmentfault.com/a/1190000018874254
js内存模型详解：https://www.cnblogs.com/fayin/p/10763689.html

2.local.storage和session storage的区别

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性

  1. var storage = null;
  2. if(window.localStorage){              //判断浏览器是否支持localStorage
  3.   storage = window.localStorage;     
  4.   storage.setItem("name", "Rick");    //调用setItem方法，存储数据
  5.   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
  6.   storage.removeItem("name");     //调用removeItem方法，移除数据
  7.   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
  8. }

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

共同点：
1、localStorage和sessionStorage都是用来存储客户端临时信息的对象。
2、他们均只能存储字符串类型的对象。
3、不同浏览器无法共享localStorage或sessionStorage中的信息。

区别：
1、sessionStorage存储的值关闭浏览器后会自动清除，而localStorage存储的值不手动处理会一直存在。
2、相同浏览器的不同页面的标签页间可以共享相同的 localStorage，但是不同页面的标签页间无法共享sessionStorage的信息。

简便用法：
可用sessionStorage.xx代替sessionStorage.getItem(‘xx’)，可用sessionStorage.yy = zz代替sessionStorage.setItem(yy,zz)，localStorage同理。

3.axios的特点

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

    4.let const var 定义的变量和未使用关键字定义的变量有啥区别

    二、CSS面试题

    1.position的值？

  • static（默认）：按照正常文档流进行排列；

  • relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
  • absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
  • fixed(固定定位)：所固定的参照对像是可视窗口。

三、html面试题

1.浏览器是如何渲染页面的

  • 解析HTML文件，创建DOM树。自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）；
  • 解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
  • 将CSS与DOM合并，构建渲染树（Render Tree）；
  • 布局和绘制，重绘（repaint）和重排（reflow）。

2.事件冒泡，事件捕捉，事件委托

事件冒泡就是当一个目标元素发生一个事件的时候，这个事件会一层一层的向上传递，直到传递到document。而事件捕捉是当发生一个事件的时候，事件会从document一层一层的向下传递，直到传递到目标元素。
而事件委托就是依靠事件冒泡和事件捕获机制，如果很多子元素都要触发相同的事件回调，就不用在每个元素上绑定事件，只需要在父元素监听事件，由于存在事件冒泡机制，所有的子元素的事件都会冒泡到父元素，相当于是将所有子元素的事件都委托给一个父元素来进行统一处理。这样的机制使得开发更加的方便和合理。

四、web性能优化

1.如何做web性能优化？

  1. 减少HTTP请求：减少图片的请求、减少脚本文件与样式表的请求
    • 图片的减少通常有两种方式：css sprites、内联图片、IconFont。
      • CSS Sprites：将多张图片合并成一幅单独的图片，使用css的background-position属性，将html元素的背景图片放到 sprites 图片中的期望位置上。
      • 内联图片：通过使用data:URL模式可以再页面中包含图片而无需任何额外的请求。
      • IconFont：字体图标，这是近年来新流行的一种以字体代替图片的技术。
    • 减少脚本与样式表的请求主要原则就是合并。
  2. 页面内部优化
    • 关于页面内部优化主要方向：样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本
  3. 启用缓存

    五、HTTP

    1. http的流程

    第一步：域名解析，浏览器查找本地缓存，若没有则请求域名服务器。拿到请求发送的id地址；
    第二步：建立TCP连接，三次握手建立TCP连接；
    第三步：发送请求，发送请求命令（get/post/delete）,发送请求头信息；
    第四步：响应一个301永久重定向响应；
    第五步：回送应答（http/1.1 200 ok），回送应答头信息;
    第六步：服务器发送数据，以content-type所描述的格式发送用户请求的实际数据；
    第七步：关闭TCP连接。

六、网络安全

1.xss攻击

2.XSRF

七、vue

1.Vue组件第一次加载是要走的生命周期

加载渲染过程 : 父 beforeCreate -> 父 created -> 父 beforeMount -> 父 mounted -> 子 beforeCreate -> 子 created ->子 beforeMount -> 子 mounted
子组件更新过程 : 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程 : 父 beforeUpdate -> 父 updated
销毁过程 : 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

2.Vue编译原理

第一步是将 模板字符串 转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）
抽象语法树（AST）Abstract Syntax Tree
AST：https://segmentfault.com/a/1190000016231512
编译原理：https://www.cnblogs.com/dhsz/p/8462227.html

3.Vue数据双向绑定的原理

数据监听原理：https://github.com/berwin/Blog/issues/17

4.Vue事件传值