星哥の面试题Day18
面试题系列均来自鱼皮的知识星球——编程导航
Vue Router 的 $route 和 $router 对象有什么区别?
在 Vue.js 中,$route 和 $router 都是 Vue Router 提供的对象,但它们的作用不同。
$route 对象代表着当前激活的路由信息,它包含了当前 URL 解析得到的信息,如当前路径、参数、查询参数等。$route 对象是一个只读对象,我们无法通过改变 $route 对象来改变当前路由。
$router 对象则是 Vue Router 的实例对象,它负责管理整个路由的状态,包括当前路径、路由参数、路由切换等。$router 对象可以通过编程的方式来改变当前路由,如通过 $router.push()、$router.replace()、$router.go() 等方法。
总的来说,$route 对象是获取当前路由信息的方式,$router 对象则是控制当前路由状态的方式。
介绍下从 HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程,各个阶段相对前一阶段做了哪些优化
HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程主要是为了解决 HTTP 协议在网络传输过程中出现的一些问题,提高网络传输效率和性能。
HTTP/1.0 是最早的 HTTP 协议,它使用一条长连接(keep-alive)传输一个请求和响应,存在以下问题:
- 队头阻塞问题:因为只有一个连接,所以如果有一个请求被阻塞,后续请求也会被阻塞。
- 无法多路复用:只能按顺序传输一个请求和响应,无法同时传输多个请求和响应。
- 每次请求需要新建连接:每次请求都需要新建连接,连接的建立和关闭过程会消耗时间。
HTTP/1.1 引入了以下优化:
- 持久连接:即连接重用,通过一个 TCP 连接传输多个请求和响应,减少了连接建立和关闭的时间。
- 分块传输编码(chunked):把响应数据分成多个块,每个块前面加上长度信息,便于客户端逐步接收。
- 虚拟主机(Virtual Host):通过在请求头中添加 Host 字段来区分不同的主机。
HTTP/2 引入了以下优化:
- 多路复用:允许同时通过同一个连接并行传输多个请求和响应,解决了队头阻塞问题。
- 二进制分帧:将传输的数据分成一个个二进制帧,每个帧都有自己的 ID,可以独立传输,解决了队头阻塞问题,提高了传输效率。
- 头部压缩:使用 HPACK 算法对头部信息进行压缩,减少了头部信息的传输量。
HTTP/3 引入了以下优化:
- QUIC 协议:使用 QUIC 协议替代 TCP,支持更快的连接建立和更快的重传,能够解决 TCP 队头阻塞和 TCP 握手延迟的问题。
- 数据流分离:将一个连接分成多个数据流,每个数据流都有独立的 ID,可以独立控制和传输数据。
总的来说,HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程主要是从连接的角度进行了优化,提高了并发能力和传输效率,提高了用户体验。
什么是 CSS 工程化?你用过哪些相关的工具?
CSS 工程化是指将 CSS 在项目中进行模块化、组件化、可维护性、可重用性等方面的处理,以达到工程化管理 CSS 的目的。
在 CSS 工程化中,通常会使用一些相关的工具来辅助管理 CSS,常用的工具包括:
- CSS 预处理器:如 Sass、Less、Stylus 等,可以通过变量、函数、混合等方式,提高 CSS 的可维护性和可重用性。
- CSS 后处理器:如 PostCSS,可以用来处理 CSS 代码,通过插件的形式可以实现一些自动化处理,如自动添加前缀、压缩 CSS 等。
- CSS 模块化工具:如 CSS Modules、styled-components 等,可以将 CSS 样式与组件代码结合在一起,提高 CSS 的可维护性和可重用性。
- CSS 命名规范:如 BEM、SMACSS、OOCSS 等,可以通过规范化 CSS 的命名方式,提高 CSS 的可读性和可维护性。
通过使用这些工具,可以提高 CSS 的可维护性、可重用性和可读性,从而使得前端开发更加高效、简洁。