02前端面试复盘

最新推荐文章于 2024-04-21 17:10:00 发布

小小小白兔

最新推荐文章于 2024-04-21 17:10:00 发布

阅读量246

点赞数

分类专栏： JavaScript 文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/rrfighting/article/details/118196488

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue

vue全家桶有哪些

全家桶，顾名思义，对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架。

vue-cli
Vue-cli是一个基于Vue.js进行快速开发的完整系统，是通过@vue/cli实现的交互式项目脚手架，其设计目的是将vue生态中的工具基础标准化，使用vue-cli可以快速地构建vue.js项目。
vue-router
vue-router是vue官方的路由管理器，其具有路由参数、查询、通配符、导航控制等功能，可以快速的构建一个单页面应用。
vuex
vuex是一款专为vue应用程序开发的状态管理模式，vuex是以全局方式集中管理应用的状态，使用vuex可以解决多组件之间状态共享的问题，也可以保证响应式数据的单向流动。
axios
axios是一个基于Promise用于浏览器和node.js的HTTP客户端，其具有支持Promise API、拦截请求、响应请求、转换请求和响应数据的特征，使用axios可以发送get和post请求。

vue脚手架

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

Vuex 的使用和五个核心

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex五个核心：state, getters, mutations, actions, modules

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步
modules => 模块化Vuex

vue路由两种模式的区别以及使用场景

hash模式

监听#后面的内容来发起Ajax请求来进行局部更新，而不需要刷新整个页面。
使用hashchange事件来监听 URL 的变化，以下这几种情况改变 URL 都会触发 hashchange 事件：浏览器前进后退改变 URL、a标签改变 URL、window.location改变URL。

history模式

history 提供了 pushState 和 replaceState 两个方法来记录路由状态，这两个方法改变 URL 不会引起页面刷新；
popstate事件的执行是在点击浏览器的前进后退按钮的时候，才会被触发
使用场景
当需要兼容低版本的浏览器时，建议使用hash模式。
当需要添加任意类型数据到记录时，可以使用history模式。

组件通信

组件通信的详细讲解

vue父子组件生命周期执行顺序

加载渲染过程：

父组件 beforeCreate
父组件 created
父组件 beforeMount
子组件 beforeCreate
子组件 created
子组件 beforeMount
子组件 mounted
父组件 mounted
更新过程：
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated

销毁过程：

父组件 beforeDestroy
子组件 beforeDestroy
子组件 destroyed
父组件 destoryed

vue的生命周期

beforeCreate -> created

初始化vue实例，进行数据观测

created

完成数据观测，属性与方法的运算，watch、event事件回调的配置
可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
此时vm.$el 并没有被创建

created -> beforeMount

判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
优先级：render > template > outerHTML
vm.el获取到的是挂载DOM的

beforeMount

在此阶段可获取到vm.el
此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

beforeMount -> mounted

此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

vm.el已完成DOM的挂载与渲染，此刻打印vm.$el，发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

更新的数据必须是被渲染在模板上的（el、template、render之一）
此时view层还未更新
若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

完成view层的更新
若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated）

beforeDestroy

实例被销毁前调用，此时实例属性与方法仍可访问

destroyed

完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器
并不能清除DOM，仅仅销毁实例

computed和watch的区别，以及使用场景

computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
使用场景
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；（购物车商品结算的时候）
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。（搜索框搜索数据的时候）

$nextTick原理以及使用场景

原理
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。
Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。
使用场景
Vue 生命周期的 created()钩子函数进行的 DOM 操作一定要放在 Vue.nextTick()的回调函数中，原因是在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick()的回调函数中。与之对应的就是 mounted 钩子函数，因为该钩子函数执行时所有的 DOM 挂载已完成。

浏览器原理

浏览器缓存机制

浏览器的缓存机制是根据HTTP报文的缓存标识进行的。
通常浏览器缓存策略分为两种：强缓存（Expires，cache-control）和协商缓存（Last-modified ，Etag），并且缓存策略都是通过设置 HTTP Header 来实现的。

强缓存
不会向服务器发起请求，直接从缓存中读取资源。

Expires
缓存过期时间，用来指定资源到期的时间，是服务端的具体时间点。也就是说，Expires=max-age + 请求时间，需要和 Last-modified 结合使用。Expires 是 Web 服务器响应消息头字段，在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。
Cache-Control

在HTTP/1.1中，Cache-Control是最重要的规则，主要用于控制网页缓存。比如当Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

协商缓存
协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

协商缓存生效，返回 304 和 Not Modified
协商缓存失败，返回 200 和请求结果

浏览器存储方式

