面试官:为什么希望index.html小于14KB

42 阅读3分钟

endtimes.dev/why-your-we… 阅读原文如上

总结

TCP的慢开始逻辑,即刚开始建连的时候,会让窗口带宽为1MSS,大约是10 TCP包

而10TCP包 = 10 * 1 个TCP包 = 10 * 1500byte ~ 15kb;

而一个TCP包头的大小为:16bytes + 24bytes = 40bytes;

故而可以存放数据的空间为 10 * (1500 - 40 ) ~ 14KB

TCP 慢开始

  • 慢开始

第一次发送包的时候,拥塞窗口为1Crwnd;

第一个包成功回包之后,以指数倍增加,直到达到门阀,再线性增加;

image.png

TCP相关内容:juejin.cn/post/740176…

实际现在HTTPS

www.tunetheweb.com/blog/critic…

HTTP/2和HTTPS的影响

  • HTTP/2:多路复用特性允许多个资源同时通过单个连接传输,改善了资源加载效率。

  • HTTPS:虽然HTTPS会增加初始连接的开销,但它是现代Web的标准,提供了安全性和HTTP/2的支持。

原文总结

为什么保持网站文件大小小于14KB很重要?

  1. 提高加载速度

    • 用户期望:用户期望网站能快速加载,尤其是在移动设备上。如果页面加载时间超过3秒,超过一半的用户可能会离开。
    • 降低跳出率:加载速度快的网站能有效降低跳出率,增加用户在网站上的停留时间和互动机会。
  2. 移动设备和慢速网络

    • 移动优先:随着移动互联网的普及,越来越多的用户通过移动设备访问网站。移动网络的速度和稳定性往往不如有线网络,因此小文件大小尤为关键。
    • 数据成本:在某些地区,移动数据成本较高。较小的文件大小可以节省用户的数据流量费用。
  3. SEO(搜索引擎优化)

    • 搜索引擎偏好:搜索引擎,如Google,优先考虑加载速度快的网站。较小的文件大小可以提升网站的搜索排名。
    • 用户行为:较快的加载时间可以提高用户在网站上的互动,减少跳出率,这些行为数据也会被搜索引擎考虑在内,有助于SEO。
  4. 节省带宽和成本

    • 降低服务器负载:较小的文件大小可以减少服务器的带宽使用和处理时间,降低服务器负载和运营成本。
    • 提高可扩展性:对于流量大的网站,小文件大小可以提升整体性能和用户体验。

如何实现小于14KB的文件大小?

  1. 优化图像

    • 压缩图像:使用工具如TinyPNG、ImageOptim等压缩图像文件,尽量选择WebP等高效图像格式。
    • 延迟加载:采用懒加载技术,只在用户滚动到相关位置时才加载图像。
  2. 精简代码

    • 移除不必要的注释和空白:通过工具如UglifyJS、CSSNano等压缩和精简HTML、CSS和JavaScript代码。
    • 使用CSS精灵图:将多个小图标合并为一个图像文件,减少HTTP请求数量。
  3. 使用CDN(内容分发网络)

    • 加速全球访问:CDN可以将网站内容缓存到全球多个节点服务器上,用户访问时从最近的节点获取内容,提升加载速度。
  4. 缓存技术

    • 浏览器缓存:设置合理的缓存头,让浏览器缓存静态资源,减少重复加载。
    • 服务器端缓存:使用如Varnish、Redis等缓存技术,在服务器端缓存动态内容,减少数据库查询和计算。
  5. 使用现代Web技术

    • HTTP/2:利用HTTP/2的多路复用功能,提升资源加载效率。
    • 服务端渲染(SSR):对于动态内容,使用服务端渲染,减少客户端的计算和渲染时间。