Published on

HTML中的Javascript

Authors
  • avatar
    Name
    李丹秋
    Twitter

Script

使用script标签有两种方式，一种是在标签中直接写入javascript代码，这样在代码执行的过程中，会阻塞浏览器渲染进程，在script标签中的代码执行完成之前，后面的标签内容也不会展示。 另外一种是使用src属性远程加载资源，同样在解析外部js资源的时候，页面也会阻塞，并且包含资源请求的时间。两种方式共存，优先调用远程资源

标签位置

如果放在head中，则浏览器会等待所有的js执行完成之后，才会渲染页面，用户体验不好，所以建议放在body标签最后。

推迟\异步\动态加载执行脚本

defer： 脚本会被延迟到整个页面都解析完毕后再运行。defer脚本总是在 DOM 准备好时执行（但在DOMContentLoaded事件之前）， defer在一般情况下是按照记载顺序执行。

async: 在脚本加载完成之后就立即执行，所有执行顺序没有保证，并且DOMContentLoaded可能发生在asyc之前或者之后。在load事件之前

dynamic： js文件使用js代码手动添加到文档中开始执行，默认情况下，动态脚本表现为“async”

动态加载获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用，这种方式可能会严重影响性能。要想让预加载器知道这些 动态请求文件的存在，可以在文档头部显式声明它们

<link rel="preload" href="gibberish.js">
Discuss on Twitter • View on GitHub