0
点赞
收藏
分享

微信扫一扫

扫盲JavaScript知识点 - 文件延迟和异步加载

JavaScript文件延迟和异步加载

首先需要明白一个html页面是一个文档,浏览器在进行解析时会根据文档流从上到下逐行解析和显示。

  • 从<html> - <header> - <body>

  • JavaScript代码也是HTML文档的组成部分,所以执行顺序也是根据<script>标签的位置来确定的

  • 如果你如果在header里放入一个影响解析速度的很大的<script>文件,那么<body>里的文档解析就会出现延迟,换句话说,就是会页面长时间的留白。

  • 解决这种情况的思路都是把<script>的解析放到<body>解析后面

    1. 方法一:
      简单粗暴的办法就是将<script>标签放到<body>后面
    2. 方法二:延迟执行JavaScript文件 - defer
      设置延迟执行JavaScript文件(只对外部src引入的<script>起作用)
      defer: <script>标签的一个布尔属性。defer设置为true时,将<script>引入的脚本延迟到浏览器解析完网页之后再执行。
      <script type="text/javascript" defer src="test.js"</script>
    3. 方法三:异步加载JavaScript文件 - async(HTML5新增的布尔型属性)
      async: <script>标签的一个布尔属性。设置async之后,浏览器异步加载JavaScript文件,在加载JavaScript文件时,浏览器不会暂停,而是继续解析。达到节省时间,提升响应速度。
      <script type="text/javascript" async src="test.js"</script>
举报

相关推荐

0 条评论