一，豆果美食
1，图片如何实现瀑布流
2，css选择器
3，如何设置固定宽高且不变形 cover
4，jquery操作dom的方法
5，图片上传时遇到的问题
6，vue指令符
7，rem
8，ie盒模型和标准W3C盒模型的区别
9，localstroge和session stronge区别
10，元素居中的方法
二，知乎
1，array的常见方法 （reducer的用法）
2，promise的原生js
3, es6的新特性
4，let和const的异同点
5，使一个宽高固定的div消失的方法
6，flex
7，localstroge和session stronge和cookie的异同点
8，webpack loader和plumgin
9, vue mvvm格式
10，跨域 （CORS）
11，react的生命周期
百度提前批一面
1,css3 flex
2,bfc
3,es6新特性
4,vuex v-model
5,vue-router钩子函数
6,url的渲染过程 url中都包含哪些内容
7,任务队列
8,闭包
9,排序
10,反问
百度提前批二面
1，uniapp和react native的区别；
2，cookie localStroage和sessionStroage的区别；以及各自的使用场景； cookie:常用于登录页面
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数
3，node代码和es6的区别；
4，vue-router history历史管理，routerlink和a标签的区别；
5，vuex的使用场景
涉及非父子组件之间跨组件共享数据
组件基于数据创建，多个组件使用这个数据，各组件之间的联系不可预料
同一个数据在不同页面控制某个属性，且多个页面都能修改这个数据
6，如何实现一个图片懒加载 如何判断页面何时将真正网址加载出来；
7，节流和防抖；
8，promise的实现
9，flex 0 1 auto
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。
1.flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
2.flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
3.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
10,如何实现左右固定，中间自适应；
11，rem的底层原理，如何设置根元素的font-size;
github面试题
1,setState的同步和异步
1，在生命周期和合成事件中
无论调用多少次setState，都不会立即执行更新。而是将要更新的state存入'_pendingStateQuene',将要更新的组件存入'dirtyComponent';
当根组件didMount后，批处理机制更新(isbatchedUpdates为true)为false。此时再取出'_pendingStateQuene'和'dirtyComponent'中的state和组件进行合并更新；
2，原生事件和异步代码中：
原生事件不会触发react的批处理机制，因而调用setState会直接更新；
异步代码中调用setState，由于js的异步处理机制，异步代码会暂存，等待同步代码执行完毕再执行，此时react的批处理机制已经结束，因而直接更新。
2，jS中的对象和浏览器内置对象
JS内置对象：
String、Number、Boolean Array、Date、RegExp、Math Error Object、Function Global
浏览器内置对象
三，拼多多笔试
1，如何实现一个二叉树输入后反置；
2，promise的输出
3，调色使颜色利用黑白变亮或变暗
4，网页级前端性能优化 www.jianshu.com/p/b4e24a3a5…
5，defer和ansyc的特性
四，京东笔试
1，背包问题
牛客网上
1， forin ,forEach和for of的区别
for in 遍历的是属性值;forof遍历的是数组值;forEach有三个参数，第一个value, 第二个 index, 第三个数组 for in 会遍历原型链上的键名；for of不会；
2, transition 和 animation 的区别
transition
transition：过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；默认值分别为：all 0 ease 0
是过渡，具有局限性，每次只能够设置一个属性，起始值和终点值之间的过渡，只有在hover或js脚本执行时才会触发；
animation是动画，伴随着每一帧；可以配合keyframes使用；
3,vuerouter的两种模式及其区别
hash
hash有#
hash的工作原理是hashchange；页面可以用windows.onhashchange来对# 后的内容进行监听，同时可以修改页面的状态
history
history没有#
history更改历史状态
history有go,back,forward函数
1）history.pushState(data, title ，url)：往历史记录堆栈顶部添加一条记录；data会在onpopstate事件触发时作为参数传递过去；
2）history.replaceState(data, title ,url) ：更改当前的历史记录，参数同上；
3）window.onpopstate：响应pushState或replaceState的调用；
当url匹配不到任何资源时，返回一个页面。
4，es6和es5代码相互转化
5，关于input输入框的兼容性问题
6，mvc和mvvm的区别
Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；
View作为视图层，主要负责数据的展示；
Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。
MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。
MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。
7，webpack打包
作者：好运连连拿offer
把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
babel将es6、es7、es8等语法转换成浏览器可识别的es5或es3语法。
8， saas和less不同于普通css的地方
定义变量，可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值； 嵌套写法，父子关系一目了然； 使用运算符，可以进行样式的计算； 内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等； 继承：为多个元素定义相同样式的时候，我们可以考虑使用继承的做法；
9，http2.0的特性
HTTP2.0和HTTP1.1的区别：
1、 HTTP2.0采用二进制格式而非文本格式：二进制协议解析起来更加高效，错误更少；
2、 HTTP2.0是完全多路复用的，代替原来的序列和阻塞机制——只需要一个连接即可实现并行：多路复用能同时处理多个消息的请求和响应，甚至可以在传输过程中将一个消息和另外一个消息掺杂在一起，所以客户端只需要一个连接就能加载整个页面；
3、 压缩头部信息减小开销：
4、 HTTP2.0允许服务器主动推送应答到客户端的缓存中：当浏览器请求一个页面时，服务器会首先返回HTML，浏览器解析HTML和发送所有内嵌资源的请求，服务器才开始发送JS、CSS、图片等，而服务器“推送”服务通过“推送”那些它认为客户端可能需要的内容到客户端的缓存中，从此来避免往返的延迟。
10,在new fn()的过程中都发生了什么？
js函数有两个不同的内部方法：[[Call]]和[[construct]]。
使用new调用函数时，会执行[[construct]]方法：
(1) 在内存中创建一个继承自 fn.prototype 的新对象
(2) 把函数体的this指向新对象，并执行函数体。
(3) 默认返回新对象。如果构造函数指定的返回值为复杂类型，会覆盖掉默认返回值。
直接调用函数，会执行[[Call]]方法，直接执行函数体。
new
function New(fn, ...arg) {
// 创建新对象，原型为构造函数的原型
let res = Object.create(fn.prototype)
// 修改this指向为新对象，并执行函数体
let ret = fn.apply(res, arg)
// 如果返回值不是有效对象，则返回新对象
return (typeof ret === 'object' && typeof ret === 'function' && ret !== null) ? ret : res
}
作者：漓漾li 链接：www.jianshu.com/p/1cf33ef0b…
11，display:none和visibility:hidden，opacity=0的区别
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。display: none 父元素子元素都会隐藏;
2、visibility: hidden,opacity:0,不会影响计数器的计数；display: none的元素没有计数
3，display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden,opacity:0,是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素
4,opacity=0，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的,display:none和visibility:hidden不会。
12，vue-cli
vue-cli是什么
Vue-CLI是Vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
1、通过 @vue/cli 搭建交互式的项目脚手架。
2、通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
3、一个运行时依赖 (@vue/cli-service)，该依赖： （1）可升级； （2）基于 webpack 构建，并带有合理的默认配置； （3）可以通过项目内的配置文件进行配置； （4）可以通过插件进行扩展。
4、一个丰富的官方插件集合，集成了前端生态中最好的工具。
5、一套完全图形化的创建和管理 Vue.js 项目的用户界面。
vue-cli2.x和vue-cli3.x
- 新加入了 TypeScript 以及 PWA 的支持
- 提供了图形化界面
- 创建命令变了
vue init webpack project-name=》vue create project-name
13，JS记忆函数
14，vue2.0和vue3.0的区别
15，JS记忆函数
函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。
16,css动画和JS动画
requestAnimationFrame
setTimeout 与 requestAnimationFrame 的区别：
**引擎层面： **
setTimeout 属于 JS 引擎，存在事件轮询，存在事件队列。
requestAnimationFrame 属于 GUI 引擎，发生在渲 染过程的中重绘重排部分，与电脑分辨路保持一致。
性能层面：
当页面被隐藏或最小化时，定时器 setTimeout 仍在后台执行动画任 务。
当页面处于未激活的状态下，该页面的屏幕刷新任 务会被系统暂停，requestAnimationFrame 也会停止。
应用层面：
利用 setTimeout，这种定时机制去做动画，模拟固定时间刷新页面。
requestAnimationFrame 由浏览器专门为动画提供 的 API，在运行时浏览器会自动优化方法的调用，在特定性环境下可以有效节省了 CPU 开销
js动画和css动画的区别
JS动画：setTimeOut，setInterval,requestAnimationFrame;
css动画：transilate transition animation;
详情：www.cnblogs.com/qqinhappyha…
17，css侧重从右向左解析的优势
1，避免需要对所有元素进行遍历
2，从子元素向父元素方向解析，避免了某个祖先元素没有加载完成的情况；
18，css就近原则
当使用css样式的时候，可能会有一些网页元素同时适用于多个CSS样式，那么这时候CSS就会遵循就近原则以避免冲突。
19，地址的三级联动
20，js实现图片懒加载
21，http的缓存机制
http中存在几种缓存：catche-control,expires,Etag,LastModified
Expires, Cache-Control 两种缓存在有效期内，它们是不会向服务器端发送任何请求的，直接获取本地资源；
在Expires和cache-control同时出现时，选择cache-control中的max-age;
Last-modified 和 ETag 还是需要请求服务器，服务器比较完后高速浏览器是否需要从本地获取。
Last-modified 和 ETag 同时出现时，选择Etag
Etag解决了Last-modified存在的两个问题：
- 一些资源的最后修改时间变了，但是内容没有改变；
- Last-modified 只能精确到秒级；
22，设计模式
设计模式：js常用规则：s(srp)单一职责原则，o(scp)开放封闭原则
单一职责原则: 一个类或一个方法只负责一个职责，不影响其他部分；
开放封闭原则: 将固定逻辑抽象出来，不固定的逻辑自行改动；
常用设计模式
一，创建型模式
1，简单工厂模式
只暴露一个工厂方法，工厂方法内部根据传入参数的不同来构建不同的构造函数；
2，单类模式
一个类只有一个实例，如果该类已经被创建实例，则返回这个实例，如果未创建实例，则创建实例；
二，结构型模式
3，适配器模式
将一个接口得到的数据格式转化为需要的数据格式
4，装饰器模式
在不改变原对象的情况下，通过包装和扩展，使对象拥有一些新的功能；
5，外观模式
为一组复杂的子系统提供一个统一的接口（例如：为不同浏览器实现兼容获取innerHtml）
6，代理模式
代理是一个对象，他用来控制对另一个对象的访问（例如：记忆函数）函数内封装函数
7，模块模式
三，行为型模式
8，策略模式
指的是用户的同一行为在不同场景中有不同的实现算法（如通过统一接口设置不同的登陆方式去登陆，每一次根据需要传入登陆方式函数）
9，迭代器策略
通常定义一个接口，返回一个迭代的方法；可以返回对数组的迭代；
10，观察者模式（发布订阅模式）
当被观察对象改变时，观察者的某个方法通知观察者某个被观察的对象发生了改变
观察者模式被观察者通常需要实现以下接口：
1，订阅：接受一个观察者，使其允许某个观察者订阅
2，取消订阅：接受一个观察者，使其取消对自己的订阅
3，广播：通知所有的订阅者自己发生了变动
23,https
加密: 对称加密和非对称加密
对称加密对称加密是指通信双方都持有同一个密钥；用该密钥进行加密和解密；
非对称加密非对称加密中有两把密钥，一把公钥一把私钥，用公钥加密后必须用对应的私钥解密；私钥加密后也必须用对应公钥解密。
https是用对称加密和非对称加密相结合
过程
- 某网站服务器拥有公钥A,私钥A';
- 浏览器向服务器发送请求，服务器收到请求后利用明文传输将公钥A发送给浏览器；
- 浏览器随机产生一个用于对称加密的密钥X,利用公钥A加密后传输给服务器；
- 服务器收到拿到后用私钥A'解密，得到密钥X;
- 浏览器和服务器双方将共同使用密钥X进行加密；
中间人搞鬼 - 在服务器将公钥A传输给浏览器的过程中，将公钥A劫持下来；
- 中间人自己生成一个公钥B;明文传输给浏览器；
- 浏览器收到公钥B后，随机生成一个密钥X，利用公钥B加密，然后发送给服务器；
- 中间人劫持到密钥X,然后用公钥A加密，发送给服务器；
- 在浏览器和服务器都不知道的情况下；每一次加密中间人都能用密钥X对内容进行解密。
ca认证安全证书
网站在使用https前，需要先向“CA机构”申请颁发一份数字证书，数字证书里有证书持有者、证书持有者的公钥等信息，服务器把证书传输给浏览器，浏览器从证书里取公钥就行了，证书就如身份证一样，可以证明“该公钥对应该网站”。
如何防止数字证书传输过程中被劫持
数字签名
制作过程ca拥有非对称的公钥和私钥，用哈希函数对证书中的信息进行解析；将解析后的信息利用ca公钥进行加密生成数字签名；
浏览器验证过程用ca中的私钥对数字签名进行解析，利用哈希函数对证书信息进行解析，若两者一致，则签名成功，反之，则签名失败。
24，异步函数和回调函数
同步函数和异步函数
同步函数: 能够在执行后立刻得到结果的函数
异步函数: 执行之后需要等待一段时间才能拿到结果的函数
区分同步函数和异步函数？
如果一个函数的返回值在 setTimeout, AJAX, AddEventListener 这三个东西内部，那么这个函数就是异步函数。
回调函数 得到异步函数的返回结果的两种方式：轮询和回调；
回调： 一个函数内的一个函数，是为了另一个函数调用而创造的，那么这个函数就是一个回调函数
["1","2"，"3"].map(parseInt);//[1,NAN,NAN]报错原因：map中含有一个回调函数，他的参数是value,index,array,而parseInt函数传入参数应该是(value,2-36进制)；当传入进制数为0时，默认为10进制；由于参数不对应，不能够得到预期的结果；不应该简写！
25,VUE父子组件的生命周期
1.首次加载过程
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount ->
子mounted -> (子activated) -> 父mounted
2.父组件更新过程
父beforeUpdate -> (子deactivated) -> 父updated
3.子组件更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
4.销毁过程
父beforeDestroy-> 子beforeDestroy -> 子destroyed -> 父destroyed
26，单页面应用
优点：
- 数据层和UI分离，内容的修改不需要加载整个页面；
- 高效：对服务器压力小，需要更小的带宽。
缺点： - SEO问题
- 前进，后退，地址栏等问题，需要程序进行管理。
27，SEO(搜索引擎优化)
搜索引擎优化是一个能够提高网站在搜索引擎中的排名，进而提高网站知名度和访问量的过程
写的非常好juejin.cn/post/684490…
28，重排和重绘
写的超级好，今天是文章的搬运工
juejin.cn/post/684490…
