能否让JS作为打开网页的入口？

Jean

发布于 2019-09-27 17:42:41

3.4K0

发布于 2019-09-27 17:42:41

文章被收录于专栏：Web行业观察Web行业观察

最近逛GitHub论坛的时候发现一个很有意思的话题：

Make JavaScript Files a Valid Entry Point to a Web Page

意思是，让JavaScript文件作为一个合法的网页入口（而不是html文件）。话题地址在这：

https://github.com/w3c/webcomponents/issues/807

这个话题勾起了我的兴趣，因为我一直觉得以html文件作为网页的唯一入口很麻烦，前后端分离之后写纯静态html的人越来越少了，前端框架兴起之后几乎所有的网页和应用都由JavaScript来操作。我们打开用Vue开发的https://element.eleme.cn/官网，检查一下源代码会得到这样一个普遍现象：

整个网页几乎只有一行代码有意义：

    <div id="app"></div>

剩下的全是JS。这种现象逐渐让我们开始质疑html标记语言是否还有存在的必要。

标记语言存在的意义

技术的发展是从自下而上的，新技术出现的顺序往往和潜意识相反（在后人看来）。我们都知道JavaScript是用于在前端计算的主要工具，html则是对JavaScript的一种弥补，用来更直观的表示UI元素的位置关系，这才是js和html正真的主从关系。同理，在Qt中，qml标记语言也是对C++的一种弥补。

然而事实是，前端先有html，再出现了JavaScript。qml倒是后于C++而诞生，主要因为C++本身并不是做UI的。

JS和html诞生顺序的颠倒导致了浏览器的历史遗留问题：网页只能从html来渲染，js必须嵌入到html中。这只能说，html确实没啥用了，但是标记语言（或者说描述语言）还是拥有不可动摇的地位。

注意，这里所说的原生html语言并不包括其他和html长得很像的标记语言，比如前端脚手架中使用的mvvm标记语言，模板引擎等。这些标记语言中的一些特殊语法比如双花括号 {{ }}，php标签 <?php ?>，很有GraphQL风格的qml，以及JS的模板字符串 `${ }` 这些都是为了解决特定问题而对通用的JavaScript语言进行的一种扩充。当然，即使没有这些标记语言，通用编程语言也能达到目的，但有了标记语言，效率提升了一个层次。

即时渲染

回到最初的问题，html标记语言目前有一种被孤立的趋势，但并不代表html就要被淘汰，html至少还支持即时渲染。即时渲染是标记语言的一大优势，因为标记语言可以拆分成流来传输：虽然html中有闭合标签的语法约束，但是浏览器仍然能够一边接受html流，一边渲染UI，当html文件很大的时候，这种网络的延迟削减是JavaScript不可替代的。上期介绍的ndJSON标记语言也是同样可以一边解析一边传输，一个道理。这就是为什么国内访问Gmail的时候经常选择加载基本html：

如果网速很慢，点击“加载基本HTML”就可以提前享受流式渲染。

以JS作为网页入口可行吗？

以上仍然不能解释为啥网页的入口一定得是html，现在的问题是，未来有没有可能支持从JS直接打开网页，这个问题就是在w3c/webcomponents这个GitHub仓库下“嚣张”质疑w3c标准的issue作者Lonniebiz，从对问题的描述中可以看出他还是个完美主义的杠精，他一再强调以text/html为网页入口是web标准库的致命缺陷却给不出合适的论据，单纯从美学的角度要求w3c委员会对标准库进行修正，于是收获了网友的一致吐槽：

同时，看戏的小伙伴包括我给他的解决方案基本都是使用<script>标签将JavaScript代码包裹起来再以text/html为mime类型传给浏览器作为入口，就像下面这样：

<!DOCTYPE html><meta charset="utf-8"><script>

addEventListener('DOMContentLoaded', function () {
  document.title = 'Hello index.js';
  document.head.appendChild(
    document.createElement('style')
  ).textContent = `
    html {
      font-family: sans-serif;
      font-size: 16px;
      text-align: center;
    } `;
  document.body.appendChild(
    document.createTextNode('Hello body')
  );
}, {once: true})

</script>

这种方式已经很常见了，大伙都在用也没啥意见，可是版主Lonniebiz就是认之为一种hack手段并嗤之以鼻。在翻看了几十条长篇评论之后终于忍无可忍的我给了他一个“最终”解，希望能结束这场无意义的辩论赛：

我也讨厌html丑陋的语法，但浏览器的职责是浏览不同mime类型的媒体资源，不仅仅是网页（text/html）！浏览器还可以展示图片，音视频，pdf，纯文本，等等等。所以对于text/JavaScript资源来说，浏览器会展示js只读模式的纯文本内容（虽然没啥实际用途），但不会，不能够也不应该去执行这个js文件。这里有三“不”，我来解释下：