前端罗马-CSDN博客

原创 svg标签如何搭配use标签使用

元素引用另一个元素时，实际上会在内部创建一个新的Shadow DOM，这意味着对原始元素应用的样式会继承到引用的副本上，但不能直接通过常规CSS选择器作用于克隆后的元素。如果你希望修改引用元素的样式，可以直接在CSS中针对该元素ID或者。它可以引用SVG文档内的其他元素，通常这些元素是在。标签极大地提高了SVG元素的复用性，避免了文档中不必要的冗余，同时支持通过CSS进行灵活的样式控制。在SVG文档中，先创建一个或多个可以被复用的元素，比如一个形状、路径或者符号（然后，在SVG文档的任何位置，可以用。

2024-04-22 14:35:37 687

原创 css 如何设置背景图片定位

在CSS中设置背景图片的位置，可以使用属性。这个属性用于指定背景图像在元素背景区域中的起始位置。它可以接受多种类型的值，包括关键字、长度单位（像素、百分比等）以及组合值。

2024-04-19 09:39:59 640

原创快速入门windicss框架常用类名配置

Windi CSS 是一个工具优先的 CSS 框架，它的设计思想与 Tailwind CSS类似，通过提供一系列预设的实用类名来帮助开发者快速编写符合语义化的 HTML 样式。

2024-04-18 18:06:14 465

原创如何在vue项目的package.json插件中使用本地文件，不走node_module打包逻辑

package.json文件：将插件路径改为本地路径。在src同级目录新建libs目录存放你的插件文件夹。page页面内引用插件后，尽情使用你的插件。

2024-04-15 15:19:45 494

原创 js 说一下event.stopPropagation()的内部实现

内部的状态，通常这个状态是一个标志位，标记事件是否应该继续传播。当调用此方法时，它会将该标志位设置为阻止传播，浏览器在内部进行事件循环处理时检测到这一标志，就会停止对该事件的进一步处理，无论是事件捕获还是事件冒泡阶段都会受到影响。对象的一个实例方法，主要作用是在事件处理过程中阻止事件的进一步传播，即阻止事件向上冒泡到父元素或者向下捕获到其他更低层级的元素。实际的浏览器实现会更加复杂，涉及到更多的优化和跨平台兼容性处理，但基本思想就是通过改变事件对象的内部状态来控制事件传播的行为。

2024-04-11 10:37:58 361

原创前端流程引擎有哪些框架推荐

请注意，以上推荐的前端流程引擎框架中，有些专注于流程设计和可视化（如bpmn-js、Flowchart.js、React-Flow等），而有些是作为更大BPM平台的一部分，提供了完整的流程设计、部署、执行和监控能力（如Activiti Modeler、Camunda Modeler）。前端流程引擎通常是指用于设计、建模、执行和可视化业务流程、工作流或流程图的软件组件，它们通常包含图形化的设计器、流程模型解析与执行引擎、以及与用户交互的可视化界面。

2024-04-10 16:57:46 606

原创谷歌浏览器如何设置清空缓存并硬性重新加载

请注意，上述“清空缓存并硬性重新加载”的操作是在需要临时清除特定页面访问时的缓存情况下使用的。在弹出的“清除浏览数据”窗口中，您可以设置清除数据的时间范围，确保“Cookies和其他站点数据”和“缓存图片和文件”这两项已被选中（根据需要还可以勾选其他项目）。在弹出的上下文菜单中，选择“清空缓存并硬性重新加载”。在开发者工具窗口中，找到顶部的刷新按钮（通常是一个圆形箭头图标，位于左上角），右键点击该按钮。在设置页面中，滚动到底部，点击“高级”（或者直接滚动到“隐私与安全”部分）。在下拉菜单中，选择“设置”。

2024-04-09 09:03:42 554

原创 js如何判断当前网页是否存在于一个iframe之中

