vue虚拟dom
虚拟DOM是通过一个JavaScript对象来描述真实DOM。
虚拟DOM**并不是说比原生DOM API的操作快,而是不管数据怎么变化,都可以以最小的代价来进行DOM的更新 **。
vue双向数据绑定
https://www.cnblogs.com/sweeeper/p/10829887.html
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过**Object.defineProperty()**来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过Compile来解析编译模板指令(vue中是用来解析 {{}}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化 —>视图更新;视图交互变化(input)—>数据model变更双向绑定效果。
vue生命周期
Vue 实例从创建到销毁的过程,就是生命周期。
对vuex的理解
1.vuex是什么?
vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化)。
2.vuex的核心概念;
- vuex的属性;
- state:存储数据,存储状态;在根实例中注册了store 后,用
this.$store.state
来访问;对应vue里面的data;存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新。 - getter:可以认为是 store 的计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
- mutation:更改 state的唯一方法。
- action:包含任意异步操作,通过提交 mutation 间接更变状态。
- module:将 store 分割成模块,每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。
- state:存储数据,存储状态;在根实例中注册了store 后,用
3.为什么要用vuex?
把组件的共享状态抽取出来,以一个全局单例模式管理。增加代码可读性和可维护性。
渲染过程
构建DOM树 -> 构建CSSOM树 -> DOM树和CSSOM树组合成Render树 -> 生成布局 -> 绘制
js事件循环
- 执行同步代码,这属于宏任务
- 当执行栈为空,查询是否有微任务需要执行
- 执行所有微任务
- 必要的话渲染
UI
- 然后开始下一轮
Event loop
,执行宏任务中的异步代码
js闭包
闭包是指有权访问另一个函数作用域中变量的函数
优点:可以避免全局变量的污染
缺点:闭包会常驻内存,增大内存使用量,使用不当很容易造成内存泄露。
js垃圾回收机制
找出不再使用的变量,释放其内存。按照固定时间周期性执行。
标记清除:先所有都加上标记,再把环境中引用到的变量去除标记。剩下的就是没用的了。
引用计数:跟踪记录每个值被引用的次数。清除引用次数为0的变量。会有循环引用问题。
什么叫跨域,有什么解决方式
当一个资源从与该资源本身所在服务器中不同域名、协议、端口请求一个资源时,出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求,XMLHttpRequest和Fetch API。引入这个机制主要是用来防止CSRF攻击的(利用用户的登录态发起恶意请求)。
解决方式:
-
设置document.domain解决无法读取非同源网页的 Cookie问题
-
跨文档通信 API:postMessage()
-
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
核心思想:网页通过添加一个
cookie和localstorage
-
cookie
是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密) -
cookie数据始终在同源的http请求中携带(即使不需要),会在浏览器和服务器间来回传递
sessionStorage
和
localStorage`不会自动把数据发给服务器,仅在本地保存 -
存储大小:
cookie
数据大小不能超过4ksessionStorage
和localStorage
虽然也有存储大小的限制,但比cookie
大得多,可以达到5M或更大
-
有效时间:
localStorage
存储持久数据,浏览器关闭后数据不丢失除非主动删除数据sessionStorage
数据在当前浏览器窗口关闭后自动删除cookie
设置的cookie
过期时间之前一直有效,即使窗口或浏览器关闭
jwt
JSON Web Token(简称 JWT)是目前最流行的跨域认证解决方案。是一种认证授权机制。
http 1.0 2.0
http2.0是对http1.0的改进,相较于http1.0更快更高效
1 http2.0实现了多路复用,用一个TCP进行连接共享,一个请求对应一个id,这样就可以发送多个请求,接收方通过id来响应不同的请求,解决了http1.0队首阻塞和连接过多的问题。因为http2.0在同一域名不论访问多少文件都只有一个连接,所以对服务器而言,提升的并发量是很大的。
2 http2.0引入了二进制数据帧和流的概念,数据拆分成数据帧传输,并进行顺序标识,接收方收到数据后按序组合即可获取正确数据。这样就可以并行传输了,解决了http1.0只能串行传输的问题。
3 http2.0压缩头部,使用序号对头部编码,在两端备份索引表,通过对编码进行比较来判断是否需要传输,减少了需要传输的大小。解决了http1.0中头部反复传输资源浪费的问题
4 http2.0中,服务器可以在客户端某个请求后,主动推送一些客户端一定需要的资源 。这样也能减少请求的数目。
当然http2.0也不是尽善尽美的,比如说在出现丢包的情况时,需要重新传输,后面的数据也就被阻塞了,但是http1.0因为有多个连接,所以不会影响其他连接的传输。这样的话http2.0的性能反倒不如http1.0了。
websocket
为了克服 HTTP“请求 - 应答”模式的缺点,是一个真正**“全双工”的通信协议**,与 TCP 一样,客户端和服务器都可以随时向对方发送数据,“实时通信”的效率也就提高了。
首屏时间(图片懒加载、预加载
首屏时间是指用户打开网站开始,到浏览器首屏内容渲染完成的时间。
懒加载:将不关键的资源延后加载
预加载:将一些不影响首屏但重要的文件延后加载
XSS,CSRF
XSS
:跨站脚本攻击,攻击者想尽一切办法将可以执行的代码注入到网页中
防范:对输入脚本进行过滤转义;CSP 本质上就是建立白名单,告诉浏览器哪些外部资源可以加载和执行。
CSRF
:跨站请求伪造,挟制用户在当前已登录的Web
应用程序上执行非本意的操作。
防范:用户操作验证(验证码),额外验证机制(
token
使用)等
前端有哪些请求
get获取数据;post提交数据;patch/put更新数据;delete删除数据
GET和POST区别
- GET请求一般没有请求体,POST请求有
- GET请求的业务数据放在地址中,安全性较差
- GET请求传递的业务数据量是有限的,POST是无限的(除非服务器限制)
- GET请求利于分享页面结果,POST不行
option请求在什么情况下会用到
cors跨域;通过该请求来知道服务端是否允许跨域请求。
4,get与post请求的区别
5,XSS攻击(这个说不了解)
6,CSS有哪几种选择器
7,怎么实现垂直居中,包含的div需要其他样式吗
8,<input type=“checkbox">内容,选中的时候把span的内容变成红色,这个回答的不好
9,js的基本数据类型有哪些
10,说出数组的五种方法
11,call和apply的区别
12,代码题,实现一个方法,返回一个随机的十六进制的颜色,用数组写的随机,然后面试官提了一种方法,按照他的写正则没写出来
13,反问,公司项目用到的什么技术栈,什么时候出面试结果这样。
对了还有个题是问有没有做过图片轮播,没有做过,然后说一下思路。
补充:
promise的理解,有哪几种状态
ajax请求的过程
二面
1自我介绍
2vue和react技术上的区别(这个是我自己挖的坑,自我介绍提了react
3vue数据双向绑定的实现
4js实现继承有几种方式
5事件循环机制,宏任务微任务的区别
6this的指向问题
7异步promise.all为什么可以返回很多网络请求最终状态
8在美团实习做了什么
9实习和自己做项目遇到什么困难,怎么解决的
10代码1链表倒数第k个,用递归怎么写
11代码2查找子串
12说一下自己的优势
13职业规划?
12反问:技术栈的问题