8.4前端面试

• 了解哪些响应式方案?

参考链接   https://blog.csdn.net/Liangbin1886/article/details/101854708
1、@media 媒体查询
2、按需加载CSS  <link type="text/css" rel="stylesheet" href="base.css" media="(max-width:500px)"/>
3、REM   页面resize事件的回调函数 动态改变根元素(html节点)的font-size 让页面中的元素适应视窗大小的变化

• px 是属于响应式的吗?
• rem 怎么实现自适应吗?

css里面的rem  实际上是 html 根元素的 font-size 的 px 大小,
在用户打开 页面,,  获取viewWidth / 100 设置 font size 的话,
监听 浏览器窗口的 onresize 事件  
动态对  html 的 font-size 进行修改,,  才能达到响应式
//可以看 flexible 的源码

• 盒子模型

有两种模型：标准和怪异
标准:设置的width就是content的宽度，总宽度 = content + 另外设置padding + 另外设置border
怪异:设置的width是整个盒子的宽度，总宽度（设置的宽度），content = 设置的宽度 - padding -border

content-box在宽度和高度之外绘制元素的内边距和边框
border-box在宽度和高度之内绘制元素的内边距和边框
元素的宽高和margin无关，与padding，border，元素的content有关
当box-sizing属性值为content-box时，元素的宽高等于：width + padding + border;
当box-sizing属性值为border-box时，元素的宽高等于元素设置的width和height

• CSS里的上下文 如bfc

块级格式化上下文

• 每一个相邻的BFC 会相互影响吗?

BFC内外元素互不影响
外边距折叠

•  flex 属性

 

• div 垂直水平居中

已知宽高：
	父：绝对定位relative； 子：绝对定位
  margin-top: -元素高度的一半px; margin-left：- 元素宽度一半
未知宽高：
  定位 + transform: translate(-50%,-50%)
	display: flex; justify-content: center;algin-items: center;

• sass less styules用过哪些?

函数声明   计算  类js 写法对象

• 原型和原型链

每个对象都有原型，即__proto__，__proto__ 指向这个对象的.prototype，
一层层找下去，就形成另一个连，就叫原型连

• var let const 区别

var 有变量提升
let 是块级作用yu  在一个{}内，
const定义一个常量，不可更改
参考链接：https://www.cnblogs.com/sanhuamao/p/14369805.html

• 闭包 闭包的优点和缺点 （匿名函数本身也是一个闭包）

定义：
闭包就是能够读取其他函数内部变量的函数。
闭包可以简单理解成“定义在一个函数内部的函数“。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

用处：
可以读取函数内部的变量
让这些变量的值始终保持在内存中，不会调用后被自动清除

缺点：
1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，
		所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。
		解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2、引用的变量可能发生变化

优点：
1、用闭包解决递归调用问题
2、用闭包模仿块级作用域

• this 的指向

谁调用指向谁；
1, 非严格模式下如果是function纯函数调用, 指向window; 严格模式下指向undefined;
2, ()=> 箭头函数调用,  指向离他最近的调用者(也可以理解为谁调用指向谁, 但别找错了!);
3, apply,  call,  bind  都可以显示绑定this指向;
   var func = function( a, b, c ){
     alert ( [ a, b, c ] );
   };
	func.apply( null, [ 1, 2, 3 ] );
	func.call( null, 1, 2, 3 );
4, new函数调用构造函数创建对象时, this指向新创建的这个对象;

• new 操作符做了哪些事情吗 ?

new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，
执行构造函数后返回这个对象

1、创建一个空的对象
2、链接到原型
3、绑定this指向，执行构造函数
4、确保返回的是对象 

• promise 有哪三种状态吗?

1, pending  等待
2, onrejected  拒绝
3, onfulfilled 接受
其中一旦从 pending 状态变更后  就无法再次变成状态了
resolve 和 reject 

• 关于 commonjs AMD CMD es6 module 了解过吗?

commonjs 是 nodejs 用的, 就是 required 导入函数 和 module.export 导出函数,
CMD 和 AMD 是两种规范  required 的方案,,   一个主张在js文件开头引入,  一个主张在需要的时候引入;
es6 module 就是咱们常用的 export 导出函数 和 import 引入函数,, 比如 import Vue from 'vue'; 

• set 和 map 两种对象了解吗?

Set 用法：
.size //长度
.add(value)
.delete(value)
.has(value) //是否存在某个值
.clear() //清空
数组《=》set 转化
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
[...new Set(array)]

Map用法：
.size //长度
.set('edition', 6)  
.get(edition) //6

• 事件的几个阶段能说一下吗

捕获：从外向内
目标：确定元素
冒泡：从内向外

• js 有哪些数据类型, 哪些是基础数据类型, 哪些是引用类型,
• 值传递和引用传递

