【整理五】

1.bind、call、apply 区别？如何实现一个bind？ 

• bind,call,apply三个方法都可以用来改变this的指向 
• call和apply调用后会立即执行,
• bind调用后不会立即执行而是返回一个改变this指向之后的一个函数
• call和bind的函数参数传递方式是(this绑定对象,参数1,参数2......)
• apply的函数传递方式是(this绑定对象,[参数1,参数2......])

  let obj = {
    name: "admin",
    age: 20
  }
  // 声明一个函数
  function fn(a, b, c) {
    console.log("函数内部this指向:", this);
    console.log("参数列表:", a, b, c);
  }
  // 使用bind创建一个新函数
  let newFn = fn.bind(obj, 10, 20, 30);
  // 新函数
  newFn();
  // 旧函数
  fn(10, 20, 30);

2.什么是防抖和节流？有什么区别？如何实现？ 

都可以通过使用 setTimeout 实现，降低回调执行频率，节省计算资源 
函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现
函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
防抖在连续的事件，只需触发一次回调的场景有：
搜索框搜索输入 
手机号、邮箱验证输入检测
窗口大小resize 
节流在间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听
搜索框，搜索联想功能

3.怎么理解回流跟重绘？什么场景下会触发？

重绘就是重新绘画，当给一个元素更换颜色、更换背景，
虽然不会影响 页面布局 ，但是颜色或背景变了，就会重新渲染页面，这就是重绘
回流：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，
那么就会重新构造dom树然后再次进行渲染，这就是回流
重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘，都是会影响性能

回流触发时机 
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候 
浏览器的窗口尺寸变化 

重绘触发时机
触发回流一定会触发重绘
颜色的修改
文本方向的修改
阴影的修改  

4.VUE路由的原理？ 

本质是监听url的变化，然后匹配路由规则，
显示相应的页面，并且不刷新页面
目前单页面应用实现路由的方式有两种:
hash模式和history模式
hash模式相当于瞄点跳转，监听url#后面的传值发生变化，
从而触发window.hashchange方法，并根据值修改暂时页面的内容，不会刷新页面
history模式相对hash模式更加符合常见的url格式，原理是触发原生的window.history方法

5.你了解vue的diff算法吗？说说看？

diff算法是为了避免无效的dom操作，使页面的构建得到极大的提升，
diff算法通过对比新旧虚拟dom来找出真正的dom变化的地方，主要遵循三个层级
dom树层，只对同层的节点进行比较，只有删除创建
组件层，如果是同一个类的组件则会继续diff的算法
如果不是会将这个组件下的所有子节点删除，然后创建新的，
哪怕两者之间的结构非常类似也会进行删除重建
节点层，对于同级的节点，根据每个节点提供的key值，增删改移动

6.说说你对keep-alive的理解？

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive可以设置的props属性：
include：字符串或正则表达式，只有名称匹配的组件会被缓存
exclude：字符串或正则表达式，任何名称匹配的组件都不会被缓存
max：数字，最多可以缓存多少组件实例

7.什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式设计也叫响应式布局，响应式开发
实现不同屏幕分辨率的终端上浏览网页的不同展示方式
响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局
从而在每种设备屏幕宽度下呈现的界面是不同的

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

8.说说 React 生命周期有哪些不同阶段？每个阶段对应的方法是？

挂载卸载过程
constructor，完成了React数据的初始化；
componentWillMount，组件初始化数据后，未渲染DOM前；
componentDidMount，组件第一次渲染完成，dom节点已经生成；
componentWillUnmount，组件的卸载和数据的销毁。
更新过程
componentWillReceiveProps (nextProps)，父组件改变后的props需要重新渲染组件时；
shouldComponentUpdate，主要用于部分更新，因为react父组件的重新渲染会导致其所有子组件的重新渲染，
这个时候不需要所有子组件都跟着重新渲染，然后return false就可以阻止组件的更新；
componentWillUpdate (nextProps,nextState)，shouldComponentUpdate返回true后，组件进入重新渲染的流程；
componentDidUpdate(prevProps,prevState)，组件更新完毕后触发；
render()，渲染时触发

9.如何优化webpack打包速度？

