前端面试题(二)

1. webpack的看法

webpack是一个打包工具，可以使用webpack管理你的模块依赖可以分析各模块之间的依赖关系，最后优化合并后的资源
特色：

1. 利用loader处理各种类型的静态文件
2. 对js,css,图片等资源文件支持打包
3. 可以将代码分割，按需加载，
4. 具有强大的plugin接口，扩展webpack功能

2.闭包

使用闭包主要是为了设计私有的方法和变量，闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存的使用，还会造成内存泄漏
闭包的三大特点

1. 函数嵌套函数
2. 函数内部可以使用外部的参数和变量
3. 参数和变量不会被垃圾回收机制回收

3. new 操作符具体干了什么

1. 创建一个空对象，并且this变量引用该对象，同时还继承该函数的原型
2. 属性和方法被加入到this引用的对象中
3. 新创建的对象由this所引用，并且最后隐式的返回thi
   s

var obj ={}
obj._proto_ = base.prototype;
base.call(obj)

4. 动态加载路由

这个模块是一个高阶组件，返回一个个新的组件，传入一个参数，即需要动态加载组件的方法，在返回的asyncComponent组件内部，先初始化一个state 为child=null,定义一个this.unmount = false,用于表示组件是否被卸载，用async定义异步方法，await异步执行传入的参数，用于动态加载当前路由的组件。

}L)JX75EK`C$2$AU827T31M.png

5. 介绍Redux数据流的流程

View组件通过click等事件，dispatch一个(actionCreator返回的)action，通过Store把当前状态state和action传递给订阅者reducer函数,reducer返回一个新的状态存储在Store中，Store又把新的State传递给View组件触发组件更新。

为了将Redux和React联系到一起。就需要用到React-Redux这个库。

import { connect } from 'react-redux'
const containerComponent = connect(mapStateToProps, mapDispatchToProps)(presentationalComponent)

简单来说，mapStateToProps和mapDispatchToProps就是分别把Redux的state,和dispatch(action)映射到React组件中作为props。connect将展示组件(presentationalComponent)封装成高阶的容器组件(containerComponent)。state的更新意味着props更新。
https://segmentfault.com/a/1190000010407887?utm_source=tag-newest

6. Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理

react-redux(Provider 传入到最外层组件store 在需要用到的地方 用 connect 获取 (mapStateToProps, mapDispatchToProps) 在页面中引用)
类似发布订阅模式, 一个地方修改了这个值, 其他所有使用了这个相同状态的地方也会更改

7. 多个组件之间如何拆分各自的state，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块

一个全局的 reducer , 页面级别的 reducer , 然后redux 里有个 combineReducers 把所有的 reducer 合在一起,小组件的使用与全局的使用是分开的互不影响

8. react和vue的区别

相同点：

1. 都支持服务器端渲染
2. 都是Virtual Dom组件化开发，通过props参数进行父子组件数据的传递
3. 数据驱动视图
   不同点：
4. react严格上只正对MVC的view层，而vue则是mvvm模式
5. virtual dom 不一样，vue会跟踪每一个组件的依赖关系，不需要要渲染整个组件树，而react则是每当应用的状态被修改时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数来进行控制
6. react推荐的*做法是JSX+ inline style 也就是把HTML和CSS都写进js中，即all in js/
   vue做法是webpack + vue-loader 的单文件组件格式 即 html, css, js都写进同一个文件 ？？？？
7. 数据绑定： vue实现数据的双向绑定 ， react 数据流动是单向的
8. state对象在react中是不可变的，需要调用setstate来更新操作。而在vue中， state对象不是必须的，数据由data属性在vue对象中管理

9. margin 重合问题

1. 元素的顶边界和前面元素的底边界发生叠加

   
   1410000.jpg
2. 元素的顶边界与父元素的底边界发生叠加 1410001.jpg
   只有在普通文档流中块框垂直边界才会发生边界叠加问题，行内框，浮动框或者绝对定位框之间的边界不会叠加

• 补救方案：
• 外层padding
• 透明边框 border: 1px solid transparent
• 外层div加overflow:hidden；zoom:1
• 内层div用 float:left;display:inline;

10. css3新属性

1. border

• border-radius:圆角
• box-shadow: 边框阴影
• border-image: 边框图片

2. background

• background-size: 背景图片尺寸
• background-origin: 背景图片定位

3. 文字效果

• text-shadow: 文本阴影
• word-wrap: 文本换行{word-wrap:break-word}

4. 2d转换

• transform:对元素进行移动，旋转，缩放，拉伸

1. translate(x,y):移动
2. rotate(xxxdeg)：旋转给定角度3d转换rotateX()/rotateY()
3. scale(xx):缩放；

• css3过渡 transition()
  将一种样式逐渐改变为另外一种样式

.div{
width:100px;
height:100px;
transition:width 2s ,height 2s
}
.div:hover{
width:200px;
height:200px;
}

• css3动画
  @keyframes+animation

.div{
    animation:myfirst 1s ;
}
@keyframes myfirst{
  0% {xxxxxx}
50% {xxxxx}
100% {xxxxxx}
}

11. 变量的作用域/作用域链

1. 作用域
   分为：全局变量/局部变量
   特点：
   函数内部可以读取函数外部的全局变量，但是函数外部无法读取函数内部的局部变量
2. 作用域链
   在js中一切皆对象，函数对象和其他对象一样，拥有可以通过代码访问的属性和乙烯类供js引擎访问的内部属性，其中一个内部属性就是[[scope]]，该属性包含了函数被创建的作用域中对象的合集，这个合集被成为函数的作用域链
   例如

 function func() {
            var num = 1;
            alert(num);
        }
        func();

141656510578295.png

12. 垃圾回收机制

1. 标记清除：(较为常用)当变量进入环境则标记为‘进入环境’，当变量离开环境时，则标记为‘离开环境’
2. 引用计数：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

13. $(document).ready()方法和window.onload有什么区别？

$(document).ready()：可以在dom载入就绪时对其进行操作，并调用执行绑定的函数
window.onload：网页中的所有元素完全加载到浏览器后才执行

14. React组件中怎么做事件代理

在react内通过onclick绑定的事件，实际上并没有把点击事件绑定到对应的元素上，而是统一放到document上处理。
注意
react在document上绑定了一个dispatchEvent事件，在执行dispatchEvent过程中，其内部会一次执行父组件和子组件上的绑定事件，其出发过程类似于事件冒泡

15. react-router里的<Link>标签和<a>标签有什么区别

对比<a>,Link组件避免了不必要的重渲染

16.webpack优化

1. css压缩：minCssExtractPlugin({filename:'xxxxx'})
2. hash缓存

[hash] ： 整个项目有变动时，hash 变化。
[chunkhash] ： chunk 有变动，chunkhash 变化
[contenthash] ： 目前文档没有明确定义和说明，但是和文件内容的变化相关

3.单独打包业务代码第三方类库，runtime

optimization:{
splitChunks:{
  chunks:'all'  // 打包 node_modules里的代码
  },
runtimeChunks // 打包 runtime 代码
}

4. 懒加载/代码分割

webpack 内置方法 : require.ensure() 和 require.include()
es2015 定义的 动态 import,import 返回 promise

5. 压缩混淆代码
   webpack4只需要设置mode:production
   如果用了css压缩，要自己使用uglifyjs压缩js

  minimizer: [
      new OptimizeCssAssetsPlugin({}), // 压缩 css,使用minimizer会自动取消webpack的默认配置，所以记得用UglifyJsPlugin
      new UglifyJsPlugin({
        // 压缩 js
        uglifyOptions: {
          ecma: 6,
          cache: true,
          parallel: true
        }
      })
    ]

6. 开启gzip压缩
   gzip压缩有点：减小文件体积，传输速度更快

const CompressionWebpackPlugin = require('compression-webpack-plugin');

webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(js|css)$'),
      threshold: 10240,
      minRatio: 0.8
    })
)

7. tree shaking
   tree shaking 的原理

• ES6 的模块是静态分析的。所以在编译时可以判断哪些代码没有 exports
• 分析程序流，判断哪些变量没有被使用、从而删除代码
  https://segmentfault.com/a/1190000015836090

静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径

• output.path只是指示输出的目录，
• output.publicPath:该配置能帮助你为项目中的所有资源指定一个基础路径，它被称为公共路径(publicPath)。
• webpack-dev-server打包的内容是放在内存中的，这些打包后的资源对外的的根目录就是publicPath，换句话说，这里我们设置的是打包后资源存放的位置

17. react-motion

spring(val: number, config?: SpringHelperConfig)

• val：number, 终点值
• config: 用于生成动画缓动效果的配置
• stiffness：默认值170 - damping：默认值26 - precision： 默认值0.01，用于配置val的精确度，一般不需改动

1. <Motion>适合编写单个组件的形变动画
   例如：方块移动
   属性：
   style：Object，动画样式
   defaultStyle：Object，初始样式
   children：子元素
   onRest：动画结束时触发回调
2. <StaggeredMotion>用于编写一串有相互关联关系的实体的动画。
   例如:跟随鼠标
   属性：
   styles：Array，动画样式
   defaultStyles：Array，初始样式
   children：子元素
3. <TransitionMotion>则是用来编写组件mount和unmount的动画
   例如：折叠
   属性：
   styles：Array，动画样式
   defaultStyles：Array，初始样式
   children：子元素

18. js 数据类型

基本数据类型：number,string, bollean, undefined, null,Symbol
对象数据类型： object
三大引用类型

1. object类型
2. array类型
3. function类型

• 引用类型是存放在堆内存中的对象，变量其实是保存在栈内存中的一个指针（保存的是堆内存中的引用地址）
• 简单数据类型是存放在栈中的简单数据段，他是直接按值存放的.
• symbol：解决字符串容易造成属性名的冲突的问题，时一种新的原始的数据类型，表示独一无二的值。
  基本类型和对象类型的区别
• 可变性：基本类型时不可变类型，无法添加属性，即使添加属性，解析器也无法在下一步读取它，而对象类型是可变类型，支持添加和删除属性
• 比较和传递：基本类型一般按值比较，按值传递。对象类型按引用比较，按引用传递

19. react 虚拟DOM实现原理，以及为什么虚拟DOM会提高性能

1. 用js对象结构表示DOM树的结构，然后用这个树构建一个真正DOM树，插入到文档中
2. 当状态变更的时候，会重新构建一棵树的对象树，然后对比新旧虚拟DOM,记录两颗树差异
3. 把2状态记录的差异应用到1步骤中所构建的真正的DOM树，视图更新
   原因：虚拟DOM相当于在js和dom中加了一个缓存，利用diff算法减少了对真实dom的操作次数，从而提高性能

20. react 如何从虚拟dom中拿到真实dom

refs是react提供给我们的安全访问dom元素或者某个组件实例的句柄
可以通过ref属性然后在回掉函数中接受该元素在DOM树中的句柄

21. react中的props和state

state是一种数据结构，用于组件挂在时所需数据的默认属性，可以发生改变
props是组件的配置。props由负组件传递给子组件，并且就子组件而言,props是不可变的

22. react中setState的原理及用法

当调用setstate时，它并不会立即改变，二十会把要修改的状态放入一个任务队列，等到事件循环结束时，再合并更新
所以setstate有异步，合并更新两个特性
setstate为什么异步

• 保持内部的一致性
• 性能优化
• 支持state在幕后渲染

23. react性能优化

1. 利用shouldComponentUpdate，需要组件尽量最小化
2. dom遍历时加上唯一的key
3. 尽量使用const声明
4. 减少对真实的dom操作
5. 代码分割/异步加载