2019前端面试题汇总
面试题
-
js + 框架
-
闭包的作用
- 函数内部变量外用 || 在一个函数内部嵌套一层或多层函数
- 可以将内部变量外用
- 副作用：
- 违背垃圾回收机制
- ie下回造成内存泄漏
- 解决副作用方案：
- 变量使用结束后删除（var a = 1）
- a = null
- var obj = { a: 1} 最快最好的
- 变量使用结束后删除（var a = 1）
-
sessionStorage 和 localStorage \ cookie 的区别：
- 存在时间
- 存储量大小
- 5M(sessionStorage 和 localStorage)
- 3.8K-4.2K
- 使用：
- 内置方法 getItem setItem clear removeItem （sessionStorage 和 localStorage）
- 内置事件： storage（sessionStorage 和 localStorage）
-
JSONP如何跨域
通过动态创建script，利用src不受同源协议的属性进行跨域
4.cookie和session的应用场景
session：session是网站用户登陆的会话
session是存储在服务器上的，并且存活时间较短
session主要作用于大型网站，银行，金融，支付类等
session需要占用大量的服务器的资源
session的应用范围：会话劫持
cookie：cookie是网站用户登陆的凭据（浏览器的记住密码的功能就是通过与浏览器中保存的cookie进行验证后进行登录的）
cookie是存储在本地的，并且cookie存活时间有长有短
cookie主要作用于小型网站
cookie的拓展手法有：cookie盗取，cookie修改，cookie欺骗
cookie的应用范围：越权漏洞，cookie伪造登陆等
cookie的安全性没有session高，但cookie不需要占用服务器的资源
5.React的生命周期
15版本：
分为三个阶段 初始化 运行中 销毁
初始化阶段
getDefaultProps：获取实例的默认属性
getInitialState：获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上
render：组件在这里生成虚拟DOM节点
componentDidMount：组件真正在被装载之后
运行中状态
componentWillReceiveProps：组件将要接收到属性的时候调用
shouldComponentUpdate：组件接受到新属性或者新状态的时候（可以返回flase，接收数据后不更新，阻止render调用，后面的函数不会继续执行了）
componentWillUpdate：组件即将更新不能修改属性和状态
render：组件重新描绘
componentDidUpdate：组件已经更新
销毁阶段
componentWillUnmount:组件即将销毁
项目中我经常如何使用
6.react-router（3.0）的实现原理
url监听事件 hashchange
localhost:2000/#a
localhost:2000/#b
7.gulp和webpack的区别
共同点：
gulp 和 webpack 是当下最为流行两个前端工程化工具，
都可以实现 文件的打包压缩和项目的自动化构建
不同点：
gulp 注重 流的操作
4.0中的gulp 多个 并行和串行
webpack中注重的是 解决 模块之间的相互依赖关系
8.响应式布局是通过什么实现的
bootstrap <=3. 0
媒体查询media + 百分比
@media (min-width= number ){
.container{
width: 1200
}
}
number
1200 992 768 320
bootstrap 4. 0
flex
9.flex布局的居中属性是什么
justify-content: center;
align-items: center
- map和foreach的区别
都是循环遍历。只能遍历数组
map可以返回一个新的数组，foreach没有
11.未知子元素宽高在父元素中居中
设置子元素position:absolute;left50%;top50%;transform:translate(-50%,-50%)
Flex:设置父元素为dislplay:flex;justify-content:center;align-items:center;
设置父元素为table.子元素为cell-table，就可以使用vertical-center：center；
12.vue父子组件之间如何通信
父组件可以通过props可以向子组件传递信息，子组件可以通过$emit事件传递信息
13.跨域实现的方式有哪些
jsonp
反向代理 webpack 自带 http-proxy-middleware
让后端给咱一个请求头
php \ java header
node
cros中间件
app.use(cros({options}))
window.open
iframe
14.闭包实现计数器
function add(){
var a = 1
function num(){
a++
}
return num
}
var n = add()
n()
n()
15.flex中让子元素平分宽度
flex-grow:1;
flex: 1
flex: 60
flex: 220
flex: 120
16.移动端适配的问题
媒体查询，flex布局，rem
flex + rem
DPR 2 2.5 3
17.如何配置rem
-
给html标签添加 font-size: 100px;
-
使用js
function font(){
document.documementElement.style.fontSize = document.documentElment.clientWidth / 7.5 + ‘px’
}font() window.onresize = font
18．Es6的新特性
快级作用域const和let
箭头函数
Promise
generator
默认参数
function aa (n=1,m){} aa(2,3)
Es6的多行字符串 ``
解构赋值
class
模块化
19．Vue-router实现的三种方式
Hash模式、History模式、abstract模式
Hash: 使用URL的hash值来作为路由。支持所有浏览器。
History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式
Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。
20什么是B to C 和 B to B
企业对客户 企业对企业
21.let和const的区别
let声明的变量可以改变，值和类型都可以改变，没有限制。
const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
22.webpack的package.json和package-lock.json有什么区别
package.json:
主要用来定义项目中需要依赖的包
package-lock.json：
在运行命令 "npm install / i " 的时候自动生成的文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。
-
aixos、ajax、fetch的区别
Ajax1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR(XMLHTTPREQUEST)开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。
- 不支持跨域
Aixos
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
Fetch
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
3. 原生提供了
24.IE兼容(IE6-8兼容)问题有哪些
问题：
html
1. h5新的标签无法使用， 比如： video audio canvas
css样式
1. css3的选择器 和 效果 ， 比如： border-radius 渐变 透明度
2. 图片间隙问题 双边距问题 li标签间隙问题 块元素默认高度问题
js
DOM 事件对象 事件监听 获取浏览器尺寸
解决方法
html解决：
提供下载链接
css 样式
PIE.htc
js 封装兼容性函数
addEventListener
attachEvent
function addEvent({obj,eventType,fn,bl}){
if(document.getElementsByClass){
//现代浏览器
obj.addEventListener(eventType,fn,bl)
}else{
//ie低版本
obj.attachEvent('on'+eventType,fn)
}
}
25.vue组件之间的通信
-
父子组件通信
-
props
-
自定义事件
<Child @yyb = ‘fn’> //fn是父组件中定义的方法子组件： template <button @click = 'childHandler'></button> export default { methods: { childHandler(){ this.$emit('yyb') } } }
-
-
非父子组件通信
- ref
-
多层组件通信
-
bus event 事件总线
var bus = new Vue()bus.$on('yyb',function(){}) bus.$emit('yyb')
-
-
任意组件（多组件）通信
vuex
25.5.React组件通信
-
父子组件
属性绑定
父组件：
子组件：
this.props.name-
非父子组件
ef- // 和vue一致的
- <Child ref = { el => this.child = el }> 推荐的
-
多层组件通信
上下文： context
事件总线
const events = require(‘events’)
const EventEmitter = events.EventEmitter
const bus = {
…EventEmitter.prototype
} -
任意组件通信
redux mobx
-
25.6 vuex
-
什么是状态管理
我们使用一条数据管理一个视图中某一个部分， 那么我们将这种行为称之为 ‘状态管理’ ， 那么这条数据我们称之为 ‘ 状态 ’ -
vuex是什么
vuex是vue中一个插件， 目的是进行状态管理， 它类似于一个集中式的存储仓库， 用来存储和操作数据 -
vuex组成部分
- state 定义数据
- actions 进行业务交互
- mutations 修改数据
- getters 获取数据
- vuex 数据 分片
给store添加一个 modules配置项
-
vuex使用流程
组件 — dispatch —> actions ----commit ----> mutaions(修改数据) --> state <–getters <-- 组件
组件 ----commit ----> mutaions(修改数据) --> state <–getters <-- 组件
import store from ‘./store’
new Vue({
store
}) -
vuex辅助工具
mapState
mapActions
mapMutaions
mapGetters
注意：
mapActions 和 mapMutaions 给组件的 methods配置项中写
methods: {
…mapActions([fn1,fn2])
…mapMutaions([])
}maGetters 往 computed 中写
computed: {
…mapGetters([])
} -
vuex异步交互
actions
25.7 Redux
-
架构思维 react只不过充当了这个架构中的 视图
-
组成部分
-
store 数据的存储库
import {createStore} from ‘redux’
import reducer from ‘./reducer’
const store = createStore(reducer) -
actionCreators 动作（用户发起）的创建者
let action = {type: 'ADD_CAR', payload } -
reducers 动作的执行者
reducers是一个纯函数， 里面有一个返回值， 返回值时什么， store里面的数据就是什么
-
-
使用流程
组件 — 引入–> actionCreators ----dispacth(action) --> reducers (previousState,action) new State --> store
main.jsimport store from './store' import {Provider} from 'react-redux' ReactDOM.render( <Provider store = {store}> <App/> </Provider> ) -
数据分片
reducer分片
combineReducers redux -
异步交互
redux-thunk 中间件 第三方包
bindActionCreators redux
26.如何一次性加载一万条数据不会导致网页卡死
如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染，实现每16 ms 刷新一次
27.数组去重
- 对象键值对的唯一性
2. 遍历循环， 利用indexOf 来进行多次判断
3. es6中 的 set 方法
28.轮播图实现原理
利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动
-
数组排序
- 快速排序
- 冒泡排序
- 选择排序
-
jsx
vue webpack .vue vue loader
cli2
cli3 vue.config.js
react
create-react-app
webpack -
虚拟DOM 和 DIFF算法
-
vue 响应式原理
-
vue 双向数据绑定原理
-
vue 组件内钩子 生命周期
-
vue 路由钩子（导航守卫）
-
vue指令（自定义指令）的钩子
- bind
- inserted
- updated
- componentUpdated
- unbind
-
nextTick(callback) DOM下一次渲染完成之后执行
-
vue懒加载
-
vue路由懒加载
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
1. 将异步组件定义为返回一个 Promise 的工厂函数
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })2. 在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)： import('./Foo.vue') // 返回 Promise 方案一： const Foo = () => import('./Foo.vue') 方案二： const Foo = () => new Promise((resolve, reject)=>{ return resolve({ component: import './Foo.vue }) }) 有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') -
better-scroller 滚动加载（分页加载）
-
vue几个指令
-
vue组件怎么定义
-
vue组件(插件)封装
目录结构loading components Loading.vue index.js index.js import Vue from 'vue' import Loading from './components/Loading.vue' export default { install: () => { Vue.component('Loading',Loading) } } main.js import Loading from './plugin/loading' Vue.use(Loading) -
单文件组件 .vue Vue Loader
<script> export default { } </script> <style scope lang=""> </style> { template: '<div :style = "{{}}"></div>' } -
Vue.set || this.$set Object.assign
-
key track-by
-
列表渲染 非响应式情况
- 数组的下标 —> 解决： Vue.set
- 数据的length ----> 解决： splice
-
methods vs computed vs watch
methods 存放的是事件处理函数
computed 放的也是函数- 函数名要当变量一样用
2. 函数中有逻辑
tch
监听： 当数据改变， 就会自动触发watch中 监听函数执行
watch: {
a: function(){}
b: {//深度监听
handler: function(){},
deep: true
},
c: []
}
- 函数名要当变量一样用
-
vue中的编程时导航
- push
- replace 不会存放在浏览器历史记录
-
vue路由钩子
一共有三类： 全局路由钩子 、 路由独享守卫 、 组件内守卫- 全局路由钩子
- beforeEach
- afterEach
- 2.5 新增 beforeResolve
- 路由独享守卫
- beforeEnter
- 组件内钩子
-
beforeRouteEnter 访问不到实例
如果想访问到实例， 并且做数据预载
next(vm => {
// 通过vm访问组件实例
vm.msg = ‘yyb’
}) -
beforeRouteUpdate (2.2 新增)
-
beforeRouteLeave
-
- 全局路由钩子
-
项目开发流程
https://blog.csdn.net/qwfys200/article/details/82811057 -
项目小组合作情况
- 人员配置
设计 前端 后端 2 2 5 - 职能分配
FE.那些模块 - 互动沟通
- FE小组
git 操作
先拉取， 在上传
git pull
遇到的困哪沟通一下
- 人员配置
-
项目应用技术栈
- redux / vuex
- better-scroller
- loadsh || Immutable
- vue-router / react-router-dom(4.0) react-router(3.0)
- cli2/cli3 / create-react-app
- 使用postman/ insomnia 进行后端数据测试
- 使用nginx搭建服务端静态服务器
- 项目功能模块的划分，
-
项目遇到的问题， 如何解决
- 富文本编辑器选择（pc 后端管理系统）
wangEditor - 数据分组
借助第三方工具： loadsh immutable - 10万条数据， 一次加载， 不能页面卡死
分批渲染- 动态路由传参
- 路由传参
- n万条请求，
- 分批请求 — 》 异步请求
- 富文本编辑器选择（pc 后端管理系统）
-
前端模块化
- AMD require.js
- CMD sea.js
- Common.js
- es6模块化
-
前端的工程化（自动化）
- webpack
- gulp
- grunt
-
前端的版本控制管理工具
- git
- svn
-
export vs export default
-
export 是批量导出
形式1：
export const a = 1
export const b = 2
形式2：
const a = 1;
cosnt b = 2
export {
a,b
}使用： import {} from xxx || import * as type from xxx -
export default 默认是导出一个
-
export 和export default 都可以导出 函数 字符 对象 number
-
-
react (15 / 16 ) 生命周期
https://segmentfault.com/a/1190000016617400
import React, { Component } from ‘react’export default class NewReactComponent extends Component { constructor(props) { super(props) // getDefaultProps：接收初始props // getInitialState：初始化state } state = { } static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；;每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state return state } componentDidCatch(error, info) { // 获取到javascript错误 } render() { return ( <h2>New React.Component</h2> ) } componentDidMount() { // 挂载后 } shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发，true：更新，false：不更新 return true } getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发 } componentDidUpdate() { // 组件更新后触发 } componentWillUnmount() { // 组件卸载时触发 } } -
jq的三大特点
- 链式调用
- 隐式循环
- 查询
-
js最大特点
- 函数式编程
-
react性能优化的关键
- VDOM
- 无状态组件 、 高阶组件
- shouldComponentUpdate
-
react特点
- 函数式编程
-
react的路由监听
-
withRouter(高阶组件) —》 普通组件变成一个伪路由组件
import {withRouter} from ‘react-router-dom’withRouter(App) witherRouter( getApp(App) ) -
然后在componentWillReceiveProps 这个钩子中可以做路由监听
-
-
react-router vs vue-router
- react没有路由表， 但是他有路由辅助工具 Route
-
react-router
- Switch 每次只展示一个
- exact 路径完全匹配
-
react-router模式
- HashRouter
- BrowserRouter
-
优势和劣势
-
项目描述
- 这个项目是那个框架做得， 这个项目是哪个类型的项目， 这个项目针对的人群是什么， 它的核心功能是什么
- 项目职责：
- 这个项目模块很多， 页面很多， 我们是小组合作的， 我主要的负责的模块， 页面有 登录注册。。。
- 应用技术栈
- 这个项目中首页中我用到了，，，实现了xxx
-
vue中函数的防抖和节流
https://www.cnblogs.com/yalong/p/10556665.html?tdsourcetag=s_pcqq_aiomsg -
babel工作原理
https://www.jianshu.com/p/9d97d199992fhttps://blog.csdn.net/Uookic/article/details/81165259 es6代码的输入---》babelon进行解析---》得到AST--》plugin用babel-traverse对AST树进行遍历 ---》得到新的AST树 ---》使用babel-genertor通过AST树生成es5代码。 -
react中 setState 参数
1. this.setState({},fn)
2. this.setState(()=>{})this.setState((prevState, props) => ({ counter: prevState.counter + props.increment })); -
闭包泄漏的情况有哪些
-
在闭包的作用域链中引用了html元素未释放内存
由于本身html元素是不会被回收的，所以闭包中占用的内存也无法被回收，如：
function A(){
var a = document.getElementById(“aid”);
a.onclick = function(){
//事件处理代码 -
出现了循环引用
闭包中的循环引用会导致内存永远都不能被释放，如果是A->B，A指向B，当A被释放之后，已经没有指针指向B了，这是B占用的内存也能被释放；
但是，如果是A->B, B->A，形成了循环之后，A，B占用的内存将一直存在。
-
-
函数柯里化
https://blog.csdn.net/shunfa888/article/details/80013170 -
webpack常用的loader和plugin
https://www.jianshu.com/p/74131432191e?tdsourcetag=s_pcqq_aiomsg
https://www.jianshu.com/p/08859e5651fc?tdsourcetag=s_pcqq_aiomsg -
前端跨域的方式
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域 cros
9、 WebSocket协议跨域
10、反向代理 -
promise理解和底层封装
https://blog.csdn.net/sinat_17775997/article/details/83376452 -
绘图报表的框架
echarts three.js charts highCharts -
移动端兼容问题
https://blog.csdn.net/wanshaobo888/article/details/79868993 -
原型链的理解
一，函数对象
所有引用类型（函数，数组，对象）都拥有proto属性（隐式原型）
所有函数拥有prototype属性（显式原型）（仅限函数）
原型对象：拥有prototype属性的对象，在定义函数时就被创建
二，构造函数
先复习下构造函数
//创建构造函数
function Word(words){
this.words = words;
}
Word.prototype = {
alert(){
alert(this.words);
}
}
//创建实例
var w = new Word(“hello world”);
w.print = function(){
console.log(this.words);
console.log(this); //Person对象
}
w.print(); //hello world
w.alert(); //hello world
print()方法是w实例本身具有的方法，所以w.print()打印hello world；alert()不属于w实例的方法，属于构造函数的方法，w.alert()也会打印hello world，因为实例继承构造函数的方法。
实例w的隐式原型指向它构造函数的显式原型，指向的意思是恒等于
w.proto === Word.prototype
当调用某种方法或查找某种属性时，首先会在自身调用和查找，如果自身并没有该属性或方法，则会去它的proto属性中调用查找，也就是它构造函数的prototype中调用查找。所以很好理解实例继承构造函数的方法和属性：
w本身没有alert()方法，所以会去Word()的显式原型中调用alert()，即实例继承构造函数的方法。
三，原型和原型链
Function.prototype.a = “a”;
Object.prototype.b = “b”;
function Person(){}
console.log(Person); //function Person()
let p = new Person();
console.log§; //Person {} 对象
console.log(p.a); //undefined
console.log(p.b); //b
想一想p.a打印结果为undefined，p.b结果为b
解析：
p是Person()的实例，是一个Person对象，它拥有一个属性值proto，并且proto是一个对象，包含两个属性值constructor和proto
console.log(p.proto.constructor); //function Person(){}
console.log(p.proto.proto); //对象{}，拥有很多属性值
我们会发现p.proto.constructor返回的结果为构造函数本身，p.proto.proto有很多参数我们调用constructor属性，p._proto.proto.constructor得到拥有多个参数的Object()函数，Person.prototype的隐式原型的constructor指向Object()，即Person.prototype.proto.constructor == Object()
从p.proto.constructor返回的结果为构造函数本身得到Person.prototype.constructor == Person()所以p._proto.proto== Object.prototype
所以p.b打印结果为b，p没有b属性，会一直通过proto向上查找，最后当查找到Object.prototype时找到，最后打印出b，向上查找过程中，得到的是Object.prototype，而不是Function.prototype，找不到a属性，所以结果为undefined，这就是原型链，通过proto向上进行查找，最终到null结束
console.log(p.proto.proto.proto); //null
console.log(Object.prototype.proto); //null
大家理解刚才的过程，相信下面这些应该也都明白
//Function
function Function(){}
console.log(Function); //Function()
console.log(Function.prototype.constructor); //Function()
console.log(Function.prototype.proto); //Object.prototype
console.log(Function.prototype.proto.proto); //NULL
console.log(Function.prototype.proto.constructor); //Object()
console.log(Function.prototype.proto === Object.prototype); //true
总结：
1.查找属性，如果本身没有，则会去proto中查找，也就是构造函数的显式原型中查找，如果构造函数中也没有该属性，因为构造函数也是对象，也有proto，那么会去它的显式原型中查找，一直到null，如果没有则返回undefined
2.p.proto.constructor == function Person(){}
3.p._proto.proto== Object.prototype
4.p._proto.proto.proto== Object.prototype.proto == null
5.通过proto形成原型链而非protrotype
最后附上一张图，大家阅读完之后，看图应该可以很容易理解 -
微信小程序
1、简单描述下微信小程序的相关文件类型？
答：微信小程序项目结构主要有四个文件类型,如下：
.WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。
.WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，
.js 逻辑处理，网络请求
.json 小程序设置，如页面注册，页面标题及tabBar。
app.json
必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。
app.js
必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
全局样式
2、你是怎么封装微信小程序的数据请求的？
答：
一、将所有的接口放在统一的js文件中并导出
二、在app.js中创建封装请求数据的方法
三、在子页面中调用封装的方法请求数据
3、有哪些参数传值的方法？
答：
一、给HTML元素添加data-*属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象
二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
三、在navigator中添加参数传值
4、你使用过哪些方法，来提高微信小程序的应用速度？
答：
一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件化方案
5、小程序与原生App哪个好？
答： 小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度 的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。
6、简述微信小程序原理？
答：微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。
JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。
WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。
WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。
微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
小程序分为两个部分webview和appService。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理
7、分析下微信小程序的优劣势？
答：
优势：
1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。
劣势：
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信，无法开发后台管理功能。
8、微信小程序与H5的区别？
答：
第一条是运行环境的不同
传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。
第二条是开发成本的不同
只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
第三条是获取系统级权限的不同
系统级权限都可以和微信小程序无缝衔接
第四条便是应用在生产环境的运行流畅度
长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立
9、怎么解决小程序的异步请求问题？
答：
在回调函数中调用下一个组件的函数：
app.js
index.js
10、小程序的双向绑定和vue哪里不一样？
答：
小程序直接this.data的属性是不可以同步到视图的，必须调用：
3.2018年大企业高级前端面试题汇总
https://www.jianshu.com/p/f871c4c0663d?tdsourcetag=s_pcqq_aiomsg
4.React面试题
- react有哪几个生命周期？（8个）
- 在哪个生命周期做优化？
· componentWillReceiveProps(object nextProps) ：当挂载的组件接收到新的props时被调用。此方法应该被用于比较this.props 和 nextProps以用于使用this.setState()执行状态转换。（组件内部数据有变化，使用state，但是在更新阶段又要在props改变的时候改变state，则在这个生命周期里面）
· shouldComponentUpdate(object nextProps, object nextState) ： -boolean 当组件决定任何改变是否要更新到DOM时被调用。作为一个 优化 实现比较this.props 和 nextProps 、this.state 和 nextState ，如果React应该跳过更新，返回false。
· componentWillUpdate(object nextProps, object nextState) ：在更新发生前被立即调用。你不能在此调用 this.setState() 。
· componentDidUpdate(object prevProps, object prevState) ： 在更新发生后被立即调用。（可以在DOM更新完之后，做一些收尾的工作）
- react怎么从虚拟dom中拿出真实dom?(ref）
从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
例如：一个文本输入框，用于获取用户的输入。文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。通过为组件指定 Click 事件的回调函数，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 。
- react的diff算法是怎么完成的？(基础原理）
- React中的props和state的用法
父组件到子组件，用到props。
state 与 props :如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。这条原则让组件之间的关系变得见得且可预测。state 只关心每个组件自己内部的状态，这些状态只能在组件内变化。把组件看成一个函数，那么它接收了 props 作为参数，内部由 state 作为函数的内部参数，返回一个 真实 DOM。
state
state 是组件内部状态，修改 state 的值修改需要通过 setState 方法，禁止直接修改 state，setState 是一个异步方法，修改完成会有一个回调方法，一个生命周期内所有 setState 方法会合并统一操作。
不推荐过多的使用 state，当数据更新同时需要更新界面的时候，才使用 state，并且尽量将 state 推到系统边缘，统一管理 state。过多的内部状态会让数据流混乱，程序变得难以维护。
props
props 是 React 用来让组件之间相互联系的一种机制。
React 的单向数据流，主要的流动管道就是 props，props 本身是不可变的。
注意：父组件传递的 props，作为子组件的 state，会产生引用对象影响问题，也就是赋值是一个浅复制，会导致 state 改变进而导致父组件的 props 改变。
- Redux的流程 中间件（thunks saga logger dvtools的理解，用法）
- 比较redux和vuex的区别
- react router3是否用过，router4是否用过，3到4有什么改变
- react是什么层面上的框架，数据流是单向流还是双向绑定
- webpack
难易程度 等级（!,!!,!!!）
1.js的垃圾回收机制是什么原理（js）!!
2.经常遇到的解决js兼容性问题列举至少三个（js）!
滚动条、网页可视区域、事件对象兼容、阻止事件冒泡兼容、阻止默认行为兼容、事件监听兼容、事件目标对象兼容。
1） 滚动条：
document.documentElement.scrollTop||document.body.scrollTop
- 网页可视区域兼容
window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidt
4） 事件对象兼容
evt = evt || window.event;
5） 阻止事件冒泡兼容
event.stopPropagation?event.stopPropagation():event.cancelBubble=true;
6）阻止默认行为兼容
evt.preventDefault?evt.preventDefault():evt.returnValue=false;
7）事件监听兼容
if(document.all){
dom.attactEvent(“onclick”, fn);
} else {
dom.addEventListener(“click”, fn);
}
8）事件目标对象兼容
var t = event.target || event.srcElement;
3.不设置寛高的div，用至少两种方法，让它相对于页面水平垂直居中。（css）!
1.margin：0 auto；固定宽
2. 父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现：margin: -50px 0 0 -50px;
3. 元素未知宽度：上一个中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%);
4.flex布局：父：display: flex;//flex布局justify-content: center;//使子项目水平居中align-items: center;//使子项目垂直居中
4.react-redux的实现原理（react框架）!!
Redux作为一个通用模块，主要还是用来处理应用中state的变更，而展示层不一定是React。
Redux是怎样运作的：首先需要注册一个全局唯一的store对象，用来维护整个应用的state；当要变更state时，我们会dispatch一个action，reducer根据action更新相应的state。
react-redux是一个轻量级的封装库，核心方法只有两个：Provider、connect。
使用了react-redux后，我们导出的对象不再是原先定义的xxxComponent，而是通过connect包裹后的新React.Component对象。
connect执行后返回一个函数（wrapWithConnect），那么其内部形成了闭包。而wrapWithConnect执行后，必须要返回一个ReactComponent对象，才能保证原代码逻辑可以正常运行，而这个ReactComponent对象通过render原组件，形成对原组件的封装。
2、渲染页面需要store tree中的state片段，变更state需要dispatch一个action，而这两部分，都是从this.props获取。故在我们调用connect时，作为参数传入的state和action，便在connect内部进行合并，通过props的方式传递给包裹后的ReactComponent。
Provider模块的功能有两点：
1、在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
2、接收Redux的store作为props，通过context对象传递给子孙组件上的connect
Provider初始化时，获取到props中的store对象；将外部的store对象放入context对象中，使子孙组件上的connect可以直接访问到context对象中的store。
1、context可以使子孙组件直接获取父级组件中的数据或方法，而无需一层一层通过props向下传递。context对象相当于一个独立的空间，父组件通过getChildContext()向该空间内写值；定义了contextTypes验证的子孙组件可以通过this.context.xxx，从context对象中读取xxx字段的值。
connect模块是连接了React和Redux。
5.git经常用到的命令，至少五个，并且要说出每个命令是干什么的。（git add .）（git commit -m “”）（git push origin **）（git clone）（git branch）（git checkout）!
6.react-router的实现原理 !
7.react的生命周期（必须知道并且知道每个的作用）!
8.数组的方法（至少说出6个）（js）!
9.闭包的原理（js）!
10.伪数组转成真数组的方法（至少两种方法） （js）!!
11.rgba和opacity的区别（css）!
12.link和inport的区别 （js）!
13.哪些操作会造成内存泄露（至少三个）（js）!!!
1、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。
2、对于纯粹的 ECMAScript 对象而言，只要没有其他对象引用对象 a、b，也就是说它们只是相互之间的引用，那么仍然会被垃圾收集系统识别并处理。但是，在 Internet Explorer 中，如果循环引用中的任何对象是 DOM 节点或者 ActiveX 对象，垃圾收集系统则不会发现它们之间的循环关系与系统中的其他对象是隔离的并释放它们。最终它们将被保留在内存中，直到浏览器关闭。
3、闭包可以维持函数内局部变量，使其得不到释放。
4、
a = {p: {x: 1}};b = a.p;delete a.p;
执行这段代码之后b.x的值依然是1.由于已经删除的属性引用依然存在，因此在JavaScript的某些实现中，可能因为这种不严谨的代码而造成内存泄露。所以在销毁对象的时候，要遍历属性中属性，依次删除。
5、一些DOM操作：IE系列的特有问题 简单的来说就是在向不在DOM树上的DOM元素appendChild；IE7中，貌似为了改善内存泄露，IE7采用了极端的解决方案：离开页面时回收所有DOM树上的元素，其它一概不管。
14.react虚拟DOM实现原理 !!
15.call，apply，bind的区别（js）!!!
call**和apply方法都是在调用之后立即执行的。而bind调用之后是返回原函数，需要再调用一次才行，**有点像闭包的味道。
16.ES6有哪些新特性 !
17.H5新特性（canvas，video，webstorage，语义化标签，表单控件 等） !
18.HTTP请求返回状态码（至少说出常见的200,304,404）!
200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
19.关系型数据库和非关系型数据库的区别和好处 !!!
20.web网络请求的过程 !!!
闭包，原型作用域链，继承，面向对象,
使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念。
- 闭包有三个特性：
1.函数嵌套函数
- 2.函数内部可以引用外部的参数和变量
- 3.参数和变量不会被垃圾回收机制回收
- 2.indow.onload与document.ready的区别？
- 1.执行时间
- window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
- $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
- 2.编写个数不同
- window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
- $(document).ready()可以同时编写多个，并且都可以得到执行
- 3.简化写法
- window.onload没有简化写法
- (document).ready(function(){})可以简写成(function(){});
- 3.this的理解，如何使用？
- this代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化。但有一个总的原则就是，谁调用它，它就指向谁。一般在这几种情况下会用到它，1.单纯的函数调用；2.作为对象方法的调用；3.作为构造函数调用；4.apply调用，apply（）是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象，当它的参数为空时，默认调用全局对象
- 4.react的优势以及特点
- 4.react 中如何获取一个真实的dom节点
- 使用ref属性获取Dom元素后，再使用原生javascript获取内容
- 5.react组件有哪些阶段：Mounted，Update,Unmount
- 6.react 可以在哪个生命周期中做性能优化
- shouldComponentUpdate：做判断，判断当前state跟下一个state是否相同来决定是否渲染
- 7.redux 理解？
- 8.props与state的区别？
==props：==一般用于父组件向子组件通信，在组件之间通信使用。
==state：==一般用于组件内部的状态维护，更新组建内部的数据，状态，更新子组件的props等。
- 8.map与each方法的区别？
- map()方法主要用来遍历操作数组和对象，each()主要用于遍历jquery对象。
- each()返回的是原来的数组，并不会新创建一个数组。
map()方法会返回一个新的数组。如果在没有必要的情况下使用map，则有可能造成内存浪费。 - 9.你了解node吗？
- npm koa框架
- 10.react组件之间如何传值？（直接关系组件，间接关系组件，无关系组件）封装组件
一、【父组件】向【子组件】传值
初步使用
这个是相当容易的，在使用 React 开发的过程中经常会使用到，主要是利用 props 来进行交流
二、【子组件】向【父组件】传值
接下来，我们介绍【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来。因此，我们添加一个 change 事件来做交互。
三、没有任何嵌套关系的组件之间传值(flux,reaux)
- 11.你项目中是否用ES6的语法？如果是，请说出你经常用到的es6
- 12.css3的定位？让一个容器水平垂直居中？
- · 方法一：position加margin
- · 方法二： diaplay:table-cell
- · 方法三：position加 transform
- · 方法四：flex;align-items: center;justify-content: center
- · 方法五：display:flex;margin:auto
- · 方法六：纯position
- · 方法七：兼容低版本浏览器，不固定宽高
- 13.如何跨域？
1、通过jsonp跨域2、通过修改document.domain来跨子域3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（但是缺点是IE6、IE7不支持）
- 14.对后台技术了解多少？
后端：网站的逻辑部分，主要涉及数据库，动态语言如PHP、ASP、JSP等
后台：管理员操作模块，包括对网站内容的更新、注册会员管理等等，是网站的一个子模块
- 15.doctype这个标签是干嘛的？
· !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
· 标准模式与兼容模式各有什么区别：标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
- 16.讲一下你对盒模型的了解
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含： 外边距、边框、内边距、内容区，这就是盒模型。
从外到内：margin border padding content(width height)
- 17.React项目遇到的问题
在react项目中使用Echarts的时候，在componentDidMount中执行绘制图表的函数echarts。Init（#id），提示获取不到宽高，因此，绘制出来的图标呈现出压扁的状态或者没有绘制
解决办法：给compoentDidMount中的drawCharts方法加上一个延时器
- 在react项目中使用Echarts的时候，在componentDidMount中执行绘制图表的函数echarts。Init（#id），提示获取不到宽高，因此，绘制出来的图标呈现出压扁的状态或者没有绘制
- 解决办法：给compoentDidMount中的drawCharts方法加上一个延时器
- 19.你有什么想问我的吗
- 20.版本怎么迭代
- 20.怎么缓存
- 21.position定位
- 22.网页优化
-
- rem原理与em区别
-
- 框架这一块问了一些很仔细的问题，还有es6那一块
-
- 跨域机制，如何解决，为什么这样做，for of 的循环的原理，什么样的数据类型可以使用。generator的使用
-
- 解构的原理，react和vue的钩子函数
-
- 主要是angular的各模块原理
-
- 以及js的原理
- 于明皓总结题库
- react有哪几个生命周期？（8个）
- 在哪个生命周期做优化？
- react怎么从虚拟dom中拿出真实dom?(ref）
- react的diff算法是怎么完成的？(基础原理）
- React中的props和state的用法
- Redux的流程 中间件（thunks saga logger devtools的理解，用法）
- 比较redux和vuex的区别
- react router3是否用过，router4是否用过，3到4有什么改变
- react是什么层面上的框架，数据流是单向流还是双向绑定
- webpack
render函数是发生在哪个生命周期
1、 正确答案应该是在willMount和didMount之间
2、 升云面试题总结
3、 数据为什么一定要在DidMount里获取更新
4、 总结一下不建议在constructor和componentWillMount里写的原因是会阻碍组件的实例化，阻碍组件的渲染，如果用setState，在componentWillMount里面触发setState不会重新渲染
5、 是请讲一下 后端给的数据是列表 前端实现的过程描述一下
6、 请讲一下 实际应用中 Set的使用场景
7、 mobx的使用 （因为我用的mobx 也可能问redux的使用）
8、 路由都是怎么配置 怎么实现的
9、 如果要获取路由中的参数 你是怎么实现的
10、 路由如何实现异步加载
11、 1.react-router 如何获取路由参数；
12、 2.react生命周期，redux单向数据流；
13、 3.实际项目中遇到的棘手问题，如何解决；
14、 4.面向对象的理解；
15、 5.类组件和函数组件；
16、 6.ajax在哪个生命周期进行，为什么；
17、 8.然后主要想让你从实际项目出发 谈一下技术 或者 遇到的困难 以及如何解决的；
18、 1.箭头函数，普通函数（this）
19、 2.项目技术栈
20、 3.React按需加载
21、 4.React生命钩子
22、 5.Redux的理解及数据流
23、 6.项目组人员分布（前端、后端、测试）
24、 7.遇到的问题及解决方法（2个左右）
25、 8.网络安全及解决方法
26、 9.fetch和axios的区别 用fetch时有啥缺点
27、 10.vue和react的区别
28、 11.项目中遇到的难点怎么解决的
29、 12.es6用到过啥
30、 13.继承用过什么方法
31、 14.移动端布局
32、 15.vue的SPA开发性能优化
33、
东淮朱君总结
react生命周期， 改变this的方法， redux流程， flex相关的，输入网址到呈现网页，发生的过程，http 状态码，
东淮罗童总结：笔试：第一个是flex布局的，用flex布局实现一个轮播图效果，只写css样式，
第二个是react父子组件传值的，比较简单
王雪总结：
\1. 一个需求一个分支进行开发的时候，一个新的紧急需求加入进来，当前编辑的需求不想提交，如何进行下一个分支的编辑又不会造成污染？
\2. React性能优化
\3. 如何看待react？
\4. Git命令
\5. 如何做一个项目？
1,js常用语东西，promise,跨域，数组。react问的也不深
2,生命周期钩子和他们的作用
3,闭包，变量提升
4,es6新增
蚂蚁保险项目王超总结
蚂蚁前端问题
1.redux原理
2.thunk原理
3.provider原理
4.antd使用遇到什么问题
5.函数式组件和容器组件的使用
6.常用的生命周期钩子函数
1.怎么设置border设置四种颜色
Border-color: red green blue pink;
- 浏览器的事件机制
事件捕获阶段—处于目标阶段 — 事件的冒泡阶段---- 事件的默认阶段 - redux的底层实现原理
- 什么是flexx布局及一些属性
- Target的原理
- 事件流
- React的生命周期
- vue路由的原理
- 盒模型和怪异盒模型
- H5的新特性
- Es6 的Promise方法原理
- 怎么配置Webpack
- Vuex怎么运行的
- 项目中用到的Es6方法
- Css3的动画
- 对工程化的理解
- 对node的理解
- commenJs和jsx
伊鹏程总结题库
1、 CORS 跨域
2、 Css3 过度
3、 Css3动画
4、 事件委托
5、 On绑定时间和delegate绑定时间的区别
6、 Axios请求数据的过程
7、 Axios和ajax的区别
8、 Git命令
9、 Promise
10、 React生命周期
11、 少量vue
12、 弹性盒
13、 笔试题:
1.假设一个对象数据结构为
14、 ```
15、 {
16、 ‘page5’: {
17、 a:1,
18、 b:2 …
19、 },
20、 ‘page11’: {
21、 a:1,
22、 b:2 …
23、 },
24、 ‘page2’: {
25、 a:1,
26、 b:2 …
27、 },
28、 ‘page3’: {
29、 a:1,
30、 b:2 …
31、 }
32、 …
33、 }
34、 ```
35、 请编写一个 js 函数，传入如上对象后将返回的数组中的对象 pagen 升序排序
36、
37、 2. 用 reactjs 编写一个应用 组件并挂载到 id 为 root 的 div 结点上，
38、 包含两个子组件 （请一并实现）,
39、 点击哪个 时当前 的背景颜色变为红色，其他取消（不要直接操作dom)
40、
41、 答：
42、
43、 蚂蚁金服王英阁总结
44、 1.webpack配置项
45、 2.css3动画(实现进度条，背景图从白色变为蓝色)
46、 3.移动端优化(网络条件不同wifi 4g等)
47、 4.项目里遇到问题
48、 5.让一个div垂直居中
49、 6.创建一个对象方式（5种）
50、 7.项目里用px还是rem，px和rem对比，用rem比较爽的地方
51、 8.pc端和移动端需要注意的地方对比
颜良项目张秀庆总结
开发时是一个人还是多个人协作
协作是多少个人一块协作
主要负责哪些东西
React-redux在项目中怎样使用它，它的原理是什么
React相关的框架，除了redux之外还用过其余的数据处理的东西吗
React组件之间的通信
具体说一下非父子之间的不用redux的话怎么通信
es6里面的promise，promise的静态方法，promise的catch，什么时候 什么情况下会用到promise的catch
箭头函数和常规函数的区别
作用域的理解
闭包的概念
看过别人的一些代码吗？他们写的代码里面会有什么问题吗？
看过一些公共的组件库什么的代码吗？
有尝试过自己去写一些组件吗？
React用到过的工具，比如说一些插件和中间件之类的
Antd-mobile，ant design 推荐使用的中间件是saga来处理异步
Webpack配置项
Sass中的minxi用法
高阶函数的概念
es6的处理异步的两个方法promise和generator
MVC，MVVM等几个比较流行的前端框架
与后台交互时会遇到的错误htpp请求时的错误
跨域问题
项目架构：
es6中的继承会转为es5中什么类型的继承
末尘组王春琪总结
1， 事件代理，不冒泡的情况怎么实现事件代理
2，自己写过什么组件？是业务还是什么组件
3，react用过哪些技术栈
4，react这些技术栈怎么实现的
5，项目的目录结构
末尘组李威良总结
1.jsonp后端怎么处理
2.fetch怎么携带cookie
3.React非法路径路由怎么设置，弹出提示非法路径框
4.事件代理，哪些事件没有冒泡
5.vue react底层原理，差异
6.持久登录怎么做的？
梓博项目：前端面试问题
- SE6的运用、异步操作
- React的的基本概念以及运用
- webpack配置项
- git工作流
- promise的使用理解
- 箭头函数如何不用return实现返回对象
- react的props和state的区别和联系
- React采用es6的class语法创建组件的初始状态
- 定义组件初始状态
- jsonp实现原理
- 常用性能优化方法
- 箭头函数的意义
- 箭头函数不用return返回普通对象，箭头函数不能作为构造函数的原因
- this绑定掌握情况。
- 接收外部props作为组件状态，props更新时如何更新state
- gulp和webpack的本质区别
- 如何实现栅格布局
- CSS垂直居中方式
- 函数内获取调用函数时候的参数个数
- 最近做的业务说明一下，简单说下在项目内的作用？
颜良组面试题：
1：es6新特性
2：异步编程和生成器函数的区别
3：什么是原型链
4：继承的方式有哪些
5：什么是中间件(react)
6:redux流程
7：状态改变后调用哪些钩子函数(react)
8:div页面居中的方式
9：盒模型
10：元素边界
11：cookie 本地存储的区别
12：虚拟dom的原理，注！不要只说diff比对，要明白具体怎么比对。
13：react性能优化
14：promise原理
上一篇： 2019前端面试题（二）
下一篇： 微信小程序转换器之 loader设计实现