前端面试题-收集

前言

写这篇文章的主要目的是为了，自己可以更方便、快速的找到自己比较喜欢的文章；如果可以给其他人带来方便也是一件好事儿，如果对原作者带来了不方便，联系我删除；

前端面试题

1. vue这一块儿拿捏了@一尾流莺
2. 中小型公司面试时都会问些什么？@一尾流莺
3. 2021年我的前端面试准备@伊人a
4. 想进互联网大公司，这些题你总得会把。@晟小明
5. 大厂面试题
6. 大前端面试宝典
7. 前端面试指南
8. 前端学习笔记
9. Awesome前端面试总结
10. 前端面试题详解@cuggz
11. 前端啃完这些题，你拿不到20K算我输！@zhuanlan.z

以上这些面试题，涵盖范围挺广的。我个人觉得非常的有用，再次也对这些作者表示感谢；如果时间充足的话，建议多看两遍；没有时间的话，也尽量大眼先搂一遍，

记录自己认为很有用的知识点。

promise.all 与 async/await 有什么区别？

async/await 是基于promise 实现的,是代码看起来更简洁;(异步代码同步执行)

vue3 有哪些优点?

vue3 在代码编写层面可以更好的完成结构和逻辑复用;

xss(cross-site scripting) : 跨站脚本攻击

- 指的是攻击者往web页面插入恶意html标签或者js代码;

• 解决办法: 1.对用户输入的地方和变量都要仔细检查长度;2. 任何内容写在页面上都要加上encode;3.避免直接在cookie中泄露用户隐私;

csrf(cross-site request forgery):跨域请求伪造

- 跨域请求伪造:攻击者伪装成你的身份,以你的身份发起恶意攻击

解决办法:在服务端敏感接口处添加refer 判断;

跨域

- 浏览器在一个域名下的网页去获取另一个域名下的网页资源时,域名,端口,协议任一不同的都叫跨域;

闭包

有权访问另一个函数内部私有变量的函数;

• 私有化变量,防止变量全局污染;
• 应用场景
  • 设计模式的单例模式:
  • for循环保留i 的操作;
  • 节流和防抖
  • 函数柯里化
    • 将一个接收多个参数的函数转化为接收一个参数的函数;

原型和原型链:

## 原型:
	- js对象中都有__proto__这个属性,表示对象的原型,分为显示原型和隐式原型;
	- 每个对象都有一个隐式原型,它指向自己构造函数的显示原型;
## 原型链:
	- 多个__proto__组成的集合称为原型链;
	- 所有的prototype都是对象,他的__proto__指向object的prototype;
	- 所有构造函数的隐式指向 Function()的显示
	- Object 隐式指向null;

虚拟Dom

- 使用 JS 对象描述dom结构;

pach算法

- 将同级dom差异应用到真正dom树;

diff算法

 -  同级dom树比较的算法;

单项数据流的好处

-  数据流动单一,便于追踪,追查问题便捷;
- 避免子组件意外改变父组件状态;

优雅降级

• 开始就构建自己想要的需求,然后再针对低版本的浏览器进行兼容;

渐进增强

• 从一个非常基础,能够起作用的版本开始,并不断的扩充,以适应未来环境的需要;

回流和重绘

• 回流
  当页面布局发生变化的时候,触发了重新布局导致渲染树重新计算布局和渲染
• 重绘
  只改变自身样式，不会影响到其他元素

注意:   回流一定会触发重绘，而重绘不一定会回流
优化：限制回流和重绘的范围

深拷贝与浅拷贝

• 浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存。
• 深拷贝（deep copy）：复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变。
  深拷贝原理：
  深拷贝的原理：复制并创建一个一模一样的对象，不共享内存，修改新对象，旧对象保持不变。

this指向

1. 函数调用，当一个函数不是一个对象的属性时，直接作为函数来调用时，this指向全局对象。
2. 方法调用，如果一个函数作为一个对象的方法来调用时，this指向这个对象。
3. 构造函数调用，this指向这个用new新创建的对象。
4. 第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。apply接收参数的是数组，call接受参数列表，`` bind方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this指向除了使用new `时会被改变，其他情况下都不会改变。

原型和原型链

原型

1. 每一个对象都有一个 __proto__ 属性, 该属性指向 对象的 prototype 原型属性

原型链

1. 当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的尽头一般来说都是Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。

特点: JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。

简述MVVM

Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

高阶组件

高阶组件是参数为组件，返回值为新组件的函数
作用:

• 代码复用，逻辑抽象，抽离底层准备（bootstrap）代码
• 渲染劫持
• State 抽象和更改
• Props 更改

get 和 post 的区别

1. GET在浏览器回退不会再次请求，POST会再次提交请求
2. GET请求会被浏览器主动缓存，POST不会，要手动设置
3. GET请求参数会被完整保留在浏览器历史记录里，POST中的参数不会
4. GET请求在URL中传送的参数是有长度限制的，而POST没有限制
5. GET参数通过URL传递，POST放在Request body中
6. GET参数暴露在地址栏不安全，POST放在报文内部更安全
7. GET一般用于查询信息，POST一般用于提交某种信息进行某些修改操作
8. GET产生一个TCP数据包；POST产生两个TCP数据包

前端性能优化的几种方式

1. 浏览器缓存
2. 防抖、节流
3. 资源懒加载、预加载
4.开启Nginx gzip压缩
三个方面来说明前端性能优化
一： webapck优化与开启gzip压缩
    1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件
    其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'
    2.文件采用按需加载等等
    3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：
    accept-encoding:gzip
    4.图片优化，采用svg图片或者字体图标
    5.浏览器缓存机制，它又分为强缓存和协商缓存
二：本地存储——从 Cookie 到 Web Storage、IndexedDB
    说明一下SessionStorage和localStorage还有cookie的区别和优缺点
三：代码优化
    1.事件代理
    2.事件的节流和防抖
    3.页面的回流和重绘
    4.EventLoop事件循环机制
    5.代码优化等等

执行上下文

1. 某个函数或全局代码的执行环境，该环境中包含执行代码需要的所有信息。
2. 可以简单地理解为执行上下文是一个对象，对象中包含了执行代码的全局信息。