需要注意的是，上述方法可能会受到跨域策略的影响，尤其是在严格的安全设置下，跨域 iframe 可能无法访问。如果当前上下文不在任何帧或 iframe 内，则。指向最顶层的窗口或框架。如果当前页面在 iframe 中，则。因此，在实际使用中，结合多个条件来判断更保险。JavaScript 判断当前页面是否在一个。如果页面是在另一个窗口或框架的上下文中，那么。同时，如果 iframe 设置了。应大于0，意味着存在嵌套的帧结构。属性返回对包含当前窗口或框架的。应该指向包含它的那个窗口，而且。

2024-04-08 18:01:08 432

原创 WebP格式图片兼容情况

WebP 图片格式是由 Google 推出的现代图像格式，旨在提供更好的压缩效率，从而减小网页加载时间和数据消耗。以下是对 WebP。

2024-04-08 17:54:21 368

原创 js 如何设置和获取cookie,封装一个setCookie和getCookie的工具函数

请注意，实际使用时可能还需要根据需求进一步完善这个函数，比如支持更复杂的。工具函数用于方便地设置Cookie。下面是一个基础版本的。时间格式，以及其他如HTTPOnly属性等。JavaScript中可以封装一个。

2024-04-08 17:00:22 235

原创浏览器的cookie什么情况下会被销毁，都列举下

以上情况均可能导致浏览器中的 Cookie 被销毁。

2024-04-08 16:53:10 384

原创在浏览器打开 a1.page.com/#/index1网页下先设置一个名为token的cookie,那么我再新标签页打开网页a1.page.com/#/index2会把这个token 带上吗

后面的部分（即哈希 fragment）不会在网络请求中发送到服务器，但它不影响浏览器处理与域名相关的 cookie。因此，无论 URL 中的哈希部分如何变化，只要域名相同，浏览器都会正确地携带对应的 cookie。，浏览器会根据 cookie 的域（domain）、路径（path）以及其它相关属性（如：secure、httpOnly），在发起对。cookie，只要该 cookie 对应的域和路径规则允许其在。的 cookie，并在同一个域名下（即。网页的请求时自动带上这个。当您在一个网页（例如。

2024-04-08 16:48:07 190

原创 js 的window.location.replace 方法会销毁掉replace之前的网站cookie吗，默认设置的cookie通过关掉标签页会销毁cookie吗

至于默认设置的 Cookie 是否会在关闭标签页后被销毁，这主要取决于 Cookie 的生命周期。大多数情况下，普通的会话 Cookie（没有设置过期时间的 Cookie）会在浏览器关闭时失效，也就是说，当你关闭包含该网站标签页的所有窗口时，这些会话 Cookie 通常会被浏览器清除。持久化 Cookie（设置了过期时间的 Cookie）则会在指定的过期时间到达前一直保留在用户的计算机上，即使关闭了标签页或浏览器也不会立即销毁。方法不会主动销毁之前网站设置的 Cookie。

2024-04-08 16:37:38 308

原创为什么iframe里的网页不能获取cookie

对于旧版Internet Explorer浏览器（已不再主流支持），iframe内的网页可能需要遵循P3P（Platform for Privacy Preferences）隐私策略声明才能读取或写入cookie。当iframe加载的是与主页面不同源的网页时，由于同源策略的限制，iframe内部网页通常无法访问主页面的cookie，反之亦然。如果iframe加载的是第三方站点，浏览器可能会阻止iframe从顶级上下文中读取或写入cookie，特别是当涉及到用户隐私和安全时，这种限制更为严格。

2024-04-08 14:47:03 790

原创如何维持前端页面中内嵌iframe的登录态

总之，关键在于合理地管理和共享用户的身份验证信息，同时确保安全性。注意在实际应用中，应根据安全策略和隐私政策谨慎处理敏感信息，遵循最小权限原则。

2024-04-03 17:25:38 784

原创浏览器cookie、localStorage、sessionStorage生命周期

