JS--加载

ゞ浴缸里的玫瑰 2022-11-21 09:46 200阅读 0赞

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

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

**其他网址**

> [js代码写在body，head和body后面的区别\_养只猫的博客-CSDN博客][js_body_head_body_-CSDN]  
> [js的script标签到底是放在head还是body中？ - 简书][js_script_head_body_ -]

**简介**

> JS引擎读代码的顺序是从上往下读的,html文件中的顺序是<head>→ <body>→ body后方。
> 
> 一般原则是，CSS在前面，DOM在中间，脚本在最后面（遵循先解析再渲染再执行script这个顺序）。CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。

**<head>里面**

> 这时网页主体（body）还未加载，这里适合放一些不是立即执行的自定义函数。一般放置外部的js（尽量少放）。
> 
> **尽量不要将 JS 文件放在 head 内，原因**：
> 
> head内的js会阻塞页面的传输和页面的渲染。head 内的 JavaScript 需要执行结束才开始渲染 body，所以尽量不要将 JS 文件放在 head 内。可以选择在 document 完成时，或者特定区块后引入和执行 JavaScript。

**<body>里面**

> 可放函数也可放立即执行的语句。若JS要和网页元素互动（比如获取某个标签的值或者给某个标签赋值），Javascript代码务必在标签的后面。
> 
> 内部的js一般放到body内，原因如下：
> 
> 1.  不阻塞页面的加载(事实上js会被缓存)；
> 2.  可以直接在js里操作dom。（需保证Javascript代码务必在标签的后面）
> 3.  “猫头鹰书”建议的方式是放在页面底部，监听window.onload 或 readystate 来触发js

# 执行顺序 #

## **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)

[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109399709
[js_body_head_body_-CSDN]: https://blog.csdn.net/qq_40816649/article/details/79371415
[js_script_head_body_ -]: https://www.jianshu.com/p/2e6f9b732a91