说一说 HTML 中的 script 标签

Nekron 发布于2019-08-05 14:53 / 1923人阅读

摘要：元素在页面中使用语言主要的方法就是使用元素，元素内部的代码从上而下依次执行。换句话说的代码可能会先于中的代码执行，所以在使用属性时，要避免两个相互依赖。

我们在《Javascript简史》这遍文章中说过，「Javascript」这门语言是由 Netscape开发而来，当初开发的时候为了能让「Javascript」这门语言能与 HTML 页面共存，而且不影响页面的其他内容，为此增加了一个统一的脚本支持（ script 脚本元素）。

script 元素

在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素，script 元素内部的代码从上而下依次执行。

在引入多个 script 元素的时候，浏览器会按照 script 元素在页面的中的先后顺序进行解析，当上一个解析完成时，才会进行下一个 script 元素中的内容

在 HTML 中使用 Javascript 的两种方法

//第一种方法：直接在标签内使用 javascript 即可


//第二种方法：引用外部文件

script 元素的属性

script 元素比较常用的几个属性

src：可选，用于引用外部 javascript 文件

type：可选，编写代码使用的脚本语言的类型（也成MIME类型），默认值为 text/javascript

async：可选，异步加载脚本，只对外部脚本文件有效

defer：可选，延迟脚本加载，在文档完全被解析后在执行，只对外部脚本文件有效

script 元素在 HTML 中的位置

由于「Javascript」语言是一门单线程语言，在同一时间内，只能执行一个任务，所以只有当上一个任务完成之后才能进行下一个任务，因此会导致 script 元素在 HTML 中的位置不同，会表现出不同效果。

所有 script 元素都放在元素中

这种做法意味着，我们必须等待所有的 Javascript 代码必须执行完成之后才能开始展示页面的内容，如果页面的 Javascript 代码非常多，这种方法就会导致我们看到页面的加载会非常慢，用户体验非常差，那么这么样去优化呢？其实很简单。

所有 script 元素都放在页面内容的后面

优化上面所说的页面加载慢的问题，只需要把我们使用的 Javascript 代码放到页面的内容之后即可，这样页面会首先加载内容然后现实出来，再去执行 Javascript 代码，这样用户就不会等待很久页面才会显示内容。

脚本的延时加载

脚本如何进行延时加载，这个就要利用 script 元素的 defer 属性，在元素使用 defer 属性时，脚本会被延迟到整个页面解析完成后在执行。

//example1.js 中的代码
//console.log("example1");
//console.log(document.getElementById("content"));

//example2.js 中的代码
//console.log("example2");
//console.log(document.getElementById("content"));




    
    Title
    
    


    这里页面的内容

你会发在没有加入 defer 属性时控制台会打印出如下结果

example1
null
example2
null

当给元素加上 defer 属性时，结果会发生变化，可以发现在 div 元素的内容加载完成之后 Javascript 代码才会执行。

example1
这里页面的内容
example2
这里页面的内容

脚本的异步加载

脚本的异步加载，要用到 script 元素到 async 属性，它与 defer 属性类似，都是修改 script 元素的加载行为，不过 async 属性不会影响页面的其他加载，不会阻塞文档呈现，而且带有 async 属性的脚本不能保证它们执行的前后顺序，这一点与 defer 属性有着不同之处。

换句话说 example2.js 的代码可能会先于 example1.js 中的代码执行，所以在使用 async 属性时，要避免两个 js 相互依赖。




    
    Title
    
    


    这里页面的内容

noscript 元素

早期的浏览器都会又一个问题，那就是当浏览器不支持 Javascript 语言时如何显示页面内容，为此的解决方案就是创建了一个 noscript 元素，它可以在不支持 Javascript 的浏览器中显示内容，而且只会在不支持 Javascript 的浏览器中才会显示其中的内容。




    
    Title

关注微信公众号：六小登登。领取全套学习资源

专线服务 idc机房托管说一说 php中的map标签 java中的标签库 jsp中的fn标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58247.html

说一说 HTML 中的 script 标签

摘要：元素在页面中使用语言主要的方法就是使用元素，元素内部的代码从上而下依次执行。换句话说的代码可能会先于中的代码执行，所以在使用属性时，要避免两个相互依赖。我们在《Javascript简史》这遍文章中说过，「Javascript」这门语言是由 Netscape开发而来，当初开发的时候为了能让「Javascript」这门语言能与 HTML 页面共存，而且不影响页面的其他内容，为此增加了...

fox_soyoung 2019-08-02 16:03 评论0 收藏0
说一说 HTML 中的 script 标签

摘要：元素在页面中使用语言主要的方法就是使用元素，元素内部的代码从上而下依次执行。换句话说的代码可能会先于中的代码执行，所以在使用属性时，要避免两个相互依赖。我们在《Javascript简史》这遍文章中说过，「Javascript」这门语言是由 Netscape开发而来，当初开发的时候为了能让「Javascript」这门语言能与 HTML 页面共存，而且不影响页面的其他内容，为此增加了...

rubyshen 2019-08-23 11:43 评论0 收藏0
说一说“换行”踩的坑

摘要：虽然效果一样，但是这两种换行的方式使用起来却不同。使用换行这种方式用起来比较坑，所以本文章的重点就是这一部分。因为之前知道弹框中要实现换行，只能通过的方式，而不能通过的方式。在元素上使用等方式，发现都是可以实现换行的。前言最近遇到这样一个需求：需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义，我们负责显示在页面即可，第三方要求这些文本需要换行显示即可。我们都知道在...

objc94 2019-08-21 10:44 评论0 收藏0
每日前端进阶第三题：说一说你对HTML5语义化的理解

摘要：作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的，怀着学习的心态我也参与其中，以下为我的回答，如果有不对的地方，非常欢迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。作者：陈大鱼头 github： KRISACHAN 链接：github.com/YvetteLau/S… 背景：最近高级前端工程师刘小夕在 github 上...

番茄西红柿 2019-05-23 15:56 评论0 收藏0
每日前端进阶第三题：说一说你对HTML5语义化的理解

摘要：作者陈大鱼头链接背景最近高级前端工程师刘小夕在上开了个每个工作日布一个前端相关题的，怀着学习的心态我也参与其中，以下为我的回答，如果有不对的地方，非常欢迎各位指出。如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。作者：陈大鱼头 github： KRISACHAN 链接：github.com/YvetteLau/S… 背景：最近高级前端工程师刘小夕在 github 上...

番茄西红柿 2019-05-23 15:55 评论0 收藏0