闲逛发现 nginx 官网 多了一行字： “Support for HTTP/3.”，距离第一次体验 HTTP3 已经过去了 4 年，4 年前，我们体验 HTTP3 是用 Cloudflare 提供的quiche这个库来实现的，如今，nginx 终于通过这个 ngx_http_v3_module 提供了官方支持。SSL 库方面，最流行的 OpenSSL 决定自己实现 QUIC 支持，按照官网给出的roadmap，看起来至少半年内是没什么希望的。nginx 方面自己实现了一个 OpenSSL 的兼容层，1.25.0 以后版本的 nginx 中已经自带了。但是这个兼容层不支持early data。有些营销号直接把early data机翻成了“早期数据”，并解释为旧数据，实际上early data指的是 TLS1.3 中的 0-RTT data，详见这里。所以目前 SSL 库最好从以下 3 个中 BoringSSL、 LibreSSL 或 QuicTLS 三选一。开始体验以BoringSSL为例123456789# 安装 gowget https://go.dev/dl/go1.21.3.linux-amd64.tar.gztar -C /usr/local-xzf go1.21.3.linux-amd64.tar.gzexportPATH=$PATH:/usr/local/go/bin ...继续阅读 (26)

性能在前端领域的重要性已经是老生常谈了，比如早在 2012 年，亚马逊就发布过一个研究结果：页面加载速度一旦下降一秒，每年就会损失 16 亿美元的销售额。那这个一秒又是怎么统计的呢？同样是在 2012 年， Web 性能工作组针对页面加载场景制定了一个加载过程模型，用来衡量页面加载各个阶段的耗时情况，相信这张图大家应该都见过：W3C 性能模型但是随着时代的发展，图中的指标已经不太能准确的反映性能表现了，比如在一个 SPA 应用中，页面容器的 DOM 结构已经生成了，但实际上当前页面还是一个白屏的空壳、又比如页面中绝大部分内容已经渲染好了，但是有一张特别大的图片还在加载中…针对这些问题，浏览器厂商、web 工作组等都提出了一些关键指标，比如谷歌提出了 4 个衡量用户体验的新指标（LCP、CLS、FID、INP），这 4 个指标将会影响谷歌搜索引擎的排名，Chrome 开发团队也提出了 4 个指标（FP、FCP、LCP、CLS），W3C 性能工作组则认为 LCP、CLS 和 TBT 是最值得关注的。在现代前端性能监控系统中，我们也经常会见到它们，我们对页面性能的衡量，基本就是通过对这些指标的收集和计算得来的。有了这些指标，我们也可以有效的还原出页面加载的瀑布图、火焰图等，从而更有针对性的做出优化。例如，这是一张火山引擎前端监控系统的截图：火山引擎前端监控在浏览器的 devtools 中 ...继续阅读 (35)

提到显示器，很多同学第一时间想到的可能是分辨率（2K、4K）、尺寸（24、27、32）、面板（IPS、TN、LED）等，常玩游戏的同学可能还会想到刷新率、响应时间等参数。不过色域却常常被大家所忽视，其实色域是一个特别直接的影响视觉体验的参数。色域是什么？维基百科给的概念是这样的：色域是对一种颜色进行编码的方法，也指一个技术系统能够产生的颜色的总合。顶级显示器制造商艺卓是这样解释的：色域在人眼能够识别的色彩范围（即可见光谱）内限定了一个更具体的范围。彩色成像设备包括多种设备，例如数码相机、扫描仪、显示器和打印机，由于它们能够还原的色彩范围各不相同，所以采用色域这个概念来区分这些差别，并协调各个设备之间可以通用的颜色。说人话就是：我们为了让相同的颜色在不同设备上看起来一样，需要一个标准。色彩空间我们知道在绘画时把红、黄、蓝这三种原色混合，可以生成不同的颜色。我们将红黄蓝三种原色的量分别定义为 XYZ 三个坐标轴，这样就得到了一个三维空间，每种可能的颜色在这个三维空间中都有唯一的一个位置，这就是一种色彩空间。同样，在显示器领域，通常使用 RGB（红色、绿色、蓝色）三原色，以红色、绿色、蓝色为三维坐标轴，就得到了RGB 色彩空间。类似地，使用色相、饱和度（色度）和明度作为坐标轴，我们可以得到HSV 色彩空间，使用油墨的三原色（青、品、黄）搭配黑色油墨，我们可以得到印刷行业的通用标准CMYK ...继续阅读 (17)

