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
CSS loading animation
@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 <a href='https://codepen.io/xgqfrms/pen/gOPQbmj'>css loading animation</a> by xgqfrms (<a href='https://codepen.io/xgqfrms'>@xgqfrms</a>) on <a href='https://codepen.io'>CodePen</a>.
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!