缓存的外部JavaScript文件如何提升HTML页面加载速度？内联JS是否更快？

你这个疑问只在用户首次访问站点，且本地没有对应外部JS缓存的场景下成立，缓存带来的加载速度优势主要体现在后续重复访问、同站点跨页面访问的场景下，具体原理可以拆分为几个层面：

• 首次访问的性能对比：如果是用户第一次访问你的页面，本地无任何相关缓存，内联JS的加载速度确实通常更快。这种场景下浏览器只需要拉取1个HTML文件，不需要额外发起HTTP请求拉取外部JS，省掉了HTTP请求握手、等待响应的开销，当JS体积较小时，内联的优势会更明显。如果站点使用HTTP/2协议，多路复用特性已经大幅降低了多请求的开销，这种场景下外部JS和内联JS的首次加载差距会被进一步缩小。
• 缓存生效后的性能优势：当用户已经访问过一次站点，对应外部JS已经被缓存到本地之后，后续再访问该页面、或者访问同站点其他引用了同一个JS的页面时，浏览器不需要重新下载这个JS文件，直接从本地缓存读取即可。此时HTML本身的体积远小于内嵌了全量JS的版本，HTML下载耗时更短，整体加载速度会远高于每次都要加载内嵌全量JS的HTML。
• 生产环境的收益权衡：大部分正式上线的站点，用户重复访问、跨页面跳转的占比远高于纯首次访问的占比，而且很多通用的基础JS（比如工具库、公共组件逻辑）会在全站数十甚至上百个页面共用，这种场景下使用外部缓存JS的长期收益，会远高于首次访问内联带来的短期收益。

目前行业内也有常见的折中优化方案：把首屏渲染必须的核心逻辑做内联，非首屏、公共通用的JS仍然走外部缓存的方式，兼顾首次加载和后续访问的速度。

内容的提问来源于stack exchange，提问作者Abhishek Bhattarai