web前端问题总结

http和https区别

css bfc 块格式化上下文是什么

https://www.cnblogs.com/adventureofraindrop/p/6123264.html

数组/链表，反转

给一个链表5-》4-》3-》2-》1

输出12345

类的继承如何实现，cat继承animal

原型链，最顶端是咋样的，先有object还是先有function

async await

promise

防抖节流区别

防抖：一定时间内触发的事件，只有最后一次有效（例如滚动条事件，input事件，由于用户操作后值改变了，中间的那些触发并没有意义，只有最后一次是操作的最终结果）

频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码

节流：多次触发都是有意义的，但是需要限制触发的频率，稀释事件执行

例如，用户在服务端响应慢的时候狂点按钮，我们需要对按钮事件触发频率进行限制，例如5秒内只能发起一次请求。

https://www.cnblogs.com/xpz007/p/10037167.html

v-slot

用于在父组建获取子组件回传的数据，典型案例是表格，子组件需要获取传入父组件的数据以渲染数据（参考element表格用法）

Vue生命周期

vue一共有如下几个生命周期：

beforeCreate(初始化vm对象，但是还没生成observer，一般vuex，vue-router插件可以在这里通过这个钩子定义自定义属性$router,$store)

created（已生成observer，一般在这个钩子请求数据，这个钩子ssr也可以兼容，因此在这里请求数据较为合理）

beforeMount

mounted（已经有dom，可以访问dom，例如接入jq插件）

beforeUpdate

updated

beforeDestory（移除jq插件）

Destoryed

activated

deactived

Vue 实例 — Vue.js

路由生命周期：

beforeEach

afterEach

• beforeRouteEnter
• beforeRouteUpdate (2.2 新增)
• beforeRouteLeave

排序算法

数组寻找重复最多（除了遍历）

虚拟dom优缺点

优点：

1、跨平台，

2、确保操作dom性能下限，批量diff出差异，patch到dom中批量更新

缺点：

由于dom操作统一交给了框架层，因此操作dom是框架自动进行，如性能要求无法满足，则无法采用直接操作dom的方式来进行极致的性能优化

虚拟DOM的实现原理与优缺点_虚拟dom的优缺点_z逍遥的博客-CSDN博客

服务端推送h5

1、ajax轮训

2、sse（eventSource，基于http协议，服务端返回

Content-Type: text/event-stream

类型的数据。

客户端不断等待服务端响应数据，在body中传输具体的event报文/n/n作为多个报文的分隔符。它依然试用http协议

），单向，只能服务端推送

3、websocket

Server-Sent Events 教程 - 阮一峰的网络日志

前端常见的内存泄漏（全局变量，闭包变量被外部引用，函数内用this指向了window对象导致定义了全局变量）

常见的内存泄漏包括：

• 意外的全局变量
• 被遗忘的定时器或回调函数
• 脱离DOM的引用
• 闭包中重复创建的变量

如何避免内存泄漏

• 注意程序逻辑，避免”死循环“之类的；
• 减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收
• 避免创建过多的对象

前端常见内存泄漏及如何避免_前端内存泄漏的原因及解决办法_wei_dan1129的博客-CSDN博客

常见的安全漏洞（csrf，xss，sql注入，上传漏洞）

原型链

闭包：

能够读取其他函数内部变量的函数

例如函数内返回了一个引用了自身内部变量的函数，那么返回的函数可以读取被调用函数的内部变量，这个就是闭包

闭包优缺点：

优点：

封装性好，外部函数无法随意更改闭包内的变量状态，可以使用闭包来模拟其他语言的public，private特性，暴露出去的是public，内部的是private。

缺点：

由于闭包会使得函数定义的内部变量都保存下来，因此内存占用较大

javascript - 什么是闭包？闭包的优缺点？ - 个人文章 - SegmentFault 思否

Js垃圾回收（标记清除算法）

https://www.cnblogs.com/fundebug/p/javascript-memory-garbage-collection.html

其他的语言，还有用其他的gc算法：

几种垃圾回收算法 - 简书

udp、tcp差异

udp：无连接，非可靠传输（因为无连接），支持单播，多播，广播，实时性场景使用（直播）

tcp：面向连接，可靠传输，只能单播，可靠性场景使用（文件传输）

为何是3次握手

谢希仁版《计算机网络》中的例子是这样的，“已失效的连接请求报文段”的产生在这样一种情况下：client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送ack包（TCP中为什么采用三次握手而不采用两次握手_yinbucheng的博客-CSDN博客）

https://www.cnblogs.com/fundebug/p/differences-of-tcp-and-udp.html

vue active生命周期

vue组件之间通信

浏览器从输入到输出

浏览器缓存

get和post区别

跨域解决方式

localstorage sessionStorage

cookie和session区别

队列和堆栈区别

深度优先，广度优先

Es6特性

webpack配置

盒模型（ie,chrome）width，chrome只算content，ie算border

盒模型包含：content + padding + margin +border

ie：width = content + padding + border

chrome： width = content

ddos、tcp半连接队列、动态扩缩容

剪头函数的this、为何不能被new

怪异盒子模型、普通盒子模型

实现一个请求队列、最大不超过5、超过就等待

vue2源码、响应式原理

前端方向：

1、webgis、地图相关

2、音视频、直播、点播

3、协同编辑系统、协同算法

4、低代码

5、微前端

6、web container

7、数据可视化

8、web3（挖掘下web3.js，以太坊相关、币圈相关）