浏览器中的三种主要客户端存储机制——Cookie、localStorage 和 sessionStorage ——各有不同的生命周期：Cookie:localStorage:sessionStorage:总结：

2024-04-01 09:44:58 314

原创多个标签页之间 Cookie、sessionStorage 共享吗

需要注意的是，如果启用了浏览器的隐私模式（如“无痕浏览”），在这种模式下打开的不同标签页通常不会共享Cookie，因为隐私模式旨在防止保存浏览记录和站点数据。此外，不同浏览器实例之间也是不共享Cookie的，例如在Chrome和Firefox之间，或是两个独立运行的Chrome浏览器实例之间。当您在一个网页上设置了一个Cookie，并且没有特别指定Cookie的作用域，那么在同一域名下的其他打开的标签页都可以访问到这个Cookie。这是因为Cookie是基于域名和路径来管理的，而不区分具体的浏览器标签页。

2024-04-01 09:44:13 398

原创【前端面试题-21】简单说一下前端工程化上有哪些优化

总之，前端工程化通过一系列的工具、技术和最佳实践，从构建、资源管理、代码质量、性能监控到自动化流程等全方位提升前端项目的开发效率、运行性能和可维护性。

2024-03-29 16:12:07 311

原创【前端面试题-20】js如何对输出内容进行HTML编码

在JavaScript中，对输出内容进行HTML编码通常是为了防止XSS攻击（跨站脚本攻击），即将特殊字符转换成HTML实体的形式，避免它们被浏览器解析为HTML或JavaScript代码。以下是一些常见的HTML编码方法：虽然这两个函数主要用于编码URI组件而不是HTML内容，但在某些场景下也可以用来对HTML内容中的特殊字符进行编码，特别是对于属性值，推荐使用：使用自定义函数或库为了对HTML内容进行全面的HTML实体编码，可以编写一个简单的函数，或者利用现成库的功能，例如：使用库（例如 jQue

2024-03-29 10:59:40 205

原创【前端面试题-19】简单说一下，如果前端页面要做个页面加载进度条，该通过哪些实现进度上的把控

总结来说，实现页面加载进度条的核心在于获取到加载进度的数据，并通过JavaScript实时更新进度条元素的宽度。对于局部加载或异步操作的进度，则可以直接通过特定API获得确切的进度数据。对于整个页面加载进度，由于浏览器本身并不直接提供页面资源加载进度的具体数据，因此模拟整个页面加载进度较为复杂，一般依赖于监听DOMContentLoaded、load事件以及可能的异步资源加载情况（如图片、脚本、Ajax请求等）。对于整体页面加载进度的模拟，可能需要借助第三方库，如上面提到的。

2024-03-29 09:16:25 453

原创【前端面试题-18】简单说一下主流前端项目的前端安全方面的优化有哪些

综上所述，前端项目安全优化涉及多个层面，需要综合运用各种技术和策略，全方位提升系统的安全性。

2024-03-28 17:08:59 233

原创【前端面试题-17】简单说一下js的原型链

方法访问），它指向该对象的原型对象。当试图访问一个对象的属性时，如果该对象自身不存在该属性，JavaScript 引擎会向上搜索其原型对象，如果原型对象存在该属性，则返回该属性的值。这个搜索过程会沿着原型链逐级向上，直至找到该属性或者到达原型链的顶端（即。JavaScript 的原型链（Prototype Chain）是其面向对象特性中的一个重要概念，用于实现对象间的继承和属性查找机制。链接起来的一系列对象，形成了一种继承关系，使得对象可以共享和继承属性和方法。，表示原型链的终点）。上找到该方法并执行。

2024-03-28 15:48:51 355

原创【前端面试题-16】简单说一下js的闭包和内存泄漏

