记录前端开发以及生活

基于 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. 用户在网站内的转化率
业务效益 = 用户规模 * 转化率

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

用户规模

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

2022 年终总结

Create at 2023 01 01Update at: 2023 01 1211 min read随笔年终总结

变化

今年生活发生的几大变化:买车,领证,租大房子。

买车

本来 21 年就看了车,奥迪、宝马、凯迪拉克还有本田的店里都看过也试驾过了,但是最后没有买。

22 年又看车,这次本来预算 10w 左右的车,目标车辆是个 Polo ,打算买来给女朋友通勤。结果看着看着,就从 10w 的车看到了 30w ,尤其是参加了个车展以后。 后来各种对比后采纳了女朋友的意见,定了 Volvo S60 ,虽然我更喜欢 CT5。

车到现在已经开了七千公里,最大的感受就是:车买的越早越好,车的好坏不重要,有没有车很重要

有了车就方便了很多,可以去周边城试玩,去商场什么的也更加方便了,虽然打车也能解决问题,但是自己的车上是一个更加私人的空间跟打车还是有很大的区别。但是也有不好的地方,比如说,有车以后,就不想骑自行车了,骑自行车的机会就少了,体重就上去了。而且养车开销还是挺大的,不过总体还是利远远大于弊,非常值的一次消费。

领证

2021 年终总结

Create at 2021 12 3113 min read随笔年终总结

疫情后的第二次春节,我和女友本打算各回各家(省略各种对于回谁家的争执),各找各妈。我票都订好了,为了自己的老腰还订了一等座,女友也约了当天的顺风车,就等 1.27 出发了。结果出发前一天杭州突然又出现新的病例,这突如其来的变化打破了我们的计划。回家的旅程充满了不确定性,毕竟如果路上或者到了目的地被劝返或者被要求更可怕的强制隔离,那就很吃不消了。

于是我问了老爸家里的政策,听起来问题不大,应该是可以回家的。只是女朋友很担心,她听到的消息不够确定,怕回家被隔离,想等形式明朗,政策清晰后再决定还要不要回家。那我想就等你一两天再杭州陪你吧,不行的话年 30 再回家也行。还考虑到如果她家回不去,那就跟我一起回家,为此我花大价钱订了一张特等座(没有票了,只候补到这个席位)。

第二天一早,女友起床一看直接黄码了,她哪也去不了了,我也只能留在杭州陪她了。于是就这样稀里糊涂的要渡过在杭州的第一个春节了,也好,哪也不跑风险小。

刚好趁着这个时间,对去年做个总结。

工作

年初由于组织架构调整,大前端团队拆掉了都划分到各个业务小组

阿里工作三年总结

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 的块为结束。 每一个非

主板型号是 z490 GodLike, 微星旗下 Z490 系列最高端的品牌,拓展坞是贝尔金的 Intel 认证的 13 合一的那一款。 拓展坞插到电脑上的时候毫无反应,想了一下可能是缺少驱动。于是就上微星官网找了一下,果然有一个 thunderbolt 的驱动,下载下来却发现根本不知道如何安装: 看起来执行 setup 这个批处理文件就好了,但是每次执行都是失败,毫无进展。

于是直接上网搜 thunderbolt 的驱动,看到 intel 官方有给自己 NCU 产品提供的驱动,于是下载下来直接安装。安装好后会有一

2020 年终总结

Create at 2021 01 0114 min read随笔年终总结

今年总体上是心情比较消沉的一年。

工作

年初谈绩效,老板还说需要努力,哪哪做的还不够好,随后就给了提名了晋升,感觉很神奇。随后认真准备了一周多的晋升材料,还在家里给女朋友试讲了几遍,最终如愿通过了晋升。只是晋升后的待遇提升配股跟外界说的数量差距甚大,据说仅有往年的一半。晋升带来的喜悦并没有很大,随之而来的工作压力确是肉眼可见的增大。

有些事情也有了新的认识,比如一件事情要不要做,不在于技术的难度,而在于普惠程度,不要怕别人说这个太简单,就这也好意思拿出来分享。只要做的事情真的能帮助到其他人,这就够了。

投资

今年投资成果还是不错的,当然也是大行情比较好,跟着趋势赚了点小钱。 结果上来看:投资收入占年总收入的 23.2% ,由于今年工作太忙太累导致很多投资操作没有记录,以至于算不出来具体的投资收益率,但保守估计今年收益率应该在50% 以上, 还是非常满意的。 但不好地方是,由于行情太好导致一些赌博性质的操作也挣到钱了,影响了投资心态。变得

Subscribe to the newsletter