本文所用环境：操作系统： Linux September 5.3.11-1.el7.elrepo.x86_64 GNU/Linux内核版本： centos-release-7-7.1908.0.el7.centos.x86_64HTTP3目前，最新版本的 nginx （1.17.5） 仍然不能原生支持 HTTP3，好在 CloudFlare 提供了基于 Quiche 和 Boringssl 实现的一个 patch，使得我们可以在 nginx 上尝鲜一下。开启过程如下：下载最新版本 nginx 并打上 quiche 的 patch12345678910wget https://nginx.org/download/nginx-1.17.5.tar.gztar xvzf tar xvzfgit clone --recursive https://github.com/cloudflare/quichecd nginx-1.17.5yum install patchpatch -p01 < ../quiche/extras/nginx/nginx-1.16.patch安装相关依赖CMAKE12345678910# 前往 https://cmake.org/files/ ...继续阅读 (20)

本来是写给同事的一个攻略，感觉可能有同学会用得上，在这里也分享一下。文中的『车程』不包含游览时间南山-天涯海角-椰梦长廊-鹿回头-太阳湾（单程 75 公里，车程约 2 小时）路线总览路线1总览南山文化旅游区南山文化旅游区是一座展示中国佛教传统文化的大型园区，福如东海寿比南山的南山就是这里了。主要景点有南山寺、南海观音佛像、不二法门、十方塔林与归根园、佛教文化交流中心等，世界上最大的一尊海上观音也坐落在此。有摇号需求的可以去参拜一下，此处 @安笺 @麦棋。门票旺季 150 元，景区很大，建议多花 30 元购买游览车票。南海观音天涯海角天涯海角是人民币 2 元背面图案的取景地，有人说这是来三亚必须要去而且只会去一次的景点，第一次来的话还是去打个卡吧。有一说一 80 元的票价看几块石头还是有点心痛的，文昌免费的石头公园明显更适合我这种白嫖党。同样建议坐观光车，可以大幅节约时间和体力。2元人民币天涯海角椰梦长廊椰梦长廊是一条 20 公里长的海滨风景大道，临海的一侧是热带植物园林，另一侧是休闲度假区。建议导航至Club Med 三亚度假村，然后沿三亚湾路游览。椰梦长廊导航点-Club Med三亚度假村鹿回头鹿回头景区三面环海，一面毗邻三亚市区，是登高望海俯瞰全城的绝佳观景点。鹿回头太阳湾太阳湾路号称“三亚最美公路”，是三亚自驾必打卡的地点之一，直接导航到太阳湾柏悦酒店即可，可以开到酒店内部观 ...继续阅读 (16)

自从去年末在苹果店里看到了 UltraFine 5K 之后，就觉得自己的 AOC U2790VQ 一点都不香了，但是9948的价格哪怕是24期免息也只能告辞。UltraFine 4K 看起来倒是很合适，但是用惯了27寸，总觉得24寸的屏幕实在太小。看来看去，3000-5000 的价位只剩下3款备选：DELL U2718Q、BenQ PD2700U、LG 27UL850，对比了很久，还是觉得都不完美，正想着就明基算了，毕竟号称护眼。下单前论坛闲逛忽然发现 DELL 更新了 U2720Q，居然带有 90W Type-C 接口，虽然 MacBook Pro 16 的标配充电是 96W，90W 也勉强凑合吧，论坛内搜了一下，已经有了开箱体验，看起来还不错，果断决定入手。官网联系客服，第一个就直接报价 3970 五年保修，听说有 3850 拿到的，但是换了几个售前，一个比一个高，懒得折腾了，3970 下单。2月17日付款，2.21日从厦门发货，嘉里大通物流2.23到杭州。开箱居然没有再包装，直接这样运输的居然没有再包装，直接这样运输的一些基本参数配件全家桶，依次是电源线× 1、HDMI 线缆× 1、USB-C 线缆（C 转 A）× 1、Type-C 线缆（C 转 C） × 1，附带了校色报告，标称ΔE＜2号称买支架送显示器的升降旋转支架背面接口依次是电源、HDMI 2.0、DP-in 1.4 ...继续阅读 (15)

去年这个时候，曾经写过一篇文章Polyfill 的前世今生，总结了常见的 polyfill 方案。受限于当时的认知以及 Babel 版本，有很多疏漏，觉得有必要更新一篇目前（2020.03） polyfill 的一些进展。core-js@3在我写下上一篇文章之后两周，2019.03.19，Babel@7.4.0正式发布了。在Babel@7.4.0中，提供了对管道运算符、私有方法、TypeScript 3.4 等的支持，同时，polyfill 开始支持core-js@3。对于 core-js ，可能有些人还很陌生，根据npmtrends的统计， core-js 事实上已经是目前最流行的 polyfill 方案了，@babel/polyfill就是靠它来转换代码的，只是很多人可能没有留意到其实自己已经在间接使用它了。回想一下执行npm install的时候，是不是对As advertising: the author is looking for a good job -)似曾相识？ 这条广告还引发过技术人员能不能在 npm log 中为自己打广告的争论，npm fund也是为此而生。提到这个，顺便想起了前几天在这条issue中看到的一件事， core-js 的作者看起来因交通肇事被判处了 1.5 年的监禁，希望他好好改造重新做人 →_→升级指南babel.config.json 与 ...继续阅读 (22)

为了提升页面加载性能，改善用户体验，我们希望我们的静态资源能够长期缓存在用户的浏览器中，为此，我们通常会给静态资源设置一个较长的max-age，而在资源内容有更新时，则生成一个名字不同的新文件，以便用户能够及时收到最新的内容。我们都知道， HTTP 缓存可以分为强缓存和协商缓存，根据我们的配置，强缓存过期后，浏览器会向服务器发出一个校验请求，如果服务器判断资源没有更新过，则通知浏览器使用缓存，也就是我们常说的 304 响应。Immutable但是在现代前端工程体系下，一个静态资源从发布之日起，可能永远也没有更新的需求了（更新后文件名/版本号/hash值等参数一定会变，也就是相当于一个全新的资源了）。但是即使我们配置了较长的 max-age ，用户在刷新页面的时候，浏览器依然会向服务器发出请求，在用户体量较大的时候，对网络资源也有着极大的浪费。按照 Facebook 的统计，大约有 20% 的请求是响应了 304 的。为此， Facebook 建议给Cache-Control增加一个新的属性：dont-revalidate，在响应头里加入该字段表示该资源永不过期，不需要再发送条件请求。这个字段最终被 Firefox 49 根据Cache Control Extensions规范实现为一个Behavioral extension：immutable。我们可以这样使用：1Cache-Co ...继续阅读 (15)

本文基于 Webpack@4.28.3 版本在现代前端工程中，为了更有效的利用浏览器和 CDN 的缓存，我们通常会给静态资源设置一个比较长的缓存时间（cache-control等），在有内容更新的时候，通过在静态资源路径中加入 hash 的方式来实现。具体可以参考这里：大公司里怎样开发和部署前端代码？。但是在 Webpack 中，实现可靠的长期缓存并不容易。在 github 上，关于这个问题的issue已经讨论了三年之久。在 Webpack 4 时代，我们终于看到了一点希望。我们从一个最基础的 Webpack 配置开始：基础配置123456789101112// webpack.config.jsconstpath =require('path');constwebpack =require('webpack');module.exports = {entry: {main:'./src/app',},output: {path: path.join(__dirname,'build'),filename:'[name].[hash:8].js'}};构建一下，得到如下结果：123Asset Size Chunks Chunk Namesapp.23b699d1.js 115 K ...继续阅读 (23)

