Month: 3月 2023

使用 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 背后的原理。

    

Nginx 黑魔法:使用 NGX-PHP 模块低成本实现高性能应用

本篇文章分享一个和 Nginx 以及 PHP 有关的“黑魔法”:NGX-PHP 模块。通过这个方式,我们可以低成本的实现高性能应用,以及适合在服务器资源有限的情况下,同时体验到 Nginx 的高效以及 PHP 的灵活。

如果你对 PHP 的印象还停留在“慢”,那么或许这篇文章可以帮助你打开新世界。…

    

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

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

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

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

制作小于 1kB 的网站

2022-08-02

我最近推出了(另一个)名为1kB 俱乐部的网站俱乐部。与1MB Club不同,大多数现代网站都不太容易成为正式会员。构建一个实际提供有用内容的网站,同时将其页面大小压缩到 1,024 字节以下并非易事。

但这是可能的。而且是我自己做的!

注意:非常感谢Tanner,他用自己的最小网站激发了整个“运动”。(他也有一些非常棒的创作/文章!)

HTML

作为参考,您可以在此处查看我的“迷你”网站:cv.tdarb.org。它非常小,仅作为个人履历。它还只有920 字节,并且是有效的 HTML。

让我们看一下完整的 HTML,然后从那里分解:

<!DOCTYPE html><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CV</title><p>Hi, I'm <a href="t">Brad Taunt</a>! I'm a UX designer.<p>Email: