JS 之 script标签

时间：2022-12-22 23:42:48

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下面不能包含&lt&semi;script&gt&semi;标签

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

  5. js中的script标签

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

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

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

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

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

  8. 在JS文件中，不需要&lt&semi;script&gt&semi;标签

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

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

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

随机推荐

  1. Windows Phone 十六、HttpClient

    HttpClient 对象也可以实现网络请求 相对于 HttpWebRequest 对象来说,HttpClient 操作更简单,功能更强大 HttpClient 提供一系列比较简单的API来实现基本的 ...

  2. dynamic-link library shared library of functions and resources

    https://msdn.microsoft.com/en-us/library/1ez7dh12.aspx A dynamic-link library (DLL) is an executable ...

  3. 《JS高程》对象&amp&semi;原型学习笔记

    ECMA-262 把对象定义为:”无序属性的集合,其属性可以包含基本值.对象或者函数.”可以把 ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数.   6.1.理解 ...

  4. 调用函数的ALV、面向对象的ALV设置带选择列

    这个就是通过对应的选择列,实现对ALV数据的选择,在调用函数的ALV和面向对象的ALV实现方法存在差异,下面讲两者的方法:1)调用函数的ALV.   通过 SLIS_LAYOUT_ALV-BOX_FI ...

  5. 微信小程序，前端大梦想（三）

    微信小程序的事件及生命周期   继续下节课,今天我们还是从四个方面来了解小程序:     ●常用事件和事件冒泡   ●配置   ●app生命周期及app对象的使用   ●页面的生命周期   一.事件的 ...

  6. C&num;变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  7. python性能：不要使用 key in list 判断key是否在list里

    原文:https://docs.quantifiedcode.com/python-anti-patterns/performance/using_key_in_list_to_check_if_ke ...

  8. windows下共享式服务开发

    参考: https://blog.csdn.net/dongyewolong/article/details/8164873 https://blog.csdn.net/qwertyupoiuytr/ ...

  9. C&plus;&plus;引用和const引用、常量指针、指针常量

    1.引用.常量引用 引用主要被用做函数的形式参数--通常将类对象传递给一个函数. 引用在内部存放的是一个对象的地址,它是该对象的别名.引用不占用内存,因为取地址引用的值和被引用变量的地址相同.但是ob ...

  10. ORA-14551&colon; 无法在查询中执行 DML 操作

    编写了一个oracle函数,函数体内实现一系列数据库的逻辑处理,涉及到数据的增删等操作,返回NCLOB类型. 然后通过查询方式调用函数: SELECT PKG.MY_FUN('A') FROM DUA ...

相关文章