JavaScript对移动Web性能的影响是双重的。在这里，英文网站设计专家万邦将分析以下观点给外贸建设技术人员：

一，它是网页权重的第二大贡献者，背后的图像，从而增加下载时间; 另外两个，一旦下载，浏览器就需要运行脚本，这可能会拖延页面上其他（也许更重要的）资产的下载/呈现。

JavaScript（也称为脚本或JS）是使网页（和Web应用程序）工作的技术之一。HTML（超文本标记语言）控制网页的结构和内容; CSS（Cascade Styling Sheets）控制网站在不同设备上的外观; JavaScript使页面更具互动性和动态性。


脚本在网页上执行大量功能，例如加载广告，A / B测试，标签管理（个性化页面）或显示内联视频播放器。

在过去五年中，发送到移动设备的页面总重量翻了四番，达到2.2MB。尺寸很重要，因为通常，通过移动或固定网络发送的数据越多，页面将需要加载的时间越长。更多的数据，更多的秒钟盯着一个空的移动屏幕。

这表明，图像（其每个页面的总千字节（KB）或兆字节（MB））更多是主要的祸根。但事实并非如此。

JavaScript可能会比图像对页面性能有更大的影响。作为网页性能测试网站WebPageTest和Google软件工程师的创始人Patrick Meenan 解释说：

“脚本通常是一个（较大的）问题，因为除了下载大小外，实际执行脚本所需的时间，而图像真的只是因为下载大小而重要。例如，使用移动设备，即使下载完毕，运行脚本也可能需要几秒钟。“ 
这不是JavaScript本身就是问题，但它是如何实现的：脚本可以垄断浏览器活动，阻止其他内容的下载和呈现（显示）。

“在页面中引用脚本时，问题往往更加复杂。直到脚本被下载和执行之后，浏览器就不存在'阻止'脚本（而不是异步脚本）之后的内容。当通常情况下，脚本放在页面的开始处，这意味着在脚本下载并执行之前，该页面将是完全空白的。“
我们将在下面讨论阻塞，内联，同步（同步），异步（异步）和延迟脚本之间的差异以及如何解决JavaScript问题，但首先我们将介绍如何发现问题。

测试阻止JavaScript

如果您已使用Google PageSpeed Insights测试您的网页（请注意，您应该使用WebPageTest和PageSpeed Insights等工具定期测试您的移动网页），您可能看到以下警告：

！应修复：

消除渲染阻止JavaScript和CSS在三重内容

您的页面有8个阻止脚本资源和7个阻止CSS资源。这会导致渲染页面的延迟。

您的页面上的任何内容都不能在不等待加载下列资源的情况下呈现。尝试延迟或异步加载阻止资源，或直接在HTML中嵌入这些资源的关键部分。
屏幕截图显示BBC.com使用PageSpeed Insights进行测试（如文中详述）。

上述文字和图片均来自于BBC.com在2017年2月进行的Mobile PageSpeed Insights测试。

注意“折叠之上”仅指在移动设备上可见的网页部分，无需滚动，Google不会在页面的其余部分分析脚本。

根据Alexa的说法，英国广播公司是世界上最受欢迎的英语新闻网站，所以在上下文中我们也应该测试其他人在前四名。结果表明，另外两个出版商与JavaScript有类似的问题。（测试也突出了CSS问题，但这不是文章的重点）：

BBC.com PageSpeed测试（8个阻止脚本; 7个阻止CSS资源）
NYTimes.com PageSpeed测试（0封闭脚本）
ESPN.com PageSpeed测试（2个阻止脚本; 3个阻止CSS资源）
CNN.com PageSpeed测试（6个阻止脚本; 2个阻止CSS资源）
五年来JavaScript使用量增长4倍

在过去五年中，平均手机页面上使用的JavaScript数量从2012年2月的101KB增加到2017年2月的387KB，翻了两番。请求次数（浏览器需要下载附加件的次数）的内容或代码）从不同的JavaScript文件已经从8增加到21。

来自HTTP Archive的下图显示了这一点。HTTP存档使用WebPageTest的数据每个月进行多次测试，并发布趋势和统计信息，这些都是您站点性能的基准。

图表显示了JavaScript在五年内的增长，从2012年2月的101KB增长到2017年2月的387KB。对于HTTP Archive监控的前100万个站点，JavaScript占页面重量的17.4％。在总共93个请求中，JavaScript也占21个（22.6％）。

对于某些网站，特别是在新闻领域，JavaScript的页面权重比标准版权大得多。