浏览器存储方式主要有cookie、web存储、IndexedDB

cookie
最初是在客户端存储会话信息，从底层上来看，cookie是http协议的这一种扩展，cookie数据自动在客户端和服务端之间通信，所以服务端脚本可以读写存储的cookie数据，因此cookie一般存储的是一些通用信息，例如登录状态，首选项等。
但是cookie的存储量比较小，而且只能存储字符串，所以html5出现之后，被web存储方式慢慢替代了。
cookie有一个过期时间（expires），到了过期时间，浏览器会自动删除cookie；
cookie 是存在用户硬盘中，用户每次访问站点时，Web应用程序都可以读取 Cookie 包含的信息。当用户再次访问这个站点时，浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在，浏览器就将它添加到request header的Cookie字段中，与http请求一起发送到该站点。
web存储

localstorage
localStorage是存储在用户本地的浏览器上，并且存储周期为永久，只要开发者不手动删除，会一直存在；
localstorage存储的值只能是字符串的形式，当我们存储数据为引用对象的时候，会默认调用对象的toString方法，转化为字符串在存储。所以我们在存储数组时，存储的数据会将数据项隔开，解析的时候需要我们分解成为数组再操作。而对于对象，我们需要用JSON.stringify转化存储，获取数据后再用JSON.parse转化为对象；
因为可以存储一些不需要跟服务器交互的数据，例如导航的当前状态。
sessionStorage
将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

我们已经有了 cookie。为什么还要其他存储对象呢？

与 cookie 不同，Web 存储对象不会随每个请求被发送到服务器。因此，我们可以保存更多数据。大多数浏览器都允许保存至少 2MB 的数据（或更多），并且具有用于配置数据的设置。
还有一点和 cookie 不同，服务器无法通过 HTTP header 操纵存储对象。一切都是在 JavaScript 中完成的。
存储绑定到源（域/协议/端口三者）。也就是说，不同协议或子域对应不同的存储对象，它们之间无法访问彼此数据。

indexedDB

在官网上MDN上indexedDB是这样定义的： IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

JavaScript

数组遍历方法有哪些

forEach循环
历数组中的每一项，没有返回值，对原数组没有影响，不支持IE，在forEach中，不能使用 continue 和 break ，可以使用 return 或 return false 跳出循环，效果与 for 中 continue 一样。注意该方法无法一次结束所有循环。
map循环
有返回值，支持return返回值，把每一次循环return返回的值组成一个新的数组，对原数组没有影响。
for of循环
ES6新增的循环方法，没有索引，它可以正确响应break、continue和return语句，而且，这个方法避开了for-in循环的所有缺陷
filter循环
一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
some循环
给数组每一项都运行一个函数，同every相反，只要有一项符合条件，就跳出循环，返回true，否则返回false。
every循环
给数组每一项都运行一个函数，如果每一项都符合条件，就返回true，否则返回false。
find循环
给数组每一项都运行一个函数，只要有一项符合条件，就跳出循环，返回第一个符合条件的元素，否则返回undefined。

在map中和for中调用异步函数的区别

map会先把执行同步操作执行完，然后返回，之后再一步一步的执行异步任务
for是等待异步返回结果后再进入下一次循环

map函数的原理是：

循环数组，把数组每一项的值，传给回调函数；
将回调函数处理后的结果push到一个新的数组
返回新数组
map函数是同步执行的，循环每一项时，到给新数组都是同步操作的。
代码执行的结果： map不会等到回调函数的异步返回结果，就会进入下一次循环。执行完同步操作之后，就会返回结果，所以map返回的值都说Promise。
注意： 异步函数执行上map和forEach相同，await不生效循环里不能有break或continue，会产生报错 callback的return 返回新的数组元素，不使用return时等价于返回undefined
使用for、for…of代替。

promise和settimeout，setinterval的区别

promise的状态时私有的，不能直接通过JavaScript检测到。另外期约的状态也不能被外部JavaScript代码修改。每个期约只要状态切换为兑现，就会有一个私有的内部值；当切换为拒绝时，就会有一个私有的内部理由。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，而setInterval()方法可按照指定的周期来调用函数或者计算表达式，直到clearInterval把它清除。
也就是说setTimeout()只执行一次，setInterval()可以执行多次。

promise三种状态

pending（待定）
resolved（完成，fulfilled）
rejected（拒绝）

状态变化
1、pending -> resolved
2、pending -> rejected

状态的表现

pending状态不会触发then和catch
resolved状态会触发后续的then回调函数
rejected状态会触发后续的catch回调函数

then和catch改变状态

then正常情况下会返回resolved，报错则返回rejected
catch正常情况下会返回resolved，报错则返回rejected

