前端
文章平均质量分 70
mls学习小记
这个作者很懒,什么都没留下…
展开
-
react渲染对比传统dom操作
当组件的状态发生变化时,React 会首先在虚拟 DOM 上进行变更,然后通过一个叫做“协调”(Reconciliation)的过程计算出与上次渲染相比实际 DOM 需要变更的最小差异,最后把这些差异应用到真实的 DOM 上。在只改变单个 DOM 节点内容的情况下,直接使用 JavaScript 来操作 DOM 很可能会比 React 的虚拟 DOM 更快,因为这里涉及到的操作非常简单,直接操作避免了虚拟 DOM 的比较和更新过程。这样的操作不会引起复杂的 DOM 重绘或重排,因此开销很小。原创 2024-02-05 19:42:00 · 451 阅读 · 0 评论 -
html怪异模式
怪异模式(Quirks Mode)是浏览器的一种兼容性模式,它允许浏览器模拟老旧的、非标准的行为来兼容那些为古老浏览器设计的网页。在早期的互联网发展时期,许多网站是为了当时的主流浏览器(如早期的Internet Explorer和Netscape)特定的非标准行为而设计的。随着web标准的发展,这些行为被认为是错误的,新的浏览器版本开始支持标准的web技术。原创 2024-02-05 19:35:57 · 366 阅读 · 0 评论 -
Web Workers
Web Workers允许开发人员运行脚本操作在网页的背景线程中,而不会影响用户界面的响应性。由于JavaScript通常在单个线程上运行,耗时的任务可能会导致用户界面的延迟。通过使用Web Workers,开发人员可以在不同的线程上执行复杂计算,提高应用程序的性能和用户体验。原创 2024-02-05 18:56:32 · 330 阅读 · 0 评论 -
http常见问题
自从1991年HTTP/0.9首次提出以来,HTTP已经经历了几个重要的版本更新,以适应互联网技术的发展和性能需求的提高。虽然HTTP/1.1取得了显著的进步,但它仍然存在一些性能问题,如队头阻塞(Head-of-Line Blocking,HOL blocking)。:HTTP自身不保存之前的交互状态,每次请求都是独立的。方法通常不是幂等的,因为它用来提交数据,每提交一次都可能在服务器上创建新的资源或触发新的动作。在HTTP协议中,“安全” 和 “幂等” 的概念是根据请求方法的预期效果来定义的。原创 2024-02-05 10:14:55 · 635 阅读 · 0 评论 -
httpGET POST区别
定义和用途:数据传输:限制和安全性:幂等性和缓存:定义和用途:数据传输:限制和安全性:幂等性和缓存:头信息:安全性:副作用和使用场景:服务器端处理:可用性:GET`请求的数据是附加在URL并不能证明post请求能安全 明文传输都会被抓包窃取数据暴露:数据大小限制:服务器日志和浏览器历史:缓存和书签:语义清晰性:对抗网络嗅探:然而,重要的是要注意请求并不是绝对安全的。不论是还是,如果没有使用HTTPS,请求数据都是以明文形式通过网络传输的,这意味着在客户端和服务器之间的任何点,数据都可能被拦截。因此,对于敏感原创 2024-02-04 11:51:14 · 910 阅读 · 0 评论 -
Web Vitals
Web Vitals指标优化是一个专注于用户体验的过程,其目标是改善网站在加载性能、交互性和视觉稳定性方面的表现。原创 2024-01-21 09:31:15 · 466 阅读 · 0 评论 -
Core Web Vitals
这些指标是用来度量用户体验的,通常不会直接通过前端代码来改进,而是需要优化你的应用的不同方面,比如服务器响应时间、JavaScript 执行时间、资源加载策略等。不过,你可以使用前端代码来测量这些指标,并据此进行相应的优化。在实际的前端项目中,通常还会涉及到对这些数据的处理逻辑,比如将这些数据发送到后端服务器或者第三方分析服务。一般情况下,你还需要处理用户的同意,以符合隐私政策和法规要求。然后,你可以在你的应用中导入相应的功能,并在合适的时机(如页面加载时)调用它们来收集数据。原创 2024-01-06 20:47:49 · 576 阅读 · 0 评论 -
实现async await
来处理异步操作,因为它们已经经过广泛的测试和优化,可以提供更好的性能和稳定性。函数是用来包装异步函数的,它返回一个新的函数。新的函数内部创建了一个。当执行上述代码时,控制台的输出结果与之前使用原生。在实际应用中,建议使用原生的。请注意,这只是一个简单的示例,不能完全覆盖。包装了一个异步函数,并在其中使用。对象的结果,它返回一个符合。的底层原理,以及如何使用。对象,并在异步函数中使用。函数,并将返回结果传递给。对象的状态继续执行下一步。对象结构的对象,包含。对象成功解决,则返回。下面是使用自己实现的。原创 2024-01-02 13:00:51 · 578 阅读 · 0 评论 -
CSS Logical Properties
总体而言,CSS Logical Properties 提供了一种基于逻辑方向的布局和样式控制方式,使得布局更灵活、易于理解和维护。建议深入学习和尝试这些新的属性,并查阅官方文档和教程,以便更好地理解和应用它们。CSS Logical Properties 是一组用于定义布局和样式的新的 CSS 属性,基于逻辑方向而不是物理方向。控制元素在逻辑内联方向(水平方向)上的外边距,而。:用于定义元素的内联方向和块方向的外边距。:用于定义元素的内联方向和块方向的内边距。:用于定义元素的内联方向和块方向的边框。原创 2023-12-31 20:21:25 · 498 阅读 · 0 评论 -
CSS Grid Level 2
总体而言,CSS Grid Level 2 扩展了 CSS Grid Layout 的功能,使得网格布局更加灵活和强大。它适用于各种不同的布局需求,从简单的网格布局到复杂的自适应布局都可以使用 CSS Grid Level 2 来实现。建议深入学习和尝试这些新的功能,并查阅官方文档和教程,以便更好地理解和应用它们。CSS Grid Level 2 是对 CSS Grid Layout 的扩展和改进。原创 2023-12-31 20:18:59 · 469 阅读 · 0 评论 -
CSS Grid 和 Flexbox
上述示例将会创建一个包含 3 列和 2 行的网格布局,每个网格项都会有相同的宽度和高度,并且它们之间有 10px 的间隔。上述示例将会创建一个 Flexbox 布局,其中元素水平排列,并且它们之间有相等的间距。:分别定义网格布局的列和行的大小和数量。:控制 Flex 容器中元素在交叉轴上的对齐方式。:控制 Flex 容器中元素在主轴上的对齐方式。:这些属性用于控制元素在 Flex 容器中的伸缩行为。:指定元素在网格中的位置。属性来定义网格的列和行的大小和数量。)或数字来指定元素跨越的列或行的数量。原创 2023-12-31 20:16:35 · 1069 阅读 · 0 评论 -
React 18 新增的钩子函数
这些新的钩子函数提供了更多的灵活性和功能,可以用于解决一些常见的问题和场景。请注意,以上代码示例仅用于演示新钩子函数的用法,实际使用时可能需要根据具体的需求进行适当的调整和修改。React 18 引入了一些新的钩子函数,用于处理一些常见的场景和问题。原创 2023-12-31 19:57:20 · 1056 阅读 · 0 评论 -
javascript弱引用
通过使用弱引用,你可以将其中一个对象作为弱引用存储,从而避免循环引用并允许相关对象在不再被引用时被回收。通过将对象存储在弱引用中,即使没有其他对该对象的强引用,垃圾回收器仍然可以自动回收对象。需要注意的是,弱引用的使用需要谨慎,因为被弱引用的对象可以在任何时候被垃圾回收。因此,在使用弱引用时,你需要考虑对象的生命周期和访问时的有效性,以避免出现意外的错误。方法,我们可以通过弱引用获取原始对象。监控对象的生命周期:如果你需要在对象被垃圾回收时执行一些特定的操作或清理工作,可以使用弱引用来监控对象的生命周期。原创 2023-12-31 19:49:19 · 1198 阅读 · 0 评论 -
Emscripten简单示例,c语言编程成可浏览器执行
Emscripten 是一个 LLVM 到 JavaScript 的编译器。你可以使用它将 C 和 C++ 编译为 WebAssembly,并在浏览器中运行。下面是如何安装 Emscripten 的教程。首先,你需要安装 Emscripten 的依赖项。cd emsdk现在,你应该可以在命令行中输入emccemcc -v如果你看到版本信息,那就说明你已经成功安装了 Emscripten。原创 2023-12-28 17:54:06 · 738 阅读 · 0 评论 -
react pwa应用示例
修改后,Service Worker就会被注册,并开始控制那些从公共路径访问到的资源。但是默认情况下,这个Service Worker是未注册的,我们需要手动去注册它。初始化的项目中,已经自动包含了一份默认的Service Worker文件,位于。,它自带PWA支持,但默认是关闭的。以上,就是在React应用中配置Service Worker的一个基本例子。现在你的应用已经是一个PWA应用了。你可以在浏览器中打开。创建一个基于React的PWA应用,你可以使用。是你的应用的名称,你可以根据需要来命名。原创 2023-12-28 17:32:12 · 1172 阅读 · 0 评论 -
css常见面试题
内容的宽度和高度不包括其他部分,而元素的总宽度和高度可由以下公式计算:元素宽度/高度 = 内容宽度/高度 + padding + border + margin。答案:CSS 预处理器是一种语言,用于扩展 CSS 的功能,通过添加变量、混合(mixins)、函数等特性,使 CSS 更易于维护、提高代码的可读性。绝对定位的元素相对于最近的已定位祖先元素进行定位,如果元素没有已定位的祖先元素,那么它的定位是相对于最初的包含块。答案:在 CSS 中,一些样式属性是可以从父元素继承到子元素的。)等都是可以继承的。原创 2023-12-27 13:58:37 · 1172 阅读 · 0 评论 -
node express简单微服务
这只是一个简单的示例,用于演示如何使用Node.js构建微服务。在实际的项目中,你可能需要处理更复杂的业务逻辑、使用数据库进行数据存储、实现身份验证和授权等功能。但这个示例可以作为你开始构建基于Node.js的微服务的起点。时,Service 1将发起一个HTTP请求到Service 2,并将Service 2的响应返回给客户端。现在,你可以启动这两个微服务,并通过访问。接下来,创建一个名为。原创 2023-12-26 13:38:34 · 768 阅读 · 0 评论