最近看到了美团的前端团队的一篇文章，文中提到前端发布仅需10秒，默默的看了一下我们自己的发布时间。。。先定一个小目标，争取把 Webpack 的打包时间优化到10秒以内吧。先看一下现在打包一次需要的时间，73013ms，下面开始一步一步见证奇迹：730130. 模块分析有很多工具提供了可视化的分析，如Webpack-bundle-analyzer、webpack-chart、webpack-analyse。以Webpack-bundle-analyzer为例，它提供了一个下图所示的图表，展示了引入的所有模块的大小、路径等信息，可以针对性的做出优化。Webpack-bundle-analyzer使用上也很简单：12// 安装：npm install webpack-bundle-analyzer --save-dev12345678910111213141516// webpack.config.js 配置constBundleAnalyzerPlugin =require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins: [newBundleAnalyzerPlugin({analyzerMode:'server',analyzerHost:'127.0.0.1',analyzerPort:8888,repo ...继续阅读 (33)

node 模块现状在我们执行 npm install 时，npm 会做出如下操作：向 registry 查询获取模块的地址根据 package.json 中的配置确定需要安装的模块版本下载对应的压缩包，存放在~/.npm目录解压压缩包到当前项目的node_modules目录而在 Node.js 中，我们提供给 require 方法的参数如果不是一个路径，也不是 node 的核心模块， node 将试图去当前目录的 node_modules 文件夹里搜索。如果当前目录的 node_modules 里没有找到， node 会继续试图在父目录的 node_modules 里搜索，这样递归下去直到根目录。这些过程都需要进行大量的文件 I/O 操作，这无疑是非常低效的。为了解决这些问题，Facebook 提出了 Plug’n’Play(PnP) 方案。PnP 原理在 Yarn 中，当我们开启 PnP 后，Yarn 会生成一个.png.js文件来描述项目的依赖信息和所需模块的查找路径。同时，项目目录下不再需要一个 node_modules 目录，取而代之的是一个全局的缓存目录，项目所需依赖都可以从这个目录中获取。使用方法可以在项目目录下执行yarn --pnp，或直接在 package.json 中修改如下字段开启 PnP：12345{"installConfig": {" ...继续阅读 (17)

常用命令1$ npm init / install / uninstall / update12$ npm ls$ npm list -g --depth 012npm configsetproxy xxx.comnpm config list1234$ npm outdatedPackage Current Wanted Latest Location@commitlint/cli 7.1.1 7.5.2 7.5.2test@commitlint/config-angular 7.1.1 7.5.0 7.5.0test1234567891011121314151617$ npm view @test/test-util@test/test-util@0.3.101 | ISC | deps: none | versions: 242dist.tarball http://rnpm.hz.netease.com/@test/test-util/download/@test/test-util-0.3.101.tgz.shasum: a10f3595eb4cbbdd ...继续阅读 (18)

我们知道，ES2015+ 在低版本浏览器中存在严重的兼容问题，为此前人们尝试了各种方式：Shim/Sham在远古时代的代码中，我们可能看到过这样的处理：12shim仅依靠旧版浏览器中现有的 API，实现了一些新版本 ES 的特性，而sham则是仅仅为了保证新版本特性能在浏览器中不抛出错误（因为有些新特性在低版本浏览器中根本无法实现）。Babel为了彻底解决上面的问题，Babel诞生了。Babel 这个名字指的是巴比伦文明里面的通天塔，在那里，人们只说同一种语言。而在前端工程中，我们可以依靠 Babel 将 ES6+ 的语法转换为旧浏览器可以识别的版本。在浏览器端，Babel 提供了一个运行时的转换器babel-standlone，它内置了大量的插件，所以可以直接在浏览器中运行并编译特定标签（type=”text/babel” 的 script 标签）内的代码。而在 Webpack 中，我们则可以使用babel-loader来完成语法的转换。Polyfill但是 Babel 并不是万能的，它默认只转换 JavaScript 语法，而不转换新的 API，比如 Promise、Set、Map 等全局对象， Array.from、Object.assign 等全局静态函数和 Array.prototype.includes 等 实例方法也不会被转码。为了解决这个问题，我们需要使用 poly ...继续阅读 (21)

如无特殊说明，本系列中涉及的操作系统版本均为CentOS 7.3安装Node.js使用官方已编译包安装首先到官网https://nodejs.org/download/release/找到需要的版本，此处以v7.9.0为例：1234wget https://nodejs.org/download/release/latest-v7.x/node-v7.9.0-linux-x64.tar.gzsudo tar --strip-components 1 -xzvf node-v* -C /usr/localnode -v#v7.9.0下载对应的包并解压安装至/usr/local安装完成后可运行node -v，返回版本号即安装成功。如果服务器在国内，安装完成之后可以使用淘宝镜像来加速：1npm config set registry https://registry.npm.taobao.org从源码编译安装在某些版本的系统中使用这种方法安装可能需要先安装相关的依赖：1yum install gcc gcc-c++ kernel-devel首先到官网http://nodejs.org/dist/（注意：源码下载路径和已编译版本下载路径不同）找到需要的版本，此处以v7.9.0为例：12345678wget http://nodejs.org/dist/v7.9.0/node-v7.9.0- ...继续阅读 (13)

写在最前本文是运维从零单排系列的第二篇，文中配置环境要求OpenSSL 1.0.2k及以上，Nginx 1.12.0及以上（由1.0.2k及以上版本的OpenSSL编译），Nginx和OpenSSL的安装可参考：运维从零单排（一）—— 服务器环境配置（安装Nginx、Node.js、OpenSSL）HTTPS已经几乎成为了现代网站的标配，开启HTTPS需要申请SSL证书。SSL证书主要有以下几种：SSL证书类型DV证书（Domain Validation Certificate）只提供对数据的加密，但是对提供证书的个人和机构的身份不做验证，申请证书时，CA只验证域名信息，10分钟内即可签发，适合一般个人网站/博客等。OV证书（Organization Validation Certificate）OV SSL 提供了对个人或者机构的审核，申请证书时需要公司信息，1-2天签发。EV证书（Extended Validation Certificate）EV SSL证书遵循全球统一的严格身份验证标准，是目前业界安全级别最高的顶级 (Class 4级)SSL证书。适合金融证券、银行、支付等重点强调网站安全、企业可信形象的网站。Let’s Encrypt 证书申请Let’s Encrypt是一个免费的，自动化的，开放的证书颁发机构（CA），它是互联网安全研究小组提供（ISRG）的一个服务，有 ...继续阅读 (16)

暴露在公网中的服务器如果不限制SSH登录会引来大量暴力尝试密码的攻击，可以使用如下命令查看尝试登录的IP和次数：1cat /var/log/secure | awk '/Failed/{print $(NF-3)}' | sort | uniq -c | awk '{print $2" = "$1;}'随手截了一段我刚买的服务器：1234567891011121314151617181920123.207.2.166 = 6170.79.153.149 = 6177.200.194.37 = 9181.196.82.186 = 6181.211.179.110 = 6182.100.67.4 = 5502182.45.99.211 = 6183.128.48.94 = 6183.155.130.103 = 6183.157.67.23 = 1183.179.172.245 = 6186.130.13.198 = 24186.178.14.84 = 6190.37.156.44 = 6190.51.7.4 = 3035.154.73.11 ...继续阅读 (16)

随着项目的发展，项目目录会越来越大，各种库也会越来越多，会直接导致Webpack的构建效率极低，比如下面的例子：1234567$ webpackHash: 6aa4a418e100b6563347Version: webpack 3.5.5Time: 20199msAsset Size Chunks Chunk Namesindex.js 4.27 MB 0 [emitted] index+ 395 hidden modules可以看到，在这个项目中有大量的模块，构建一次的时间长达20秒，这显然是不可接受的。慢在哪里有很多工具提供了可视化的分析，如Webpack-bundle-analyzer、webpack-chart、webpack-analyse。以Webpack-bundle-analyzer为例，它提供了一个下图所示的图表，展示了引入的所有模块的大小、路径等信息，可以针对性的做出优化。Webpack-bundle-analyzer使用上也很简单：12// 全局安装：yarn global add webpack-bundle-analyzer12345678910111213141516// webpack.config.js 配置const BundleAnalyzerPlug ...继续阅读 (21)

1月25日，Webpack 发布了 4.0.0-beta.0 版本，做了较大改动。我们第一时间来体验一下。安装1npm install webpack@next webpack-cli --save-devWebpack 团队切出了next分支来开发 Webpack 4，原有的master分支将继续 3.x 版本的维护。新特性大幅度提升了构建性能默认情况下，使用production模式时，会使用UglifyJS自动并行处理压缩工作并缓存。发布了一个新的插件系统（https://github.com/webpack/tapable），可以更有效的处理插件。不再支持 Node 4，从而可以大量使用ES6，对V8引擎也进行了一些优化。向 parcel 看齐 —— 0配置在 Webpack 4 中，不再强制要求指定 entry 和 output 路径。webpack 4 会默认 entry 为./src，output 为./dist。也就是说，我们可以不再需要一个庞杂的webpack.config.js了。提供默认模式选择现在在 Webpack 中，需要手动选择生产模式（production）和开发模式（development）。生产模式中，提供了各种各样的优化，如代码压缩、作用域提升、移除未引用代码（tree-shaking）等，同时还引入了一些如NoEmitOnErrorsPlugin ...继续阅读 (15)

BBR是 Google 提出的一种新型拥塞控制算法，可以使 Linux 服务器显著地提高吞吐量和减少 TCP 连接的延迟。升级内核开启 BBR 要求 4.10 以上版本 Linux 内核，可使用如下命令查看当前内核版本：1uname -r可以得到类似如下的结果：13.10.0-514.10.2.el7.x86_64如果当前内核版本低于 4.10，可使用 ELRepo 源更新：123sudo rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.orgsudo rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpmsudo yum --enablerepo=elrepo-kernel install kernel-ml -y安装完成后，查看已安装的内核：1rpm -qa | grep kernel得到结果如下：123456kernel-3.10.0-123.el7.x86_64kernel-headers-3.10.0-514.16.1.el7.x86_64kernel-ml-4.11.0-1.el7.elrepo.x86_64kernel-tools-3.10.0-5 ...继续阅读 (21)

域名发散在PC时代，为了保护服务器，浏览器对最大并发数进行了限制，例如 Firefox46 中每一域名下最大连接数为6，IE10 下为8。为了突破这一限制，可以将静态资源置于多个域名下，来提高并发数，使得资源加载速度更快。同时，可以将不需要发送 Cookie 的请求与主域区分开，可以有效减小请求头大小，使得传输速度更快。域名收敛我们知道，在浏览器地址栏内输入一个域名并回车以后，第一步执行的就是DNS解析，将网址转换为IP地址，然后才能开始TCP握手。DNS解析过程如下：查找浏览器DNS缓存，如果没有相应的记录， → 2查找操作系统DNS缓存，如果没有， → 3查找HOSTS文件，如果没有， → 4请求ISP的DNS Server， → 5从的根域名服务器开始，依次请求顶级域的权威服务器 、二级域服务器等，获取IP地址由于移动端存储空间成本、人为干扰等因素，缓存失效的可能性极高，而如果没有缓存，在移动网络等弱网环境下，DNS解析耗时将变得很长（通常要达到1秒以上）。对于静态资源域名，JS等资源的加载缓慢将直接阻塞页面渲染。所以，为了减少 DNS 请求的时间，收敛域名也成为了性能优化的重要方面，同时收敛域名也有利于更好的利用缓存。HTTP2在域名收敛之后，为了解决浏览器同域名下的并发数量限制，可以启用HTTP2（由于新协议中的 Header 压缩等原因，速度要快于SPDY）。在HTTP ...继续阅读 (22)