HTML中的script标签研究
Script 的堵塞(block)特性
Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page. - MDN
the blocking nature of JavaScript, which is to say that nothing else can happen while JavaScript code is being executed. In fact, most browsers use a single process for both user interface (UI) updates and JavaScript execution, so only one can happen at any given moment in time. The longer JavaScript takes to execute, the longer it takes before the browser is free to respond to user input. - Nicholas C. Zakas「High Performance JavaScript 」
上面引用两段话的意思大致是,当浏览器解析DOM文档时,一旦遇到 script 标签(没有defer 和 async 属性)就会立即下载并执行,与此同时浏览器对文档的解析将会停止,直到 script 代码执行完成。出现这种堵塞行为一方面是因为浏览器的UI渲染,交互行为等都是单线程操作,另一方是因为 script 里面的代码可能会影响到后面文档的解析,比如下面的代码:
html
<script type="text/javascript"> document.write("The date is " + (new Date()).toDateString()); </script>
这个堵塞特性会严重的影响用户体验,下面是几种优化方案:
- 尽量把脚本往文档的后面放,以减少对文档的堵塞,最好放在
</body>
前面。 - 尽量把脚本按照它们的依赖关系放在一个文件中
不过更好的方法是下面的非堵塞加载脚本(Nonblocking Scripts)的方法:
1. Deferred Script (延迟脚本)
Script 有一个 defer 属性,拥有这个属性的script表明这个script不会修改DOM,因此这段脚本会在文档树全部解析完成后触发( to be executed after the document has been parsed). 但这个属性并不被所有的浏览器支持。
2. Dynamic Script Elements (动态脚本)
原理就是使用脚本创建 script 元素,设置 src 需为要动态添加脚本的 URL,再把这个 script 添加到DOM中。有时我们需要动态脚本加载完成后再执行某些操作,这就需要我们在脚本加载完成后添加一个回调函数,这个可以通过 script 的 onload 事件实现。下面的实现代码:
js
function loadJS(url, callback){ var script = document.createElement('script'); script.type = 'text/javascript'; if(script.readyState){ // 兼容IE的旧版本 script.onreadystatechange = function(){ if(script.readyState == 'loaded' || script.readyState == 'complete'){ script.onreadystatechange = null; callback(); } } } else{ script.onload = function(){ callback(); } } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); }
有时我们需要我们动态加载的脚本按照我们加载的顺序执行,但上面的实现并不能保证这一点,加载的脚本在下载完成后就会立即执行,而不会按照我们定义的顺序。要解决这个问题也不难,可以参照下面的代码:
js
loadJS('a.js', function(){ loadJS('b.js', function(){ loadJS('c.js', function(){ app.init(); }) }) })
当有大量的脚本需要动态添加时,这样写也会遇到问题;另外的解决方案是利用一些现成的库,比如 LABjs
3. XMLHttpRequest Script Injection (XHR动态插入)
原理是利用XMLHttpReques(XHR)对象,动态获取一段JS代码,然后插入文档。
相对其他方法来说的一个优点是可以“懒执行”,也就是JS代码已经先下载好了并没有执行,可以在需要的来执行(?)(之前的动态脚本在下载后会立即执行)。实现代码:
js
function xhrLoadJS (url, callback){ var xhr = new XMLHttpRequest(); xhr.open('get', url, true); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ var script = document.createElement('script'); script.type = 'text/script'; script.text = xhr.responseText; eval(xhr.responseText); // 执行代码 document.body.appendChild(script); callback(); } } } xhr.send(null); }
缺点是不能跨域请求
参考
- Javascript 装载和执行
- MDN Script元素
- Nicholas C. Zakas 所著的「High Performance JavaScript 」的第一章 "Loading and Execution"
- 【ASP.NET】用C#动态添加非ASP的标准html控件(如添加Script标签)
- html基础研究(一)-文本格式化标签研究
- html基础研究(六)-通过标签子标签开与关、属性、内容以及嵌套来了解段落元素
- Struts源码研究 - html-Link标签篇 --转
- script标签中type为"text/x-template"或"text/html"
- HTML <script>标签的type类型
- HTML&lt;script&gt;标签
- Java过滤任意(script,html,style)标签符,返回纯文本--封装类
- 理解html中script标签的defer与async属性
- HTML与body标签的一些研究
- 【原】HTML页面元素加载顺序研究报告(3)----Script标签与背景图片
- script标签的type="test/html"时
- .NET(C#)用正则表达式清除HTML标签(包括script和style),保留纯本文
- HTML <script> 标签
- Struts源码研究 - html:Cancel标签应用注意事项
- Script标签与访问HTML页面
- java过滤掉字符串中的html标签、style标签、script标签
- 去掉html标签与网页中script标签的…
- 【原】HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响
- asp.net(C#) 动态添加非ASP的标准html控件(如添加Script标签)