• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
社会优先于个人
博客园    首页    新随笔    联系   管理    订阅  订阅
2.1 <script>元素

script元素

  • 将js插入html的主要方法是使用script元素
  • 是由网景公司创造出来的,后来被加入html规范
  • 有8个属性
  • 解释行内js代码和外部代码,页面都会有阻塞,包含下载文件的时间
  • 使用了src属性的script标签,就不能在包含js代码,否则会不执行js代码
  • 不管什么代码,浏览器会按照script在页面的顺序依次解释,除非使用了defer和async
  • 浏览器解析src资源时,会向指定路径发送一个get请求。这个请求不受浏览器同源限制。

script元素的8个属性

  • async :可选,表示立改立即下载脚本。但不能阻止其他页面动作。只对外部脚本文件有效。
  • charset:可选。使用src属性指定的代码字符集。这个属性很少使用,因为浏览器不在乎它的值。
  • crossorigin:可选。配置相关请求的CORS(跨源资源共享)设置。默认不使用CORS。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • integrity:可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名和这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以确保内容分发网络(CDN)不会提供恶意内容。
  • language:废弃。最初用于表示代码块中的脚本语言。
  • src:可选。表示外部文件。
  • type:可选。代替language,表示脚本语言的内容类型。按照惯例,这个值始终都是“text/javascript”。

script标签位置

  • 以前,都是放在head里面。但这样,就得解析完所有js代码,才能渲染也页面。就会有页面空白。
  • 现在,放在body里面。处理js代码之前,就可以渲染页面了。空白页面时间就会短一些。

推迟执行脚本

  • 设置defer这个属性,浏览器会立即下载,但是会延迟执行脚本,延迟到html全部解析完了再执行

异步执行脚本

  • 设置async这个属性,就是告诉浏览器,不必等脚本下载和执行完后再加载页面和执行其他脚本。

动态加载脚本

  • 使用dom api 动态添加script标签
  • 默认情况,是添加了async属性,但是不是所有浏览器都支持async。所以要明确设置为同步加载,script.async='false'
  • 这种方式获取的资源,对浏览器预加载器是不可见的。这回影响他们在资源获取队列中的优先级,可能会严重影响性能。
  • 要想让预加载器知道这些动态请求文件的存在,可以在文档头部显示声明他们。比如
<link rel="preload" href="gibberish.js">
posted on 2022-04-26 14:01  社会优先于个人  阅读(34)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3