2017年，我们推出了两款网络优化产品——幻影和火箭装载机——速度更快！这些产品加在一起，每周可以加速12亿个网页。这两款产品都有5年左右的历史，因此有一个很大的机会来更新它们，以适应高度调整的浏览器、HTTP2和现代Javascript工具的新世界。我们测量了一个性能提升，大致上可以在50-700毫秒之间节省访问我们网络上网站的访问者。谷歌等研究显示，浏览内容更快的访问者的参与度更高，跳出率更低。这真的加起来，这意味着每年可以节省380年的加载时间和惊人的1.03兆字节的数据传输！自行车图片由迪蒙Blr在反闪光。海市蜃楼和火箭装载机做什么Mirage和Rocket Loader都通过减少和延迟浏览器在屏幕上完成HTML解析和呈现所需的资产数量来优化web页面的加载。海市蜃楼.有图像吗{溢出：自动；}@介质（最小宽度：600px）{.有没有图片p{浮动：左；宽度：50%；}.有图像图像图像{浮动：右；边距：1em；宽度：40%}}使用Mirage，使用低文件大小的占位符图像，移动连接速度慢的用户将快速显示一整页内容，这将大大加快加载速度。如果没有海市蜃楼的话，用户在缓慢的移动连接上必须等待很长时间才能下载高质量的图像。因为这需要很长时间，他们会认为你的网站速度很慢：有了幻影，访问者会更快地看到内容，因此会感觉到内容正在快速加载，并且不太可能放弃：火箭装载机在所有可能影响浏览器的Javascript加载并运行之前，浏览器不会显示这些内容。这意味着用户在看到任何内容之前都要等待相当长的时间，即使这些内容是他们访问页面的唯一原因！Rocket Loader透明地延迟所有Javascript的执行，直到页面的其余部分被加载。这使得浏览器能够尽快显示访问者感兴趣的内容。它们的工作原理这两个产品都涉及两个步骤：首先，我们的优化代理服务器将在交付时重写客户的HTML，然后我们的页面Javascript将尝试优化页面加载的各个方面。例如，Mirage的服务器端重写图像标记如下：

