为什么我们应该重视“noscript”这个话题？

首先要澄清一下，提供完整的noscript体验和使用noscript标签区分页面版本是两回事。

我不怎么喜欢noscript这个标签，因为它会把你的网页分成JavaScript和非JavaScript版本，而不是为两种环境呈现相同的内容体验；正是这种区分版本的做法会让用户体验变得一团糟，还掩盖了许多现实问题。

你的noscript标签里面可能有很多有用的内容，但是如果我使用开启JavaScript的浏览器访问网页就看不到这些内容——浏览器只会等待JS内容慢慢加载。我所说的“noscript”体验通常说的是不包含JavaScript的网页的浏览体验，而不是简单地使用一个noscript标签。

那么，为什么要在乎不用JavaScript的用户呢？现在还存在这样的noscript用户吗？

对，他们确实存在，尽管数量很少：在英国，有大约0.2％的用户禁用了JavaScript：https://blockmetry.com/blog/javascript-disabled

但问题在于你不能只看关闭JavaScript的用户有多少。

我想起了Jake Archibald的这句话：

“所有用户在下载你的JS内容时都讨厌JS”。

你应该想想有多少用户即便启用了JavaScript，但也无法获得应有的JavaScript体验；造成这种现象的原因有很多，比如企业或本地设置阻止或剥离了JavaScript元素、浏览器插件或工具栏导致的JavaScript错误、网络错误等等。BuzzFeed最近透露，大约有1％的JavaScript请求超时，相当于每月都有1300万次请求失败。

有时问题不是出在用户这边，而在于CDN传输JavaScript的环节。还记得2017年2月亚马逊的服务器崩溃事件吗？当时有几百万依赖亚马逊CDN提供JavaScript的网站遭遇困境，导致标准普尔500指数中的企业在4小时的崩溃中损失了1.5亿美元。

再想想新兴的全球市场的现状：很多国家还没有普及高速互联网络，他们的国民也没钱购买能流畅运行复杂JavaScript的高性能硬件。或者想想成熟市场的情况：就算是接入4G网络的iPhone X手机也可能在火车驶入隧道时遇到网页加载中断的情况。

网络是一个充满敌意、不可预测的环境，这就是为什么许多开发者遵循渐进增强的原则，基于HTML语义的核心体验一步步构建他们的网站，在此基础上加入CSS层和非侵入式JavaScript。

我想看看有多少网站在实践中应用了这套原则，那么最好的测试方法就是完全禁用JavaScript了吧？

如何禁用JavaScript

如果你想复现我的实验，你可以在Chrome的设置里这样禁用JavaScript：

打开开发者工具菜单（Chrome ->查看 ->开发者工具，或键盘上的⌥⌘I）；
打开开发者子菜单（开发者工具上关闭按钮旁边的三个点）；
从这个子菜单中选择“设置”；
找到“调试器”部分并选中“禁用JavaScript”复选框。

或者也可以像我这样，使用很出色的Toggle JavaScript Chrome扩展，只需单击一下即可禁用JS。

禁用JavaScript后发一篇WordPress帖子

禁用JavaScript之后，我第一个实验目标是访问我的个人投资组合网页——就是一个WordPress博客，我在上面随时记录自己的投资经验。

WordPress其实对noscript非常友好，所以我写起文章来毫不费力，只是页面上缺少一些我习惯的文本格式和媒体嵌入功能。

下面对比一下WordPress关闭JavaScript前后的发帖界面：

上面是noscript版本，只有两个基础文本输入框。

JavaScript版本有很多快捷按钮，包括字体格式、嵌入引用和媒体、以HTML格式预览等。

我觉得没有工具栏挺不错的，但到需要在帖子里嵌入截图的时候就不行了。因为没有“添加媒体”按钮，我只能再打开一个单独的页面来上传我的文件。这也很合理，因为“后台上传”内容需要Ajax，而Ajax就需要JavaScript支持。令我惊讶的是独立的媒体上传页面也需要JavaScript！

还好有一个替代视图：

上面是管理员后端中的媒体选择界面的noscript版本。页面会提示说没有JavaScript就不能支持网格视图了。

但谁用得着网格啊？对我来说列表视图就非常合适了。

