Get best of the week

也许我们应该使用JavaScript冷静一下？

我有一个非常奇怪的浏览器问题。某些页面上的脚本仅在大约20秒钟后才起作用。

无论您要提供什么，是的，我已经考虑过了，不，它没有帮助。我谈论此问题并不是希望有人提示您进行调试，而是因为此事件使我敏锐地意识到了一些问题，如...怪癖...前端的事态发展。

（实际上，我什至没有尝试用一句话来诊断问题，也没有，我听说过并尝试了几乎所有可以想象的东西）。

这篇文章写于2016年3月，有些例子已经过时-大约。反式

没用的页面


看，这是该推文的屏幕截图。其中，没有JavaScript的部分将以红色突出显示。我知道这一点是因为和以前一样，我一直在查看页面，其中大部分代码还不到20秒。



我能理解的东西。例如，“答复”按钮在底部扩展文本字段并将焦点放在该文本字段上。没有一些脚本就无法做到这一点。该按钮...将打开一个弹出式菜单，该菜单令人怀疑，因为您也可以使用CSS对其进行再现。同样，带有心脏的按钮会在后台执行操作，这也值得怀疑因为可以在整页加载时进行播放。但是这些都是不重要的更改，无论是否使用脚本，这些更改都将以完全不同的方式起作用。

另一方面...

该按钮×是否位于右上角和所有空白的周围空间中？他们的唯一功能是将您发送到我的个人资料，该个人资料在鸣叫后可见。它们也可能是常规链接，例如用于导航的左右箭头。但这是不同的方式，因此如果没有JavaScript，它就无法工作。

还是带有图形的小按钮用于分析？它的唯一功能是在带有内置框架的人工弹出窗口中加载另一个页面。可能会有一个常规链接，使用脚本会变成一个弹出窗口。但这是不同的方式，因此如果没有JavaScript，它就无法工作。

文本域？当然，这只是一个文本框。但是，如果您在运行JavaScript之前单击它，则会在该字段中留下笨拙的标题Reply to @eevee。并且当脚本仍然启动时，它会擦除​​您键入的所有内容并再次插入它Reply to @eevee，只是现在@eevee它以蓝色字母而不是灰色字母书写。

同样的事情发生在Twitter搜索页面上，这很奇怪，因为搜索字段中没有文本！如果您在脚本完成之前开始键入内容，它们只会删除您键入的所有内容。甚至不插入占位符文本或应用自定义样式。没有明显的原因，就像那样。

由于NoScript为我工作，因此我经常在我第一次访问的网站上注意到奇怪的设计决策。当然，白页很平常。在相当长的一段时间内，Time网站上的文章无需脚本即可很好地加载，但是却无法滚动-该页面使用了属性overflow: hidden;由于我无法理解的原因。 Vox文章也正常加载，除了在每个图像的前面，在屏幕的整个高度显示空白。一些特别糟糕的公司站点是凌乱的重叠文本块。我认为他们放弃了CSS，并使用JavaScript编写了布局。

没有充分的理由。这些不是高级交互式应用程序；它们只是文本页面。我们曾经将它们打印在纸上，但是一旦切换到信息技术，就不可能在不运行几兆字节的垃圾执行的情况下将文字显示在屏幕上？

我直接听到他们如何称呼我为讨厌的人，因为我不同意用五千行脚本将静态文本的五个段落括起来。好吧，让我提前回答：去澡堂。我认为Web和交互式页面很棒，在过去十年中我看到了巨大的进步。网络最初支持用户设置，这是非常好的，我可以为每个站点预先配置权限，使其可以在计算机上运行，​​而不能在计算机上运行。

但是，不是很酷的是一群高薪和高素质的专家，他们每个人都在最新的Mac Pro型号上安装了Chrome，他们在办公室里工作时离他们所访问的每台服务器不超过一公里。现在这些人正在工作，然后他们转身对其他没有这种配置的人咯咯笑。请注意，以下任何一种情况都会干扰您的JavaScript：

  • 有人在慢速计算机上。
  • 有人连接缓慢。
  • 电话上的某人，即连接速度慢的慢速计算机上的某人。
  • 有人在他无法控制的计算机上使用了旧的浏览器，例如工作，学校，图书馆等。
  • 有人正在尝试编写一个与您的网站交互的小程序，该程序没有API。
  • - , .
  • - — Google .
  • - Linux , , Elinks.
  • - , .
  • - NoScript . , , .
  • - NoScript , , . , .
  • , , .
  • CDN .
  • CDN IPv6, (, , ). - IPv6, , JS .
  • , JavaScript .
  • , . , .
  • , , .

我并不是说应该抹掉Google Maps之类的交互式Web应用程序，尽管即使对于Google Maps来说，多年来也一直存在没有脚本的备份，直到最新版本的WebGL！我说过，当常规HTML的基本功能在没有JavaScript的情况下突然停止工作时，我们关闭了其他地方。也就是说，如果没有40 MB的JavaScript，根据about:memory -这是内存中的数据，而不是下载的大小。这看起来似乎不多（对于一个显示140个字符的页面？），但是我的浏览器通常会积累十二个打开的Twitter选项卡，即半GB的内存，最多分配了6 KB的文本。

方轮的发明


您确实需要尝试获得如此可悲的结果。我的意思是，如果您需要链接，则只需编写<a href="somewhere">label</a>，就可以了。但是，如果您开始使用JavaScript发明这种方法，则需要一个单击处理程序，并且该单击处理程序应在正确的时间工作，以便您知道链接确实存在，并且可能需要做一些工作才能将单击处理程序添加到虚假链接中，这增加了Ajax。对？

没有！您只会得到一个苍白，cr脚的链接模仿。考虑本机链接的所有功能：

  • 我可以点击链接。
  • 我可以使用Ctrl，Shift键和鼠标滚轮（中间按钮）的组合在新标签或窗口中打开链接。
  • 我可以复制链接地址并将其粘贴到某处，或在其他浏览器中打开，或其他方式。
  • ' Firefox .
  •  — Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
  • , .
  • .
  • , , .

这里的共同点是标签<a href=...> 意味着什么。他说：“这是您可以走的路。”大量工具依赖于此信息。如果将其替换为<div onclick>，则可以，单击div会执行某些操作，但要点完全消失了。相反，如果使用<a href="javascript:void(0);">，那么您实际上是在对这些工具撒谎。您引起意义，但给出无意义的信息

这就是人们谈论“语义学”时的意思-需要收集有用的信息。如果您开始发明链接的相似性，那么对该合成结构的分析将需要推测性执行大量任意代码，或者编写极其复杂的代码。智能静态分析仪，或只是培训人类程序员。声明意图比仅仅完成工作要强大得多，而且灵活得多，因为在第一种情况下，通用工具几乎可以琐碎地完成有用的事情。

另一个很好的例子是下拉表格<select>。一些开发人员有时会完全从头开始使用非本地小部件创建其替换项。可能使它们更美丽？崇高的目标。但是您是否知道，在本机下拉菜单中，当您开始键入时，会自动选择第一个合适的位置吗？显然，在大多数替代实现中，不支持此功能。从外观上看，它们看起来更好（或略有不同），但长列表在功能上却差得多。

自制Twitter文本框根本不是文本框，而是contenteditable <div>。这里contenteditable意味着大多数本机控件都可以正常工作，但是此对象仍会时不时地表现出一些奇怪的行为，例如，当我在选项卡之间切换时，会将光标移动到文本的开头。有时脚本在我的输入速度方面存在一些问题，并且开始引起人们的注意。看起来为什么要使用它而不是通常的<textarea>是唯一的原因，@handles和链接为蓝色？自制的文本框不会缩短链接或替换Twitter表情符号，因此这并不是您的推文外观的预览。

您知道某些网站有热键吗？好吧但这实际上是/-这是Firefox中的内置热键，可打开快速搜索面板。显然，在Twitter或GitHub，BitBucket，Tumblr或其他十几个地方，没人知道这一点，因为他们都将重点放在网站上自己的搜索栏中。这与当前页面上的搜索完全不同（为了纪念GitHub，当我在Twitter上抱怨时，他们将其修复了）。很长时间以来，Google +关闭了空格键以向下滚动。在这些大公司中，为什么没有人停下来说：“嘿，等等，这是浏览器中的有效功能，而我们正在破坏它”？ Web开发人员自己使用浏览器吗？

回想一下，每个Twitter页面都静默吸收所有键盘事件和鼠标单击，直到所有脚本都工作为止。这意味着我什至要等到这20秒才能加载页面，才能更改标签：ctrl-t，ctrl-w，ctrl-tab，ctrl-pgup和ctrl-pgdn-所有键盘事件都被完全吸收。这就是称为“快速动作队列”的机制的工作方式。听起来好像这个队列应该在页面加载结束时播放事件，但是（a）您不能在浏览器中使用热键； （b）看起来还是不起作用。为了解决这个问题，我必须编写一个自定义脚本来阻止具有特定标识符的脚本标签。

我不觉得我很挑剔。这些是浏览器的基本功能，您经常没有充分理由而违反它们。我不希望您在没有JavaScript的情况下使用Google文档。我只是希望你不要破坏我那该死的键盘。

让我给你一些建议。


接受这样的事实，有时您的JavaScript对某些人不起作用。想一想那意味着什么。如果有选择，请始终选择现有的HTML机制。也许您的开发团队每年一次将关闭JavaScript并尝试使用该站点。开始哭泣。

如果您要重新定义或重新考虑已经存在的内容，请先进行研究。如果您不了解原始内容，就无法创建一个好的替代品。问问周围。该死，只要尝试点击/浏览器，然后使用您网站上的热键进行操作即可。

请记住，Internet具有给您的所有功能，最终控制权仍在用户手中。互联网不是游戏机；请采取相应措施。创建模块。事先考虑可能的设置或通用设置。当页面上的脚本达到40 MB时，可能会有所减少。

谢谢。

More articles:


All Articles