渐进式的首屏优化方案之概述

首屏载入速度是 web 应用的是个重要性能指标。页面的载入阶段分为 1.白屏 2.首次渲染 3.首次有意义的/可交互的渲染,首屏优化则是减小 1 和 2 所占的时间,让用户更早的可以看到内容并能与之交互。本文主要讨论无缓存情况下的白屏时间优化。

Read More



webpack 按组件进行代码分割和合并

听起来很奇怪,对 react 组件进行分割,然后合并?

背景

假设一个系统中包含 100 种组件 C0,C1,…,C99。提供一个可序列化的描述清单,例如 [‘C0’, ‘C5’],系统可以生成一个包含 C0 和 C5 的页面。一些公司使用类似的系统,用来配置一些简单的、变更可预计的页面,将编码转化配置。

Read More


热更新架构

这是一个团队内部的分享,介绍了热更新/热插拔的优点以及所需的成本。主要通过分析 Node.js 和 Webpack 的热更新机制,总结出实现热更新/热插拔架构需要这些特性

  1. 组件系统,组件作为热更新的最小单位
  2. 管理热更新的运行时程序,用于检测更新,加载新组件,替换和释放旧组件
  3. 元编程的能力,允许程序对自身进行修改

要实现可热更新的组件系统,需要这些特性

  1. 在组件栈中,上层组件的热更新需要下层组件的热更新支持
  2. 组件需要有“纯”或“无状态”或“副作用可撤销”的特性
  3. 合理的组件编排模型(怎样才算合理?没有深入讨论)

hotswapping.pdf


CSS 简史

这是一个团队内部的分享,主要回顾了 CSS 的诞生和成长的历史,以及应对更加复杂的 webapp,CSS 及相关工具和语言的发展。
聊到了当前较为热门的 CSS in JS 技术,为团队提供了新的技术选择。

a_brief_history_of_css.pdf


2016 移动 web 调试漫游

图片来自网络

背景

如今在移动平台上,web/hybrid app 不断向 native app 发起挑战。出于解放生产力和降低成本的考量,越来越多的团队开始尝试以 web 技术来开发应用。

在各移动平台上,native app 开发都得到了官方的最大支持,工具链非常成熟。尽管如此,native app 开发者往往都不喜欢真机调试,因为它非常费时。在 webapp 开发这边,情况更加糟糕。不仅费时,由于 webapp 往往要覆盖多个平台,需要在多种设备上进行调试,这还让调试工作变得非常地琐碎,难以形成通用的方案。

前端开发者在 PC 平台上如鱼得水,然而切换到移动平台,则受到掣肘。本文尝试总结一些简单有效的调试方案,以满足不同场景下调试的需求。

Read More


Async IO of Node.js

Node和异步IO是什么?

什么是Node

Node是一个Javascript运行环境,它实现了全异步的IO,使Javascript成为了一个通用编程语言。

同步 synchronous

syn = together (syndrome 综合症,syntax 语法:放到一起并保持顺序排列和文法)
chrono = time
synchronous = existing or happening at the same time

Read More