前端性能优化

发表于 2020-08-17 更新于 2023-05-11 分类于前端优化本文字数： 2.7k 阅读时长 ≈ 9 分钟

首屏加载

静态资源

图片压缩

图标压缩

字体压缩

分析包体积构成

webpack-bundle-analyzer
代码拆分

阅读全文 »

flutter 状态管理调研

发表于 2020-03-02 更新于 2023-05-11 分类于 flutter 本文字数： 2.2k 阅读时长 ≈ 7 分钟

今天主要探讨的是 flutter 中常用的状态管理方案：BLoC 和 Provider，Redux。

BLoC 介绍

关于 bloc，可以详细从这里去了解。这里我简单说说。
bloc

从上图中可知，BLoC 有 3 个核心概念：UI、BLoC、Data。UI 即是页面展现，Bloc 作为业务逻辑单元，Data 作为持久数据层，对比 MVP 其实有挺多相似之处的。MVP 中，通过 Presenter 来沟通 View 和 Model；BLoC 模式中通过 BloC 模块沟通 UI 和 Data。

阅读全文 »

关于跨端方案的调研

发表于 2020-02-18 更新于 2023-05-11 分类于跨端方案本文字数： 2.8k 阅读时长 ≈ 9 分钟

前言

近几年来，跨端方案这个概念很火热，解决方案也不少。熟悉 React 的同学，就算没使用过 RN，也听说过 React Native 吧？同时还有大量的解决方案，比如小程序（包含快应用等轻量级 app）、Weex、Flutter 等。同时字节跳动研发团队出了一个 Lynx 的跨端方案。在开始之前，有几个问题想问大家：

传统的 Web 本身就是跨端的，为啥要构思跨端方案？

说到跨端方案，Web 都流行了十几二十年了，天然的跨端，为何还要考虑跨端方案呢？其实，这个概念不一定是从纯前端的角度来说的，可能是从客户端的角度。比如，需要开发一款 app，是否需要开发 iOS 和 Android 两套代码呢？当然不一定！如果没有跨端方案，当然是 iOS 一套代码，Android 一套代码；如果有跨端方案，写一份中间代码，分别转译成 iOS、Android 代码，这不就极大节省了人力吗？ —- 节省人力

问题又来了，都说了 Web 天然的跨端，为什么不直接搞 Web，还要搞 Native？这个就更简单了：Native 拥有对设备的深入控制，只要是开发人员想的到的功能，基本都能实现。但 Web 就不一样了：它只是给你提供了一个展示内容的画板，以及一些符合潮流的 api（W3C 制定的）。如果在 Web 上想搞点什么骚操作，得先问问容器（一般是浏览器）答不答应。 —- 复杂能力支持

同时，跨端方案不仅仅局限于如何将一份代码转为不同平台的 Native 代码，甚至还想转译到 Web、小程序、快应用、XXXX 上去。这是所有开发人员的追求，而不仅仅是前端开发！试想，一份代码，能转译成 Web，运行在普通的浏览器；转译成 iOS 程序，运行在 iOS 手机上；转换成 java 程序，运行在安卓手机上；转换成 dmg 程序，运行在 Mac 上。除此之外，还有其他还多平台呢。 —- 跨平台扩展性

当然了，由于 Web 的 JS 是解释型语言，避免不了的运行时编译，降低了程序的运行速度。虽然当前 Web 提出了 WebAssembly 的方案，但由于被提出还不久，支持度还不够高，还没引起足够的重视。相比较而言，Objective-C/JAVA 等语言，虽然也是高级语言，但属于编译型语言，最终运行时都是执行的二进制代码，效率比 JS 肯定还是高很多的。因此在考虑到性能表现时，Web 的表现往往不如 Native 来的好。 —- 性能表现

其他对比，等待大家的补充。

阅读全文 »