由于浏览器无法识别数据cfsrc，Mirage Javascript可以控制加载这些图像的整个过程。它利用这个机会在慢速连接上智能地加载占位符图像。Rocket Loader在页面加载期间使用类似的方法来取消Javascript的优先级，允许浏览器更快地向访问者显示页面内容。问题这两种产品的Javascript都是在几年前编写的，当时"rollup"让人想起了一个糟糕的生活方式选择，而不是一个优秀的构建工具。随着浏览器、协议和JS的巨大变化，我们有很多机会进行优化。动态地。。。放慢速度这两个产品都是为当时的生态系统而设计的，都是由Cloudflare的异步模块定义（AMD）加载程序CloudflareJS加载的，它还绑定了一些共享库。这意味着装载幻影或火箭装载机的过程如下所示：服务器端重写器在blocking script标记中插入CFJSCFJS运行，并查看页面上的一些配置，以在运行时决定是否通过AMD加载Rocket/Mirage，插入新的脚本标记火箭/幻影已装好并运行对抗浏览器动态加载意味着产品不能从现代浏览器的优化中获益。浏览器现在在接收HTML时扫描它，而不是等待它全部到达，尽快识别和加载外部资源，如脚本标记。这个过程称为预加载扫描，是浏览器执行的最重要的优化之一。因为我们在CFJS中使用了动态代码来加载Mirage和Rocket Loader，所以我们阻止它们从预加载扫描仪中获益。更糟糕的是，Rocket Loader是使用domapi的恶棍动态插入的，文档.写入-一种产生巨大性能问题的技术。完全理解为什么会涉及，所以我创建了一个图表。浏览一下，然后在阅读下一段时再参考：如前所述，使用文档.写入插入脚本对页面加载性能尤其有害。自从文档.写入插入脚本对预加载扫描仪是不可见的（即使脚本是内联的，我们的不是，预加载扫描甚至不尝试扫描JS），在插入它的瞬间，浏览器就已经忙于请求扫描仪在页面其他地方找到的资源（其他脚本标记、图像等）。这一点很重要，因为遇到非延迟或异步Javascript（如Rocket Loader）的浏览器必须阻止DOM树的所有进一步构建，直到加载并执行该脚本，这样脚本才有机会修改DOM。所以Rocket Loader是在加载速度非常慢的瞬间插入的，这是由于预加载扫描的请求积压，因此在DOM解析器可以恢复之前会造成很长的延迟！除了这个严重的性能问题外，更迫切的是要消除它文档.写入当Chrome在55版开始干预时，引发了一场非常有趣的讨论。这种干预有时会阻止Rocket Loader被插入到缓慢的2G连接上，根本阻止任何其他Javascript加载！很明显，文档.写入需要被铲除！未使用和超出通用代码CFJS是作为Cloudflare客户端代码的共享库编写的，包括最初的Cloudflare应用程序商店。这意味着它有相当大的一组api。虽然海市蜃楼和火箭装载机都依赖于其中的一些，但重叠实际上很小。自从我们发布了新的、闪亮的Cloudflare应用程序以来，CFJS没有其他依赖它的重要产品。行动计划在今年7月加入Cloudflare之前，我一直在从事TypeScript的工作，这是一种具有现代Javascript新语法的语言。接手多个AMD，基于ES5的项目使用Gulp和Grunt是有点震惊。我真的以为我已经写了我最后一个定义（['writing'，'very bug']，function（two，prove）{}），但我在2017年又看到了它！因此，它是非常诱人的做一个大爆炸重写和回来玩新的ECMAScript 2018玩具。然而，我已经参与了足够多的重写，知道它们很少是合理的，而是确定了我们需要提高性能的最高优先级的更改（尽管我承认我编写了一些git checkout-b typescript版本分支来发泄）。所以，计划是：识别并嵌入幻影和火箭装载机使用的CFJS部件生成CFJS其他依赖项的新版本（我们的logo-badget实际上是硬编码的，指向CloudflareJS）从AMD切换到Rollup（以及ECMAScript导入语法）避免创建新的共享库的决定可能会令人惊讶，尤其是树抖动可以避免依赖关系中未使用部分的代码大小开销。然而，与跨项目依赖性相比，稍微重复一点似乎没有那么糟糕，因为：使用的代码重叠很小总的来说，库样式函数是CFJS一开始变得太大的原因之一火箭装载机在未来有一些令人兴奋的事情。。。对于大多数应用程序来说，从缩小的+gzip压缩的Javascript文件中消耗数千字节是浪费时间的。然而，在您阅读本文时将实际运行数百万次的代码上下文中，这确实是值得的。我们将在2018年继续这一进程。关闭AMD关闭Gulp、Grunt和AMD是一个相当机械的替换语法的过程：define（['cloudflare/iterator'，'cloudflare/dom']，函数（iterator，dom）{// ...返回{海市蜃楼：海市蜃楼，};})使用ECMAScript模块，可以进行汇总，例如：从'./iterator'导入*作为迭代器；从"./connection"导入{ishightlatency}；// ...导出{Mirage}重构后权衡一旦项目使用的CFJS部分被内联到项目中，我们最终得到Rocket和Mirage都稍微大一些（所有数字都缩小了+gzip）：Mirage oldMirage新火箭加载器oldRocket Loader New010K20K30K40K附加依赖项文件.cls-1{fill:#3f4f75；}.cls-2{fill:#80cfbe；}.cls-3{fill:#fff；}绘出logo（函数（）{var x=['幻影旧'，'幻影新'，'旧火箭加载器'，'火箭加载器新']；变量跟踪1={x： x，y： [8019130292515131621]，name:'主文件'，type:'栏'};变量跟踪2={x： x，y： [21572,021572,0]，name:'附加依赖'，type:'栏'};var数据=[trace1，trace2]；var layout={barmode:'stack'，plot_bgcolor:'transparent'，paper\'bgcolor:'transparent'}；普洛特利.newPlot（"sizeChart"，数据，布局）；})();因此，相对于完全加载两个产品所需的原始文件大小，我们节省了大量的文件大小（大约是jQuery的一半）。新插入流之前，我们最初的插入流程是这样的：//嵌入页面，注入客户页面var cloudflare={rocket:true，mirage:true}；内部cloudflare.min.js我们发现了一个动态代码，一旦运行，就会启动对幻影和火箭加载器的请求：// cloudflare.min.js如果(cloudflare.火箭) {需要（"cloudflare/rocket"）；}我们的方法现在对浏览器友好得多，大致如下：//页面嵌入var cloudflare={/*一些配置*/}如果您比较新的插入序列图，您会发现为什么这样做更好：测量