代码死循环

 while(1){
    console.log(Math.random());
 }

使用Concurrent.Thread.js库
使用异步模拟多线程

Concurrent.Thread.create(function(){
 while(1){
    console.log(Math.random());
	 }
 })

web Worker
提供了在后台非主线程执行javascript代码的能力

//main.js
const worker=new Worker('worker.js');
worker.onmessage=function(e){
//接收worker传过来的数据
}
//worker.js
while(1){
	const n=Math.random();
	console.log(n);
	if(n>0.9){
		postMessage(n);
		break;
	}
}

css

如何设置背景透明

一种是通过rgba方式设置，另一种是通过backgroud和opacity设置。

使用rgba和opacity的区别

rgba语法：
　　rgba(0, 0, 0,0.5);
　　第一个参数：R 红色（0-255）
　　第二个参数：G 绿色（0-255）
　　第三个参数：B 蓝色（0-255）
　　第四个参数：透明度（0-1）

使用opacity（具有继承性）设置元素的不透明度会使其所有后代元素都会随着一起具有透明度，一般都用于调整图片或者模块的整体不透明度（使用opacity指定背景颜色的透明度时，其内容也一起被设置透明度，导致内容模糊）
rgba可以让背景透明，文字不透明，rgba()只作用于元素的颜色或其背景色。任何位置的颜色，使用rgba指定，都可以通过设置第四个参数来调整透明度；
使用rgba指定背景颜色，可以通过调整最后一个参数值小于1来设置背景透明，而不会影响其内部的元素透明度

常用标签

overflow、visibility、opacity、display

opacity 属性指定了一个元素的不透明度。 注意： 当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏中的行或列。当属性值为hidden时，会隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。
display 将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。该属性可以用来改善重排与重绘，同时我也经常用它来做模态窗等效果。
overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。当属性值为hidden时，内容会被修剪，并且其余内容不可见，不提供滚动条

transparent和rgba

opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。

border-radius

允许你设置元素的外边框圆角。当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格元素上。

轮播图的实现

利用排他思想进行设计，在父元素设置为相对定位，以让子元素相对它进行绝对定位；在按钮上加上动画特效

node

cluster

cluster用于创建多进程的node应用；c luster可以发送重启信号给master线程；可以根据CPU核心数起对应的n个新服务并开始监听服务，理论上可以无数个服务，但是一般来说还是根据OS的核心数去起服务；master线程可以等待旧服务，同时还能杀掉旧服务。

// 一个简单带有cluster自动重启的app.js
const cluster = require("cluster");
const cpuNums = require("os").cpus().length;
const http = require("http");

if (cluster.isMaster) {
  // 是否在主线程
  for (var i = 0; i < cpuNums; i++) {
    cluster.fork(); // 有多少个cpu就分多少个cluster出来

    cluster.on("exit", function (worker, code, signal) {
      console.log(`线程id为 ${worker.process.pid} 退出`);
    });
    cluster.on("listening", function (worker, code, signal) {
      console.log(`线程id为 ${worker.process.pid} 开始服务`);
    });
    cluster.on("disconnect", function (worker, code, signal) {
      console.log(`线程id为 ${worker.process.pid} 停止服务`);
    });
    process.on("SIGUSR2", function () {
      // 接收kill -SIGUSR2 $pid
      // 保存旧 worker 的列表，cluster.workers 是个 map
      var oldWorkers = Object.keys(cluster.workers).map(function (idx) {
        return cluster.workers[idx];
      });
      // 重新起服务
      cluster.fork();

      // 当新服务起起来之后，关闭所有的旧 worker
      cluster.once("listening", function (worker) {
        oldWorkers.forEach(function (worker) {
          // disconnect 会停止接收新请求，等待旧请求结束后再结束进程
          worker.disconnect();
        });
      });
    });
  }
} else {
  http
    .createServer(function (req, res) {
      res.end(123);
    })
    .listen(8080);

  console.log(`你的线程id为 ${process.pid}`);
}

上面是一个简易的线程关闭自动重启的一个过程

小小小白兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
02前端面试复盘

文章目录vuevue全家桶有哪些vue脚手架Vuex 的使用和五个核心vue路由两种模式的区别以及使用场景组件通信vue父子组件生命周期执行顺序vue的生命周期computed和watch的区别，以及使用场景$nextTick原理以及使用场景浏览器原理http缓存方式浏览器存储方式浏览器缓存机制JavaScript数组遍历方法有哪些在map中和for中调用异步函数的区别promise和settimeout，setinterval的区别promise三种状态代码死循环css如何设置背景透明使用rgba和opa
复制链接

扫一扫