web前端

13 个前端可能用得上的 CSS技巧

13 个前端可能用得上的 CSS技巧

修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,一起来来温故一下吧。

1. 解决图片5px间距问题

是否经常遇到图片底部多出 5px 间距的问题?不着急,有4种方法可以解决。

  • 解决方案 1:将其父元素的 font-size:0px
  • 解决方案 2:将 img 的样式增加 display:block
  • 解决方案 3:将 img 的样式增加 vertical-align:bottom
  • 解决方案 4:将父元素的样式增加 line-height:5px

2. 如何让元素高度与窗口相同

在现在前端中,CSS有一个单位是 vh,将元素高度样式设置为 height:100vh

3. 修改输入框 placeholder 样式

这个是表单输入框占位符属性,如何来修改默认样式,如下:

input::-webkit-input-placeholder {
  

2023 年 WebAssembly 运行时的性能

自 2013 年以来,由于出色的 Emscripten 项目,在网络浏览器中使用 libsodium 成为可能。

从那时起,引入了 WebAssembly。在 Web 浏览器中运行最初不是用 JavaScript 编写的代码的更有效方法。

libsodium 在 2017 年增加了对 WebAssembly 的一流支持。在支持它的网络浏览器上,以及在允许它的允许上下文中,这带来了不错的速度提升。与 JavaScript 一样,相同的代码可以在多个平台上无缝运行。

使用 devicePixelContentBox 进行像素完美渲染

自 Chrome 84 以来,ResizeObserver支持一种名为 的新框测量,它以物理devicePixelContentBox像素为单位测量元素的尺寸。这使得渲染像素完美的图形成为可能,尤其是在高密度屏幕的情况下。

浏览器支持
  • 84
  • 93
  • 84
  • ×

背景:CSS 像素、画布像素和物理像素#

虽然我们经常使用抽象的长度单位em,如 、%vh,但它们都归结为像素。每当我们在 CSS 中指定元素的大小或位置时,浏览器的布局引擎最终会将那个值转换为像素 ( px)。这些是“CSS 像素”,它们有很多历史并且与屏幕上的像素只有松散的关系。

Qwik.js框架是如何追求极致性能的?!

背景、

Qwik是一款语法"接近"react的前端ssr框架, 前段时间看了两篇Qwik相关的文章, 对这个框架有了些兴趣, 但是去网上搜了一下, 发现相关的中文文章几乎没有了, 所以决定对其好好研究一番, 并且写一篇关于Qwik的特点、基础用法、设计概念, 再加上Qwik对我的一些启发, 接下来就一起看看这款黑科技是何方神圣吧。

一、前提知识:ssr (懂了这里才能看懂Qwik)

从入门学习前端开发开始, 我们不断学习到各种前端的优化方式来提高前端代码的性能, 其中"服务端渲染(ssr)"这种模式帮我们大幅提高了使用前端框架开发的项目的首屏性能, 那么ssr的工作流程是什么样的? 下面我们一起简单梳理一下。…

        

我们是如何利用 Qwik 和 Partytown 削减掉 页面中 99% 的 JavaScript 的

本文为翻译
原文标题:How we cut 99% of our JavaScript with Qwik + Partytown
原文作者:Miško Hevery
原文地址:builder.io/blog/how-we-

Builder.io 兴奋地向大家的宣布,采用 Qwik 之后,我们的主页即使在移动端,其 PageSpeed Insights 跑分也能达到 100/100。

无论你的应用程序有多大,Qwik 都能帮助网页达到这样的性能。我们用 一系列炫酷的技术 得到了这样的分数,这些技术包括:

  • 页面由 Qwik 提供服务,启动(boot)所需的 JavaScript 不到 1kb
  • 我们的主页只会发送 折页上方(Above
        

全新 JavaScript 框架 Qwik:以独特的可恢复性方式提速网页应用

AngularJS 的创造者Misko Hevery近期宣布了新网络框架Qwik测试版本的推出,声称无论应用程序有多大,Qwik 都能够快速地构建。在多数情况下,Qwik 会先下载 1KB 的 JavaScript,在需要的时候才会懒加载或预处理程序和应用程序代码。

在一次名为《如何从主线程中移除99%的JavaScript》的演讲中,Hevery 介绍了 Qwik 背后的原理。

    

最小化 Node.js 中的堆分配-有关Node.js中的内存泄漏

内存管理一直是计算机科学中备受关注的问题。每个软件都分配了计算机有限内存的一小部分;必须妥善管理此内存(仔细分配和释放)。

凭借其高效的自动垃圾回收机制,Node.js 试图处理繁琐的内存管理任务,并让开发人员腾出时间来处理其他任务。虽然这很好,但了解 V8 和 Node.js 中的内存管理机制仍然很重要,尤其是在处理大型应用程序时。

本文解释了如何在堆中分配和释放内存。我们还将提供指南来帮助您最大限度地减少堆分配并防止 Node.js 中的内存泄漏。