JS--加载

IT利刃出鞘

已于 2022-06-07 23:05:10 修改

阅读量447

点赞数 1

分类专栏： JavaScript 文章标签： html5 html javascript

于 2020-10-31 11:36:31 首次发布

本文链接：https://blog.csdn.net/feiying0canglang/article/details/109399709

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

原文网址：JS--加载_IT利刃出鞘的博客-CSDN博客

<script>...</script>放置位置

见：script标签在HTML放置位置的区别_IT利刃出鞘的博客-CSDN博客

执行顺序

script在构建完DOM之前运行

其他网址

《现代JavaScript教程》=> 加载文档和其他资源=> 页面生命周期：DOMContentLoaded，load，beforeunload，unload

说明

浏览器处理 HTML 文件时，若遇到 <script> 标签，会在继续构建DOM 之前运行它。这是一种防范措施，因为脚本可能想要修改 DOM，甚至对其执行document.write 操作。

如果script是外部的，例如：<script src="my.js"></script>，则会在解析结束之后再加载，就像外部图片一样：<img src='my.jpg' />。

实例1

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>
<script src="./lib/jquery.js"></script>

<p>here</p>

<script>
    alert("front")
    $(document).ready(function()
    {
        alert("ready");
    });
    alert("behind");
</script>

</body>
</html>

执行结果

front(alert)=> behind(alert)=> here=> ready(alert)

微任务与宏任务

其他网址

《现代JavaScript教程》=> 杂项=> 事件循环：微任务和宏任务=> 宏任务和微任务

简介

每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他宏任务，或渲染，或其他操作。

微任务仅来自于我们的代码。它们通常是由 promise 创建的：对.then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await的“幕后”，因为它是 promise 处理的另一种形式。宏任务和微任务还有一个特殊的函数 queueMicrotask(func) ，它对 func 进行排队，以在微任务队列中执行。

实例

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>

<body>
<script>
    setTimeout(() => alert("timeout"));
    Promise.resolve()
        .then(() => alert("promise"));
    alert("code");
</script>

</body>
</html>

执行结果

code(alert)=> promise(alert)=> timeout(alert)