打造vue3的历程

本文翻译转载自https://increment.com/frontend/making-vue-3/

重写下个Vue.js下一个主要版本的收获

在上一年,vue团队一直在开发vue3这个版本,我们希望在2020的上半年发布。(在写这篇文章的时候,我们还在开发中)。新版本功能定型在2018年末,vue2已经有两年多没有大的更新。对于一般的软件来说,这个时间不算长,但是前端有很多东西发生变化。

重写vue有两个关键原因,第一,javascript 新特征,主流浏览器都支持的不错,第二点,当前版本的设计和架构问题有很长时间没有解决了。

阅读 “打造vue3的历程” 发表评论

圣杯布局

圣杯布局示意图

对css的关注比较少,疫情期间,最近同事远程面试聊起圣杯布局,我不知道什么叫圣杯布局,表面上对其不屑,当查了相关文档,其实发现自己除了flex 布局来实现对应的逻辑,利用float来布局,我自己是实现不了,当然我也不能落后,那我们来扒一扒圣杯布局的来龙去脉。

阅读 “圣杯布局” 发表评论

IntersectionObserver 与无限滚动列表

无限滚动在实际项目中用到很多,比较在vipkid 数字图书馆的的书库这个业务中,就用到滚动加载,如下视频所示

无限滚动

正常思路是,我们监听scroll事件,当滚动条滑到底部的时候,触发加载,请求数据,将新数据插入尾部。

这里面,我们会碰到两个问题,

  • 1.一个是scroll 事件的触发,会触发的非常频繁,
  • 2.dom节点会越来越多
阅读 “IntersectionObserver 与无限滚动列表” 发表评论

她是谁,估计从来就没有出现过,也许没有

发表评论

数图项目添加PWA特性记录

在vipkid工作两年多,项目要求80%的用户能达到1s秒开,数图项目加载优化进行了很多变,从协议到图片裁剪到 dns prefetch 关键资源 preload 等等一系列操作,平均用户首页的加载时间为1130ms .

但是满足80%的用户达到秒开,始终差了那么一点点,这个周六周日,抽出时间利用worbox 来为数图增加pwa 特性,看看是否能够帮助项目完成指标,周一进行上线。

待续

发表评论

最大内容绘制(Largest Contentful Paint)译

原文链接:https://web.dev/largest-contentful-paint/

Largest Contentful Paint 这个指标让我们知道一个页面的重要的内容变得更加容易。

一直以来,对于web开发者来说,测量一个web页面的主要内容加载多快,渲染的速度多快,是个挑战。

老的测量指标,例如load DOMContentLoaded 并不算一个好的测量指标,这个指标并不能清楚的测量用户在屏幕上看到了什么。performance 中的First Paint(FTP) 和 First Contentful Paint(FCP) 仅仅只能捕获加载阶段的最初页面。如果一个页面正在展示启动页面,或者加载进度条,这个东西其实与用户无关。

阅读 “最大内容绘制(Largest Contentful Paint)译” 发表评论

gzip与brotli压缩算法对比

网传的压缩比

上面这幅图是比各种无损压缩算法的压缩比,其中提到brotli压缩比gzip的要高。最近一直搞新版数图首页的优化,新版数图的首页各种资源加起来有3.6MB ,各种优化手段都使用上,基本上连1个RTT的时延都不想放弃,当然经过有,数图首页的加载时间基本上平均在948ms内。其中利用到阿里云的cdn服务。

阿里云目前的cdn服务开始支持quic协议(实验性质的),目前这个估计是在收集用户数据。和运维的同学一系列的沟通,终于说服他们在这个星期开启了cdn 支持TLS1.3协议并开启brotli压缩算法

阅读 “gzip与brotli压缩算法对比” 发表评论

在wireshark中查看https http2包内容的配置方法

当我们web服务启用TLS协议之后,我们通过wireshark抓包是无法查看应用层的数据的,看到的是加密过后的数据。这个时候如果我们拥有https网站的加密私钥,我们可以来解密改网站的加密流量,此外Firfox 和Chrome支持将TLS会话中使用的对称密钥保存在文件中,这个可以为wireshark使用,也可以查看TLS加密的数据。现在我们来看第二种方式操作方式。

阅读 “在wireshark中查看https http2包内容的配置方法” 发表评论