基于 hexo 的博客用了多年了,有很多主题和插件可以用,用的还是挺舒服的。但是最近打算把它从 hexo 迁移走,原因:

  • 对博客的掌控感太弱,想要加一些功能就需要等 hexo 更新或者主题作者更新
  • 单纯就是想折腾一下而已(这才是主要原因吧

最终打算迁移到 next.js 的方案,前后端一体,既可以纯静态站点也可以有作为普通的有后端服务的网站,挺符合我的诉求。而且对网站的掌控力也会比用 hexo 高很多,当然代价就是要花费更多的时间。

目标

迁移的目标:

  • 保持原有博文链接不变
  • 迁移评论系统:原本使用的 disqus ,对墙内来说可用性太差了

备份

备份:采用jiacai2050/blog-backup: Backup blogposts to PDF for offline storage

前言

本文原发于公司内部 ATA 平台,经过数据脱敏后,重新整理成为了这篇文章。所以文章内会有很多内部系统的介绍和链接,这些链接以及平台无法在非公司内网打开,但不影响文章整体的阅读和理解。

前言

在过去的一年中,我们团队的流量业务经历了一系列的重构和大幅度性能优化。最近,在前端开发标准化平台的支持下,我们也进行了一轮标准化治理。现在,从各个角度来看,整个应用相比之前都有了不小的提升。

抛砖引玉,我把其中的一些思考和选择总结成了这篇文章,给大家做参考。

技术选型

开发框架选择

为什么选择 React

这个没有什么需要讨论的,内部的所有基建以及大环境决定了必然是 React。

为什么是 React18

原本项目是 React16,React18 相较于 16 主要的变化:

  • 并发模式 - React18默认开启了并发模式, 简单讲就是组件渲染从同步不可中断改为了异步

Alibaba.com 性能优化经验总结

Create at 2023 01 1151 min read技术performancealibaba

前言

本文原发于公司内部 ATA 平台,后来经过数据披露审核后,重新整理成为了这篇文章。所以文章内会有很多内部系统的介绍和链接,这些链接以及平台无法在非公司内网打开,但不影响文章整体的阅读和理解。本文同步发布于阿里开发者平台,地址:经验总结|我们如何进行Alibaba.com买家性能优化?

背景

为什么要做性能优化

对绝大多数网站来说,从宏观视角上看主要有两个因素影响最终的网站业务效益:

  1. 用户的整体规模
  2. 用户在网站内的转化率
业务效益 = 用户规模 * 转化率

所以为了提升业务效益,需要提升用户规模以及转化率。

用户规模

用户主要由新用户和老用户组成,新老用户也有各自的流量组成,但无论新老用户进入网站,都要

阿里工作三年总结

Create at 2021 06 04Update at: 2021 06 1112 min read技术年终总结

今天是阿里入职三周年,借机回顾一下这三年的工作。 回想入职之前,内推的朋友跟说我过来可能负责日本站的开发,当时还挺激动的,国际化业务啊, international 。 结果我入职的前几天组织架构发生了巨大的变化,带我的师兄也换了,负责的业务域也换了。除了刚入职做了一段时间 detail ,后面主要就是做国际站店铺了。

业务开发

国际店铺这个业务虽然已经很稳定了,但还是有很多可以改进和优化的地方。三年来大的项目主要就是:

  • 千人千面
  • CP 结构化展示
  • 双赛道
  • 管理后台升级
  • 无线店铺 2.0
  • 内容化店铺

也算是为跨境国际贸易做出了自己的贡献。

效率&架构升级

开发提效

一开始负责 detail 的开发,接到的第一个需求是做一个什么物流相关的。我一看很简单自评了 2 天,师兄跟我说评少了,一个星期吧。我当时内心 OS:这么简单的功能需要一周?

<

店铺体验优化总结

Create at 2021 04 2918 min read技术JavaScriptReact阿里巴巴性能优化

本文整理了近两年来国际站店铺在体验优化上做的努力和探索,也取得了不错的成果,分享出来希望对其他类似场景能有帮助。

性能优化大体上可以分为网络性能优化和交互体验优化:

  • 交互体验优化,优化页面的交互体验,滚动是否顺滑,点击反馈是否及时,操作是否有卡顿等
    • 避免 DOM 的重绘和重排
      • DOM 操作尽量减少或者进行操作合并
      • 动画元素尽量采用 absolute 等脱离文档流的定位
    • 确保对用户的操作反馈及时,刷新率保持 60fps
      • 保证每一个 js 任务在 1000/60=16.67ms 执行完毕
      • 复杂计算交给 woker 进程
  • 网络性能优化,大多数情况是要进行首屏性能优化
    • 减少 ttfb 的时间
      • 减少 dns 查询、TCP 握手建链、ssl 建连
      • 避免 302 redirect
      • 减少后端

流式渲染

首先, 简单介绍一下什么是流式渲染. 流式渲染是利用 http1.1分块传输编码的特性, 让服务端分块返回 html , 浏览器可以在接收时逐步渲染页面, 这样有助于页面的首屏展现, 提升用户体验.

分块传输编码

分块传输编码(Chunked transfer encoding)是超文本传输协议(HTTP)中的一种数据传输机制,允许 HTTP 由网页服务器发送给客户端应用( 通常是网页浏览器)的数据可以分成多个部分。分块传输编码只在 HTTP 协议 1.1 版本(HTTP/1.1)中提供。

分块传输格式

如果一个 HTTP 消息(包括客户端发送的请求消息或服务器返回的应答消息)的 Transfer-Encoding 消息头的值为 chunked,那么,消息体由数量未定的块组成,并以最后一个大小为 0 的块为结束。 每一个非

Rax 代码转换到 React

Create at 2019 08 0129 min read技术JavascriptBabelReactRax

背景

最近接手公司的一个移动端项目,是通过 Rax 作为 dsl 开发的,在发布的时候构建多分代码,在 APP 端编译为能够运行在 weex 上的代码,在 H5(跑在浏览器或者 webview 里面,不管什么技术我们统称 H5) 端使用降级的 weex

这一套开发体系,看起来很完美,一次开发,三端运行。但是真实在开发的时候,就不是这么完美了。由于毕竟是跑在 weex 上的,而不是浏览器。所以在开发方式上也很难直接从 web 端的开发方式平移过去,为了实现跨端运行,所以在样式上只实现了 Css 的子集, DOM API 也是如此,开发的时候,在浏览器里面调试的时候,一切正常,但是等发布到 APP 端用 weex 跑的时候又是各种问题,开发体验很不流畅。

当然,有人会说那是因为你对 weex 的 api 不了解,也对,~~一直以来对与这种自己搞一套非标准体系来实现各种魔法功能的东西都不怎么感兴趣~~ 但是如果了解它的成本大于了它带来的收益,那么对我们来说,

如何高效的调试 vm 模版

Create at 2018 11 09Update at: 2018 11 085 min read技术

由于合规要求,所以文章一些名词或者数据进行了脱敏处理。

背景

加入阿里做的第一个项目,由于是很老的业务,前后端不分离,大部分逻辑都在后端 velocity 模版里面。

作为一个前端,我们开发时在没有后端环境的支持情况下,想要调试 vm 模版,这真的是一件极其痛苦的事情。

因为对于任何一个需求的,都需要:

  1. 在后端工程里面修改 vm 代码
  2. 在 aone 上部署后端工程,这一步需要大概半个小时的时间
  3. 部署成功后,刷新浏览器进行验证

也就是说,任何一行代码的修改成本都至少要半个小时。而且开发时严重依赖后端同学的支持,比如我要前端显示分支流程中 A 流程,那么需要后端同学配合吐出 A 流程的数据,然后等半个小时,我要前端显示分支流程中的 B 流程,又得半个小时。如果后端同学有事情支持不了,我前端开发得暂时搁置一下了。

做了一个需求后,我发现这整个开发流程真的太痛苦了,而且效率也相当低下。一个我觉得两天就能搞定的需求,搞了整整一周

indexedDB 不完全指南

Create at 2017 12 0617 min read技术JavaScriptindexedDB

介绍

引用 MDN 的介绍:

IndexedDB 是一个事务型数据库系统,类似于基于 SQL 的 RDBMS。 然而不同的是它使用固定列表,IndexedDB 是一个基于 JavaScript 的面向对象的数据库。 IndexedDB 允许您存储和检索用键索引的对象; 可以存储 structured clone algorithm 支持的任何对象。 您只需要指定数据库模式,打开与数据库的连接,然后检索和更新一系列事务中的数据。

IndexedDB  是一种低级 API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该 API 使用索引来实现对该数据的高性能搜索。虽然  Web Storage  对于存储较少量的数据很有用,但对于存储更大量的结构化数据来说,这种方法不太有用。IndexedDB 提供了一个解决方案。

区别

这是我整理的 WebStorage 和 indexedDB 的之

ReactDOM 是如何把组件渲染到 DOM 中的?

Create at 2017 09 2120 min read技术React

当我们在开发 React 项目中,第一次调用 ReactDOM.render 的时候都发生了什么呢? 今天就从源码角度来追踪一下这个问题(主要看流程, 而不纠结与细节)。

ReactDOMStackEntry

首先我们可以从 ReactDOM 的入口文件 ReactDOMStackEntry.js 中找到 render 方法。可以看到,render 方法是 ReactMount 组件提供的。

var ReactDOMStack = {
  findDOMNode: findDOMNode,
  render: ReactMount.render,
  unmountComponentAtNode: ReactMount.unmountComponentAtNode,
  version: ReactVersion,

  /* eslint-disable camelcase */
  unstable_batchedUpdat