下面的图片比较了通过HTTP存档（2017年2月15日）测试的BBC.com的平均站点的内容类型的细分：

首先要注意的是，BBC页面大小是如何令人印象深刻：609KB v 2225KB。
第二件要注意的是BBC图像的组合大小有多小：70KB v 1501KB。
要注意的第三件事是脚本比例如何：页面大小的458KB或75.2％。
要注意的第四件事情（下图未显示）是BBC总共88个请求中的39个（44.3％）是脚本。
两个饼图将平均移动网站的内容细分与BBC进行比较。 英国广播公司网页的大部分比例是脚本。

比较四大英文新闻网站的测试结果时，BBC比对手要小得多。这是一个三分之一到一半的大小，减少了两到三倍的JavaScript。

BBC.com通过HTTP存档测试：脚本458KB（75.2％）的总数据为609KB; 共有167个请求中的39个JS请求（44.3％）。
NYTimes.com HTTP存档测试：脚本1511KB（51％）的总数据2953KB; 总共167个请求中有73个JS请求（43.7％）。（“纽约时报”纽约时报在mobile.nytimes.com上有一个专用的移动网站，它不会被HTTP Archive列​​出，可能会产生不同的结果。）
ESPN.com HTTP存档测试：脚本共有1803KB（65.7％）的总数据; 共有106个请求中有50个JS请求（47.2％）。
CNN.com HTTP存档测试：脚本1484KB（68％）的总数据2182KB; 总共210个请求中有67个JS请求（31.9％）。
移动页面速度有什么影响？

那么BBC网站的加载速度要比所有的竞争对手要快吗？

在2017年2月15日，HTTP存档记录了以下加载时间：

BBC.com：18.3秒
NYTimes.com：27.4秒
ESPN.com：8.8秒
CNN.com：31.5秒
因此，BBC在移动设备上的加载速度比CNN和纽约时报的速度要快，但比ESPN更大。

这就是两个网站在移动设备上的样子。（幻灯片是WebPageTest最具视觉吸引力的功能之一，任何非技术人员都很容易理解）。每帧代表1秒。当HTTP存档测试发生时，BBC.com移动访问者在9秒钟内没有看到任何内容，而ESPN访问者在4秒钟内没有看到任何内容。该图像显示BBC.com和ESPN.com主页在移动设备上加载的两个胶卷。

一些网站可能会比另一个网站更快，例如服务器响应时间，使用内容传送网络（CDN），广告网络的影响，包含第三方数据（在新闻站点上常见），或者测试的时间和地点（在这种情况下为美国加州）。

然而，所有其他事情是相等的，JavaScript可能是一个促成因素。（抱怨赌注的道歉）。如上所述，BBC.com确实收到了比其他新闻站点更多的阻止脚本的警告。

减少对JavaScript的依赖

JavaScript经常用于执行不能（轻松地）用HTML或CSS完成的任务。由于W3C逐渐将这些功能添加到HTML或CSS标准中，并且由浏览器实现，所以不再需要JavaScript补丁，因为HTML / CSS可能会更有效率。一个很好的例子是响应图像。

NCC集团网络绩效顾问Alex Painter：

“通常来说，值得坚持逐步增强的原则 - 提供一个无需JavaScript的网站，并仅使用脚本，仅用于无法以其他方式完成的额外功能。

“使用JavaScript来渲染内容可能是昂贵的 - 加载和执行需要时间。所以，例如，如果您可以使用HTML和CSS来实现相同的结果，那通常会更快。

 “例如，对于响应式图像，您可以在CSS中使用媒体查询，并在HTML中使用图片/ srcset来为视口提供正确的图像，而不依赖JavaScript。
选择异步和延迟JavaScript的阻止和内联脚本

JavaScript可以在网页上实现，包括：
封锁脚本是同步的，这意味着它们必须立即处理，而不是其他任何事情。默认情况下，所有JavaScript都是解析器阻止。由于浏览器不知道该脚本将对该页面执行什么操作，因此一旦满足请求（在HTML文件中）即可下载JavaScript文件，它将停止构建网页，直到该文件下载为止，并且不会继续执行。

内联脚本也会停止页面构建，但是由于它们包含在HTML中，因此不需要单独下载。然而，内联脚本太大或太多会导致HTML文件的初始下载延迟和延迟。
异步脚本允许浏览器在下载JavaScript文件时继续解析（分析代码和构建网页）。在HTML中包括async属性告诉浏览器它不需要将所有内容置于保持状态。
延期JavaScript - 告诉浏览器离开JS文件的执行，直到完成英文网站设计的构建，这表示为defer属性。