追求极致性能!Qwik 1.0版本发布

前言

偶然发现 Qwik 这个 Node.js 后端框架,感觉非常新奇,它构建的网站,能够在谷歌的网站评测工具中跑出100分满分的成绩,而且还是移动端(一般情况下,移动端分值要低于PC端)!不得不说它是真的流弊。

有过开发经验的童鞋都知道,页面加载的 js 文件有时会很大,里面包含了这个页面上所有 DOM元素 的事件方法。但是,通常情况下,用户并不会触发所有的事件,也就是说,js 文件中的方法代码,绝大部分是用不到的!

Qwik 帮我们做的,就是把所有的事件方法全部拆分成单独的 js 文件,用户需要触发时从服务器上下载下来,然后触发,这样极大的减少了 js 文件的体积。(官方说,在页面加载时只加载一个 1k 大小的 js 文件)

如今,终于迎来了它的 v1.0 版本。

本文通过谷歌翻译直译过来,里面可能会有一些表述不准确的地方,原文链接在文末。

正文

Qwik 团队很高兴地宣布 Qwik 已经达到 v1.0。Qwik 是一个全栈网络框架,它带来了一种全新的方法来大规模交付即时应用程序。

为什么是另一个框架?

React、Vue、Angular、Svelte、SolidJS 等框架及其元框架(Next.js、Nuxt、SvelteKit、SolidStart、Astro)通过提供强大的工具和抽象来简化构建复杂应用程序的过程,从而彻底改变了 Web 开发。

这些框架启发了许多开发人员创建创新的解决方案,以增强用户体验和开发人员体验,并提高 Web 应用程序的整体质量。

Qwik从这些框架中汲取了很多灵感,利用它们的优势为构建 Web 应用程序提供快速、可扩展和可维护的解决方案。

通过在这些框架奠定的基础上构建,Qwik 能够为开发人员提供强大的工具集,使他们能够快速高效地构建 Web 应用程序,同时保持高水平的质量和性能。

随着 Web 应用程序变大,它们的启动性能会下降,因为当前的框架会向客户端发送过多的 JavaScript。保持初始包大小较小是一场永无止境的战斗,没有乐趣,而且我们通常会输。

Qwik 向用户提供即时应用程序。这是通过保持初始 JavaScript 成本不变来实现的,即使您的应用程序变得越来越复杂。然后 Qwik 只为特定的用户交互提供 JavaScript。

这确保了 JavaScript 不会压倒浏览器,无论应用程序有多大。最后,推测性代码获取确保即时交互,即使在慢速和间歇性网络上也是如此。

将其视为JavaScript 的流式处理。

主要特征

Qwik 的理念是确保简单的路径是高性能的路径。这就是为什么 Qwik 开箱即用地解决了:

开箱即用的惊人用户体验

  • JavaScript 流的即时加载时间:交付获得CWV分数的应用程序,并在应用程序随着时间的推移变得越来越复杂时维护它们。
  • 推测代码获取:在用户需要时准确交付您需要的代码,以确保即时用户交互,即使在网络不可靠的慢速移动设备上也是如此。
  • 延迟执行:Qwik 的可恢复技术尽可能长时间地延迟浏览器中代码的执行,以保持浏览器的主线程空闲并响应用户交互。
  • 优化渲染时间:Qwik 是反应式的,这意味着默认情况下,它只更新绝对需要的内容,而不是更多。
  • 数据获取:开始在服务器上获取数据以防止“瀑布”延迟。

很棒的开发者体验

  • 熟悉的 JSX
  • 基于目录的路由:使用基于目录的路由创建站点,这是业界首选的路由声明方式。
  • 一流的数据访问:Qwik 数据加载器和表单操作让您轻松访问您的服务器数据,具有 100% 端到端类型安全和开箱即用的用户输入验证
  • 中间件:以可移植的方式声明中间件逻辑,允许您部署到所有主要的托管服务提供商。
  • 统一的执行模型:我们都说我们是全栈开发人员。使用 Qwik 编写的前端和后端代码自然地结合在一个应用程序代码库和类型安全中。默认情况下,Qwik 应用程序在服务器和浏览器中执行,但很容易将函数固定为始终服务器 ( server$())(或始终浏览器)。

集成

