总结前端面试问到的问题点

今天面试问到了几个问题点，我顺便把重要的几个问题点记下来，后续还有会补上！

1、vue的render函数和templet的区别？

template----html的方式做渲染

render----js的方式做渲染

render（提供）是一种编译方式render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。

h就是createElement()方法：createElement(标签名称,属性配置,children)

template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。

区别：

1. render的渲染方式是通过createElement()进行虚拟Dom的创建，逻辑性较强，适合复杂的组件封装。
2. templet类似于html一样的模版类进行组件封装。
3. render的性能大于templet。
4. render的优先级大于templet。

2、怎么解决vue数据改变而视图没有实时更新的问题？

可通过$set()解决或者利用Object.assign()创建一个新对象亦可以解决。

3、const、let、var的区别

1. const是常量，定义的变量不能修改，必须初始化，不存在变量提升。
2. let声明只在块级作用域下有效，不存在变量提升，一经声明，不可在同作用域下再次声明。
3. var声明在全局作用域下都有效，存在变量提升，可以重复声明。

4、localStorage、sessionStorage 和 cookie的区别

1）存储大小

cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）

sessionStorage：5M或者更大

localStorage：5M或者更大

2）数据有效期

cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据

3）作用域

cookie：在所有同源窗口中都是共享的

sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）

localStorage：在所有同源窗口中都是共享的

4）通信

ccokie：十种携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

5）易用性

cookie：需要自己进行封装，原生的cookie接口不够友好

sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持

localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持

sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后，sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的

补充 session 和 cookie 的区别：

cookie和session都是用来跟踪浏览器用户身份的会话方式。

1. cookie 保存在客户端，session 保存在服务器端
2. cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session
3. session会在一定时间内保存在服务器上，当访问增多，会占用服务器的性能，考虑到减轻服务器性能方面，应当使用cookie
4. session中保存的是对象，cookie中保存的是字符串
5. cookie 用来判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
6. Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

5、css@import和link的区别

1. 从属关系：link是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；而@import是css的语法，只有导入样式表的作用。
2. 加载顺序：页面被加载时，link会和html同时被加载而；@import引入的 CSS 将在页面加载完毕后被加载。
3. 兼容性：@import是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别；而link是 HTML 标签，所以不存在兼容性问题。
4. DOM：javascript只能控制dom去改变link标签引入的样式，而@import的样式不是dom可以控制的。
5. link方式的样式权重高于@import的权重。

6、vue中data为什么必须是函数

Object是引用数据类型，它指向的是一个地址，每个组件的data内存的都是同一个地址，当改变其中一个组件data的属性时，其他的组件的data属性也会跟着改变

函数它有自己的作用域，它能初始化数据，每个data属性都是独立的，不会相互影响

7、引用数据类型和基本数据类型的区别

基本数据类型访问的是值，它的值是不可变的，它的变量是存放在栈里面的。

引用数据类型可以拥有自己的属性和方法，且值是可变的，它的值是同时保存在栈内存和堆内存的对象

8、一个对象怎么冻结它的属性和方法

Object.freeze(obj)

9、用es6数组去重

//方法一
function unique1(arr){
    return arr.reduce(function(prev,next){
        prev.indexOf(next)===-1&&prev.push(next)
        return prev
    },[])
}

//方法二
function unique2(arr){
    return arr.filter(function(item,index,arr){
        return arr.indexOf(item)===index
    })
}

//方法三
function unique3(arr){
    return Array.from(new Set(arr))
}

10、浏览器输入一个url它经历了哪些过程

1. DNS域名解析
2. 建立tcp连接（三次握手）
3. 发送http请求，响应http请求
4. 浏览器解析渲染页面
5. 断开tcp连接（四次挥手）