上传图片后，我只能在帖子中手动编写HTML img标签，并将图片网址复制粘贴到里面。这里没法检测上传图像的缩略图网址，我写的说明也必须手动复制过去。我很快就厌倦了这套流程，并计划第二天自己再次启用JavaScript后再来编辑并重新上传所有图像。

下面我想看一下我的页面的前端在noscript环境下长什么样。

禁用JavaScript时查看我的主页

关掉JS浏览我的主页也没什么不一样的，这让我感到很惊喜：

上面是开启JS的状态，下面是关闭后我主页的样子，只有Twitter嵌入模块有点差异。

下面仔细看看嵌入的Twitter模块：

注意作者信息、互动数据和信息链接的部分，这些在noscript版本里都没有。那个打钩是一张外部PNG图片。

noscript版本缺少样式，不过内容没有丢失，引用链接和推文链接都在，而打钩换成了ASCII字符：✔。

我的主页下面还集成了一些Insagram内容，在noscript版本里显示比较正常。

注意图片下方的图片选择小点，说明还有更多图片。

noJS版本没有这些小点。除了这里的幻灯片播放功能缺失以外，它和JS版本没有其它区别了。

最后，我的主页还集成了一个GitHub模块。GitHub没有原生集成功能，所以我用的是第三方的GitHub Cards，作者是Hsiaoming Yang（https://lab.lepture.com/github-cards/）。

这个第三方卡片模块链接到你的GitHub资料页上，展示一份简短的资料介绍。

我还准备了一个备用的GitHub链接，用于禁用JavaScript的场合。

其实我做测试以前既希望用禁用JS前后的对比数据让大家感到震撼（一个简单的嵌入模块都要成吨的JS代码！简直是世界末日！快放弃JavaScript吧！），另一方面却也希望测试出的差别很小（渐进式增强！以身作则！我是优秀的开发者！）。

接下来对比一下禁用JavaScript前后的页面大小。首先是开启JavaScript的情况：

51个HTTP请求，传输1.9MB数据。

然后是禁用后的情况：

18个HTTP请求，传输1.3MB数据。

就为了一条带样式的推文、一个GitHub嵌入和一个全功能的Instagram嵌入，我的网页就多了600KB数据。我还开启了谷歌分析跟踪功能和一些极客风的隐藏互动功能。综合考虑下600KB可能不是那么多——但我还是对浏览器为了多出来的这些东西而增加的请求数量感到有些惊讶。

就算没有JavaScript，主体内容依旧都在，菜单也都正常工作，不看Twitter嵌入模块的话你会很难意识到JavaScript被关闭了。最后的结果，我的主页通过了NOSCRIPT-5级别的考验——无JavaScript浏览体验的最高级别。

ashton.codes noscript评级：NOSCRIPT-5。

这是啥？你还没听说过何谓noscript评级体系？你要听说过我才会惊讶呢，因为这是我刚发明的东西。这是我自己用来评价禁用JavaScript时网站可用性高低的一个简易小指标，进一步来说它可以很好地评价网站的内容渐进增强做的有多好。

noscript评级体系

网站——或者更确切地说，是网站的各个页面——一般可以归到以下几类：

NOSCRIPT-5

该网站的noJS版本与启用JavaScript的版本几乎无法区分。

NOSCRIPT-4

该网站提供了noscript功能组件，但会链接或重定向到一个单独的版本以实现该功能。

NOSCRIPT-3

网站的大部分内容没有JavaScript也能工作，但一些非关键功能不受支持或者显示异常。

NOSCRIPT-2

该网站会弹出消息说用户的浏览器不支持自己的网页。

NOSCRIPT-1

该网站好像是加载出来了，但用户根本无法使用其主要功能。

NOSCRIPT-0

该网站连加载都失败，并且不向用户提供任何反馈。

下面我们来测试一些热门网站，看看他们的得分情况。

亚马逊

我研究一款小型真空扫地机有一阵儿了。我租的房子不让养宠物，如果你上网搜一圈就会发现这个机器真的很不错。

初看上去，亚马逊的非JavaScript解决方案做的还挺好，就是产品的主图片消失不见了。

