HTTP vs HTTP/2 vs HTTP/3 (QUIC)
2024-10-14 03:39:30
HTTP vs HTTP/2 vs HTTP/3 (QUIC)
Nginx
HTTP/1.1
HTTP/2
HTTP/3 (QUIC)
HTTPS
计算机网络协议
- OSI 协议簇 (7)
- TCP/IP 协议簇 (4)
refs
https://http3-explained.haxx.se/en/h3/h3-h2
https://http3-explained.haxx.se/zh
https://blog.cloudflare.com/http-3-vs-http-2/
https://blog.cloudflare.com/http3-the-past-present-and-future/
https://www.toptal.com/web/performance-working-with-http-3
https://www.digitalocean.com/community/tutorials/http-1-1-vs-http-2-what-s-the-difference
https://www.nginx.com/blog/introducing-technology-preview-nginx-support-for-quic-http-3/
https://jirak.net/wp/introducing-a-technology-preview-of-nginx-support-for-quic-and-http-3/
https://labs.tadigital.com/index.php/2019/11/28/http-2-vs-http-3/
SVG image placeholder
<svg class="object-cover w-full h-64 lg:h-96 overflow-hidden text-gray-200 fill-current dark:text-dark-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm11 9l-3-3-6 6h16l-5-5-2 2zm4-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path>
</svg>
CSS loading animation
<div id="loader">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
@charset "UTf-8";
/* css-loading.css */
:root {
--color: #000;
--default-color: green;
--new-color: #0f0;
}
body {
background: #121212
}
#loader {
width: 500px;
position: absolute;
text-align: center;
left: calc(50% - 250px);
top: calc(50% - 10px)
}
#loader .square {
display: inline-block;
height: 10px;
width: 10px;
margin: 10px;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,.3);
animation: bouncer cubic-bezier(.455,.03,.515,.955) .75s infinite alternate
}
#loader .square:nth-child(5n+1) {
background: #0F9;
animation-delay: 0
}
#loader .square:nth-child(5n+2) {
background: #0CF;
animation-delay: calc(0s + (.1s * 1))
}
#loader .square:nth-child(5n+3) {
background: #93F;
animation-delay: calc(0s + (.1s * 2))
}
#loader .square:nth-child(5n+4) {
background: #F66;
animation-delay: calc(0s + (.1s * 3))
}
#loader .square:nth-child(5n+5) {
background: #FFF35C;
animation-delay: calc(0s + (.1s * 4))
}
@keyframes bouncer {
to {
transform: scale(1.75) translateY(-20px)
}
}
See the Pen css loading animation by xgqfrms
(@xgqfrms) on CodePen.
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- Linux shell之sed
- Timer中schedule()的用法
- unity3d 截屏
- [itint5]两有序数组的交和并
- ubuntu错误解决。
- 后台js
- meta的属性详解
- Codeforces Round #364 (Div. 2) C.They Are Everywhere
- SVN的安装以及和eclipse的结合使用
- JQuery td内容获取，修改
- TypeError: 'Item' object has no attribute '__getitem__'
- 云数据库POLARDB优势解读之①——10分钟了解
- Content Security Policy介绍
- 日常英语---八、REBOOT - What is the difference? -MapleStory
- git 对比两个commit 之间的差异
- 『Yaml』配置文件读写包
- Selenium自动化测试Python六：持续集成
- CentOS6.8下安装MySQL5.6
- 解题：SCOI 2005 骑士精神
- uchome 缓存生成