• js <script>元素应该放在html页面的哪个位置?


    简单的html

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Hello World</title>
        <!--<head>处放置script元素-->
        <script src="...外部脚本路径"></script>   
        <script type="text/javascript">
             function testA() {
    
             }  
        </script>  
    </head>
    
    <body>
        <div id="app"></div>
    
        <!--<body>处放置script元素-->
        <script src="...外部脚本路径"></script>   
        <script type="text/javascript">
             function testB() {
    
             }  
        </script>   
    </body>
    
    </html>
    
    <script> 加载顺序、使用方式的说明:
    1. type="text/javascript" 可加可不加,即使没有指定该属性,默认值也是它。
    2. <script> 有两种使用方式: 页面中嵌入javascript代码引入外部javascript文件
    3. <script> 元素内部的代码会被从上到下依次解释。(在<script> 元素内部所有的代码解释完之前,页面其余内容都不会被浏览器加载和显示)
    4. <script> 元素在解析外部文件(包括下载)时,页面的处理也会暂停(同于解析内部代码)
    5. <script> 元素在引入外部文件(使用src)时,就不能再嵌入内部代码(<script></script>之间添加代码),否则嵌入的代码会被忽略
    <script> 的解析顺序的说明:
    • 浏览器会按照 <script> 元素在页面中出现的先后顺序,对它们依次进行解析
    <script> 存放位置的说明:
    1. 传统做法,<script> 元素都应该放在页面的 <head> 元素中。(这种做法的目的是把所有的外部文件引用都放在一起,例如 CSS文件和Javascript文件)
    2. 但是,放在 <head> 元素中,就意味着必须等到全部的javascript代码都被下载、解析和执行完成以后,才能开始呈现页面内容。(因为浏览器在遇到 <body> 标签时才开始呈现内容)
    3. 因此,放在 <head> 元素中,容易出现较长时间的空白页面(因为呈现被阻塞,如果javascript代码需要很多的话)
    4. 所以,最终 <script> 元素一般都放在 <body> 标签中页面内容的后面(也就是 </body> 标签的前面)

    ==================================

    <script> 几个记录:

    • 所有 <script> 元素都会按照它们在页面中出现的先后顺序依次被解析。(在不使用 deferasync 属性的情况下)
    • defer 属性,表示延迟解析脚本,即让脚本在文档完全呈现后再执行。(延迟脚本总是按照指定它们的顺序执行)
    • async 属性,表示异步解析脚本,即表示当前脚本不必等待其他脚本,也不必阻挡文档呈现。(区别于 defer,异步脚本不能按照在页面中的出现的顺序执行)
        <script defer="defer" src="...外部脚本路径"></script>   
        <script async="async" src="...外部脚本路径"></script>   
    
  • 相关阅读:
    bjdctf_2020_router
    Windows下Apache配置https
    Linux定时备份数据库并删除N天以前的数据
    MySQL出现Waiting for table metadata lock的原因以及解决方法
    MySQL操作(五)查询实例
    Windows常用命令
    PHPSTORM常用快捷键
    MySQL操作(四)索引及优化
    MySQL操作(三)数据表
    MySQL操作(二)数据库
  • 原文地址:https://www.cnblogs.com/nangezi/p/14120672.html
Copyright © 2020-2023  润新知