开启JavaScript时主图片回来了，看看这款小扫地机有多可爱。

仔细检查发现，noscript版本上有很多内容都异常了。下面我会挨个过一遍异常的内容，并为它们逐一提出解决方案的建议。

图库图片消失

我想看一些产品图片，但是点击缩略图后没有反应。

问题

点击这些缩略图不会有任何回馈。

可行的解决方案

如果这些缩略图能链接到完整的图像，可以在新标签页中打开，那就很好了。然后可以做渐进增强，使用JavaScript将它们放到图库中：

劫持对缩略图链接的点击事件；
读取href属性；
使用href属性值更新主图像的src属性。

“报告错误的产品信息”链接仅能使用JavaScript

但这个功能真的那么常用吗，值得为所有用户下载额外的JavaScript代码，以便它在页面中作为集成模块启用吗？

亚马逊集成模块窗口（JavaScript版本）

问题

幸好我看到的产品信息挺准确的，否则noJS版本下我根本没处报告问题！“href”属性有一个javascript:// 值，它会打开一个集成模式表单。

可行的解决方案

亚马逊集成模式表单需要开启JavaScript才能工作。我来做的话会将“报告问题功能”设置为单独网址上的独立表单，例如 /report-product?product-id=123。这样就可以逐步增强到使用Ajax单独下载HTML的集成模式了。

默认情况下仅部分评论可见

问题

“阅读更多”链接没有反应。

可行的解决方案

为什么不默认显示所有评论，然后使用JavaScript截断评论文本再添加“阅读更多”链接呢？

需要指出的是评论标题是指向评论内容独立页面的链接，所以这样的话起码是可以看完评论内容的。

总体而言，我对亚马逊网站在关闭JavaScript的情况下的不错表现还是很惊讶的，它要是应付了事的话本可以搞出一个空白页面来。但缺失产品图像意味着我们丢掉了一个真正核心的功能——我认为用户能够看到他想要买的商品外观是非常重要的！——所以很遗憾，我们不能给亚马逊庆功了，也不能给它评NOSCRIPT-5级别。

亚马逊noscript评级：NOSCRIPT-3。

我还没有决定要买哪种产品，所以我转向了亚马逊的价格追踪器Camel Camel Camel页面。

Camel Camel Camel

我想对比iLife V3s Pro和iLife A4这两个型号选一个购买，所以转到了https://uk.camelcamelcamel.com/。刚打开页面，这个网页看起来与启用JavaScript的版本没什么差异。

Camel Camel Camel的noJS版本看起来美观专业。

你拿放大镜对比这俩截图也找不出不同！

不幸的是价格历史图表没能呈现出来。它倒是提供了替代的文本，但这些文本没法让我知道价格趋势是上涨还是下跌。

替代文本写的是“亚马逊价格历史图表”，但没有数据分析内容。

开启JavaScript后这图表长得多可爱啊。

通行建议：始终提供有意义的替代文字。我不一定需要查看图表，但我希望对其中包含的内容做个总结。在这个例子中我想看到的可能是“亚马逊价格历史图表显示该商品的价格自2017年3月以来基本保持不变。”但自动生成这样的摘要无疑很困难，并且容易出现异常。

针对此用例的具体建议：显示图像。该网页的脚本版本的图表实际上是一个独立的图像，所以当然能在noscript版本中正确显示！

不过，图表下面的核心内容里面就有我想要了解的信息。

谁还用得着图表？我们有一张表格！

该表格所提供的平行功能正是NOSCRIPT-5评级所需的。Camel Camel Camel，我要向你脱帽致敬！

Camel Camel Camel noscript评级：NOSCRIPT-5。

GitHub

GitHub看起来和支持JavaScript的版本几乎一模一样。厉害！但我想这是开发者为开发者们所开发的网站。

我找到的一处不同是GitHub的时间显示格式。开启JavaScript时它显示的是“两天前”。

noJS版本下它显示的是“2018年5月1日”。

我在GitHub里打扫了一下，看了看repo，删了些旧的分支。有一阵儿我真的忘了自己用的是非JavaScript版本，直到我遇到了一个小bug：

“获取最新提交版本”这里永远刷不出来……