​
值传递，都是浅拷贝，引用传递才会有深拷贝
JSON.parse  Json.strifty 深拷贝（有一些不使用的情况）
object.assign()  深拷贝
1, 首先深浅拷贝其实是  在 涉及引用传递时才会引出的;
2, 值传递如果要说是什么拷贝的话,,, 其实类似于深拷贝(但这是不严谨的说法, 因为只有引用传递才涉及深浅拷贝);
3, 其他答的问题不大,,  _.clone() 是用的某个库吧??  答这种记得说是用的别人的库, 具体方法名就不用说了;

​

• 自己实现一个深拷贝

答个 基本版,
判断数据类型, 如果是对象就递归调用函数; 如果是基本数据类型就返回;
高级版的,
需要  对另外几个 数据类型做特殊处理
一个是  当数据是  function 的时候,,
还是就是  当一个对象里的属性引用了对象自己的情(嵌套对象)

• http状态码知道哪些（304 了解吗）
• 了解 eventloop 吗? 事件循环机制 微任务，宏任务

• 事件委托
• v-if v-for的优先级知道吗

2.x 版本  v-for在前
3.x 版本 v-if在前

• vue 生命周期吧

创建前后 挂载前后 更新 销毁
active 和 deactive（keep-alive）

• computed 和 watch 的使用场景，哪个更高效了

computed  一般 用于  多个属性影响一个 属性,  也就是 多对一
watch   一般用于  一对多
computed   有缓存  watch 没有,    computed 更高效,

• 所有 vue 传值方式吧 （路由、组件）

父 -> 子,,   props,,  provide搭配inject,, $attr,,  this.$parent,,  vuex,,
子 -> 父,,   $emit,,  vuex,,  或者父组件内调用 this.$refs.子组件绑定得ref. 某个你需要得属性,,
兄弟     vuex,,  eventBus
localStorage   是浏览器提供的数据存储api
localStorage  sessionStorage  cookie  indexDB  serverWorker 都是属于浏览器的存储

• localStorage sessionStorage cookie 的区别简单聊聊

local 网页关闭 不会被清掉，ses会
cookie 有大小 4k限制，会随着请求接口 带到服务端

cookie 的各个属性
localStorage 和 sessionStorage 是否遵循同源政策
如果两个浏览器窗口下,   sessionStorage 可以互通吗?
同一domain下,

• 从 用户输入 url 到 页面展现到用户电脑上,, 这之前都发生了一些啥,,

1,  输入url回车, 浏览器会构建get请求 请求行;
2.1, 首先会查询浏览器的DNS缓存, 如果命中缓存直接返回ip, 如果没有会去host文件查找DNS缓存;
2.2, 如果都没有命中,, 则会去url下的顶级DNS域名商提供商寻址ip,, 如果也没有, 就会去逐级查找最近一级的DNS域名提供商,, 找到就返回ip,, 没找到就页面丢失了;
3.1,  拿到了ip地址就开始三次握手建立http连接了,,
3.2,  建立连接后,, 服务器返回get请求的资源,, 并且根据需要设置cookie,, 强缓存或协商缓存,, ((强缓存直接在浏览器端做验证,, 不需要请求服务器,, Expired,, Cache-Control,, Expired 是http1.0的产物,, Cache-Control 是http1.1的产物,, 优先级后者更高,, 协商缓存需要请求服务器 Etag ,, Last-Modified,, 其中 Etag是服务器返回的资源的md5的加密字符串,, 浏览器对比已有的md5字符串,, 有改变则服务器返回对应资源,, 没有变化,, 就告诉浏览器就使用缓存,, Last-Modified是最近一次更新的服务端时间,, 时间超时了则服务器返回请求的资源,, 没有超时则告诉浏览器使用缓存,,Etag比Last-Modified优先级更高));
4.1,  浏览器拿到了请求的资源后,,  会开始解析也就是开始浏览器的渲染进程;
4.2,  解析资源文件拿到 html, css, js, png, 等等; ((以下简单聊浏览器的渲染流程))
4.3,  解析html和css文件生成 Dom Tree 和 Cssom Tree;  
4.4,  把 Dom Tree 和 Cssom Tree 合成 Render Tree;
4.5,  通过计算布局把 Render Tree 生成 Layout Tree (布局);
4.6,  拿到Layout Tree,,  GPU开始工作:  分层 -> 光栅化 -> 合成 -> 上屏;
4.7,  浏览器结束渲染进程,, 

• v-model 双向数据绑定原理

props 绑定了  v-bind:value
然后子组件触发了   this.$emit("input", data)
是 :value   和 this.$emit("input", dada) 的语法糖,
是可以用  model 这个 option 来自定义input 事件 和 绑定传值的
v-model 是可以自定义的哦,

• vue 的响应式原理 （数据响应式原理、mvvm 的原理）

1,  通过递归调用 Object.defineProperty 重写对象属性的setter 和 getter函数;
2,  内部为每个属性创建watcher实例, 里面有update方法,  用于调用更新dom的方法;
3,  在getter函数那里劫持属性的访问,, 用一个 dep 数组去收集依赖,, 将依赖push进dep,;
4,  在setter函数那里劫持属性的更新,, 遍历 dep 数组调用里面的依赖的notify()方法通知watcher实例
调用update方法进行更新视图的操作;