JS--加载 ゞ 浴缸里的玫瑰 2022-11-21 09:46 145阅读 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
还没有评论，来说两句吧...