文章目录1.写在前面2.前端面试汇总2.0.1.如何提⾼webpack的打包速度2.0.2.数组去重2.0.3.前端有几种缓存方式？2.0.4.nextTick描述一下？2.0.5.Webpack层面的优化？2.0.6.代码层面的优化？2.0.7.Web技术的优化？2.0.8.diff算法的优化策略？2.0.9.事件循环？它在JS中作用？2.1.0.浏览器缓存及作用？2.1.1.WebWorkers作用？2.1.2.浏览器垃圾回收机制？2.1.3.虚拟DOM实现原理?3.CSS相关汇总3.0.1.CSS中的层叠顺序是如何工作的？3.0.2.CSS中的伪类和伪元素的区别？示例？3.0.3.v-i
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸ModernfrontendtestingwithVitest,Storybook,andPlaywright。向前端工程师提及“测试”，您可能会面临引发PTSD（创伤后应激障碍）的风险。就传统而言，这事倍功半。毕竟，您可以直接在屏幕上看到UI；为什么需要编写自动化测试来确认已经在浏览器观察到的内容？在本文中，我们将分享为什么我们认为前端测试值得一试，为什么它以往风评被害，以及我们采用的使我们的测试易于编写和维护的方案。我们为什么要测试前端？测试我们的UI有其他不太明显的复利。正如TDD（测试驱动开发）可以鼓励开发者预先考虑极端用
目录前言主应用微应用部署前言因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。网上有很多关于微应用改造的案例，但很多都没写部署之后什么情况。写了部署的，没有实操部署在二级目录、三级目录是什么情况，甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点，也是最困扰我的一个问题。我们所改造的应用说明：主应用：vue3+vite+ts微应用1：vue2，qiankun官网API是基于vue2+webpack，我们对vue2也进行了接入，但是在本篇文章中不做说明。微应用2：
简介本章节从精准定位、分层设计、异步组件、拖拽四个方面分析飞码画布设计。一、精准定位设计飞码画布是一个套件，可对外提供画布能力。精准定位有两种情况，一是目标组件无子组件，而是目标组件有子组件。无子组件：目标组件分为支持与不支持放子组件两种情况。有子组件：鼠标相对于子组件（目标组件）对角线位置。详见图1图1当目标组件不支持放子组件时，需要计算拖拽组件放在目标组件的左侧、上侧、右侧、还是下侧？其计算方法如图2图2通过鼠标位置，目标组件，组件对角线坐标位置可推导出图1右侧图拖拽组件与目标组件位置关系。问题：飞码为何不提供尺度（x、y），这样可以精准知道组件大小？实际使用过程中，搭建人员并不关心组件的
目录1.该问题出现的原因2.处理401问题的解决方案原理3.使用响应拦截器解决问题1.该问题出现的原因在前后端分离项目中，最常见的是前端点击登录后，后端返回token字符串，这个token可以看作是一个“令牌”，就比如你去酒店办理入住后，拿到的房卡，那代表你有着进去房间的权限。1.登录用户的token过期 token是具有时效性的，生活中，如你登录腾讯视频，接下来几天你再登录就不用输入账号密码，而时间很长如半个月后，你还要重新输入账号密码登录，这个过程就是token过期。具体多久过期，一般是和后端商量着来，后台管理类项目如企业内部的项目为了安全性且并不会过多的考虑用户体验，一般设为很短或者干脆
如何在提交代码之前，进行代码格式化检查，保证每个成员的代码都是同一个风格呢？最简单的两种方式：使用prettier+gitpre-commit使用prettier+husky(原理和第一种一模一样哦)名词简介githooks下图为githooks的官方示例，以.sample结尾。注意这些以.sample结尾的示例脚本是不会执行的，重命名后会生效是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。客户端钩子包括：pre-commit、prepare-commit-msg、commit-msg、post-commit等，主要用于控制客户端git的提交工作流。服务端钩子：pre
😫博主：小猫娃来啦😫文章核心：实现客户端与服务器实时通信的技术手段文章目录前言轮询技术轮询的概念轮询的实现原理轮询的优缺点轮询的使用场景长轮询技术长轮询的概念长轮询的实现原理长轮询的优缺点长轮询的使用场景轮询与长轮询的比较示例代码结论前言现代Web应用程序对实时通信的需求越来越高，为了满足这种需求，轮询和长轮询成为了常用的技术手段。本文将深入探讨轮询和长轮询的实现原理、优缺点以及使用场景，并提供代码示例，以帮助读者更好地理解和应用这两种技术。轮询技术轮询的概念轮询是一种客户端与服务器之间实时通信的技术手段，它的基本原理是客户端定期发送请求来查询服务器是否有新数据或事件，并将响应返回给客户端。如
系列文章目录（点击查看）文章目录系列文章目录（点击查看）前言一、了解Vue3二、了解Vite三、了解TypeScript四、了解Pinia五、了解Sass总结前言旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中，我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。通过这个系列，我们将从零开始构建一个完整的前端项目，覆盖项目初始化、组件开发、状态管理、样式处理等方方面面。我们将介绍每个技术的基本概念，并提供实际的代码示例和最佳实践，让读者能够快速上手并建立扎实的技术基础。不论你是刚入门前端开
一、概念在前端发送请求时，如果想要携带cookie，通常只能携带存储在与请求域名相同路径的cookie。这是由浏览器的同源策略所决定的。同源策略要求请求的域名、协议和端口都必须一致，否则浏览器会限制跨域请求的权限。当浏览器发送跨域请求时，默认情况下不会自动携带cookie，只有在以下两种情况下才会携带：目标域名设置了允许携带cookie的响应头（Access-Control-Allow-Credentials），并且请求的origin域名也在目标域名的白名单中。请求通过简单请求（GET、POST、HEAD）发送，并且请求的目标域名与当前页面的域名相同。因此，如果想要在前端发送跨域请求时携带co
很多时候在工作中会碰到完全由前端导出word文件的需求，因此特地记录一下比较常用的几种方式。一、提供一个word模板该方法提供一个word模板文件，数据通过参数替换的方式传入word文件中，灵活性较差，适用于简单的文件导出。需要依赖：docxtemplater、file-saver、jszip-utils、pizzip。javascript复制代码importDocxtemplaterfrom"docxtemplater";import{saveAs}from"file-saver";importJSZipUtilsfrom"jszip-utils";importPizZipfrom"pizz
