主要项目+八股+编程题,全程1h11min好像对于有工作经验的同学来说,会更侧重考察实战场景题、性能优化自我介绍有过实习经验是吧,说说你遇到过最亮点或者最具备技术难点的项目详细介绍一下Vuex,你是怎么理解全局状态管理的?(感觉没说出面试官想要的答案)Vuex是一个全局状态管理工具,全局状态管理的意思就是集中地存储应用的所有组件的状态。如何理解的:假如我们现在有一个应用,这个应用包含驱动应用的数据源、视图和Action对吧。这三个部分构成一个单向数据流,但是当我们的应用遇到多个组件去共享同一个状态的时候,比如说,一个组件的状态改变了,多个依赖于这个组件的页面都要跟着变,相反,来自不同页面的行为需要变更同一个状态,这样都会导致我们的组件状态很混乱,也不好维护,尤其是对于大型项目来说。所以Vuex的作用就体现在这里,他让我们可以把组件的共享状态抽离出来,以一个全局单例模式去管理。Vuex 的核心概念有五个:State: State是用于存储应用中的全局状态(数据)。在 Vuex 中,State 是一个唯一的公共数据源,所有共享的数据都要统一放到 State 中。State 以独立的对象形式存在,并且是响应式的,当 State 发生变化时,与 State 相关的视图会自动更新。Getter: Getter是用于获取 State 中的数据并进行一定程度的计算或处理。它类似于计算属性,可以根据 State 中的数据计算出新的数据,并且会缓存计算结果。当 State 中的数据发生变化时,Getter 会自动重新计算。Mutation: Mutation是用于更改 State 的唯一方法。它是一个同步操作,通过提交类型和处理函数来实现 State 的更改。提交类型表示 State 将发生哪种类型的变化,如增加、删除或更新等;处理函数用于处理具体的状态更新逻辑。在 Vuex 中,每个 Mutation 都有一个类型和处理函数,且必须是同步执行的。Action: Action是用于异步操作的。它可以包含任何异步逻辑,如 API 请求、延时操作等。当异步操作完成后,Action 会提交一个 Mutation 来改变 State。这样可以确保异步操作不会直接改变 State,而是通过 Mutation 以同步的方式更新 State。Module: Module是用于将 Vuex Store 分割成模块化的方式。当应用变得庞大时,可以将不同的功能模块分组存储在不同的 Module 中,以便更好地管理和维护。每个 Module 都有自己的 State、Getter、Mutation 和 ActionVue2和Vue3的差异Vue2生命周期页面上从输入url到渲染页面经历了什么(很久没看这个问题了,下面是我印象里的答案)你详细说一下DOM解析到渲染之间的过程(我提到了重绘重排)那你说一下什么是重绘重排说说浏览器缓存HTTP有哪些状态码?分别说说代表着什么含义2xx:成功常用:200:请求成功201:请求成功,并且服务器已创建新的资源;比如说用户提交表单的场景。204:假设用户访问一个网页,请求服务器获取某个资源的最新版本。服务器检查资源后发现,该资源自上次请求以来没有发生变化。当服务器返回 204 状态码时,浏览器会认为资源可能会发生变化,所以不会使用缓存副本,而是重新下载资源。3xx:重定向常用:302:表示请求成功,但服务器临时性地返回了一个重定向响应;比如说是用户访问网页重定向到登录页的场景。304:表示请求成功,但服务器没有返回任何新内容。和204类似。需要注意的是,204和304的区别在于缓存机制。304 状态码告诉浏览器应该检查本地缓存,看是否可以重用之前的缓存。而 204 状态码则告诉浏览器不要使用缓存,因为资源没有发生变化。4xx:客户端错误5xx:服务端错误有什么性能优化的手段吗(下面是我提到的几个点)路由懒加载:当打包构建应用的时候,JavaScript包会变得很大,如果不做处理,页面加载会变得很慢。用路由懒加载的方案可以让路由被访问的时候才加载对应组件。路由懒加载的表现形式:我一般是在路由表里面的components后面,把路径用import的方式引入。来个场景题  如何监测页面白屏?我理解问题:计算白屏时间面试官:不是,是我们要怎么才能知道页面出现了白屏?(说实话完全没接触过,一点思路都没有)页面白屏通常指的是在加载网页时,用户看到的是一片空白的页面,没有显示任何内容。要监测页面白屏,可以在以下几个环节进行介入:网络请求阶段:可以通过网络请求监测工具,如浏览器开发者工具(Network 面板)、性能分析工具等,查看请求的时间线和请求状态。如果发现页面的请求时间过长或某些请求失败,可能是网络连接或资源加载出现了问题,导致页面无法正常加载。HTML 解析和渲染阶段:在浏览器的开发者工具中,可以查看页面的渲染情况和渲染时间线,以及DOM树和CSSOM树的构建过程。如果在这些过程中出现了错误或者卡顿,可能会导致页面白屏。同时,也可以检查是否存在缺少必要标签、CSS 文件引入错误、JavaScript 错误等问题。JavaScript 执行阶段:JavaScript 的执行会阻塞页面的渲染。如果页面中的 JavaScript 代码存在性能问题、死循环、长时间运行等情况,可能会导致页面无法正常渲染。可以使用浏览器的性能分析工具来检查 JavaScript 执行的情况,查找潜在的性能问题。页面逻辑问题:有时候页面白屏是由页面逻辑问题造成的,比如缺少必要的数据、错误的跳转逻辑等。可以通过日志记录、错误监控工具等手段来捕获和分析错误信息,以便找到并解决页面逻辑问题。在监测页面白屏时,建议使用多种工具和方法综合分析。可以结合网络请求监控、性能分析工具、浏览器开发者工具和错误监控工具等来全面了解页面加载和渲染的各个环节,以便及时发现问题并进行优化。页面白屏的主要原因可以归纳为以下几点:网络问题:网络连接不稳定、服务器响应缓慢或失败等,导致页面无法成功加载所需资源。HTML结构错误:HTML代码中存在语法错误或标签闭合不完整等问题,导致浏览器无法正确解析和构建DOM树。CSS问题:CSS文件加载失败、样式表错误、选择器匹配问题等,导致页面无法正确渲染样式,显示为空白。JavaScript问题:JavaScript代码错误、执行阻塞、性能问题等,导致页面无法正常执行脚本,进而导致页面无法渲染和展示内容。资源加载问题:图片、字体、脚本等外部资源加载失败或超时,导致页面无法显示对应的内容。服务器端问题:服务器端处理逻辑错误、数据库连接问题等,导致无法正确生成页面内容并返回给客户端。第三方插件或库问题:使用的第三方插件或库存在版本兼容性问题、加载失败等,影响了页面的渲染和展示。写两道题吧function fn() {    console.log(1);}let timeWorker = {}; // 全局变量// 实现setIntervalfunction mySetInterval(fn, delay) {    let key = Symbol();    let execute = function (fn, delay) {        timeWorker[key] = setTimeout(function () {            fn();            execute(fn, delay)        }, delay)    }    execute(fn, delay);    return key;}let timerID = mySetInterval(fn, 1000);// 实现clearIntervalfunction myClearInterval(key) {    if (key in timeWorker) {        clearTimeout(timeWorker[key]);        delete timeWorker[key];    }}setTimeout(()=>{    myClearInterval(timerID);},5000)发现问题不扎实的知识点:VuexVue2和Vue3的差异(起码要说得人家认可你学会了这两个东西)DOM解析到渲染之间的过程性能优化手段HTTP状态码好好总结上述知识点,时常温习。
点赞 6
评论 1
全部评论

