JavaScript—分析JavaScript在Html页面中的加载顺序

最新推荐文章于 2021-06-27 20:28:54 发布

你温柔的背后是心情的曲折

最新推荐文章于 2021-06-27 20:28:54 发布

阅读量723

点赞数

分类专栏： JavaScript 文章标签： javascript html 浏览器脚本执行顺序

本文链接：https://blog.csdn.net/u012758088/article/details/54572823

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

js代码执行顺序比较的形象，用户可以直观的感受这种执行顺序。但是，js代码的执行顺序是比较复杂的。有时候我们会把js代码写在html里面，而html文档在浏览器中解析的过程是这样：浏览器按照文档流从上到下逐步解析页面结构和信息。js代码作为嵌入的脚本也算做html文档的组成部分，因此，js代码在装载时的执行顺序也是根据脚本标签<script>的出现来顺序来决定。（下面一个栗子）

<!DOCTYPE html>
<script>
    console.log("顶部脚本");
</script>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        console.log("头部脚本");
    </script>
</head>
<body>
    <script>
        console.log("页面脚本");
    </script>
</body>
</html>
<script>
    console.log("底部脚本");
</script>

还有对于通过脚本标签<script>的src属性导入的外部js文件脚本，它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分，不会因为是外部js文件而延期执行。

// 先加载 b.js 并且执行里面的代码
<script src="b.js"></script>
// 然后在按顺序执行下面的代码
<script>
    console.log(1);
</script>

你温柔的背后是心情的曲折

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—分析JavaScript在Html页面中的加载顺序

js代码执行顺序比较的形象，用户可以直观的感受这种执行顺序。但是，js代码的执行顺序是比较复杂的。有时候我们会把js代码写在html里面，而html文档在浏览器中解析的过程是这样：浏览器按照文档流从上到下逐步解析页面结构和信息。js代码作为嵌入的脚本也算做html文档的组成部分，因此，js代码在装载时的执行顺序也是根据脚本标签<script>的出现来顺序来决定。（下面一个栗子）<!DOCTYPE h
复制链接

扫一扫

专栏目录