闭包本身并不直接导致内存泄漏，但如果闭包造成了对外部资源（如变量、DOM元素等）的长期引用，而这些资源在逻辑上已经不再需要，那么就会阻止这些资源的内存被垃圾回收机制自动回收，从而形成内存泄漏。：比如在一个DOM元素上绑定了事件处理函数，而这个处理函数是一个闭包，它引用了其他的DOM元素或大对象，即便DOM元素卸载了，但由于闭包的引用关系，相关的内存无法被回收。：闭包内部持续引用了外部对象，在循环调用或其他长期运行的过程中，即使这些对象已经不再使用，由于闭包的存在，它们仍会被保留在内存中。

2024-03-28 11:00:38 267

原创【前端面试题-15】简单说一下http三次握手和四次挥手

总结起来，三次握手是为了保证双方都能正确无误地建立连接，而四次挥手则是为了确保双方都能有序、可靠地关闭连接，防止数据丢失。

2024-03-28 10:55:39 269

原创【前端面试题-14】vue3与vue2 的虚拟DOM对比

综上所述，Vue3在虚拟DOM层面上做出了显著的性能优化和功能增强，使得Vue应用在构建大型项目时具有更高的性能和更低的内存消耗。同时，Vue3还通过Composition API等方式让开发者对虚拟DOM的控制更为精细和直观。

2024-03-28 10:51:54 370

原创【前端面试题-13】简单说一下vue2的diff算法

Vue2的Diff算法是用来高效地计算出Virtual DOM（虚拟DOM）变化并应用到实际DOM的一种策略。Vue2采用了基于Snabbdom改进的O(n)复杂度的Diff算法，确保在组件状态改变时能够最小化对真实DOM的操作。通过这样的算法，Vue可以在状态变更后迅速定位到哪些部分的真实DOM需要更新，从而实现高效的UI更新，减少不必要的DOM操作和重绘重排。

2024-03-28 10:43:11 283

原创【前端面试题-13】目前主流的几种图片格式以及特性和使用场景

总结起来，每种图片格式都有其特定的优势和适用场合，选择哪种格式取决于图像内容、质量和存储需求。

2024-03-28 09:27:09 504

原创【前端面试题-12】简单说一下浏览器的缓存策略有哪些

浏览器缓存策略的目的是减少不必要的网络请求，提高页面加载速度和用户体验。检查本地缓存是否有符合要求的强缓存，若有则直接使用。若强缓存失效，则发起请求至服务器，询问资源是否发生变更（协商缓存）。如果协商缓存命中，服务器指示浏览器继续使用本地缓存；否则，服务器发送最新资源给浏览器并更新缓存。此外，还有Service Worker、内存缓存（memory cache）和HTTP缓存头（如Pragma、Vary等）等其他缓存手段，共同构成了浏览器全面且高效的缓存策略体系。

2024-03-28 09:19:15 388

原创【前端面试题-11】简单说一下vue2的缓存策略

另外，Vue2 中的缓存策略也可能涉及到更深层次的数据缓存，例如使用 Vuex 状态管理器存储共享状态，或者在服务端渲染（SSR）场景下，利用缓存策略优化 API 数据的获取和渲染性能。或其他需要缓存的组件，这样在路由切换时，被包裹的组件实例不会被销毁，而是进入休眠状态，当再次激活时直接唤醒，而不是重新创建新的实例。Vue2 中的缓存策略主要体现在对组件实例的复用上，特别是当页面需要频繁切换但希望保持组件状态的情况下。的路由视图时，其组件的状态将会得到保留。提供了一种内置的组件缓存机制，即。

2024-03-28 09:11:29 141

原创【前端面试题-10】简单说一下OSI模型各层

实际上，在实际应用中，尤其是TCP/IP协议栈中，并未严格遵循OSI模型的所有层次，而是将其进行了简化整合。不过，OSI模型作为一个理论框架，对于理解网络体系结构和不同层次的通信功能具有重要意义。Model）是由国际标准化组织（ISO）制定的一种概念性的框架，它将网络通信的过程分解为七个逻辑层，每一层都有明确的职责，通过相互协作共同完成网络数据的传输任务。OSI模型（Open Systems Interconnection。

2024-03-28 09:05:37 339

原创【前端面试题-09】简单说一下网络模型和作用

网络模型是对计算机网络结构和功能的一种抽象描述，它把复杂的网络通信过程划分为多个逻辑层次，每个层次负责特定的功能，并规定了该层次内的通信规则和协议标准。这种分层设计使得网络通信能够模块化和标准化，有助于简化网络的设计、实施和维护，并促进不同厂商设备间的互操作性。TCP/IP模型是互联网架构的实际基础，主要包括四个层次：网络接口层、网络层、传输层和应用层。OSI模型由国际标准化组织（ISO）提出，共分为七层，自下至上分别为物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。

2024-03-28 08:59:28 474

原创【前端面试题-08】简单说一下 http和https的区别，再说一下https是如何加密的

通过这种方式，即使数据在传输过程中被截获，攻击者也无法直接读取其内容，因为数据已被高强度的加密算法所保护。同时，HTTPS还通过证书和签名机制确保了服务器身份的真实可靠，避免了钓鱼网站和中间人攻击的风险。在握手完成后，双方将使用协商好的密钥（通常是通过交换信息导出的一个对称密钥）对实际传输的数据进行加密。根据协商的加密套件，可能采用RSA、DH/ECDH等算法进行密钥交换，也可以利用TLS 1.3以后的密码套件进行前向安全密钥协商。c. 双方协商一致的加密套件（包括加密算法、散列函数和密钥长度等）。

2024-03-28 08:55:02 231

原创【前端面试题-07】typescript 内置类型有哪些，分别简单介绍下用法

这些工具类型主要用于类型操作和转换，便于在编程过程中灵活处理和约束变量类型。通过使用这些类型，可以编写更为精细和可控的类型定义。TypeScript 提供了一系列内置类型，这些类型有助于编写类型安全的代码。以下是 TypeScript。

2024-03-22 11:59:19 339 1

原创【前端面试题-06】nodejs常用内置插件介绍一下

Node.js内置了很多核心模块，这些模块无需额外安装就可以直接使用，它们涵盖了多种常见功能，包括文件系统操作、网络通信、加密解密、HTTP服务器与客户端、事件驱动机制、路径处理、子进程管理、流处理等。

2024-03-22 09:54:22 470 1

原创前端大文件分片上传后，后端是分片保存文件吗，那前端想再拿到这个文件，是不是要发多个请求？

总的来说，为了优化用户体验，后端往往会在用户请求完整文件时，提供一个统一的接口用于整合各分片数据，并返回完整的文件内容，而不是让用户端自行组装。当然，这也取决于具体的业务需求和技术实现。前端大文件分片上传后，后端通常是将收到的每个分片分别保存，而不是一次性拼合成完整的文件。这样做可以降低内存压力，同时也方便实现断点续传等功能。当前端想要再次获得整个文件时，确实可能需要发出多个请求，分别请求各个分片，然后在前端进行重组。

2024-03-22 09:50:06 186 1

原创 npm设置淘宝镜像配置

npm设置淘宝镜像（即npm.taobao.org或npmmirror.com）的配置方法有直接命令行配置和使用管理工具配置两种。

2024-03-21 17:44:26 1279 1

原创 plop插件作用以及简单demo实现

plop插件作用以及简单demo实现Plop.js是一个简单的命令行界面工具，用于快速生成项目或代码片段。例如，当你在项目中需要频繁创建类似的文件结构或者模块时，可以通过定义好Plop的生成器（generator），然后通过命令行一键生成。命令时，会提示用户输入组件名称，然后根据这个名称生成对应的React组件（包括JS和CSS文件）。并按照提示输入组件名称，即可自动生成相应的React组件文件。，分别对应React组件的JS和CSS部分。在这个例子中，我们定义了一个名为。然后，在项目根目录下创建一个。

2024-03-21 17:02:41 393 1

空空如也

空空如也