前端
文章平均质量分 94
办公模板库 素材蛙
命数如织 当为磐石
展开
-
玩转Vue3全家桶09丨动画:Vue中如何实现动画效果?
今天这一讲的主要内容讲完了,我们来简单复习一下今天学到的知识点。首先我们学习了前端使用 CSS 实现简单动画的 transition 和 animation 两个配置;然后,我们了解到了通过 Vue 3 提供的 traisition 组件,我们可以控制在 Vue 中动画元素进入和离开页面时候的 class;通过制定的命名规范,在 CSS 中设置过渡和动画效果,从而很方便地实现过渡效果,并且丰富了清单应用的弹窗功能;在这之后,我们使用 transition-group 实现列表元素的动画;原创 2022-10-02 09:10:38 · 3037 阅读 · 3 评论 -
玩转Vue3全家桶08丨组件化:如何像搭积木一样开发网页?
在我们的项目中,组件无处不在,通过对组件功能的封装,可以像搭积木一样开发网页。而我们现在已经很难想象,没有组件的开发状态是什么样了。你可以看下面 Vue 官方的示例图,它对组件化开发做了形象化的展示。图中的左边是一个网页,可以按照功能模块抽象成很多组件,这些组件就像积木一样拼接成网页。原创 2022-10-02 09:00:35 · 1041 阅读 · 0 评论 -
玩转Vue3全家桶07 | 巧妙的响应式:深入理解Vue 3的响应式机制
响应式一直都是 Vue 的特色功能之一。与之相比,JavaScript 里面的变量,是没有响应式这个概念的。你在学习 JavaScript 的时候首先被灌输的概念,就是代码是自上而下执行的。我们看下面的代码,代码在执行后,打印输出的两次 double 的结果也都是 2。即使我们修改了代码中的 count 的值后,double 的值也不会有任何改变。原创 2022-10-02 08:48:29 · 846 阅读 · 0 评论 -
玩转Vue3全家桶06 | 新的代码组织方式:Composition API + <script setup> 到底好在哪里?
我们来总结一下今天都学到了什么吧。今天的主要任务就是使用 Composition API +然后,我们通过把功能拆分成函数和文件的方式,掌握到 Composition API 组织代码的方式,我们可以任意拆分组件的功能,抽离出独立的工具函数,大大提高了代码的可维护性。最后我们还学习了 style 标签的特殊属性,通过标记 scoped 可以让样式只在当前的组件内部生效,还可以通过 v-bind 函数来使用 JavaScript 中的变量去渲染样式,如果这个变量是响应式数据,就可以很方便地实现样式的切换。原创 2022-10-02 08:37:18 · 535 阅读 · 0 评论 -
玩转Vue3全家桶05丨项目启动:搭建Vue3工程化项目第一步
我们来总结一下今天学的知识点。首先在环境准备阶段,我们基于 Vite 2 和 Vue 3 搭建了我们项目的初始化框架,包含文件规范、工程化、路由和开发的基础配置,后面我们所有的代码都会在这个架构基础之上进行添加。你可以理解环境准备阶段是给 Vue 3 提供装备的过程,vue-router 提供路由的管理、Vuex 管理数据流、VS Code+Chrome+Vite 则提供了极致的开发调试体验。之后,在本讲内容的第二部分,我们制定了代码和文件夹规范。原创 2022-10-02 08:17:26 · 1567 阅读 · 0 评论 -
玩转Vue3全家桶04丨升级:Vue2项目如何升级到Vue3?
在 Vue 生态中,现在所有官方库的工具都全面支持 Vue 3 了,但仍然有一些生态库还处于候选或者刚发布的状态。**所以,升级 Vue 3 的过程中,除了 Vue 3 本身的语法变化,生态也要注意选择。**有一些周边的生态库可能还存在不稳定的情况,开发项目的时候我们时刻关注项目的 GitHub 即可。Vue-cli4 已经提供内置选项,你当然可以选择它支持的 Vue 2。如果你对 Vite 不放心的话,Vue-cli4 也全面支持 Vue 3,这还是很贴心的。原创 2022-09-30 07:58:38 · 2039 阅读 · 0 评论 -
玩转Vue3全家桶03丨新特性:初探Vue3新特性
Vue 2 内部所有的模块都是揉在一起的,这样做会导致不好扩展的问题,刚才我也提到了这一点。Vue 3 是怎么解决这个问题的呢?那就是拆包,使用最近流行的 monorepo 管理方式,响应式、编译和运行时全部独立了,变成下图所示的模样:**我们能看到,在 Vue 3 的组织架构中,响应式独立了出来。**而 Vue 2 的响应式只服务于 Vue,Vue 3 的响应式就和 Vue 解耦了,你甚至可以在 Node.js 和 React 中使用响应式。渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染 API。原创 2022-09-29 08:58:25 · 856 阅读 · 0 评论 -
玩转Vue3全家桶02丨上手:一个清单应用帮你入门Vue
我们来总结一下小圣今天都学到了什么吧。入职第一天,小圣首先扭转了之前使用 jQuery 时的开发思路,并且弄明白了 jQuery 和 Vue 开发思路的区别。从寻找 DOM 到数据驱动,这是前端开发的一次巨大的变革,也是小圣同学的第一个挑战。其次就是对 Vue 的入门使用,我带你回顾一下今天做的这个清单应用:对于这个应用,首先我们要有输入框能输入文本,并且在输入框下方循环显示清单,我们用到了 v-model,v-for 这些功能。原创 2022-09-29 08:50:15 · 465 阅读 · 0 评论 -
玩转Vue3全家桶01丨宏观视角:从前端框架发展史聊聊为什么要学Vue3?
了解了前端 MVVM 框架发展的历史和方向后,相信你脑海里已经建立起了一个前端框架发展的地图,每个框架都在探索自己的路线。后面还会涌现出更多优秀的框架,我们到时候只需要把那个框架纳入到这个地图中去理解,这样你很快就明白这个框架做了什么,而这也是很多前端大神能够快速学习一个新框架的主要原因。浏览器的诞生让我们可以方便地显示文本和图片的内容和样式;JavaScript 的出现让网页动了起来;Gmail 的发布,宣告前端也可以使用 Ajax 异步加载技术,来进行复杂网页的开发,前端工程师这个工种也正式出现了。原创 2022-09-29 08:42:26 · 660 阅读 · 0 评论 -
玩转Vue3全家桶开篇词丨如何借助Vue3建构你的前端知识体系?
所以,大可不必自乱阵脚,打好基础才是王道。给自己两个月的时间,沉下心来学习,我相信最终我们都能以一个相对轻松的方式跨越前端进阶的门槛,迈出职业生涯的下一步。那么,我们山顶见!原创 2022-09-29 08:31:56 · 1237 阅读 · 0 评论 -
Node.js 应用开发详解19 Serverless 的实践:进一步提升系统的稳定性
Serverless 的英文转换过来就是无服务器,简单理解是“摒弃服务器”。但是无服务器不是说真的没有服务器,而是说云服务厂商来帮你动态地规划服务器资源,你只提供源代码给云厂商,云厂商就按照你服务所调度的资源来计费,而不是最原始的租借服务器的方式。本讲核心是介绍了什么是 Serverless 、解决了我们当前 Node.js 服务的问题以及如何接入应用,学完本讲后能够了解 Serverless 的优势,并且可以进行一些简单云服务接入尝试。原创 2022-09-29 08:21:46 · 919 阅读 · 0 评论 -
Node.js 应用开发详解18 系统的实践设计(下):完成一个通用投票系统
本讲核心是实践开发活动相关接口、票相关接口以及主要的抢票接口,并利用我们所学的一些知识 clinic 检测和 wrk 压测工具来分析接口的性能问题。总的来说,Node.js 开发效率还是非常高的,整个系统我大概花费了 1 天半的时间完成这部分演示代码,代码还会存在一些缺陷,你可以尝试应用项目,然后共同来解决这个项目中存在的问题。实际开发过程中的需求大部分离不开我们通用抢票系统的流程,最核心的是要了解哪些是高并发需要使用缓存处理,哪些是低访问可以直接读取数据库的方式。原创 2022-09-29 08:17:36 · 380 阅读 · 0 评论 -
Node.js 应用开发详解17 系统的实践设计(上):完成一个通用抢票系统
总的来说,前后端开发在思路上是完全不同的,前端注重交互,后端则要考虑架构的设计以及数据结构的设计。学完这一讲之后,我希望你能更了解后台服务的开发思维,从需求拆解分析到架构设计、数据结构的设计,最终到接口的协议的设计。在整个流程中,你要非常注意核心接口的设计以及技术细节的实现,在前期考虑好所有的设计后,再进行下一讲的代码实现。原创 2022-09-29 08:14:31 · 681 阅读 · 0 评论 -
Node.js 应用开发详解16 RESTful 应用实践:构建一个介于前后台之间的服务
这一讲,我主要带你实践学习了实现一套引入 Node.js 兼容后台的方案,在尝试应用 Node.js 作为后台服务的过程中肯定会存在一些细节问题,比如业务了解不清晰导致的业务问题,或者由于原来服务并发较大,没有充分考虑并发问题,也可能导致现网事故。因此希望你可以在后台服务中拆分出部分非核心模块,依照我们本讲的实践知识进行接入,比较成熟后可以考虑透传的方式,最后再慢慢将所有服务接入,特殊部分则转发到后台服务即可。原创 2022-09-29 08:11:13 · 1217 阅读 · 0 评论 -
Node.js 应用开发详解15 理论先行:高并发设计必须学的知识点有哪些?
总的来说,这一讲也是我之前使用 Node.js 开发沉淀下来的一些经验,你在学习本讲时,着重了解这些知识点即可,在实际应用过程中再来逐个参考,我这里所介绍的也是一个参考项,真正实际应用过程中还需要你和项目组的同事一起讨论。这一讲,我提到了并行压测,今天的作业就是:希望你应用 wrk 来实现一个联合压测工具,可行的话可以在评论区分享给后面的同学。下一讲我们将实现一个通用的透传类的 Node.js 服务,也就是一个简单版本的业务网关服务。原创 2022-09-29 08:10:05 · 291 阅读 · 0 评论 -
Node.js 应用开发详解14 工具应用:使用 clinicj 工具实现通用性安全检查
clinicjs 是一个 Node.js 的第三方工具,clinicjs 官网介绍了其核心的目的是,帮助诊断和查明 Node.js 性能问题的工具。那么它具体能帮助我们定位查询哪些性能问题呢?CPU 异常问题,当 CPU 存在密集计算占用时可以检测出来。事件循环延迟问题,当主线程存在过载时,事件循环的执行时间存在延迟,可以检测出来。内存泄漏问题。句柄泄漏问题。以上几个问题也是我们非常关注的几个点。原创 2022-09-29 08:11:48 · 580 阅读 · 0 评论 -
Node.js 应用开发详解13 网络安全:常见网络攻击以及防护策略
本讲介绍了常见的一些网络攻击方案,其次着重介绍了在 Node.js 中要注意的安全风险问题。网络攻击一般是面试中常被问及的题目,因此我们需要着重学习其原理,其次针对 Node.js 的安全问题则是你在编码过程中非常要注重的,避免在应用 Node.js 的过程中导致企业受到损失。如果你还有其他的一些安全性问题,也可以在本讲下面进行留言,我将和你一起探讨如何解决这些线上安全问题。下一讲我们将介绍一个可以轻松地协助我们来做各种性能提前校验的工具,其次会实践应用该工具融合到我们的框架中。原创 2022-09-28 10:16:15 · 1776 阅读 · 0 评论 -
Node.js 应用开发详解12 性能分析:性能影响的关键路径以及优化策略
在讲解性能分析实践之前,我们先来看看性能分析所应用的两个比较关键的工具:压测所使用到的 WRK(Windows Research Kernel);性能分析所使用到的 Chrome 分析工具 JavaScript Profile。学完本讲,你应该要掌握两个工具的应用,对于服务端研发来说这些工具是非常重要的,我希望你能深入去实践应用这两个工具。其次了解 3 种影响性能因素的优化策略,同时在日常开发中,应尽量避免影响性能的代码逻辑。那你在实际的工作中,是如何提升性能的呢,欢迎在评论区分享你的经验。原创 2022-09-28 10:14:55 · 792 阅读 · 0 评论 -
Node.js 应用开发详解11 内存检查:多种类型的内存泄漏分析方案
只需要 2 个工具就可以分析出内存泄漏的问题:heapdump 内存快照的工具chrome dev tools 中的 Memory Profilesheapdump` ));在代码中的第 5 行引用了这个库,然后调用 dumpFun 从 10 点 53 分开始,每隔 60 秒打印一次内存快照。这个库如何实现的细节,你可以自己去GitHub 源码中的 lib 目录下查看,主要是做了一层封装,能够更好地适用我们的应用场景。打开 Chrome 浏览器的控制台,在图 1 界面可以找到该工具。原创 2022-09-28 10:12:25 · 2280 阅读 · 0 评论 -
Node.js 应用开发详解10 系统稳定:如何监控和保护进程安全?
图 3 是一个最简单的层级结构图,具体每个层级设计其实是非常复杂的。图 3 监控告警平台简单流程图自动定时采集进程的指标数据;接口被调用或者访问后主动上报的信息。以上的两部分信息都会异步地发送给本地一个采集服务,落地到本地临时缓存中,然后定时地将本地临时缓存的上报信息发送给监控数据处理服务。触发告警,根据告警平台的设置,当数据落入后判断是否满足告警机制,满足则调用告警模块触发告警;查询视图,这部分就是一个前端可交互的界面,用户可以在这个平台查询监控信息;API 接口。原创 2022-09-28 10:09:04 · 773 阅读 · 0 评论 -
Node.js 应用开发详解09 缓存与应用:多级缓存策略介绍与应用要点
本讲主要介绍了缓存的一些基础知识,着重要掌握的是缓存的三个问题:雪崩、穿透和击穿,这也是面试中常考的点,接下来就是应用 Node.js 实践开发了一个多级缓存的库,可以简单快速地应用本地缓存和 redis 缓存,需要掌握其实现以及后续扩展的实现方法。接下来我们要进入第二个部分,系统相关的实践案例分析,下一讲我们先来讲解如何监控和保护进程安全。原创 2022-09-28 10:06:33 · 1597 阅读 · 0 评论 -
Node.js 应用开发详解08 优化设计:在 IO 方面应该注意哪些要点?
I/O(Input/Output)意思是输入输出,其实就是数据传递的一个过程,作为后台服务需要更多地与外部进行数据交互,那么就免不了 I/O 操作。I/O 的类型也是非常多的,我们应该掌握常用的一些 I/O 模型分类。I/O 分为以下 5 种模型,在介绍分类之前,我们先了解 I/O 在系统层面会有 2 个阶段(以读为例子):第一个阶段是读取文件,将文件放入操作系统内核缓冲区;第二阶段是将内核缓冲区拷贝到应用程序地址空间。原创 2022-09-28 10:03:36 · 284 阅读 · 0 评论 -
Node.js 应用开发详解07 CPU 过载保护设计:如何在服务层面确保系统稳定?
这个词最早出现是在电路方面,在出现短路或者电压承载过大时,会触发电源的过载保护设备,该设备要不熔断、要不跳闸切断电源。在服务端也是相似的原理,首先我们需要设计一个过载保护的服务,在过载触发时,切断用户服务直接返回报错,在压力恢复时,正常响应用户请求。本讲首先介绍了什么是过载保护和什么是 CPU 过载保护,接下来实践教学了如何去实现一个 CPU 过载保护模块,最后实践接入 MSVC 框架,并且与基础框架进行了对比分析。原创 2022-09-28 10:01:47 · 671 阅读 · 0 评论 -
Node.js 应用开发详解06 哪些因素会影响 Node.js性能?
本讲介绍了影响 Node.js 后台服务的代码因素、cluster 模式因素以及其他服务器资源相关的因素。学完本讲后,要了解哪些直接影响性能,哪些是从侧面也就是因为服务器资源问题导致的性能下降原因。本讲中的几个知识点,也是面试中常见的面试题,希望你能牢记这些知识点,这些也是我们后续章节中经常会被提及的一些知识。那这一讲学完,你有什么心得或者问题吗?欢迎在评论区与我讨论。下一讲将会为你讲解“CPU 过载保护设计:如何在服务层面确保系统稳定”。原创 2022-09-28 09:58:10 · 512 阅读 · 0 评论 -
Node.js 应用开发详解05 多进程解决方案:cluster 模式以及 PM2 工具的原理介绍
本讲主要介绍了 Node.js 中的 cluster 模块,并深入介绍了其核心原理,其次介绍了目前比较常用的多进程管理工具 PM2 的应用和原理。学完本讲后,需要掌握 Node.js cluster 原理,并且掌握 PM2 的实现原理。接下来我们将开始讲解一些关于 Node.js 性能相关的知识,为后续的高性能服务做一定的准备,其次也在为后续性能优化打下一定的技术基础。下一讲会讲解,目前我们在使用的 Node.js cluster 模式存在的性能问题。原创 2022-09-28 09:56:22 · 1520 阅读 · 0 评论 -
Node.js 应用开发详解04 3 大主流系统框架:由浅入深分析 Express、Koa 和 Egg.js
目前比较流行的 Node.js 框架有Express、KOA和Egg.js,其次是另外一个正在兴起的与 TypeScript 相关的框架——Nest.js,接下来我们分析三个主流框架之间的关系。在介绍框架之前,我们先了解一个非常重要的概念——洋葱模型,这是一个在 Node.js 中比较重要的面试考点,掌握这个概念,当前各种框架的原理学习都会驾轻就熟。无论是哪个 Node.js 框架,都是基于中间件来实现的,而中间件(可以理解为一个类或者函数模块)的执行方式就需要依据洋葱模型来介绍。原创 2022-09-28 09:56:36 · 2478 阅读 · 0 评论 -
Node.js 应用开发详解03 如何构建一个简单的 RESTful 服务?
本讲最开始介绍了一些技术知识点,这些是你开始学习本专栏必需巩固的技术,接下来根据实践开发了一个微型的 restful 服务,由于代码的不可维护性以及不可扩展性,我们接下来就应用了 MVC 架构设计模式进行了优化,最后由于 MVC 的缺陷,进而提出了使用 MSVC 来解决 MVC 中 M 和 C 业务界定不清晰的问题。学完本讲后,你就能自己写一个 restful API 了,并且能够掌握 MVC 和 MSVC 的架构原理,同时能够开发出轻量版本的框架。在实践过程中有任何问题或者心得,都可以在留言区留言。原创 2022-09-27 07:07:48 · 644 阅读 · 0 评论 -
Node.js 应用开发详解02 应用场景:Node.j 作为后台可以提供哪些服务?
本讲中介绍的各类系统,都遵循了我们《01 | 事件循环:高性能到底是如何做到的?》所介绍的 Node.js 事件循环原理,减少或者避免在 Node.js 主线程中被阻塞,或者进行一些 CPU 密集型计算。遵循了这个原理后,就可以拓展出一些业务复杂度高、业务迭代快的功能,或者一些通用性服务。在学完本讲后,你可以了解 Node.js 适合哪些应用场景,并在实际工作中可以尝试使用或者推荐团队来尝试,有任何心得或者问题,都欢迎在评论区与我交流。下一讲,我们将介绍一个 Node.js 作为后端服务的例子,到时见。原创 2022-09-27 07:06:12 · 861 阅读 · 0 评论 -
Node.js 应用开发详解01 事件循环:高性能到底是如何做到的?
本讲主要介绍了 Node.js 事件循环机制和原理,然后通过实践对比了两种情况下的性能耗时,并且说明了异步事件循环驱动的好处。学完本讲以后,你就可以掌握 Node.js 的事件循环原理,也可以掌握如何充分利用 Node.js 的事件循环原理的优势。你可以自行思考下这个问题:浏览器的事件循环原理和 Node.js 事件循环原理的区别以及联系有哪些点,欢迎你把答案写在评论区。本讲就到这了,下一讲我会为你介绍服务端研发的 RPC 服务的知识点。原创 2022-09-27 07:04:56 · 355 阅读 · 0 评论 -
Node.js 应用开发详解开篇词 Node.j 从工程化工具到后端服务应用的转变
上面讨论的这些差异点,是我们本专栏所需要重点介绍的知识,也是你从 Node.js 前端工程化应用扩展到系统化应用,所必须要掌握的技能点。学完本讲后,希望你能够从思维中有所转变,认识差异重新出发。那除了我提到的关于两者的差异点,你觉得它们还有什么差异呢,欢迎在评论区与我分享。下一讲我们就正式进入专栏内容了,第 01 讲我将为你讲解 Node.js 中最基础也是最核心的部分:事件循环的原理。原创 2022-09-27 07:03:04 · 357 阅读 · 0 评论 -
前端性能优化方法与实战19 成长之路:前端技术专业能力与业务产出平衡
作为前端工程师要界定好前后端的边界和职责,前端的职责很重要的一点是效率提升和质量提高,比如我们要解决项目延期导致的效率问题,通过对问题分析后发现是提测阶段质量不高,修复问题要占用很多时间,解决完问题后,Bug 还会往复。那么前端同学就需要提升代码和自测的质量,提测代码前要过一遍冒烟 CASE,冒烟通过才允许提测,这样一来,可以有效解决项目延期问题。前端职责另外一个重要点是,解决业务中的痛点问题,比如我们有一个对手机做质量检测的业务,检测完可以生成一个质检报告,告诉用户这台手机值多少钱。原创 2022-09-27 06:55:26 · 403 阅读 · 0 评论 -
前端性能优化方法与实战18 性能演进:RN、Flutter、小程序和 Enhance Hybrid
前面讲的性能优化方案,基本都立足于 Hybrid。这一讲我们来聊聊多端场景下的性能优化方案——RN、Flutter 和小程序。RN 即 ReactNative,是 Facebook 开发的开源移动应用架构,它可以让开发者基于 Javascript 和 React.js 开发跨平台移动应用。近一年 RN 非常火,其优势之一是多端开发,另一个最大特点就是渲染性能,我曾使用 RN 做了一个个人中心解决方案,首屏性能可以提升 50%。原创 2022-09-27 06:53:47 · 670 阅读 · 0 评论 -
前端性能优化方法与实战17 横向对比:百度、阿里云、美团性能方案对比
前面我介绍了性能优化实践及在 Hybrid下的进阶优化方案,这是我们目前的做法,那么,业界是什么样的情况呢?在这里我就挑选三家互联网公司——百度、阿里云、美团,一起来看看他们是怎么做的?为什么选它们呢?之所以选百度,是因为用户要快速搜索到自己想要的内容,这对性能要求非常高;阿里云呢,它的应用实时监控服务 ARMS 里,很重要的一个指标就是性能指标;美团的外卖到店,履约服务的体验和性能,对服务质量影响非常大。我从中选取他们各自重要的方面和你聊聊,希望对你有所启发。原创 2022-09-27 06:52:26 · 487 阅读 · 0 评论 -
前端性能优化方法与实战16 黑科技:详解预请求、预加载及预渲染机制
前面好几讲我介绍过怎么进行首屏时间优化,但其实在性能影响因素里,后端接口的耗时也不可忽略。以某电商 App 列表页为例,后端接口返回数据需要 200ms,参考首屏秒开的标准,它就占了 20% 的时间。在以前我一直采用的是缓存或者静态化的方案去解决,能不请求实时数据就不请求,用历史数据去代替。直到有一天,我遇到了机票和酒店相关的业务,因为它们的价格和库存会实时变化,如果页面打开时间长(首屏时间过长),用户会担心买不到合适的机票,转而离开去往竞品购买(机票和酒店类产品的留存率很低,用户忠诚度有限)。原创 2022-09-27 06:49:03 · 1865 阅读 · 0 评论 -
前端性能优化方法与实战15 高级进阶:WebView 层及代码架构层面优化
上一讲我介绍了图片骨架屏和 SSR 这两种优化方案,它主要聚焦于白屏优化,接下来这一讲我将介绍 WebView 层面的优化和前端架构性能方面的调优。为什么是这两个方面呢?首先 WebView 是我们经常使用到的工具,在我们开发 App 过程中起到非常重要的载体作用,甚至我还曾见过专门招聘 WebView 开发工程师的信息。而前端架构的某些因素也会严重影响我们的前端性能体验,所以,这一讲我就重点来介绍下它们。WebView 是一个基于 WebKit 引擎、展现 Web 页面的控件, App 打开 WebVie原创 2022-09-27 06:46:32 · 570 阅读 · 1 评论 -
前端性能优化方法与实战14 高级进阶:瞒天过海的骨架屏及 SSR 优化手段
前面我已经提到过,骨架屏和 SSR 在首屏优化方面有较好的效果,骨架屏可以使用户预期到接下来要展示的内容和结构,让用户觉得页面加载快了,而 SSR 则可以白屏时间大幅缩短。那么具体该怎么实现骨架屏和 SSR 呢?在实际工作当中如何落地操作呢?这一讲我们就来详细介绍下。原创 2022-09-26 10:01:11 · 1639 阅读 · 0 评论 -
前端性能优化方法与实战13 高级进阶:保证首次加载为秒开的离线包设计
上一讲我整体介绍了 Hybrid 的性能优化整体分析,简单介绍了离线包、Webview、骨架屏、SSR 及接口预加载等优化方案,这一讲我就来专门介绍下其中的离线包。离线包的作用我在上一讲已经提到过了,它可以最大程度地摆脱网络环境对 H5 页面的影响。有关利用它来保证页面秒开,我也是 2018 年才真正有过实践。记得那是我们业务 App 2.0 升级的时侯,技术 VP 报了一个手机首页访问时间长的问题,我们详细定位性能平台后给出了一个回复是,弱网环境下导致白屏时间过长。原创 2022-09-26 09:59:39 · 523 阅读 · 0 评论 -
前端性能优化方法与实战12 理论分析:Hybrid 下的性能优化整体分析
前几讲我们介绍了首屏时间、白屏时间、卡顿等的优化方案,它们一般适用于 App 端内和端外两种场景,App 端内就是App 内的H5 页面,端外是指 PC 站或者微信里面的 H5 等页面。接下来这一模块,我会介绍一下 Hybrid 下的专有优化方案。为什么要介绍它呢?因为 Hybrid 开发模式借助 WebView,把 Native 和 H5 的各自优势进行了结合。具体来说,它既具备 Native 体验好、操作硬件能力强、代码安全等优势,又具备了 H5 发版节奏快、Web 标准开发效率高等优势。原创 2022-09-26 09:58:08 · 705 阅读 · 0 评论 -
前端性能优化方法与实战11 工具实践:如何进行性能专项测试
前几讲我介绍了首屏秒开、白屏时间和卡顿的优化手段,这些是已上线业务的性能优化。那么,如果有新业务要上线,如何尽量减少它上线后的前端性能问题,避免以后我们手忙脚乱去“救火”呢?我们可以通过性能专项测试,提前于生产环境发现问题。什么叫性能专项测试呢?简单来说就是,在业务上线前,我们对性能指标(如首屏时间、白屏时间、页面加载时长等)进行测试,确保上线后性能指标达标。那怎么做呢?大致分四步:第一步,确定线下测试方案;第二步,设定线下测试标准;第三步,选用合适的测试环境进行测试及视频分帧计算;原创 2022-09-26 09:51:43 · 730 阅读 · 1 评论 -
前端性能优化方法与实战10 优化手段:白屏 300m 和界面流畅优化技巧
上一讲我介绍了如何保障首屏秒开,除了它,在性能监控当中白屏时间和卡顿也是两个值得注意的优化指标。所谓白屏时间,一般是当用户打开一个页面,从开始等待到页面第一个字符出现的时间,白屏时间越短,给人感觉 App 速度快,体验好,能有效降低跳出率。而卡顿,想必你也不陌生,当用户浏览页面,下拉商品列表时,如果页面停止不动,无疑会对业务转化率有很大的影响。所以,这一讲我就专门介绍下如何优化白屏时间和卡顿。原创 2022-09-26 09:50:31 · 1248 阅读 · 1 评论