相关推荐

从输入URL到页面加载发生了什么:总体来说分为以下几个过程: 1.DNS解析 2.TCP连接 3.发送HTTP请求 4.服务器处理请求并返回HTTP报文 5.浏览器解析渲染页面 6.连接结束。简述了一下各个过程的输入输出作用:以下是对从输入 URL 到页面加载各过程的输入、输出或作用的一句话描述:DNS 解析: 输入:用户在浏览器地址栏输入的域名(如 www.example.com)。输出:对应的 IP 地址(如 192.168.1.1)。作用:将易于记忆的域名转换为计算机能够识别和用于网络通信的 IP 地址,以便浏览器与目标服务器建立连接。TCP 连接: 输入:浏览器获得的服务器...
明天不下雨了:参考一下我的说法: 关键要讲出输入网址后涉及的每一个网络协议的工作原理和作用: 涉及到的网络协议: HTTP/HTTPS协议->DNS协议->TCP协议->IP协议->ARP协议 面试参考回答: 第一次访问(本地没有缓存时): 一般我们在浏览器地址栏输入的是一个域名。 浏览器会先解析 URL、解析出域名、资源路径、端口等信息、然后构造 HTTP 请求报文。浏览器新开一个网络线程发起HTTP请求(应用层) 接着进行域名解析、将域名解析为 IP 地址 浏览器会先检查本地缓存(包括浏览器 DNS 缓存、操作系统缓存等)是否已解析过该域名 如果没有、则向本地 DNS 服务器请求解析; 本地服务器查不到会向更上层的 DNS 服务器(根域名服务器->顶级域名服务器->权威域名服务器询问)递归查询 最终返回该域名对应的 IP 地址。(应用层DNS协议)DNS 协议的作用: 将域名转换为 IP 地址。 由于 HTTP 是基于 TCP 传输的、所以在发送 HTTP 请求前、需要进行三次握手、在客户端发送第一次握手的时候、( 浏览器向服务器发送一个SYN(同步)报文、其中包含客户端的初始序列号。TCP头部设置SYN标志位、并指定客户端端口 同时填上目标端口和源端口的信息。源端口是浏览器随机生成的、目标端口要看是 HTTP 还是 HTTPS、如果是 HTTP 默认目标端口是 80、如果是 HTTPS 默认是 443。(传输层) 然后到网络层:涉及到(IP协议) 会将TCP报文封装成IP数据包、添加IP头部,包含源IP地址(浏览器)和目标IP地址(服务器)。IP 协议的作用: 提供无连接的、不可靠的数据包传输服务。 然后到数据链路层、会通过 ARP 协议、获取目标的路由器的 MAC 地址、然后会加上 MAC 头、填上目标 MAC 地址和源 MAC 地址。 然后到物理层之后、直接把数据包、转发给路由器、路由器再通过下一跳、最终找到目标服务器、然后目标服务器收到客户的 SYN 报文后,会响应第二次握手。 当双方都完成三次握手后、如果是 HTTP 协议、客户端就会将 HTTP 请求就会发送给目标服务器。如果是 HTTPS 协议、客户端还要和服务端进行 TLS 四次握手之后、客户端才会将 HTTP 报文发送给目标服务器。 目标服务器收到 HTTP 请求消息后、就返回 HTTP 响应消息、浏览器会对响应消息进行解析渲染、呈现给用户
点赞 评论 收藏
分享
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务