首屏加载时间优化之在工作中实践、Ui2Code+ChatGPT助力低代码搭建 | 每日掘金第267期

Hello,欢迎来到每日掘金时间。每日掘金专注于发掘站内优质创作者和优质内容,欢迎大家多提宝贵意见!

本文字数 1800+,阅读时间大约需要 6 分钟。

  • 【本期每日掘金】亮点:
  • HooKs的产生给我们带了什么,和类组件有什么区别?
  • 开发中需要知道的密码学知识
  • Android优化篇|网络预连接
  • ......

筛选规则:文章发布时间在本期「每日掘金」发布时间的 1-3 天内,且符合社区推荐标准,也会同步发布在掘金相关技术社群。

今日主理人

本期每日掘金由 丘山子 负责制作,需要投稿每日掘金请私信我的助理小岳

PS:主理人目前正在招募中,有感兴趣的掘友们可以联系Captain

每日干货

主理人们会对近期(1-3 天)社区深度技术好文进行挖掘和筛选,优质的技术文章有机会出现在下方列表,排名不分先后。

『前端』

①确保先请求的是当前页面所需要的资源,而不是prefetch资源。

如果是prefetch资源在当前页面所需的资源前请求,先思考能不能通过自写脚本的方式延迟prefetch的资源加载,再看看能不能干掉prefetch。毕竟之前也提到了prefetch资源是会在空闲时间把剩下的资源,这样在切换页面或导航的时候就可以不用等待加载资源的时间啦

②要注意资源的请求不要太多,单个资源也不要太大,数量和大小要在一个适中值。

并发请求太多,TCP连接等待状态越长;资源大,下载时间过长。

③注意检查是否有进行一些不需要的请求,最大程度减少多余请求

④注意代码压缩

React Hooks 的产生动机是为了更好地支持函数式组件,使得状态管理和其他特性的复用更加便捷,同时也是为了使 React 组件的 API 更简单、灵活,为未来 React 的发展打造更好的基础。Hooks 带来的优势使得 React 应用的开发变得更加现代、简洁和高效。

单元测试能保证函数、类的方法等代码单元的功能正常,把手动测试变成自动化测试。

变更不频繁的代码,还是有必要写单测的,写一次,自动测试 n 次,收益很大。

我们学了 react 组件和 hook 的单测写法。

主要是用 @testing-library/react 这个库,它有一些 api:

  • render:渲染组件,返回 container 容器 dom 和其他的查询 api
  • fireEvent:触发某个元素的某个事件
  • createEvent:创建某个事件
  • waitFor:等待异步操作完成再断言,可以指定 timeout
  • act:包裹的代码会更接近浏览器里运行的方式
  • renderHook:执行 hook,可以通过 result.current 拿到 hook 返回值

其实也没多少东西。

jest 的 api 加上 @testing-libary/react 的这些 api,就可以写任何组件、hook 的单元测试了。

装饰器的方式看起来就是一种继承的语法糖,只是通过简单的写法,让我们的类具有更灵活的功能。其实通过权限控制的方法有很多,这种装饰器的方式只是其中一个功能的拓展,在我看来通过使用装饰器来实现一些实体类进行页面控制更符合装饰器的存在意义。

『后端』

阅读完本篇文章,你可以知道:

  1. 什么是对称加密?
  2. 什么是非对称加密?
  3. 单向散列函数的应用
  4. 数字签名是什么?
  5. 数字证书是什么?

在使用Arrays.asList()方法时,需要注意返回的List对象是一个固定大小的List,不支持结构上的修改操作。为了避免这个陷阱,我们可以使用java.util.ArrayList或Collections类提供的方法将返回的List对象转换为可修改的List。通过了解这个陷阱并采取相应的解决方案,我们可以安全地将数组转换为List,并避免潜在的异常情况。

不要让Arrays.asList()的陷阱坑了你的代码!

本文介绍了 Kubernetes 的基本概念和架构,以及如何使用 Kubernetes 提高应用程序的可靠性和可扩展性。

我们还结合一个案例讲解了如何使用 Kubernetes 来管理一个容器化的 Web 应用程序。

使用 Kubernetes 可以使得应用程序的部署和管理变得更加简单和可靠,是现代云原生应用开发的重要工具之一。

低代码开发平台(LCDP),是低代码或无代码通过快速搭建配置的方式完成一个应用程序的开发与上线,可视化低代码就是可视化的DSL,它的优点更多的是来源可视化,相对的,它的局限性也还是来源于可视化,复杂的业务逻辑用低代码可能会更加复杂。低代码应该是特定领域问题的简化和抽象,如果只是单纯将原有的编码工作转换为 GUI 的模式,并没有多大意义。

遇到CPU性能问题时,我们常常通过perf来了解CPU上到底在执行什么,以及通过On-CPU火焰图来帮助我们寻找性能瓶颈。但是,这种方式并不能让我们知道不在CPU上运行的进程和线程到底在做什么。在一些场景中,我们会发现CPU的使用率上不去,性能表现很差,这时候我们也许就需要考虑,是不是花在应用请求、异步调用这种Off-CPU的场景上的时间太多了。

『移动端』

KVC 是 Key-Value Coding 的缩写,它是苹果 macOS 和 iOS 中 Cocoa 和 Cocoa Touch 框架中使用的一种机制。KVC 允许间接访问对象的属性,使用字符串来标识属性名称,而不是直接调用方法或访问实例变量。这提供了面向对象编程中更多的灵活性和抽象性。

KVC 通常与其他的 Cocoa 和 Cocoa Touch 框架一起使用,例如 Key-Value Observing 绑定,以提供强大和灵活的用户界面和数据模型。

通过 http(s) 的连接复用机制,我们可以考虑使用预连接来优化 APP 中某些场景的网络请求速度,这需要我们根据实际业务场景以及服务器压力来判断是否进行预连接。

另外我们可以适当调大连接池的容量和超时时间,由于连接是双向的,即使客户端把 Connection 一直保留,服务端也会根据实际连接数量和时长来自动关闭连接的,所以调大连接池一般不会增大服务器压力。

预连接的效果实际和服务器配置有关,如果服务器把连接超时设置得很小,那每次请求可能都需要重新建立连接,这样客户端的预连接会失效,且服务器也需要不断创建和销毁 TCP 连接而浪费更多资源;如果服务器把连接超时设置得很大,那之前的连接长时间都不会释放,导致服务器服务的并发数受到影响,影响新的请求。因此调优需要多端协调,综合考虑

📖 投稿专区

大家可以在评论区推荐认为不错的文章,并附上链接和推荐理由,有机会登上下一期。文章创建日期必须在近 1-3 天内;可以推荐自己的文章、也可以推荐他人的文章。

相关推荐
学习使我快乐013 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio19953 小时前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
黄尚圈圈4 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水5 小时前
简洁之道 - React Hook Form
前端
2401_857622667 小时前
SpringBoot框架下校园资料库的构建与优化
spring boot·后端·php
正小安7 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
2402_857589367 小时前
“衣依”服装销售平台:Spring Boot框架的设计与实现
java·spring boot·后端
哎呦没9 小时前
大学生就业招聘:Spring Boot系统的架构分析
java·spring boot·后端
_.Switch9 小时前
Python Web 应用中的 API 网关集成与优化
开发语言·前端·后端·python·架构·log4j