在 docker 中设置 node.js 时区

CI 使用 Docker 打包前端代码,流程中有使用 Shell 和 Node.js 两种方式输出时间。
Shell 脚本用 $(date ‘+%F %T’) 输出的是东 8 区字符串 2021-05-27 14:43:23
Node.js 用 new Date().toString() 输出的是 0 时区字符串 Thu May 27 2021 06:43:09 GMT+0000 (Coordinated Universal Time)

经验证,虽然已将宿主机 /etc/localtime 挂载至 Docker 同路径,但仍需要配置环境变量 TZ=Asia/Shanghai 才可生效。
似乎是 V8 引擎在浏览器环境与服务器环境的实现方案不一致造成的。该 TZ 参数暂时不支持 Windows 但很快就会支持。

另外,顺便发现 new Date() 在解析不带时区的时间字符串时,ES5 和 ES6 有不同的规范。

参考资料:
https://github.com/nodejs/node/issues/19480
https://github.com/nodejs/node/issues/28743
https://github.com/nodejs/node/issues/4230
https://github.com/nodejs/docker-node/issues/626
https://github.com/gliderlabs/docker-alpine/issues/136
https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
https://www.gnu.org/software/libc/manual/html_node/TZ-Variable.html
https://docs.microsoft.com/en-us/cpp/c-runtime-library/time-management?view=msvc-160
https://github.com/nodejs/node/blob/4ebb88fea5a9d83f2c4ec566e958d735f1fca138/deps/v8/src/base/platform/platform-win32.cc#L131

Apple M1 CPU 踩到的坑

  1. Homebrew 安装后未生效
    解决方案:
    在安装后手动执行(注意安装日志最后输出的提示)
    echo ‘eval $(/opt/homebrew/bin/brew shellenv)’ >> ~/.zprofile
    参考资料:
    https://github.com/Homebrew/install/blob/master/install.sh#L745
  2. Node.js Check failed: allocator->SetPermissions
    解决方案:
    升级到 14.17.0 或 15.9.0
    参考资料:
    https://github.com/nodejs/node/issues/37061#issuecomment-770863819
    https://github.com/nodejs/node/issues/37061#issuecomment-780499544
    https://github.com/nodejs/node/pull/38507
    https://github.com/nodejs/node/pull/38051
    https://github.com/nodejs/node/issues/37309

Chrome 85 的 content-visibility 会影响 position: absolute 的策略。

Chrome 85 之后,提供了 content-visibility 属性,用于优化渲染性能,放弃布局或绘制不可见元素。
经测试,对于长列表等结构,优化大幅提升。还不用修改业务逻辑,性价比极高。不过要注意,还是副作用的。
目前已经发现,应用了该属性的元素会影响绝对定位子元素的布局策略:
原 absolute 的元素会相对于最近的非 static 祖先元素定位,现会相对于当前元素定位。

参考:
content-visibility: the new CSS property that boosts your rendering performance
Cascading Style Sheets position

Chrome 88 似乎启用了对 ::selection:not() 的支持?

升级到 Chrome 88 后,发现选中文本后的蓝色背景没有了。
经过排查后发现 87 和 88 版本的差异在于一个代码中存在很久的 CSS 伪类 ::selection:not(input) { background: rgba(0,0,0,0); }
87 版本的 Styles 中不存在该伪类,但 88 版本中存在,造成蓝色背景丢失,白色字体配白色背景看上去好像文字丢失了一样。

Base64编码的字体文件,也会被了浏览器延时加载。

在现代浏览器中,使用 @font-face 方式引入的字体文件,无论是 url 外部引入,还是 base64 内链引入,均会延时加载。表现为未使用该字体时,网络面板不会出现该资源的请求。
尤其是 base64 内嵌字体文件,即便已经被下载,也会在初次使用时才进行加载。如果想在字体加载完成后才进行操作,就需要等待试验阶段的 CSS Font Loading API 了。

参考:
How we use web fonts responsibly, or, avoiding a @font-face-palm
How We Load Web Fonts Progressively
Better @font-face with Font Load Events
@font-face Load Events
CSS Font Loading API