Qwik 提供快速扩展的即用型集成与您最喜爱的库和框架的领域。只需npx qwik add从命令行运行并从列表中选择您需要的内容。

  • 编写一次,随处部署:我们有适用于 Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel 的适配器,而且这个列表还在不断增加。以与托管提供商无关的方式编写您的应用程序,以防止供应商锁定。
  • UI 组件:从QwikUI、Papanasi UI或经过实战测试的 UI 库(如Material UI、ChakraUI、Radix或任何其他基于Qwik-React的 React 库)中选择。
  • 图像优化:使用@unpic/qwik和qwik-image优化图像以获得最佳用户体验。
  • 国际化:使用$localize和qwik-speak以多种语言交付您的应用程序。
  • 身份验证:使用业界领先的AuthJS为您的应用程序添加多种身份验证策略。
  • CMS:Qwik 与Builder.io原生集成 ,用于结构化数据和组件级无头内容创建和发布。
  • 样式:Qwik 允许延迟加载和样式的组件范围。将其与PostCSS、Vanilla Extract或Tailwind等流行解决方案相结合,以满足您的样式需求。
  • 测试:使用Vitest进行单元测试,使用 Playwright 和 Cypress 进行 e2e 测试。使用 Storybook 开发和测试组件。
  • 企业准备:使用 qwik-nx 开发企业级应用程序和 monoreos,它为您的 NX monorepo 提供特殊的生成器和执行器。

互操作性

Qwik-React允许您在 Qwik 应用程序中懒惰地混合 React 组件。利用 Qwik 中现有的 React 生态系统,使用 Qwik-React 逐步迁移到 Qwik,或者通过延迟水化部分应用程序来加速您的 React 应用程序。Qwik-react 将孤岛架构设计模式引入您的 React 应用程序。

Svelte、Vue 和 Angular 包装器正在由社区开发。

出色的社区

Qwik 拥有一个由热情的开发人员、热情的贡献者和全球支持用户组成的多元化和包容性社区。这个社区总是充满活力,不断合作,分享想法,并突破框架可以实现的界限。

世界各地还有一群快速成长的社区领袖,来自法国、荷兰、英国、美国、以色列、葡萄牙、台湾、匈牙利等地的开发者团体和聚会正在加入这个精彩的 Qwik 社区领袖团体。

原文链接与参考阅读

  1. Qwik Reaches v1.0
  2. 我们是如何利用 Qwik 和 Partytown 削减掉 页面中 99% 的 JavaScript 的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/101864.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA XML文件里写SQL比较大小条件

背景 最近开发的时候&#xff0c;有一个需求的查询需要支持范围查询[a,b)&#xff0c;并且查询的结果要求查询的范围含头端点不含尾端点。因为between…and…查询的范围是含头含尾的&#xff0c;因而不能使用。 因此打算直接使用>和<来比较实现&#xff0c;使用>的时…

【Redis】Set集合内部编码方式

内部编码 集合类型的内部编码有两种&#xff1a; intset&#xff08;整数集合&#xff09;&#xff1a;当集合中的元素都是整数并且元素的个数⼩于set-max-intset-entries配置&#xff08;默认512个&#xff09;时&#xff0c;Redis会选⽤intset来作为集合的内部实现&#xf…

与艺术同频!卡萨帝在海外崭露头角

在品牌全球化步伐日益加快的当下&#xff0c;高端品牌如何真正实现业务全球化、品牌全球化乃至用户圈层全球化&#xff1f; 作为国际高端家电引领者&#xff0c;卡萨帝今年以来在全球范围内展开了一系列的品牌布局活动。1月&#xff0c;卡萨帝于巴基斯坦召开品牌发布会&#x…

hyperf框架WebSocket 服务

1&#xff1a;安装 composer require hyperf/websocket-server2&#xff1a;配置 Server 修改 config/autoload/server.php&#xff0c;增加以下配置。 return [servers > [[name > ws,type > Server::SERVER_WEBSOCKET,host > 0.0.0.0,port > 9502,sock_typ…

分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输…

[JAVA版本] Websocket获取B站直播弹幕——基于直播开放平台

教程 B站直播间弹幕Websocket获取 — 哔哩哔哩直播开放平台 基于B站直播开放平台开放且未上架时&#xff0c;只能个人使用。 代码实现 1、相关依赖 fastjson2用于解析JSON字符串&#xff0c;可自行替换成别的框架。 hutool-core用于解压zip数据&#xff0c;可自行替换成别的…

手写Spring系列【一】IOC的简单实现笔记

前言&#xff1a; &#x1f44f;作者简介&#xff1a;我是笑霸final&#xff0c;一名热爱技术的在校学生。 &#x1f4dd;个人主页&#xff1a;个人主页1 || 笑霸final的主页2 &#x1f4d5;系列专栏&#xff1a;项目专栏 &#x1f4e7;如果文章知识点有错误的地方&#xff0c;…

