美文网首页
浏览器缓存和script标签模块化加载

浏览器缓存和script标签模块化加载

作者: 我是走A牧 | 来源:发表于2021-03-15 16:28 被阅读0次

禁止浏览器缓存标签
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
有些浏览器标签会失败
浏览器有缓存怎么去除缓存
前台:不加data 加cache-control的请求头,加随机数
后台:只有加cache-control 的头

浏览器模块化加载 支持的是谷歌浏览器及火狐浏览器的高版本
<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
上面代码中,<script>标签打开defer或async属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而是直接执行后面的命令。

defer与async的区别是:前者要等到整个页面正常渲染结束,才会执行;后者一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer是“渲染完再执行”,async是“下载完就执行”。另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。

浏览器加载 ES6 模块,也使用<script>标签,但是要加入type="module"属性。
<script type="module" src="foo.js"></script>
上面代码在网页中插入一个模块foo.js,由于type属性设为module,所以浏览器知道这是一个 ES6 模块。
浏览器对于带有type="module"的<script>,都是异步加载,不会造成堵塞浏览器,即等到整个页面渲染完,再执行模块脚本,等同于打开了<script>标签的defer属性。

<script type="module" src="foo.js"></script>
<!-- 等同于 -->
<script type="module" src="foo.js" defer></script>

<script>标签的async属性也可以打开,这时只要加载完成,渲染引擎就会中断渲染立即执行。执行完成后,再恢复渲染。

<script type="module" src="foo.js" async></script>

ES6 模块也允许内嵌在网页中,语法行为与加载外部脚本完全一致。

<script type="module">
  import utils from "./utils.js";

  // other code
</script>

对于外部的模块脚本(上例是foo.js),有几点需要注意。
代码是在模块作用域之中运行,而不是在全局作用域运行。模块内部的顶层变量,外部不可见。
模块脚本自动采用严格模式,不管有没有声明use strict。
模块之中,可以使用import命令加载其他模块(.js后缀不可省略,需要提供绝对 URL 或相对 URL),也可以使用export命令输出对外接口。
模块之中,顶层的this关键字返回undefined,而不是指向window。也就是说,在模块顶层使用this关键字,是无意义的。
同一个模块如果加载多次,将只执行一次。

相关文章

  • 浏览器缓存和script标签模块化加载

    禁止浏览器缓存标签 有些浏览器标签会失败浏览器有缓存怎么去除缓存前台:不加data 加cache-contro...

  • javascript性能优化

    优化页面加载时间html标签加载顺序浏览器加载和执行script标签引入的js时,会暂停页面渲染,直到代码加载并执...

  • 模块加载标准

    熟悉模块加载标准之后 浏览器 html 文本插入非常多 script 标签时,异步加载这些标签,使页面响应速度变快...

  • JS编写位置

    button标签中的onclick a标签的超链接 script标签 此方法会在浏览器加载完之后马上出现。 外部文...

  • Modele的加载实现

    传统方式 html玩也正,浏览器通过script标签加载javascript脚本。 上面代码中,由于浏览器脚本的额...

  • defer和async

    script标签中defer和async的区别 如果没有defer或async属性,浏览器会立即加载并执行相应的脚...

  • 浏览器环境

    一、script标签的加载浏览器从上到下下载html网页,当碰到srcipt标签会把控制权交给javascript...

  • JavaScript文档的加载过程

    1.浏览器在加载一个界面的时候, 是按照从上至下的顺序加载的 2.如果将script标签写在head标签中, 那么...

  • requireJS的使用

    由于浏览器的是单线程的,在加载script标签时会打断,模块的加载.同时,模块间的依赖需要按顺序加载才能正常执行....

  • require.js

    RequireJS 是一个JavaScript模块加载器,非常适用在浏览器中使用。 引入库 其中script标签的...

网友评论

      本文标题:浏览器缓存和script标签模块化加载

      本文链接:https://www.haomeiwen.com/subject/bewaoqtx.html