油管视频：How is this Website so fast!?
这是两周前的一个视频，当时并没什么兴趣看，因为无非就是纯html构成+CDN等手段，但看到好几个大佬在讨论这个网站和视频，所以索性打开看了下。
总结下McMaster Carr网站速度快的原因:
1.服务器渲染HTML
2.预渲染预加载
3.组件化
4.大量使用本地+CDN缓存
5.使用Sprite图像处理技术
6.每个页面只加载需要的js和css
比较有趣的是，该网站使用asp.net开发，很多html标签特性的使用方式值得学习，比如link标签的使用:
<link rel="dns-prefetch" href="//www2.mcmaster.com"/>
<link rel='preload' href='https://images1.mcmaster.com/init/gfx/MastheadLogo.svg?ver=1545146094' as='image' type='image/svg+xml'/>
<link rel='preload' href='/init/Fonts/2D027A_0_0.woff2?ver=1622213662' crossorigin='anonymous' as='font' type='font/woff2'/>看到这代码，我才想起来，link的rel有多种不同值。。。
同时还用了很古早的Sprite图像处理技术，我都忘记了还有这种图像处理方式，即将多个小图片合并成一个较大的图片，以此减少HTTP请求的数量，提高网页加载速度
发表回复