大日志(大文件)查看工具

一款很不错的日志查看工具&#xff0c; 优势是能查看很大的日志文档。 无需安装&#xff0c;解压后运行即可&#xff1b; 有注册版&#xff0c;不注册也可以使用。 官方地址&#xff1a; LogViewer - Home page 一个下载地址&#xff1a; 日志查看工具UVviewsoft LogViewer(超大…

makefile编译举例

makefile编译举例 # 定义编译器和编译选项 CC gcc CFLAGS -Wall -Werror # 定义目标文件名 TARGET myprogram # 定义需要编译的源文件目录和文件名 SRC_DIR1 src1 SRC_DIR2 src2 OBJ_DIR1 obj1 OBJ_DIR2 obj2 SRC_FILES1 file1.c file2.c SRC_FILES2…

电脑如何查看是否支持虚拟化及如何开启虚拟化

什么是虚拟化? Intel Virtualization Technology就是以前众所周知的“Vanderpool”技术&#xff08;简称VT&#xff0c;中文译为虚拟化技术&#xff09;&#xff0c;这种技术可以让一个CPU工作起来就像多个CPU并行运行&#xff0c;从而使得在一部电脑内同时运行多个操作系统成…

MyBatis的xml里#{}的参数为null报错、将null作为参数传递报错问题

今天在调试的过程中发现一个bug&#xff0c;把传入的参数写到查询分析器中执行没有问题&#xff0c;但是在程序中执行就报错&#xff1a;org.springframework.jdbc.UncategorizedSQLException : Error setting null parameter. Most JDBC drivers require that the JdbcType m…

开山之作 | YOLOv1算法超详细解析(包括诞生背景+论文解析+技术原理等)

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。目标检测是计算机视觉领域的一项重要研究方向&#xff0c;它在许多应用领域中都得到了广泛应用&#xff0c;如人脸识别、物体识别、自动驾驶、视频监控等。在过去&#xff0c;目标检测方法主要采用基于RCNN、Fast R-CNN等深…

Python+Tkinter 图形化界面基础篇:集成数据库

PythonTkinter 图形化界面基础篇&#xff1a;集成数据库 引言为什么选择 SQLite 数据库&#xff1f;集成 SQLite 数据库的步骤示例&#xff1a;创建一个任务管理应用程序步骤1&#xff1a;导入必要的模块步骤2&#xff1a;创建主窗口和数据库连接步骤3&#xff1a;创建数据库表…

高级深入--day30

Scrapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据。 如果安装了 IPython ,Scrapy终端将使用 IPython (替代标准Python终端)。 IPython 终端与其…

零基础学python之数据类型

文章目录 1、数据类型1.1 编程规范注释标识符命名规则命名规则python命名规则关于代码规范编程习惯的重要性 输入输出与变量输出输入变量 1.2 数值类型int(整型)浮点型&#xff08;float&#xff09;类型转化 1.3 字符串字符串创建字符串格式化**format**%s**f** 案例&#xff…

从零开始:深入理解Kubernetes架构及安装过程

K8s环境搭建 文章目录 K8s环境搭建集群类型安装方式环境规划克隆三台虚拟机系统环境配置集群搭建初始化集群&#xff08;仅在master节点&#xff09;配置环境变量&#xff08;仅在master节点&#xff09;工作节点加入集群&#xff08;knode1节点及knode2节点&#xff09;安装ca…

1806_emacs_org-mode归档的时候修改归档文件名称

全部学习汇总&#xff1a;GreyZhang/g_org: my learning trip for org-mode (github.com) 前面已经基本了解了org-mode的归档的规则或者方法&#xff0c;但是还有一点跟我现在的工作流有点不相符。我自己的工作流中会每月做一次工作的整理总结&#xff0c;因此归档的文件是按照…

KubeVela可持续测试应用部署之Mock基础设施

Mock接口是我们常用的功能测试方案,有时候依赖的接口未开发完成或者依赖的第三方接口不提供测试环境等,只有Mock才能跑通流程。 我们基于KubeVela开发的云原生应用交付平台,提供如初始化基础设施导入、中间件部署共用基础设施等相关能力的测试,需要依赖基础设施。虽然terr…

C++ PCL点云局部颜色变换

程序示例精选 C PCL点云局部颜色变换 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《C PCL点云局部颜色变换》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用…

基于SpringBoot的大学城水电管理系统

目录 前言 一、技术栈 二、系统功能介绍 管理员模块的实现 领用设备管理 消耗设备管理 设备申请管理 状态汇报管理 用户模块的实现 设备申请 状态汇报 用户反馈 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛…