JS - 行内脚本和外部脚本的比较

58 阅读2分钟

script 选择行内代码还是外部代码

最佳实践是尽可能将 js 代码放到外部文件,理由如下:

  • 提高可维护性。js 代码如果分散到很多 HTML 页面,会导致维护困难。而用一个目录保存所有 js 文件,则更容易维护
  • 缓存。 浏览器会根据特定的设置缓存所有外部链接的 js 文件,如果两个页面都用到同一个文件,则该文件只需要下载一次,页面将会加载更快

注意⚠️: 在配置浏览器请求外部文件时,要重点考虑他们会占用多少带宽,在 HTTP2 中,预请求的消耗会明显降低,以轻量、独立 javascript 模块向客户端送达脚本更具优势。 这里的 javascript 模块或者组件,可以理解为单一职责,一个 js 文件做的事情应该是职责单一的,而不是混乱的

noscript 元素

针对早期浏览器不支持 js 的问题,需要一个页面优雅降级处理,因此 noscript 标签出现让 不支持 js 的浏览器提供代替的内容。

script除外,noscript 可以包含在 body 中的任何位置,在下列两种情况下,浏览器将显示包含在 noscript 中的内容:

  • 浏览器不支持脚本(js)
  • 浏览器对脚本的支持被关闭(比如禁用 js)
<body>
    <noscript>
      如果浏览器支持 脚本,那么用户不会看到 noscript 中的内容
      当浏览器不支持 js 脚本 或者 用户禁用了 js 时才显示 noscript 中的内容
    </noscript>
</body>

因此 noscript 元素可以让我们在失去 js 可用的情况下,优雅的给用户一些提示或者任意你想替换的内容。