然后我想知道，“GitHub是如何给问题添加标签的？”所以我试了一下。

点这些按钮的时候没有响应。

我无法在创建问题时为其添加标签。事实上，即使创建完空白问题后，我也找不到添加标签的方法。令人遗憾的是GitHub没能坚持到最后，本来它和JS版本几乎是没有区别的。

GitHub noscript评级：NOSCRIPT-3。

虽然GitHub看起来很出色——我差点就忘了JavaScript关闭这个事实了——但只要没法像完整版一样使用核心功能就不行了。就算noscript版本很丑也是能得到更高分数的，因为功能比形式更重要。

Facebook

最后我承认我现在还买不起一台吸尘器。所以我决定转到社交媒体去逛逛。

Facebook说需要开启JavaScript才能继续浏览，或者我们可以点击链接进入移动版本。

Facebook没有JavaScript就拒绝加载，但它的确提供了替代选项。这是我们的第一个NOSCRIPT-4示例——一个为noscript或功能手机用户提供单独版本内容的网站。

Facebook的移动站点版本。

移动版本加载超快。它看起来很难看，但好像我得到的内容和平常是一样的。非常重要的是我有一致的功能：我可以在这里做到主站能做的所有事情。

Facebook noscript评级：NOSCRIPT-4。

加载页面的速度快如闪电：

50.8KB，1.39秒就加载完毕。

我一次只能在新闻流中看到7个项目，但我可以点击“查看更多故事”，它会将我带到一个新页面，其中使用传统的分页技术。

我甚至可以对Facebook评论做出“反应”，尽管这需要开启新页面：

作出回应首先需要点击“回应”。

然后你会跳转到新页面来选择回应选项。

其实Facebook完全可以在非JavaScript版本中构建一个悬停式的“反应”菜单，但公平地说，这个版本针对的是无法悬停指针的移动设备。

建议：使用CSS创作。你可能会发现自己根本就不需要JavaScript。

其他社交网络

领英有一个很棒的定制化加载页面，但noJS状态下它永远不会加载，所以我所能做的就是盯着徽标发呆。

领英noscript评级：NOSCRIPT-0。

Instagram几乎什么都没有，就是个空页面，另一种NOSCRIPT-0风范。

Instagram noscript评级：NOSCRIPT-0。

鉴于Instagram的嵌入模块在我的投资组合网站上完美运行，我对Instagram主页差到这个地步感到非常惊讶。我想对于嵌入式模块来说，你永远不会知道第三方的浏览器支持水平到了什么级别，但是当我直接访问该网站时，Instagram很乐意声明自己放弃了支持。

总结

我做这个实验的目的是看看有多少网站是用渐进增强实现的。我这次只访问了一小部分网站，其中大部分都名声在外，预算充足，所以看到它们对无JavaScript环境支持的各种状况是很有意思的。

有趣的是，相对简单的网站——特别是Instagram和领英——在noscript支持方面做得那么糟糕。我想这部分原因在于React，Angular和Vue等JavaScript框架的日益普及。开发人员现在正在构建“Web应用程序”而不是“网站”，目的是复现本机应用的样式和体验，使用JavaScript管理DOM是创建此类体验最易管理的方式。

一种风险在于，越来越多的网站需要JavaScript来呈现所有内容。还好我们通常可以用对开发人员一样友好的方式构建内容，但改在服务器上呈现，例如使用Preact而不是React。有意识地去关注noscript，就可以改善本文开头所讲的核心体验，并且可以加快用户感知的加载速度。

重新考虑应用程序的开发思路可能会非常难，但在很多情况下只需要简单的调整就能获得良好的核心体验。良好的核心体验表明网页有着井井有条的结构，而且这通常利于搜索引擎优化并改善可访问性。一般来说精心设计的网页才能做到这一点，因为设计师和开发者花费了时间和精力思考什么是真正的核心体验。渐进式增强意味着更强大的体验、更少的生产错误和更少的个性化浏览器错误，因为我们是让平台完成工作，而不是试图从头开始编写代码。

你的网站符合什么noscript评级？在评论中告诉我们！

原文链接

https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/

更多内容，请关注前端之巅。

创作场景

去掉 JavaScript 后，这些网站会变成这样