Day: 2021年10月10日

Web页面子资源完整性校验详细指南

Web页面子资源完整性校验详细指南

cover

时间过得好快,距离上一篇文章动手写一个简单的编译器:在JavaScript中使用Swift的尾闭包语法发布已经过去快半年了,这半年时间也一直在想着按时更新文章;但是因为工作和生活的琐事,没有能够坚持下来。有点惭愧,感觉之前年初立下的计划快要实现不了了。希望接下来的这一段时间能够坚持更新文章吧。…

从 0 到 1 亿用户的架构设计

图片

Kirill Sh@Unsplash

高可用架构设计最核心的就是两点:解耦和冗余。解耦包括业务状态分离(无状态架构设计)、分库分表等。冗余包括缓存、CDN、主从备份、主主备份、GeoDNS 等。一个好的架构设计需要在产品迭代的不同阶段选择合适的技术,从而既能在合理的成本条件下有效保障当前的业务需求,又能考虑到业务下一步发展的可能性。原文链接:[How to design a system to scale to your first 100 million users](https://levelup.gitconnected.com/how-to-design-a-system-to-scale-to-your-first-100-million-users-4450a2f9703d)

对于软件架构师来说,设计一个支持数亿用户的系统是一个巨大的挑战(不过在读了这篇文章后,也许就没那么难了)

以下是本文涉及的一些主题:

  • 从最简单的开始:单体架构

  • 可伸缩性的艺术:水平扩展(scaling out),纵向扩展(scaling up)

  • 关系型数据库的可扩展性:主从备份、主主备份、联合、分片、去规范化和 SQL 调优

  • 数据库选型:NoSQL 还是 SQL?

  • 高级概念:缓存、CDN、GeoDNS 等

我们暂时不讨论高性能计算中的其他常用术语,比如容错、可靠性、高可用性等。

让我们平静一下,旅程即将开始!

从 0

漫画图解JWT设计单点登录系统

JSON Web Token(JWT)是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。

让我们来假想一下一个场景。在A用户关注了B用户的时候,系统发邮件给B用户,并且附有一个链接“点此关注A用户”。链接的地址可以是这样的

1
https://your.awesome-app.com/make-friend/?from_user=B&target_user=A

上面的URL主要通过URL来描述这个当然这样做有一个弊端,那就是要求用户B用户是一定要先登录的。可不可以简化这个流程,让B用户不用登录就可以完成这个操作。JWT就允许我们做到这点。

JWT的组成

一个JWT实际上就是一个字符串,它由三部分组成,头部载荷签名

载荷(Payload)

我们先将上面的添加好友的操作描述成一个JSON对象。其中添加了一些其他的信息,帮助今后收到这个JWT的服务器理解这个JWT。

1
2
3
4
5
6
7
8
9
{
    "iss": "John Wu JWT",
    "iat": 1441593502,
    "exp"

11s到⚡1s,性能优化之首屏加载

全文共6511字/词,阅读大概需要13分钟,太长不看党请直接移步「开始优化」部分直接查看优化手段

背景

前段时间公司服务器网络波动,网站访问变慢,一些性能问题也随之暴露了出来。纷纷反馈在这样的弱网条件下,访问新项目时,加载了近1分钟都没加载出来,而访问其他页面顶多也就30-40s。

在网络恢复后,尝试访问了下页面,无缓存首次打开需要等待近11s的时间,最大的资源达到了3.7M...

在对项目做了一些优化处理后,再次无缓存打开可以发现网页几乎是秒开,平均耗时在1s以内

在这里总结记录一下,基本上都是一些常规可复制的优化手段,希望能为同样想优化网页性能的你提供思路~

优化效果

Network

Slow3G条件下22-25s加载完成

lighthouse

hiper

关于性能优化

在开始之前,我们需要明白一个原则:性能优化的最终目的是提升用户体验
简而言之就是让用户感觉这个网站很「快」(至少不慢hh),这里的「快」有两种,一种是「真的快」一种是「觉得快」

  • 「真的快」:可以客观衡量的指标,像网页访问时间、交互响应时间、跳转页面时间
  • 「觉得快」:用户主观感知的性能,通过视觉引导等手段转移用户对等待时间的关注

做好这两方面都能提升用户对网站的性能评价。

权衡取舍

另外就是软件工程没有银弹,一种优化方案可能适用于大多数项目,但是某些特殊情况下很可能会起反效果。

举个,由于浏览器有单域名下并发请求限制,通常我们会将依赖统一打成一个vendor包(vue-cli默认策略),减少首屏请求数,且依赖不变动的情况下文件指纹不变,可以有效利用304缓存。在依赖不多的情况这么处理确实有助于提升加载速度,但一旦依赖多起来,vendor就会特别的大,在弱网条件下,会严重拖慢页面显示。这显然不是我们想要的,所以我们根据情况会对vendor进行拆分,比如拆分到CDN,或者直接拆分到页面中

因此,我们在做性能优化过程中,必须根据最终能给用户体验带来的提升权衡后做出适合当前项目的选择

指标和目标

目标会影响我们在过程中的决策
指标则用来度量我们的目标

目标

首先我们需要确定目标,根据场景和项目复杂度不同,制定的目标也不同,比如希望比竞品快20%,或者符合标准的"2-5-10"原则等等

这里我定下的目标是

  • 正常网速下,2s内加载完成
  • 弱网下,30s内加载完成

指标

关于指标这块,简单介绍下常见指标

  • FCP(First
    

前后端接口鉴权全解 Cookie/Session/Token 的区别

不知不觉也写得比较长了,一次看不完建议收藏夹!本文主要解释与请求状态相关的术语(cookie、session、token)和几种常见登录的实现方式,希望大家看完本文后可以有比较清晰的理解,有感到迷惑的地方请在评论区提出。

众所周知,http 是无状态协议,浏览器和服务器不可能凭协议的实现辨别请求的上下文。…