• 优化 loader 配置
• 合理使用 resolve.extensions
• 优化 resolve.modules
• 优化 resolve.alias
• 使用 DLLPlugin 插件
• 使用 cache-loader
• terser 启动多线程
• 合理使用 sourceMap

10.SPA首屏加载速度慢的怎么解决？

• 减小入口文件体积
• 静态资源本地存储
• UI框架按需加载
• 图片资源的压缩
• 组件重复打包
• 开启Gzip压缩
• 使用SSR

11.说说react router有几种模式？实现原理？

React Router对应的hash模式和history模式
路由描述URL 与 UI之间的映射关系，这种映射是单向的，
即 URL 变化引起 UI 更新（无需刷新页面）
以hash模式为例子，改变hash值并不会导致浏览器向服务器发送请求，
浏览器不发出请求，也就不会刷新页面，
hash 值改变，触发全局 window 对象上的 hashchange 事件
hash 模式路由是利用 hashchange 事件监听 URL 的变化，
从而进行 DOM 操作来模拟页面跳转 

12.从浏览器地址栏输入url到显示页面的步骤？

1. 用户在浏览器中输入url地址
2. 浏览器解析域名得到服务器ip地址 
3. TCP三次握手建立客户端和服务器的连接 
4. 客户端发送HTTP请求获取服务器端的静态资源
5. 服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
6. TCP四次挥手关闭客户端和服务器的连接  
7. 浏览器解析文档资源并渲染页面 

13.说说JavaScript中的数据类型？存储上的差别？

基本类型：Number、String、Boolean、Undefined、null、symbol
复杂类型统称为Object
Object
Array
Function
基本数据类型和引用数据类型存储在内存中的位置不同：
基本数据类型存储在栈中
引用类型的对象存储于堆中 

14.说说对React Hooks的理解？解决了什么问题？

React Hooks就是加强版的函数组件，可以完全不使用 class，就能写出一个全功能的组件
组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来

React Hooks要解决的问题是状态共享，
是继 render-props 和 higher-order components 之后的第三种状态共享方案，不会产生 JSX 嵌套地狱问题
这个状态指的是状态逻辑，所以称为状态逻辑复用会更恰当，因为只共享数据处理逻辑，不会共享数据本身

15.说说你对promise的了解？

Promise是ES6中的新增的异步处理方法
主要是用于解决ES5中使用回调函数产生的地狱回调的问题
Promise有三种状态,pedding准备中，fullfiilled已完成， rejected失败
状态只能有准备中=>已完成 或 准备中=>失败
执行resolve参数方法会调用then方法，执行reject参数方法调用catch方法
then方法执行成功后调用的方法，catch方法执行失败调用的方法
all() 参数是个数组，执行多个Promise对象，必须所有的对象状态执行完后才会变成已完成的状态
race()方法 执行多个Promise对象，只要有一个对象状态是已完成，对象的状态就是已完成
为了解决 Promise 的问题，async、await 在 ES7 中被提了出来 
async、await 函数写起来跟同步函数一样，需要接收 Promise 或原始类型的值

16.说说webpack中常见的Loader？解决了什么问题？

style-loader: 将css添加到DOM的内联样式标签style里
css-loader :允许将css文件通过require的方式引入，并返回css代码
less-loader: 处理less
sass-loader: 处理sass
配置方式：在 webpack.config.js文件中指定 loader
内联方式：在每个 import 语句中显式指定 loader

17.说说 React 性能优化的手段有哪些？

使用 shouldComponentUpdate 避免不需要的渲染
将 props 设置为数组或对象 
将函数的绑定移动到构造函数内 
使用 immutable 不可变数据 
给子组件设置一个唯一的 key 

18.说说 React中的setState执行机制？ 

React 利用状态队列机制实现了 setState 的“异步”更新，避免频繁的重复更新 state
首先将新的 state 合并到状态更新队列中
然后根据更新队列和 shouldComponentUpdate 的状态来判断是否需要更新组件  

19、说说你对事件循环的理解？

JavaScript是一门单线程的语言，意味着同一时间内只能做一件事，
但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环
在JavaScript中，所有的任务都可以分为
同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等
异步任务还可以细分为微任务与宏任务
微任务一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前
宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合