JS 之 script标签

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）适应未来

原文地址：https://www.cnblogs.com/aizzz/p/9726591.html

时间： 2024-07-31 09:30:24

JS 之 script标签的相关文章

js 替换 script 标签内容，包括 换行符

这几天在做项目的时候需要用到js替换 script 标签内的内容 用自己写的字符串去匹配都能成功,但是一旦将大串的DOM内容去匹配的时候 却一直提示失败. 上网查了很多资料,一直匹配不了,调试了很久 郁闷的时候,灵光一闪,难不成是换行的问题,一测试,果然如此 var str = 'lkjkjk' +'<SCRIPT type=text/html> abc </SCRIPT>' var reg = /<script.*>.*<\/script>/gi aler

JS之script标签

1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外部文件 3.defer属性 defer的目的是延迟执行js文件,直到浏览器遇到</html>才开始解析执行外部js文件.在IE 5,6,7中defer还能支持对嵌入脚本,IE 8以后只能支持外部js文件 4.<script src="1.js">alert('s')

js中的script标签

在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容.   script元素的type属性定义脚本类型,type类型有: 1.text/ecmascript(表示以ECMA

JS在当前页面插入&lt;script&gt;标签,并执行

将<script>标签绑定到<html>上, html可换成body,header等其他存在的标签. var htmm =document.getElementsByTagName("html")[0]; var scri = document.createElement("script"); scri.async="async" scri.src="http://www.xxx.com/dummy.js&quo

浅谈&lt;script&gt;标签——《JS高级程序设计》笔记1

一:HTML4.01为<script>标签定义了6个属性: async: 表示应该立即下载脚本,但不应该妨碍页面中其他操作——————只对外部脚本有效: charset: 表示通过src属性指定的代码的字符集—————————————很少用: defer: 表示脚本可以延迟到文档完全被解析和显示之后再执行——————只对外部脚本有效: language: 表示编写代码使用的脚本语言———————————————已废弃: src: 表示包含要执行代码的外部文件—————————————————对

javascript正则找script标签, link标签里面的src或者 href属性

1. [代码]javascript 简单的search    <script(?:(?:\s|.)+?)src=[\"\'](.+?)[\"\'](?!\<)(?:(?:\s|.)*?)(?:(?:\/\>)|(?:\>\s*?\<\/script\>)) <script  src="sdfsdf/sdfd.js"          type="text/javascript"  /><scr

js中&lt;script&gt;放置问题

今天做项目的时候,使用document.getElementById('id'),但是得不到页面控件的值,因为是服务器控件,所以将id换成<%= id.ClientID%>,但是重新加载后发现还是无法获取指定控件的值.中途还尝试了jquery单还是没有效果.最终发现是<script>标签的放置问题.我是习惯的放置在<head>标签中,而且认为放置在哪效果都一样.但是<script>标签的出现会使整个页面脚本分析和运行而出现等待,而且只有在完全加载完成后,js

关于&lt;Script&gt;标签在html页面放置位置

一般script标签会被放在头部或尾部.头部就是<head></head>里面,尾部一般指<body></body>里,但也有放在</body>闭合标签之后的.究竟这些位置不同有什么不一样呢?下面我来详细说一下:1.<script></script>标签放置在<head></head>标签内部时: 将script放在<head>里,浏览器解析HTML,发现script标签时,会先下载完所

script标签中的async和defer

在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行. javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变. async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的