1.script标签
　　1.js代码的解析（包括下载js文件）会阻塞页面加载
　　2.当js文件放在头部，页面必须等所有js代码都被下载，解析和执行完成后才开始呈现页面内容（遇到body标签才呈现），对于那些需要很多js文件的页面来说，会有很大的延迟，浏览器页面空白时间，              所以尽量把全部js文件引用放在body标签内的最底部，先呈现内容，用户体验更好
2.defer延迟脚本
　　script标签加上defer属性，浏览器会异步地下载该文件，不会影响后续dom的渲染，如果有多个defer的script标签，则会按顺序执行所有的script；defer脚本会在文档渲染完毕后，DomContentLoad前执行
Dom文档加载步骤：
（1）解析html结构

（2）加载外部脚本和样式表文件

（3）解析并执行脚本代码

（4）构造HTML DOM模型 //DOMContentLoaded执行点

（5）加载图片等外部文件

（6）页面加载完毕 //load

3.async异步脚本
　　告诉浏览器异步下载async属性文件，async不保证脚本的执行顺序，先加载完先执行

4.嵌入代码与外部文件
　　外部文件优点：
　　（1）可维护性：不必触及html标记，专心编辑js
　　（2）可缓存： 引用同一个外部文件可被浏览器缓存，只需下载一次
　　（3）适应未来

JS 之 script标签的更多相关文章

  1. JS之script标签

    1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...

  2. 在html代码中js的script标签建议放在那里？

    今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...

  3. JS删除script标签

    可以试试以下方法 var deleteJs = document.getElementById('xxx'); var otherJs = document.getElementsByTagName( ...

  4. GZip压缩的js文件IE6下面不能包含<script>标签

    IE6下面,GZip压缩的js文件,如果js中包含<script>标签,一遇到这样的标签,后面的内容居然都截断了,狂晕! 花了我一个晚上来找原因.. 需要将字符串'<script&g ...

  5. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  6. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  7. js 手动插入meta标签和script标签

    // 插入 meta 标签 var oMeta = document.createElement('meta'); oMeta.content = 'width=device-width, initi ...

  8. 在JS文件中，不需要<script>标签

    在JS文件中,不需要<script>标签\

  9. js 引入外部文件之 script 标签

    在我的理解看来,html 就是一个单纯的管显示问题,js就是单纯的管动作问题,css就是单纯的管布局问题,这三个构成了一个网页 在HTML中,经常会用到引入js 文件. 引入js的方法很简单: 1. ...

随机推荐

  1. fetch请求

    get请求 return fetch('https://xxx.xxx.com/xxx.json') .then(response => response.json()) .then(respo ...

  2. 虚拟机下安装Centos7并配置Apache+PHP+Mysql+phpmyadmin+wordpress

    一.安装Apache yum install httpd 安装成功后,Apache操作命令: systemctl start httpd //启动apache systemctl stop httpd ...

  3. dump增加的表数据

    备份mysql数据库表中,增加的部分 前提条件: 备份库和正式库表结构一样: 表名不一样可以改: 备份库:192.168.1.10 正式库:192.168.1.11 获取当前"备份" ...

  4. 【APUE | 03】文件I/O

    博客链接: inux中的文件描述符与打开文件之间的关系 #include <stdio.h> #include <unistd.h> #include <sys/stat ...

  5. EF分别使用IQueryable和IEnumerable实现更新和删除

    缺点 使用IQueryable无法跟踪,无法监控sql,无法使用SaveChanges(). 优点 使用IQueryable简单粗暴. class Program { static void Main ...

  6. [转] Shell编程之数组使用

    #!/bin/bash #基本数组操作a=(1 2 3) ##()表示空数组echo "第0个元素:"${a[0]}echo "所有元素: "${a[@]}ec ...

  7. Python_tuple部分功能介绍

    x.count():元素在元组内的个数 x.index():元素在元组内的位置

  8. 关于mac远程链接window服务器以及实现共享文件

    要最近换了新电脑mac 虽然运行速度666  但是真的很多地方都使用不习惯 这里记录一下 关于 远程链接window主机的问题 方便以后用 首先是 链接: 在应用里 找到    然后类似于  wind ...

  9. jdk 生成证书

    1.生成客户端的私钥,客户端的证书 1)keytool -genkey -alias clientkey -keystore kclient.keystore -validity 36500   2) ...

  10. Java中String直接赋字符串和new String的区别(面试常考)

    摘取自:https://www.cnblogs.com/guozhenqiang/p/5633269.html 解析Java中的String对象的数据类型 1. String是一个对象.  因为对象的 ...